JavaScript – Quiz #8 Lecture Code: 836099 .

JavaScript– Quiz #8Lecture Code: 836099http://decal.aw-industries.com

Today’s AgendaQuiz & Attendance

Announcements

JavaScript Introduction – Part 2

Finish Quiz & Attendance

Lab

AnnouncementsAlex not here today

Will be back next week

Final Project ReminderCheckpoint due dates and final due date postedFirst checkpoint assignment posted with instructionsSubsequent 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 2010Tuesdays 7-8pm

200 Sutardja-Dai Hall

JavaScript Introduction – Part 2

jQueryJavascript framework

Ready-made functions (Live examples!)SelectingManipulationCool, shiny effectsAJAX

Writing Javascript!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>

Writing Javascript! (cont’d)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 AttributesGet, set attributes

$("em").attr("title");$("em").attr("title“, “New Title”);

Get HTML, values, toggle classes, ..For more, check out the Jquery API:

http://api.jquery.com/category/attributes/

CSS PropertiesGet, 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: http://api.jquery.com/category/css/

Link States<a href=“URL”>Label</a>

Events: hover, clicking, etc.Similar to :hover, :active tags in CSSonClickonMouseOver, onMouseOutonFocus, onBluronKeyDown, onKeyUp

Event handlingMouse 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/

JavaScript FunctionsDoesn’t do anything until called

Controlled executionRepetitive (code reusability)

function doSomething(var1, var2, …){

//body

}

JavaScript Functions (cont’d)Anonymous functions

Assign it to a variable to call latervar eatCakeAnon = function(){

alert("So delicious and moist");

};

eatCakeAnon();Pass it directly as a function argument (callback)

$('#target').click(function() {

alert(‘Something happened!');

});

HTML Element CreationCreating new content

$('<p>Test</p>').appendTo('.inner');

Tie in attribute and CSS setting, so $(‘div’).css(‘position’, ‘absolute’).appendTo($(‘body’)) before appendingTalk about being able to chain commands

with .method1.method2… etc

ManipulationCreating/removing objects

$('<p>Test</p>').appendTo('.inner'); $('h2').appendTo($('.container'));$('div').remove('.hello');

.after() $('.inner').after('<p>Test</p>');

.before()$('.inner').before('<p>Test</p>');

Manipulation (cont’d).append()

$('.inner').append('<p>Test</p>');

.appendTo()$('<p>Test</p>').appendTo('.inner');

Replacing, width/height of objects, getting position of scrollbars, cloning, …For more, check out the Jquery API

http://api.jquery.com/category/manipulation/

AJAXAsynchronous JavaScript And XML

Getting data from server/updating page WITHOUT reloading!

Ajax Example!

JavaScript – Quiz #8Lecture Code: 836099

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

JavaScript – Quiz #8 Lecture Code: 836099 .

Documents

Transcript of JavaScript – Quiz #8 Lecture Code: 836099 .