JavaScript – Quiz #8 Lecture Code: 836099 .
-
Upload
kaitlyn-monroe -
Category
Documents
-
view
219 -
download
2
Transcript of JavaScript – Quiz #8 Lecture Code: 836099 .
![Page 1: JavaScript – Quiz #8 Lecture Code: 836099 .](https://reader030.fdocuments.net/reader030/viewer/2022020803/551449e15503462d4e8b4d97/html5/thumbnails/1.jpg)
JavaScript– Quiz #8Lecture Code: 836099http://decal.aw-industries.com
![Page 2: JavaScript – Quiz #8 Lecture Code: 836099 .](https://reader030.fdocuments.net/reader030/viewer/2022020803/551449e15503462d4e8b4d97/html5/thumbnails/2.jpg)
Today’s AgendaQuiz & Attendance
Announcements
JavaScript Introduction – Part 2
Finish Quiz & Attendance
Lab
![Page 3: JavaScript – Quiz #8 Lecture Code: 836099 .](https://reader030.fdocuments.net/reader030/viewer/2022020803/551449e15503462d4e8b4d97/html5/thumbnails/3.jpg)
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
![Page 4: JavaScript – Quiz #8 Lecture Code: 836099 .](https://reader030.fdocuments.net/reader030/viewer/2022020803/551449e15503462d4e8b4d97/html5/thumbnails/4.jpg)
Web Design:Basic to Advanced Techniques
Spring 2010Tuesdays 7-8pm
200 Sutardja-Dai Hall
JavaScript Introduction – Part 2
![Page 5: JavaScript – Quiz #8 Lecture Code: 836099 .](https://reader030.fdocuments.net/reader030/viewer/2022020803/551449e15503462d4e8b4d97/html5/thumbnails/5.jpg)
jQueryJavascript framework
Ready-made functions (Live examples!)SelectingManipulationCool, shiny effectsAJAX
![Page 6: JavaScript – Quiz #8 Lecture Code: 836099 .](https://reader030.fdocuments.net/reader030/viewer/2022020803/551449e15503462d4e8b4d97/html5/thumbnails/6.jpg)
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>
![Page 7: JavaScript – Quiz #8 Lecture Code: 836099 .](https://reader030.fdocuments.net/reader030/viewer/2022020803/551449e15503462d4e8b4d97/html5/thumbnails/7.jpg)
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")
![Page 8: JavaScript – Quiz #8 Lecture Code: 836099 .](https://reader030.fdocuments.net/reader030/viewer/2022020803/551449e15503462d4e8b4d97/html5/thumbnails/8.jpg)
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/
![Page 9: JavaScript – Quiz #8 Lecture Code: 836099 .](https://reader030.fdocuments.net/reader030/viewer/2022020803/551449e15503462d4e8b4d97/html5/thumbnails/9.jpg)
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/
![Page 10: JavaScript – Quiz #8 Lecture Code: 836099 .](https://reader030.fdocuments.net/reader030/viewer/2022020803/551449e15503462d4e8b4d97/html5/thumbnails/10.jpg)
Link States<a href=“URL”>Label</a>
Events: hover, clicking, etc.Similar to :hover, :active tags in CSSonClickonMouseOver, onMouseOutonFocus, onBluronKeyDown, onKeyUp
![Page 11: JavaScript – Quiz #8 Lecture Code: 836099 .](https://reader030.fdocuments.net/reader030/viewer/2022020803/551449e15503462d4e8b4d97/html5/thumbnails/11.jpg)
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/
![Page 12: JavaScript – Quiz #8 Lecture Code: 836099 .](https://reader030.fdocuments.net/reader030/viewer/2022020803/551449e15503462d4e8b4d97/html5/thumbnails/12.jpg)
JavaScript FunctionsDoesn’t do anything until called
Controlled executionRepetitive (code reusability)
function doSomething(var1, var2, …){
//body
}
![Page 13: JavaScript – Quiz #8 Lecture Code: 836099 .](https://reader030.fdocuments.net/reader030/viewer/2022020803/551449e15503462d4e8b4d97/html5/thumbnails/13.jpg)
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!');
});
![Page 14: JavaScript – Quiz #8 Lecture Code: 836099 .](https://reader030.fdocuments.net/reader030/viewer/2022020803/551449e15503462d4e8b4d97/html5/thumbnails/14.jpg)
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
![Page 15: JavaScript – Quiz #8 Lecture Code: 836099 .](https://reader030.fdocuments.net/reader030/viewer/2022020803/551449e15503462d4e8b4d97/html5/thumbnails/15.jpg)
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>');
![Page 16: JavaScript – Quiz #8 Lecture Code: 836099 .](https://reader030.fdocuments.net/reader030/viewer/2022020803/551449e15503462d4e8b4d97/html5/thumbnails/16.jpg)
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/
![Page 17: JavaScript – Quiz #8 Lecture Code: 836099 .](https://reader030.fdocuments.net/reader030/viewer/2022020803/551449e15503462d4e8b4d97/html5/thumbnails/17.jpg)
AJAXAsynchronous JavaScript And XML
Getting data from server/updating page WITHOUT reloading!
Ajax Example!
![Page 18: JavaScript – Quiz #8 Lecture Code: 836099 .](https://reader030.fdocuments.net/reader030/viewer/2022020803/551449e15503462d4e8b4d97/html5/thumbnails/18.jpg)
JavaScript – Quiz #8Lecture Code: 836099
Lab…http://decal.aw-industries.com