1 / 34

Course Feedback #1 Lecture Code: 266310

Course Feedback #1 Lecture Code: 266310. http://fa10.decal.aw-industries.com. Today’s Agenda. Course Feedback #1 and Attendance Announcements JavaScript Introduction Lab. Announcements. MP #2 Part 1 due Tonight by 11:59PM MP #2 Part 2 due Next Week (10/25) Final Project Reminder

michel
Télécharger la présentation

Course Feedback #1 Lecture Code: 266310

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Course Feedback #1Lecture Code: 266310 http://fa10.decal.aw-industries.com

  2. Today’s Agenda • Course Feedback #1 and Attendance • Announcements • JavaScript Introduction • Lab

  3. Announcements • MP #2 Part 1 due Tonight by 11:59PM • MP #2 Part 2 due Next Week (10/25) • Final Project Reminder • Groups of 2 people • Requirements from last semester • Styled with CSS • Have at least 3 distinct pages • Have one or more functioning and purposeful form • Have a consistent navigation system • Have a consistent appearance from page to page • Requirements will change slightly

  4. Web Design: Fall 2010 Mondays 7-9pm 200 Sutardja-Dai Hall Basic to Advanced Techniques JavaScript Introduction

  5. Dynamic Pages • Dynamic Pages • Pages that change after they’ve been loaded • Pages that are served differently depending on who requested them • Static Pages • Look the same no matter how long we wait or what we do • Look the same to different users

  6. Changing After Load • WDD fishes and clouds move • Google changes results on the fly

  7. Different Depending on Request Often, Different Depending on User • Profile owner can edit page while others can’t • Different privacy settings limit what information is accessible

  8. JavaScript or PHP? • JavaScript allows us to do one of the two criteria for dynamic pages. Which one? • “Change After Load” or “Different Depending on Request”? A: Change After Load

  9. What is JavaScript? Client Side Server Side Web Server Serve Website Send HTML and CSS files Send images • Web Browser • HTTP Request (visit website) • Interpret and render received files • Send JavaScript code • Execute JavaScript • PHP and MySQL Runs in your browser – on the client side Q: Why can’t JavaScript serve a different page depending on request? A: Executed on the client side after page load

  10. JavaScript is Client-Side • Like CSS: Requested by client after receiving HTML file • Executed entirely on client machine

  11. Attach JavaScript to HTML Files • Inline Javascript • <script type="text/javascript"> <!-- JS code here --> </script> • Include .js file • <script type="text/javascript" src="javascript.js"></script> • Write both in <head> • .js instead of .css

  12. What is JavaScript? • Programming Language • Object-Oriented • Prototype-Based instead of Classes • 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

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

  14. JavaScript Examples Animations that don’t involve Flash

  15. JavaScript Examples Moving containers

  16. JavaScript Examples Changing background-images

  17. JavaScript Examples Modal popups, filtering

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

  19. How does JavaScript do it? • Browser represents web page as a DOM tree • DOM = Document Object Model html <html> <head> <title></title> </head> <body> <div> <h1></h1> <p></p> </div> </body> </html> head body title div h1 p

  20. 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) • <imgsrc=“http://awi.com/i.gif” /> • img { border: 1px solid black; } src http://awi.com/i.gif img style border 1px solid black;

  21. Demo 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!

  22. http://jquery.com • Built on top of JavaScript • JavaScript library that simplifies our lives • DOM traversal • Element selection • Event handling (click, hover, keydown, etc…) • Animation • jQuery is more or less the industry standard • Used by Google, Yahoo, etc…

  23. Getting Started with jQuery • Download latest files • Link .js file In HTML file:

  24. Getting Started with jQuery • Make sure the DOM is loaded and ready to go In myCode.js file:

  25. Basic Coding Flow in jQuery • Select element that you want to modify using $() syntax • $(‘CSS Select String’) • Chain function calls after select tag • $(‘p’).css(‘color’, ‘red’).click(function(){$(this).remove(); });

  26. Demo jQuery Example

  27. Demo 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…

  28. Demo Changing Element Attributes • Method: .attr • Get attributes with: • $(‘#myImg’).attr(‘src’); • Set attributes with: • $(‘#myImg’).attr(‘src’, ‘someImage.jpg’); • $(‘#myImg’).attr({ src : ‘someImage.jpg’, alt : ‘some image’ });

  29. Demo Changing CSS Properties • Method: .css • Get properties with: • $(‘h1’).css(‘color’); • Set properties with: • $(‘h1’).css(‘color’, ‘red’); • $(‘h1’).attr({ color: ‘red’, ‘font-weight’ : ‘normal’ });

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

  31. Event handling • Mouse click • $(“#blah").click(function() { alert("Hello world!"); }); • Hover • $('#blah').mouseover(function() { alert(“Hello world!”); }); • Keyup/down/press, onfocus/blur, etc. • For more, check out the Jquery API: http://api.jquery.com/category/events/

  32. JavaScript Functions • Doesn’t do anything until called • Controlled execution • Repetitive (code reusability) • function doSomething(var1, var2, …){ //body }

  33. JavaScript Functions (cont’d) • Anonymous functions • Assign it to a variable to call later • var eatCakeAnon = function(){ alert("So delicious and moist"); }; eatCakeAnon(); • Pass it directly as a function argument (callback) • $('#target').click(function() { alert(‘Something happened!'); });

  34. Course Feedback #1Lecture Code: 266310Lab… http://fa10.decal.aw-industries.com

More Related