Post on 26-Mar-2015
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