![Page 1: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/1.jpg)
JavaScript & AJAX
![Page 2: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/2.jpg)
JavaScript: the Big Picture(ELLS §11.1)
© 2012 Armando Fox & David Patterson Licensed under
Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported
License
JavaScript had to “look like Java” only less so—be Java's dumb kid brother or boy-hostage sidekick.
Plus, I had to be done in ten days or something worse than JavaScript
would have happened.
Image: Wikimedia. Used under CC-SA license.
![Page 3: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/3.jpg)
The Moving Parts
• 1995: Netscape includes LiveScript JavaScript as browser scripting language • Originally, for simple client-side code such as
animations and form input validation • Document Object Model (DOM) lets JavaScript
inspect & modify document elements • 1997: standardized as ECMAScript • 1998: Microsoft adds XmlHttpRequest to
IE5 • 2005: Google Maps, AJAX takes off
![Page 4: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/4.jpg)
JavaScript’s privileged position
• Because it’s embedded in browser, JavaScript code can: 1. be triggered by user-initiated events (mouse down, mouse hover, keypress, …) 2. make HTTP requests to server without triggering page reload 3. be triggered by network events (e.g. server responds to HTTP request) 4. examine & modify (causing redisplay) current document
![Page 5: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/5.jpg)
DOM & JavaScript: Document = tree of objects
• DOM is a language-independent, hierarchical representation of HTML or XML document • Browser parses HTML or XML => DOM • JavaScript API (JSAPI) makes DOM data structures accessible from JS code • Inspect DOM element values/attributes • Change values/attributes → redisplay • Implemented incompatibly across browsers …but jQuery framework will help us
• JavaScript is just another language; the JSAPI gives it power to script the browser.
• JavaScript is a single-threaded language. Therefore all JS interactions with browser must be nonblocking.
![Page 6: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/6.jpg)
Unobtrusive JavaScript
• Similar to motivation for separating out CSS • Before: <b><font size="+1">Big!</font></b> • After: <span class="bigbold">Big!</span>
• How: New HTML5 attributes data-* are specifically to be ignored by browser • Gist: Replace “hardcoded” handlers with references to data-attributes
http://pastebin.com/v8H83h4U
![Page 7: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/7.jpg)
Graceful degradation
• Browsers with JS disabled (“legacy browsers”) should get a usable experience • should be easy if your app is RESTful already • Conditionally show page elements that require JS • Add elements in a "setup" function in JS • Or, make elements hidden using CSS, then change CSS style in "setup" function
![Page 8: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/8.jpg)
(a) & (b) only
(b) & (c) only
(a) only
(a), (b) and (c) ☐
☐
☐
☐
*
Client-side JavaScript code can interact with HTML page elements because this functionality: (a) is part of the JavaScript language (b) is part of the browser (c) is provided by the JSAPI
![Page 9: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/9.jpg)
JavaScript for Ruby Programmers(ELLS §11.2)
© 2012 Armando Fox & David Patterson Licensed under
Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported
License
![Page 10: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/10.jpg)
JavaScript basics
• Basic object type is a hash; keys sometimes called slots or propertiesvar movie={title: 'Up', releaseInfo: {rating: 'G', year: 2010}} • Functions are 1st class objects and closures • passing functions is extremely common!
• var restricts scope of a variable; if absent or used in outermost scope => global • The global object defines some constants that are part of JS’s environment • this in global scope refers to global object
http://pastebin.com/srnEVH59
![Page 11: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/11.jpg)
More on functions
• Functions are first class objects & closures • A function is a lambda expression
var make_times = function(mul) { return function(arg) { return arg * mul; } } // or: function make_times(mul) { ... }
times2 = make_times(2) times3 = make_times(3) times2(5) ➔ 10 times3.call(null, 5) ➔ 15
![Page 12: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/12.jpg)
JS, browsers, and scope
• Each loaded HTML page gets its own JS global object • must separately load any desired JS:= javascript_include_tag 'application'➔<script src="/public/javascripts/application.js"> </script>
• Unobtrusive technique: create a single global object to hold all your app’s code • some object slots are like static/class variables • others are instance or class functions
![Page 13: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/13.jpg)
They always return a value, even without an explicit return() statement They can be passed a function as an argument They can execute concurrently with other functions
They can be anonymous ☐
☐
☐
☐
*
Which is NOT true about functions in JavaScript?
![Page 14: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/14.jpg)
Functions and Prototype Inheritance(ELLS §11.3)
© 2012 Armando Fox & David Patterson Licensed under
Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported
License
![Page 15: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/15.jpg)
Every object has a prototype
• No true Classes; object inheritance based on “prototypes” • each newly-created object has a prototype • obj.__proto__ (except in some versions of IE) • when slot lookup fails in an object, its prototype is consulted, and so on up the chain • so object “inherits” both value-slots and function-slots • Q: how to create new objects from your own prototype? http://pastebin.com/
QqsqgGFp
![Page 16: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/16.jpg)
Summary
• Call a function using new ➔ creates & returns an object (this) whose prototype is whatever the function’s prototype is • so obj.constructor.prototype always works • Call a function on that object ➔ object becomes the function’s this • Call a function without a receiver ➔ assumed to be Global Object window • Call a “constructor-like” function without new => undefined
![Page 17: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/17.jpg)
Square(3).area()
(new Square(3)).area
var p = Square ; (new p(3)).area()
Square(3).area ☐
☐
☐
☐
*
var Square = function(side) { this.side = side; this.area = function() { return this.side*this.side; } }; Which call will evaluate to 9?
![Page 18: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/18.jpg)
The Document Object Model (DOM), jQuery Intro, Events,
and Callbacks(ELLS §11.4-11.5)
© 2012 Armando Fox & David Patterson Licensed under
Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported
License
![Page 19: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/19.jpg)
e.childNodes
DOM Example <p id="notice"> This is your <span class="warn">last</span> chance! </p> e = document.getElementById('notice)';
element p attributes: { id: 'notice' }
element span attributes: { class: 'warn' }
text #text nodeValue: “this is your”
text #text nodeValue: “chance”
text #text nodeValue: “last”
e.innerHTML == 'This is your <span class="warn">last</span> chance!'
e.innerHTML == 'last'
![Page 20: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/20.jpg)
jQuery
• A powerful framework for DOM manipulation • adds many useful features over browsers’ built-in JSAPI • homogenizes incompatible JSAPI’s across browsers • Defines a single polymorphic global function jQuery(), aliased as $()
http://pastebin.com/jMMRGmN4
![Page 21: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/21.jpg)
Selecting DOM elements
• $() or jQuery() with any CSS3 expression $('#movies'), $('.heading'), $('table')
• Warning! different from document.getElementById()
• Warning! may return multiple elements, but it’s not a JavaScript array! • but there is an iterator for it
![Page 22: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/22.jpg)
What can you do with selected element(s)?
e.find() e.show(), e.hide(), e.fadeOut('slow') e.addClass(), e.removeClass() e.css({'background-color': 'green', color: 'white'}) e.html(), e.text() e.attr('src')
![Page 23: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/23.jpg)
Handlers on Buttons & Links
• A good summary of recognized handlers:http://www.chipchapin.com/WebTools/JavaScript/example1-04.html
• What about links & buttons that are clickable without JavaScript? • handler runs first • if handler returns false, no other action taken • otherwise, other actions follow handler • example use: client-side form validation • Handler code can be inline or functions
![Page 24: JavaScript & AJAX - edX · PDF fileJavaScript & AJAX . JavaScript: the Big Picture ... • JavaScript is just another language; ... •Add elements in a "setup" function in JS](https://reader033.vdocument.in/reader033/viewer/2022051305/5a843eab7f8b9ac96a8b77d5/html5/thumbnails/24.jpg)
Summary
• Select elements with $() (or wrap to give them secret jQuery powers) • Inspect them… text() or html() is(:checked), is(:selected), etc. attr('src') • Add/remove CSS classes, hide/show • Create setup function that binds handler(s) on element(s) • common ones: onclick, onsubmit, onchange • Pass func to $() (alias for document.ready())