JavaScript – Quiz #8 Lecture Code:

Todays Agenda Quiz & Attendance Announcements JavaScript Introduction – Part 2 Finish Quiz & Attendance Lab

Announcements Alex not here today Will be back next week Final Project Reminder Checkpoint due dates and final due date posted First checkpoint assignment posted with instructions Subsequent checkpoint details TBA soon… Formal Discussion section postponed till next week Jon is swamped this week as well, so the first day of discussion will start next week

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

jQuery Javascript framework Ready-made functions (Live examples!) Selecting Manipulation Cool, shiny effects AJAX

Writing Javascript! Inline Javascript // JS code here Include.js file Write both in

Writing Javascript! (contd) Make sure the DOM is loaded and ready to go $(document).ready(function() { // do stuff when DOM is ready }); Selectors $(blah) shorthand Ex. $(a), $(#div_id), $("#orderedlist > li")

HTML Attributes Get, set attributes $("em").attr("title"); $("em").attr("title, New Title); Get HTML, values, toggle classes,.. For more, check out the Jquery API:

CSS Properties Get, set properties $('div.left').css('float'); $(this).css("color","red"); Add/remove class $('p').addClass('myClass yourClass'); $('p').removeClass('myClass noClass') For more, check out the Jquery API:

Link States Label Events: hover, clicking, etc. Similar to :hover, :active tags in CSS onClick onMouseOver, onMouseOut onFocus, onBlur onKeyDown, onKeyUp

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:

JavaScript Functions Doesnt do anything until called Controlled execution Repetitive (code reusability) function doSomething(var1, var2, …){ //body }

JavaScript Functions (contd) 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!'); });

HTML Element Creation Creating new content $(' Test ').appendTo('.inner'); Tie in attribute and CSS setting, so $(div).css(position, absolute).appendTo($(body)) before appending Talk about being able to chain commands with.method1.method2… etc

Manipulation Creating/removing objects $(' Test ').appendTo('.inner'); $('h2').appendTo($('.container')); $('div').remove('.hello');.after() $('.inner').after(' Test ');.before() $('.inner').before(' Test ');

Manipulation (contd).append() $('.inner').append(' Test ');.appendTo() $(' Test ').appendTo('.inner'); Replacing, width/height of objects, getting position of scrollbars, cloning, … For more, check out the Jquery API

AJAX Asynchronous JavaScript And XML Getting data from server/updating page WITHOUT reloading! Ajax Example!

JavaScript – Quiz #8 Lecture Code: Lab…