webdevelopmentclient - university of toronto€¦ · eloquent javascript ... • a set of...

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

webdevelopmentclient - university of toronto€¦ · eloquent javascript ... • a set of...

Documents