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

2. Today’s Agenda Quiz & Attendance Announcements JavaScript Introduction – Part 1 Finish Quiz & Attendance Lab

3. 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

4. Web Design: Basic to Advanced Techniques Spring 2010 Tuesdays 7-8pm 200 Sutardja-Dai Hall JavaScript Introduction – Part 1

5. 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

6. 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

7. 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

8. 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

9. How do we spot JavaScript? Animations that don’t involve Flash

10. Aside: Trees Hierarchical representation of belongingness or rank life ArchaeaBacteriaEukarya Domain Kingdom Eubact eria Archaeb acteria ProtistaFungiPlantaeAnimalia All things living Eukarya is the parent of Animalia, and Animalia one of the children of Eukarya

11. How does JavaScript do it? Browser represents web page as a DOM tree DOM = Document Object Model JavaScript modifies DOM tree html headbody title div h1p

12. 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 { border: 1px solid black; } img src styleborder http://awi.com/i.gif 1px solid black;

13. 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

14. Attach JavaScript to HTML Files In In …our code…

15. 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…

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

17. 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

18. Changing Element Attributes Method:.attr $(‘#myImg’).attr(‘src’, ‘someImage.jpg’); Demo

19. Changing CSS Attributes Method:.css $(‘h1’).css(‘color’, ‘red’); Demo

20. Adding CSS Class Method:.addClass $(‘#myDiv’).addClass(‘header’); Demo

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