CSS/Photoshop Layouts – Quiz #7 Lecture Code: 924185 .

CSS/Photoshop Layouts – Quiz #7Lecture Code: 924185http://decal.aw-industries.com

Web Design:Basic to Advanced Techniques


Today’s AgendaQuiz & Attendance

Announcements

JavaScript Introduction – Part 1

Finish Quiz & Attendance

Lab

AnnouncementsFinal Project Reminder

Groups of 2 peopleRequirements

Styled with CSSHave at least 3 distinct pagesHave one or more functioning and purposeful formsHave a consistent navigation systemHave a consistent appearance from page to page

Lecture Feedback Feature test drive



Spring 2010Tuesdays 7-8pm

200 Sutardja-Dai Hall

JavaScript Introduction – Part 1


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 MySQLRuns in your browser– on the client side


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 CSSare the Lego pieces

JavaScript is the kid thatmanipulates those pieces


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 wantsAnything you could have created or styled ahead of time in

HTML and CSS, JavaScript can create or style after the page has loaded


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?


Animations that don’t involve Flash


Aside: TreesHierarchical representation of belongingness or rank

life

Archaea Bacteria EukaryaDomain

Kingdom Eubacteria

Archaebacteria

Protista Fungi Plantae Animalia

All things living

Eukarya is the parent of Animalia,and Animalia one of the children of Eukarya


How does JavaScript do it?Browser represents web page as a DOM tree

DOM = Document Object Model

JavaScript modifies DOM treehtml

head body

title div

h1 p

<html><head>

<title></title>

</head><body>

<div><h1></h1><p></p>

</div></body>

</html>

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

Its container (whatever it is nested in) is its parentWhat is nested within it is its childrenEach 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 TreeBrowser displays exactly what the DOM tree structure

and object attributes say to display at every instantEven 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


Attach JavaScript to HTML FilesIn <head></head>

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

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


Enter jQueryhttp://jquery.com

JavaScript library that simplifies our livesDOM traversalElement selectionEvent handlingAnimation

I lied! We won’t cover Prototype and Scriptaculous jQuery is more or less the industry standardUsed by Google, Yahoo, etc…


http://jquery.com/

jQuery Example

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


Selecting HTML ElementsjQuery 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


Changing Element AttributesMethod: .attr

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

Demo


Changing CSS AttributesMethod: .css

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

Demo


Adding CSS ClassMethod: .addClass

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

Demo


CSS/Photoshop Layouts – Quiz #7Lecture Code: 924185

Lab…http://decal.aw-industries.com


CSS/Photoshop Layouts – Quiz #7 Lecture Code: 924185 .

Documents