css/photoshop layouts – quiz #7 lecture code: 924185
TRANSCRIPT
CSS/Photoshop Layouts – Quiz #7Lecture Code: 924185http://decal.aw-industries.com
Web Design:Basic to Advanced Techniques
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
Web Design:Basic to Advanced Techniques
Web Design:Basic to Advanced Techniques
Spring 2010Tuesdays 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 MySQLRuns 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 CSSare the Lego pieces
JavaScript is the kid thatmanipulates 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 wantsAnything 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: 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
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 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
Web Design:Basic to Advanced Techniques
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>
Web Design:Basic to Advanced Techniques
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…
Web Design:Basic to Advanced Techniques
jQuery Example
$(‘.button’).click(function(){ $(‘h1’).css(‘color’, ‘red’) });
Web Design:Basic to Advanced Techniques
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
Web Design:Basic to Advanced Techniques
Changing Element AttributesMethod: .attr
$(‘#myImg’).attr(‘src’, ‘someImage.jpg’);
Demo
Web Design:Basic to Advanced Techniques
Changing CSS AttributesMethod: .css
$(‘h1’).css(‘color’, ‘red’);
Demo
Web Design:Basic to Advanced Techniques
Adding CSS ClassMethod: .addClass
$(‘#myDiv’).addClass(‘header’);
Demo
Web Design:Basic to Advanced Techniques