Web Design - Announcements - AW Industries

fallsnowpeasInternet και Εφαρμογές Web

12 Νοε 2013 (πριν από 3 χρόνια και 9 μήνες)

74 εμφανίσεις

CSS/Photoshop Layouts



Quiz #7

Lecture Code: 924185

http://decal.aw
-
industries.com

Web Design:

Basic to Advanced Techniques

Web Design:

Basic to Advanced Techniques

Today’s Agenda


Quiz & Attendance


Announcements


JavaScript Introduction


Part 1


Finish Quiz & Attendance


Lab

Announcements


Final Project Reminder


Groups of 2 people


Requirements


Styled with CSS


Have at least 3 distinct pages


Have one or more functioning and purposeful forms


Have a consistent navigation system


Have a consistent appearance from page to page


Lecture Feedback Feature test drive

Web Design:

Basic to Advanced Techniques

Web Design:

Basic to Advanced Techniques

Spring 2010

Tuesdays 7
-
8pm

200
Sutardja
-
Dai Hall

JavaScript Introduction


Part 1

Web Design:

Basic to Advanced Techniques

What is JavaScript?

Client Side


Web Browser


HTTP Request (visit website)


Interpret and render received
files


Server Side


Web Server


Serve Website


Send HTML and CSS files


Send images



Execute JavaScript



Send JavaScript code



PHP and
MySQL

Runs in your browser



on the client side

Web Design:

Basic to Advanced Techniques

What is JavaScript?


Programming Language


Object
-
Oriented


JavaScript vs. HTML and CSS


HTML and CSS are markup languages


Says what goes where and how it looks


Has no state or “life” after it’s been rendered


JavaScript is a programming language


Has state, and can continually run after a page has loaded


Can modify itself and HTML and CSS on page


Despite name JavaScript has nothing to do with Java

HTML and CSS

are the Lego pieces

JavaScript is the kid that

manipulates those pieces

Web Design:

Basic to Advanced Techniques

What does JavaScript do?


“Plays with the blocks”


Modifies HTML and CSS


“Moves blocks around”


Change position of HTML objects via CSS


“Buys new and throws away old blocks”


Can create and delete HTML objects and CSS rules


“Stacks blocks”


Can change nested structure of HTML code


Essentially change HTML and CSS in anyway it wants


Anything you could have created or styled ahead of time in
HTML and CSS, JavaScript can create or style after the page
has loaded

Web Design:

Basic to Advanced Techniques

How do we spot JavaScript?


If a HTML and CSS page is anything but static, there’s
JavaScript there.


Only exception is :hover, :active, :visited pseudo classes for
links

How do we spot JavaScript?

Web Design:

Basic to Advanced Techniques

Animations that don’t involve Flash

Web Design:

Basic to Advanced Techniques

Aside: Trees


Hierarchical representation of belongingness or rank

life

Archaea

Bacteria

Eukarya

Domain

Kingdom

Eubact
eria

Archaeb
acteria

Protista

Fungi

Plantae

Animalia

All things living

Eukarya

is the
parent
of
Animalia
,

and
Animalia

one of the
child
ren

of
Eukarya

Web Design:

Basic to Advanced Techniques

How does JavaScript do it?


Browser represents web page as a DOM tree


DOM = Document Object Model


JavaScript modifies DOM tree

html

head

body

title

div

h1

p

<html>


<head>



<title></title>


</head>

<body>


<div>



<h1></h1>



<
p
></
p
>


</div>


</body>

</html>

DOM Tree


Each HTML element is a node on the tree (an object)


Its container (whatever it is nested in) is its
parent


What is nested within it is its
children


Each object has attributes (HTML and CSS)


<
img

src
=“http://
awi.com/i.gif
” />


img

{ border: 1px solid black; }


img

src

style

border

http://
awi.com/i.gif

1px solid black;

Web Design:

Basic to Advanced Techniques

Browser and DOM Tree


Browser displays exactly what the DOM tree structure
and object attributes say to display
at every instant


Even after the page has loaded, if the DOM tree changes the
browser renders the updates


Q: How do we take advantage of this to modify a web
page after its been loaded?

A: We use JavaScript to modify the DOM tree!


Demo

Web Design:

Basic to Advanced Techniques

Attach JavaScript to HTML Files


In <head></head>


<script
src
="
jquery.js
" type="text/
javascript
"></script>


In <body></body>


<script type=“text/
javascript
”> …our code… </script>


Web Design:

Basic to Advanced Techniques

Enter
jQuery


http://jquery.com


JavaScript library that simplifies our lives


DOM traversal


Element selection


Event handling


Animation


I lied! We won’t cover Prototype and
Scriptaculous


jQuery

is more or less the industry standard


Used by Google, Yahoo, etc…

Web Design:

Basic to Advanced Techniques

jQuery

Example

$(‘.
button’).click(function
(){ $(‘h1’).css(‘color’, ‘red’) });

Web Design:

Basic to Advanced Techniques

Selecting HTML Elements


jQuery

allows us to use CSS selectors in conjunction with
$ to select objects in HTML


$(‘#
myElement
’) gives us the element with id=“
myElement



$(‘
img
’) gives us an array of all images on page


Selecting elements with $ also gives the element some
additional JavaScript functionality which include…

Demo

Web Design:

Basic to Advanced Techniques

Changing Element Attributes


Method:
.
attr


$(‘#
myImg’).attr(‘src
’, ‘
someImage.jpg
’);

Demo

Web Design:

Basic to Advanced Techniques

Changing CSS Attributes


Method:
.
css


$(‘h1’).css(‘color’, ‘red’);

Demo

Web Design:

Basic to Advanced Techniques

Adding CSS Class


Method:
.
addClass


$(‘#
myDiv’).addClass(‘header
’);

Demo

Web Design:

Basic to Advanced Techniques

CSS/Photoshop Layouts



Quiz #7

Lecture Code: 924185

Lab…

http://decal.aw
-
industries.com

Web Design:

Basic to Advanced Techniques