View
232
Download
0
Category
Preview:
Citation preview
2/13/17
1
This lecture is based on materials from:
Eloquent JavaScript A Modern Introduction to Programming by Marijn Haverbeke
http://eloquentjavascript.net/
! So far, the browser has only passively displayed content.
! It is also possible to download a program and have it execute on the client browser ◦ JavaScript / Jscript / ECMAScript ◦ VBScript ◦ TCL
! Used to make web pages interactive ◦ Insert dynamic text into HTML (ex: user name) ◦ React to events (ex: page load, user click) ◦ Get information about a user's computer (ex:
browser type) ◦ Perform calculations on user's computer (ex: form
validation) ! NOT related to Java other than by name and some
syntactic similarities
! Language/API limitations: ◦ No file/directory access defined in the language ◦ No raw network access. Limited to either " load URLs " send HTML form data to " web servers, CGI scripts, e-mail addresses
◦ 'same origin policy' " can only read props of documents and windows from
the same place: host, port, protocol ! Privacy restrictions: ◦ cannot read history ◦ cannot hide/show menubar, status line, scrollbars cannot
close a window not opened by itself
2/13/17
2
! Evaluation ◦ As document is parsed, in order
! Execution ◦ Statement outside functions " When it is encountered ◦ Statement inside function " When function is called " Event handler <body onload=“helloWorld()”>
• A set of JavaScript objects that represent each element on the page .
• Most JS code manipulates elements on an HTML page
• Examine the state of the elements, e.g. whether a box is checked
• Change state, e.g. putting text into a div
• Change styles, e.g. make a paragraph red
• Example: var x = document.getElementById("number").value;
• In the HTML • As value of attributes
<a href=“…" onmouseover="popupFunc();" />
• In a script • Explicit reference to object’s event handler
document.onmouseover = functionFoo;
! Document ◦ onload
! Clipboard ◦ oncopy, oncut, onpaste
! Keyboard ◦ onkeydown, onkeyup, onkeypress
! Mouse ◦ onmousedown, onmouseup, onmousemove
! Other ◦ onfocus, onblur,
2/13/17
3
! Print factorial table
This lecture is based on materials from:
Professional jQuery Cesar Otero, Rob Larsen John Wiley & Sons, Inc.
! CSS ◦ IE document.getElementById("header").style.styleFloat = "left";
◦ Firefox document.getElementById("header").style.cssFloat = "left";
! Event handling ◦ IE clientX, clientY, srcElement ◦ Firefox pageX, pageY, target
! Ajax ◦ IE xmlhttp = new XMLHttpRequest();
◦ Firefox xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
11
! Cross-browser compatibility ! DOM manipulation ! AJAX ! Enhanced UI widgets ! Animation and effects ! Drag and drop ! Other goodies …
12
2/13/17
4
! Debugging version ◦ <script src=“http://code.jquery.com/jquery-3.1.1.js”></script>
! Production version ! <script src=“http://code.jquery.com/jquery-3.1.1.min.js”></script>
13
! Select set of DOM elements ! Perform actions on them
! Main Function ◦ jQuery(selector) ◦ $(selector)
! Uses the same syntax as CSS selectors
! Examples: ◦ jQuery(p) ◦ $(table) ◦ $(#myID) ◦ $(div.important)
◦ var x = $("#number").val();
14
! Attaching events to DOM elements ◦ on(eventName,eventHandler) ◦ eventname(function) " $(“#someid”).click(somefunction) " $(“#id2”).mousemove(somefunction)
15
2/13/17
5
17
! Asynchronous JavaScript+XML ! 2nd communication path between browser and web server ◦ Remove communication bottleneck bw user and web application ◦ Talk to server from JavaScript ◦ Skip page reload
! Changes the typical page flow ◦ More frequent requests ◦ Smaller responses of non-HTML data
! Defined by Jesse James Garret in Feb. of 2005 ◦ Underlying technology in place since 2001 ◦ Google releases Gmail in March of 2004
" One of first mainstream apps to use AJAX " Examples: read/tag/spell check messages without a page reload,
auto save drafts
18
Web Application AJAX Application
! $.ajax(url [, settings])
Property Description url URL of the resource to be requested
type HTTP method to use: GET, POST, DELETE, PUT.
data Data to send to server
dataType Type of data expected back from server: XML, HTML, script, JSON
success(data, textStatus, jqXHR) Function called if request succeeds
error(jqXHR, textStatus, errorThrown) Function called if request fails
complete(jqXHR, textStatus) Function called when request completes
timeout Timeout (in milliseconds) for request
! $.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )
! $.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )
! $(selector).load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] ◦ Load data from the server and place the returned HTML into the matched element.
! $(selector).serialize() ◦ Creates a text string in standard URL-encoded notation
! $(selector).serializeArray() ◦ Creates a JavaScript array of objects
Recommended