Javascript And Jquery - Jon Duckett | Java Script | Cascading Style ...

element: 1. Creating the new heading and storing it in a variable - the new heading will be made up of the original heading content, followed by the number of items in t he list. 2. Updating the heading, which is done by updating the content of the heading element using the i nnerText property of that node. DOCUMENT OBJECT MODEL @ The browser represents the page using a DOM tree. DOM trees have four types of nodes: document nodes, element nodes, attribute nodes, and text nodes. You can select element nodes by their id or cl ass attributes, by tag name, or using CSS selector syntax. Whenever a DOM query can return more than one node, it will always return a Nadel i st. From an element node, you can access and update its content using properties such as textContent and i nnerHTML or using DOM manipulation techniques. An element node can contain multiple text nodes and child elements that are siblings of each other. In older browsers, implementation of the DOM is inconsistent (and is a popular reason for using jQuery). Browsers offer tools for viewing the DOM tree . •• W hen you browse the web, your browser registers different types of events. It's the browser's way of saying, "Hey, this just happened ." Your script can then respond to these events. Scripts often respond to these event s by updating the content of the web page (via the Document Object Model) which makes t he page feel more interactive. In t his chapter, you will learn how: INTERACTI O NS CREATE EV ENTS EV ENTS TRI GGER CODE COD E RESPONDS TO USERS Events occur when users click or tap on a link, hover When an event occurs, or fires, it can be used In t he last chapter, you or swipe over an element, to trigger a particu lar t ype on the keyboard, res ize the w indow, or funct ion. Different code can be triggered when be used to update a page. The events can trigger the when the page they requested has loaded. users interact with different parts of the page. saw how th e DOM can - kinds of changes t he DOM is capable of. This is how a web page reacts to users. l ~ I 1' j 8 I 1 EVENTS DIFFERENT EVENT TYPES Here is a selection of the events that occur in the browser while you are browsing the web. Any of these events can be used to trigger a function in your JavaScript code. UIEVENTS 8 Occur when a user interacts with the browser's user interface (UI) rather than the web page EVENT DESCRIPTION load W eb page has finished loading unload Web page is unloading (usually because a new page was requested) error Browser encounters a JavaScript error or an asset doesn't exist resize Browse r window has been resized scroll User has scrolled up or down the page KEYBOARD EVENTS Occur when a user interacts with the keyboard (see also input event) EVENT DESCRIPTION keydown User first presses a key (repeats while key is depressed) keyup User releases a key keypress Character is being inserted (repeats while key is depressed) MOUSE EVEN TS Occur when a user interacts with a mouse. trackpad, or touchscreen EVENT DESCRIPTION click User presses and relea ses a button over th e same element dbl click User presses and releases a button twice over th e same element moused own User presses a mouse button while over an element mouseup User releases a mouse button while over an element mousemove User moves the mouse (not on a touchscreen) mouseover User moves the mouse over an element (not on a touchscreen) mouseout User moves the mouse off an element (not on a touchscreen) EVENTS .. . TERMINOLOGY 0 EVENTS FIRE OR AR E RAISED When an event has occurred, it is often described as having fir ed or been raised . In the diagram on the right, if the user is tapping on a link, a cl ick event would fire in the browser. EVENTS TRIGGER SCRIPTS Events are said to t rigger a function or script. When t he click event fires on the element in this diagram, it could trigger a script that enlarges the selected item. FOCUS EVENTS Occur when an element (e.g., a link or form field) gains or loses focus EVENT DESCRIPTION focus / focus in Element gains focus blur / focusout Element loses focus FORM EVENTS Occur when a user interacts with a form element EVENT DESCRIPTION input Value in any or element has changed (IE9+) or any element with the contented i table attribute change Value in select box, checkbox, or radio button changes ( IE9+) submit User submits a form (using a button or a key) reset User clicks on a form's res~t button (rarely used these days) cut User cuts content from a form fie ld copy User copies content from a form fie ld paste User pastes content into a form fie ld select User selects some text in a form field MUTATION EVENTS* Occur when the DOM structure has been changed by a script • To be replaced by mutation observers (see p284) EVENT DESCRIPTION DOMSubtreeModified Change hc;is been made to document DOMNodelnserted Node has been inserted as a direct child of another node DOMNodeRemoved Node has been removed from another node OOMNodel nsertedlntoDocument Node has been inserted as a descendant of another node DOMNodeRemovedFromOocument Node has been removed as a descendant of another node EVENTS 8 HOW EVENTS TRIGGER JAVASCR IPT CODE When the user interacts with the HTML on a web page, there are three steps involved in getting it to trigger some JavaScript code. Together these steps are known as event handling. 2 3 Select t he element node(s) you want the script to respond to. Indicate which event on the selected node(s) will trigger the response. State the code you want to run when the event occurs. For example, if you want to Programmers call this binding an event to a DOM node. 1 trigger a function when a user clicks on a specific link, you need to get the DOM node for that link element. You do this using a a selection of the popular events DOM query (see Chapter 5). that you can monitor for. The UI events that relate to the browser window (rat her t han the HTML page loaded in it) work Some events work with most with the window object rather than an element node. Examples include the events that occur element nodes, such as the mouseover event, which is triggered when t he user rolls over any element. Other events w hen a requested page has only work w ith specifi c elem ent nodes, such as the submit event, f inished loading, or wh en the which only works w ith a form. user scrolls. You will learn about using these on p272. 8 The previous two pages showed EVENTS W hen the event occurs, on a specified element, it will trigger a function. This may be a named or an anonymous function. Here you can see how event handling can be used to provide feedback to users filling in a registration form. It will show an error message if their username is too short. 1 2 3 SELECT ELEMENT SPEC! FY EVENT CALL CODE When users move out of the text input, it loses focus, and the blur event fires on this element. When the blur event fires on the username input, it will trigger a function called chec kUsername ().This function checks if the username is less than 5 characters. The element that users are interacting with is the text input where they enter the username. 0 If there are not enough characters, it shows an error message that prompts the user to enter a longer username. Event : blur on username e FUNCTION: checkUsername() Check the username is long enough If there are enough characters, the element that holds the error message should be cleared. Get username + I ' I Is username less than five characters? Clear message ' I Show error message This is because an error message may have been shown to t he user already and t hey subsequently corrected their mistake. (If the error message was still visible when they had filled in the form correctly, it would be confusing.) EVENTS 8 THREE WAYS TO BIND AN EVENT TO AN ELEM ENT Event handlers let you indicate which event you are waiting for on any particular element. There are three types of event handlers. HTML EVENT HANDLERS TRADITIONA L DOM EVENT HANDLERS DOM LEVEL 2 EVENT LISTENERS See p251 See p252 See p254 This is bad practice, but you need to be aware of it because you may see it in older code. DOM event handlers were introduced in the original specification for the DOM. They are considered better than HTML event handlers because they let you separate the JavaScript from the HTML. Event listeners were introduced in an update to the DOM specification (DOM level 2, released in the year 2000). They are now the favored way of handling events. Early versions of HTML included a set of attributes that could respond to events on t he element they were added to. The attribute names matched the event names. Their values called the function that was to run when that event occurred. § For example, the following: <a onclick="hide()"> indicated that when a user clicked on this <a> element, t he hi de () fu nction would be called. Support in all major browsers is very strong for this approach. The main drawback is that you can only attach a single function to any event. For example, the submit event of a form cannot trigger one f unction that checks the contents of a form, and a second to submit the form data if it passes the checks. This method of event handling is no longer used because it is better to separate the JavaScript from the HTML. You should use one of the other approaches shown on this page instead. As a result of this limitation, if more than one script is used on the same page, and both scripts respond to the same event, then one or both of the scripts may not work as intended. EVENTS The syntax is quite different and, unlike traditional event handlers, these newer event listeners allow one event to trigger mult iple functions. As a result, there are less likely to be conflicts between different scripts that run on the same page. This approach does not work wit h IE8 (or earlier versions of IE) but you meet a workaround on p258. Differences in browser support for the DOM and events helped speed adoption of jQuery (but you need to know how events work to understand how jQuery uses them). HTML EVENT HANDLER ATTRIBUTES (DO NOT USE) Please note: This approach is now considered bad practice; In the HTML, the first <input> element has an attribute called onb l ur (triggered when the user however, you need to be aware of it because you may see it if leaves the element). The value of you are looking at older code. (See previous page.) the attribute is the name of the function that it should trigger. ""*'' The value of the event handler attributes would be JavaScript. Often it would call a function that was written either in the <head> element or a separate JavaScript file (as shown below). c06/ event-attributes.html <form method="post" action="http://www.example.org/register"> <label for="username">Create a username: </l abel> <input type="text" i d="username" onbl ur="checkUsername()" / > <div id="feedback"></div> <label for="password">Create a password: </label> <input type="password" id="password" / > <input type="submit" value="Sign up!" / > </ fonn> <script type="text/javascript" src="js/event-attributes .js "></script> c06/ js/ event-attributes.js JAVASCRIPT function checkUsername() { / / Dec lare funct ion var elMsg = document .getElementByi d('feedback') ; // Get feedback element var elUsername = document .getEl ementByld('username ' ); // Get username input if (el Username .value . length < 5) { / / If username too short ' Username must be 5 characters or more'; // Set msg elMsg.textContent else { //Otherwise elMsg.textContent = ''; //Clear message The names of the HTML event handler attributes are identical For example: • <a> elements can have one lick, onmouseover, onmouseout to the event names shown on p246 - p247, preceded by • • <form> elements can have onsubmi t <input> elements for text can have onkeypress, on focus, onbl ur the word "on." EVENTS 0 TRADITIONAL DOM EVENT HANDLERS All modern browsers understand this way of creating an event handler, but you can only attach one function to each event handler. Here is the syntax to bind an event to an element using an event handler, and to indicate which funct ion should execute when that event fires: element . onevent ELEMENT DOM element node to target Below, the event handler is on the last line (after the function has been defined and the DOM element node(s) selected). A reference to the DOM element node isoftenstored in a variable. functionName ; EVENT Event bound to node(s) preceded by word "on" CODE Name of function to call (with no parentheses following it) When a function is called, the parentheses that fo llow its name tell the JavaScript interpreter to "run this code now." function checkUsername() { / / code to check the length of username We don't want the code to run until the event fires, so the parentheses are omitted from the event handler on the last line. I -[ var el = documen t. getElementByld('username') ; el . onblur = checkUsername; - - - - - - - - - - - The event name is preceded by the word "on." An example of an anonymous function and a function with parameters is shown on p256. § EVENTS The code starts by defining the named function. The function is called by the event handler on the last line, but the parentheses are omitted. USING DOM EVENT HANDLERS In this example, the event handler appears on the last line 1. If you use a named function 2. The DOM element node is when the event fires on your of the JavaScript. Before the DOM event handler, two things chosen DOM node, write that stored in a variable. Here the text input (whose id attribute has a function first. (You could also use an anonymous function.) value of username) is placed into a variable called e1Username. are put in place: c06/ js/ event-handl er.js JAVASCRIPT II Declare funct ion function checkUsername() { II Get feedback element var elMsg = document .get El ementByld('feedback'); if (this .value .l ength< 5) { II If username too short elMsg . textContent 'Username mus t be 5 charact ers or more'; II Set msg II Otherwise else { II Clear message elMsg.textContent I I • ' @) var elUsername = document. getElementByld('us ername') ; II Get username input G) elUsername.onblur = checkUsername; II When it l oses focus call checkuserName() When using event handlers, the This is followed by an equal sign, Browser support: On line 3, event name is preceded by the word "on" (onsubmi t , on change, then the name of the function that will run when the event t he checkUsername() function onfocus, onbl ur, onmouseover, onmouseout, etc). fires on that element. Note that there are no parentheses on the function name. This means you 3. On the last line of the code sample above, the event handler cannot pass arguments to this function. (If you want to pass e1Username. onb 1ur indicates that the code is waiting for the event handler, see p256.) arguments to a function in an b1ur event to fire on the element stored in the variable called e 1Username. The HTML is the same as that shown on p251 but without the onb 1ur event attribute. This means that. the event handler is in the JavaScript, not t he HTML. uses the this keyword in the conditional statement to check the number of characters the user entered. It works in most browsers because they know this refers to the element the event happened on. However, in Internet Explorer 8 or earlier, IE would treat this as the wi ndow object. As a result, it would not know which element the event occurred on and there would be no value that it checked the length of, so it would raise an error. You will learn a solution for this issue on p264. EVENTS@ EVENT LISTENERS Event listeners are a more recent approach to handling events. They can deal with more than one function at a time but they are not supported in older browsers. Here is the syntax to bind an event to an element using an event listener, and to indicate which fu nction should execute when that event fires: Adds an event listener to the DOM element node(s) METHOD element .addEventlistener('event', functionName [, Boolean]) ; ELEMENT EVENT DOM element node to target A reference t th DOM Event to bind node(s) to in quote marks EVENT FLOW Indicates something called capture, and is usually set to f al se (see p260) function checkUsername() { }-code to check the length of username II e~em:nt node -{ var el . 1softenstored in a variable. CODE Name of function to call The function = document . get El ementByld ( 'username') ; el. addEventlistener('blur', checkUsername, false) ; l...-..r--1 1 The event name is enclosed in quotation marks. An example of an anonymous function and a function with parameters is shown on p256. 8 EVENTS The code starts bydefiningthe named function. caltlel~tby is the even 1s ener on the lastline,but the parentheses are omitted. USING EVENT LISTENERS 2. The DOM element node(s) is stored in a variable. Here t he text input (whose id attribute has a value of username) is placed into a variable called el Username. 1. If you use a named function In this example, the event listener appears on the last line of the JavaScript. Before you write an event listener, two things are put in place: when the event fi res on your chosen DOM node, write t hat function first. (You could also use an anonymous function.) c06/ js/ event-l istener.js JAVASCRIPT function chec kUsername( ) { II Declare function var elMsg = document .get ElementByld('feedback'); II Get feedback element i f (t hi s .value.lengt h< 5) { II If username too short elMsg .text Content 'Username must be 5 characters or more'; II Set msg II Otherwise el se { , el Msg .textContent II Clear msg I I, ~ var elUsername = document .get El ementByld(' username') ; II Get username i nput II When i t loses focus call checkUsername() elUsername.addEventlistener('blur' , checkUsername , false) ; CD The addEventli stener () method takes three properties: i) The event you want it to listen for. In this case, the b1ur event. ii) The code that you want it to run when the event fires. In this example, it is the checkUsername (} function. Note that the parentheses are omitted where the function is called because they would indicate that the function should run as the page loads (rather than when the event fires). iii) A Boolean indicating how events flow, see p260. (This is usually set to false.) ® ® BROWSER SUPPORT EVENT NAMES Internet Explorer 8 and earfier versions of IE do not support the addEventli stener() method, but they do support a method called attachEvent(} and you will see how to use this on p258. Unlike the HTML and traditional DOM event handlers, when you specify the name of the event that you want to react to, the event name is not preceded by the word "on". Also, as with the previous example, IE8 and older versions of IE would not know what this referred to in the conditional statement. ·An alternative approach for dealing with it is shown on p270. If you need to remove an event listener, there is a function called removeEventL i stener(} which removes the event listener from the specified element (it has the same parameters). EVENTS@ USING PARAMETERS WITH EVENT HANDLERS & LISTENERS Because you cannot have parentheses after the function names in event handlers or listeners, passing arguments requires a workaround. Usually, w hen a fu nction needs some information to do its job, you pass arguments within the parentheses that follow the function name. When t he interpreter sees t he parentheses after a function call, it runs the code straight away. In an event handler, you want it to wait until the event triggers it. Event name .-Li The named function includes parentheses el .add Event Listener(' blur' - - chec kUsername ( 5) ; containing the parameter after the } , f al se ) ; function name. Therefore, if you need to pass arguments to a function that is called by an event handler or listener, you wrap the function call in an anonymous function. Start of anonymous functio n , function() I ~nd of statement The anonymous function is used as the second argument. It "wraps around" the named function. End of addEventli stener() method Event flow Boolean (see p260) End of anonymous function The named funct ion t hat requires the arguments lives inside the anonymous function. 8 EVENTS Although the anonymous function has parentheses, it only runs when the evenUs triggered. The named function can use arguments as it only runs if the anonymous function is called. USING PARAMETERS WITH EVENT LISTENERS The first line of this example shows the updated checkUsername() function. The mi nlength The value th at is passed into th e checkUsername() function is used in the conditional statement to parameter specifies the minimum number of characters that the username should be. check if the name is long enough, and provide feedback if th e username name is too short. c06/ js/ event-li st ener -with-parameters.js JAVASCR I PT var elUsername = document .getElementByid('username') ; var el Msg = document .getElementByid('feedback') ; II II II II Get username i nput Get feedback element fu nction chec kUsername(mi nleng t h) { Declare functio n if (elUsername.val ue.length < minlength) If username too short II Set the error message elMsg . textContent = 'Username must be ' + minlength + ' characters or more'; } else { II Otherwi se elMsg . innerHTML , II Clear msg I I • } elUsername. addEvent Listener( 'bl ur ' , funct ion() { checkUsername (S) ; }, false) ; The event listener on the last three lines is longer II When it loses focus II Pass arguments here t han the previous example because the call to the To receive this information, the event listener uses an anonymous function, which acts like a wrapper. checkUsername () function needs to include t he value for the mi nlength parameter. Inside that w rapper the checkUsername() function is called, and passed an argument. Browser support: On the next page you also see how to deal with the lack of support for event listeners in IE8 and earlier. EVENTS 8 SUPPORTING OLDER VERSIONS OF IE IES-8 had a different event model and did not support addEventL i stener() but you can provide fallback code to make event listeners work with older versions of IE. IE5-IE8 did not support the addEventL i stener() method. Instead, it used its own method called attachEvent () which did the same job, but was only available in Internet Explorer. If you want to use event listeners and need to support Internet Explorer 8 or earlier, you can use a conditional statement as illustrated below. If the browser supports addEventlistener() : Run the code inside t hese curly braces If it doesn't, do something else: Run the code inside these curly braces Using an if ••• else statement, you can check if the browser supports the addEventLi stener() method. The condition in the i f statement will return true if the browser supports the addEventL i stener() method, and you can use it. If the browser does not support that method, it returns false, and the code will try to use the attachEvent () method. if (el .addEventlistener) { el .addEventlistener('blur', function() { checkUsername(5); }, false); } else { el .attachEvent('onblur', function() { checkUsername(5); }) ; } When attachEvent () is used, the event name should be preceded by the word "on" (e.g., blur becomes onbl ur). You will see another approach to supporting the older IE event model in Chapter 13 (using a utility file). 8 EVENTS FALLBACK FOR USING EVENT LISTENERS IN IE8 The event handling code builds on the last example, but it is a lot longer this time because it contains the fal lback for Internet Explorer 5-8. If the browser supports the addEventLi stener() method, the code inside the first set of curly braces is run using add Event Listener() . After the checkUsername {) function, an if statement checks whether addEventL i stener() is supported or not; it returns true if the element node supports this method, and fa 1se if it does not. If it is not supported, then the browser will use the attachEvent () method that older versions of IE will understand. In the IEversion, note that the event name must be preceded by the word "on." JAVASCRIPT c06/ js/event-l istener-with-ie-fal l back.js var el Username = document . getElementByld('username') ; var e l Msg = document . getElementByl d('feedbac k'); // Get username in put // Get feedback element function checkUsername(minlength) { // if (elUsername.value.length < minlength) // II Set message elMsg . innerHTML 'Username must be ' + minlength + ' else { // el Msg . i nnerHTML ''; // if (elUsername.addEventListener) { - // elUsername . addEventlistener('bl ur' , function( ) {// checkUsername(S) ; // }, false); // else { // elUsername . attachEvent('onblur' , function(){ // // checkUsername(S); }) ; If you need to support IE8 (or older), instead of writing this fallback code for every event you are responding to, it is better to write your own function (known as a helper function) that creates the appropriate event handler for you. You will see a demonstration of this in Chapter 13, which covers form enhancement and validation. Declare function If username too short charact ers or more ' ; Otherwise Clear message If event listener supported When username loses focus Call checkUsername() Capture duri ng bubbl e phase Otherwise IE fal l back: onblur Cal l checkUsername() It is, however, important to understand this syntax, used by IE8 (and older) so that you know why the helper function is used and what it is doing. As you will see in the next chapter, this is another type of cross-browser inconsistency that jQuery can take care of for you. EVENTS 8 JavaScript rr..h ~gs JavaScript <.t id• 'llnk">fresh 'ig.s</~> JavaScript THE EVENT OBJECT When an event occurs, the event object tells you information about the event, and the element it happened upon. Every time an event fires, the event object contains helpful data about the event, such as: • Which element t he event happened on • Which key was pressed for a keypress event • What part of the viewport the user clicked for a c1i ck event (the viewport is the part of the browser window that shows the web page) The event object is passed to any fu nction that is the event handler or listener. If you need to pass arguments to a named function, the event object will first be passed to the anonymous wrapper function (this happens automatically); then you must specify it as a parameter of the named function (as shown on the next page). When the event object is passed into a function, it is of ten given the parameter name e (for event). It is a widely used shorthand (and you see it adopted throughout this book). Note, however, that some programmers also use the parameter name e to refer to the error object; so e may mean event or error in some script s. Not only did IE8 have a different syntax for event listeners (as shown on p258), the event object in IES-8 also had different names for the properties and methods shown in the tables below, and the example on p265. PROPERTY IES-8 EQUIVALENT PURPOSE target srcElement The target of the event (most specific element interacted with) type type Type of event that was fired cancel able not supported Whether you.can cancel the default behavior of an element METHOD IES-8 EQUIVALENT PURPOSE PROPERTY preventOefault() returnValue stopPropagation() cancelBubble @ EVENTS Cancel default behavior of the event (if it can be canceled) Stops the event from bubbling or capturing any further 1 .. EVENT LISTENER WITH NO PARAM ETERS function checkUsername( e) { Q) var target = e. target ; //get target of event } var el = document.getElementByid('username'); el.addEventlistener('blur', checkUsername , false); 1. Without you doing anything, a reference to the event object is automatically passed from the number 1, where the event listener calls the function ... 2. To here, where the function is defined. At this point, t he parameter must be named. It Is often given the name e for event. 3. This name can then be used inside the function as a reference to the event object. You can now use t he properties and methods of the event object. EVENT LISTENER WITH PARAMETERS function checkUsername(e, minlength ) { @) var target = e .target ; //get target of event } var el = document.getElementByid('username ') ; el .addEventlistener( blur function( e){ 1 checkUsername(e, 5); }, false); 1 1 , 1. The reference to the event object is automatically passed to the anonymous function, but it must be named in the parentheses. 2. The reference to the event object can then be passed onto the named function. It is given as the first parameter of the named function. 3. The named functi on receives the reference to the event object as the first parameter of the method. 4 . It can now be used by this name in the named function. EVENTS@ THE EVENT OBJECT IN IES-8 Below you can see how you get the event object in IES-8. It is not passed automatically to event handler/listener functions; but it is available as a child of the window object. On the right, an if statement checks if the event object has been passed into the function. As you saw on p168, the existence of an object is treated as a truthy value, so the condition here is saying "if the event object does not exist..." function checkUsername(e) if (! e) { e = window.event ; In IE8 and less, e will not hold an object, so the following code block runs and e is set to be the event object that is a child of the wi ndow object. GETTING PROPERTIES Once you have a reference to the event object you can get its properties using the technique on the right. This works on short circuit evaluation (see p169). var target; target = e .target I I e .srcElement; A FUNCTION TO GET THE TARGET OF AN EVENT lfyouneedtoassignevent listeners to several elements, here is a function that will return a reference to the element the event happened on. 9 EVENTS function getEventTarget(e) { i f ( !e) { e = window.event ; } return e .target I I e .srcElement; USING EVENT LISTENERS WITH THE EVENT OBJECT Here is the example that has been used throughout the chapter so far w ith some modifications: 1. The function is called check Length() rather than checkUsername (). It can be used on any text input. 2 . The event object is passed to the event listener. The code includes fallbacks for IES-8(Chapter13 demonstrates using helper functions to do this). 3. In order to determine which element the user was interacting with, the function uses the event object's target property (and for IES-8 it uses the equivalent s rcEl ement property). JAVASCRIPT function checklength(e, minlength) { var el , elMsg ; if (le) { e = window.event; } el = e .target II e.srcElement; elMsg =el .nextSibling; if (el . va l ue . length< minlength ) elMsg . innerHTML 'Username must be ' else { elMsg . innerHTML ' '; This function is now far more fl exible than the previous code you have seen in this chapter because: 1. It can be used to check the length of any text input so long as that input is directly followed by an empty element that can hold a feedback message for the user. (There should not be space or carriage returns between the two elements; otherwise, some browsers might return a whitespace node.) 2 . The code will work with IES-8 because it tests whether the browser supports the latest features (or whether it needs to fal lback to use older techniques). c06/ js/ event-1istener-with-event-object.js II Declare function II Declare variables II If event object doesn't exist II Use IE fallback II Get target of event II Get its next sibling II If length is too short set msg + minlength + ' cha racters or more'; II Otherwise II Clear message var el Username = document .getEl ement Byid('username ' ); ll Get username input if (el Username .addEventlistener) { II If event listener supported elUsername.addEventlistener ('b l ur ', function(e) { II On blur event checkUsername(e, 5); II Call checkUsername() }, false); II Capture in bubble phase el se { II Otherwise elUsername . attachEvent('onblur', function(e){ II IE fallback onblur checkUsername(e, 5); II Call checkUsername() }) ; EVENTS 8 EVENT DELEGATION Creating event listeners for a lot of elements can slow down a page, but event flow allows you to listen for an event on a parent element. If users can interact with a lot of elements on the page, such as: • • a lot of buttons in the a long list UI • every cell of a table adding event listeners to each element can use a lot of memory By attaching an event listener to a containing element, you are only responding to one element (rather than having an event handler for each child element). and slow down performance. You are delegating the job of the event listener to a parent of the Because events affect containing elements. In the list shown here, if you place the event listener (or ancestor) elements (due to event flow - p260), you can place event handlers on a containing element and use the event object's target property to find which of its children the event happened on. on the <u 1> element rather than on links in each <1 i >element, you only need one event listener. This gives better performance, and if you add or remove items from the list it would still work the same. (The code for this example is shown on p269.) ADDITIONAL BENEFITS OF EVENT DELEGATION @ WORKS WITH NEW ELEMENTS SOLVES LIM ITATI ONS WITH this KEYWORD SIMPLIFIES YOUR CODE If you add new elements to the DOM tree, you do not have to Earlier in the chapter, t he this keyword was used to identify an It requires fewer functions add event handlers to the new event's target, but that technique elements because the job has been delegated to an ancestor. did not work in IE8, or when a fewer ties between the DOM and your code, which helps function needed parameters. maintainability. EVENTS to be written, and there are CHANGING DEFAULT BEHAVIOR The event object has methods that change: the default behavior of an element and how the element's ancestors respond to the event. preventDefau 1t () stopPropagation() USING BOTH METHODS Some events, such as clicking on links and submitting forms, take the user to another page. Once you have handled an event using one element, you may want to stop that event from bubbling up to its ancestor elements (especially if there are separate event handlers responding to the same events on the containing elements). You will sometimes see the following used in similar situations that are in a function: r eturn false; To prevent the default behavior of such elements (e.g., to keep the user on the same page ra ther than following a link or being taken to a new page after submitting a form), you can use the event object's preventoefault() method. To stop the event bubbling up, you can use the event object's stopPropogation() method. IES- 8 have an equivalent property called return Va 1ue which can be set to fa 1se. A conditional statement can check if the preventDef au 1t () method is supported, and use IE8's approach if it isn't: The equivalent in IE8 and earlier is the cance 1Bubble property which can be set to true. Again, a conditional statement can check if the stopPropogati on() method is supported and use IE8's approach if not: i f (event . preventDefault) event. preventDefaul t (); else { event .returnVa l ue false ; if (event . stopPropogation) event.stopPr opogation(); else { event.cancel Bubbl e = t r ue; = It prevents the default behavior of the element, and prevent s the event from bubbling up or capturing further. It also works in all browsers, so it is popular. Note, however, when the interpreter comes across the return false statement, it stops processing any subsequent co de w ithin that function and moves to the next statement after the function was called. Since this blocks any further code within the function, it is often better to use the preventDefaul t () method of the event object rather than return false. EVENTS @ USING EVENT DELEGATION This example w ill put together a lot of what you have learned in the chapter so far. Each list item con tains a link. When the user clicks on that link (to indicate they have completed t hat task), the item will be 0 • In the HTML, the links would take you to i temDone . php if the browser did not support JavaScript. (The PHP file is not supplied w ith the code download because server-side languages are beyond the scope of this book.) Is addEventl istener() supported? ' EVENTS Use addEven t li stener() Use att achEvent () + + I I Event: cli ck on any llnk In llst I FUNCTION:; temDone() Removes an Item when completed Create varla bles: target: the element that was clicked on e1Parent: the parent of that element e1Grandparent: the grandparent of it I 8 Get element clicked on; call getTarget() I e Get its parent (the <1 i> element) 0 Get its grandparent (the <ul> element) I + I Remove <1 i> from <ul> el ement + I ls preventDefault() supported? use return Va 1ue pr eventDefau l t() FUNCTION: get Target () Gets element user clicked on ' I Get target of event @ ' el lo There is a screen grab of the example on p266 . On the right there is a flowchart that helps explain t he order in which the code is processed. The right-hand page has the code for t he example 1. The event listener will be added to the <ul > element, so t his needs to be selected. 2 . Check whether or not the browser supports addEventListener() . 3 . If so, use it to call the i temOone() function when the user clicks anyw here on that list. 4 . If not, use the attachEven t () met hod. 5. The i temDone () function will remove t he item from the list. It requires three pieces of information. 6 . Three variables are declared to hold the info. 7. t ar get holds the element the user clicked on. To obtain this, the getTarg et () function is called. This is created at the start of the script, and shown at the bottom of the flowchart. 8 . el Par ent holds t hat element's parent (the <l i >) 9. el Grandparent holds that element's grandparent 10 . The <l i >element is removed from t he <ul > element. 11 . Check if the browser support s preventDefaul t () to prevent the link taking the user to a new page. 12. If so, use it. 13. If not, use the older IE return Value property. + I removed from the list. • • Get <ul> element for shopping list Is there no event object? ' I Get target of event using old IE even t object lliiiMllll c06/event-delegation.htm1 <ul id="shoppinglist"> <li class="complete"><a <li class="complete"><a <li class =" complete"><a <li class="complete"><a <lul> href=" itemDone.php?id=l"><em> fresh<lem> figs<la><lli> href="itemDone.php?id =2 "> pine nuts<la><ll i> href="itemDone.php?id=3">honey<la><lli> href="itemDone .php?id=4"> balsamic vinegar<la><ll i> c06/js/event-del egation.js JAVASCRIPT function get Target(e) if (le) { e = window.event; } return e.target ® ~ 0 ~ ~ Q9) I I e.srcEl ement; function itemDone(e) { II Remove item from t he list var target, elParent, elGrandparent; target = getTarget(e); elParent = target.parentNode; elGrandparent = target.parentNode.parentNode; el Grandparent.removeChi ld(elParent); II Prevent the link from taking you elsewhere i f (e.preventDefaul t) { e.preventDefault(); else { e.returnValue = f alse; ® ® II II II Declare function If there i s no event object Use old IE event object II Get the t arget of event II Declare function II II II II II Declare variabl es Get the item cli cked link Get its l ist item Get its list Remove list item f rom list II -II II II If prevent Defau l t() works Use preventDefault() Otherwi se Use old IE version II Set up event listeners to call itemDone() on click G) var el = document.getElementByld('shoppinglist');ll Get shopping list ~ if (el .addEventlistener) { II If event listeners work ~ el .addEventlistener('click ' , funct i on(e) { II Add listener on click itemDone(e); II It calls itemDone() }, false); II Use bubbling phase for flow else { 11 Otherwise @) el.attachEvent('onclic k' , function(e){ II Use old IE model : onclick itemDone (e) ; II Call itemDone() }) ; EVENTS @ WH ICH ELEMENT DID AN EVENT OCCUR ON? When calling a function, the event object's target property is the best way to determine which element the event occurred on. But you may see the approach below used; it relies on the this keyword. THE this KEYWORD The this keyword refers to the owner of a function. On the right, this refers to the element that the event is on. This works when no parameters are being passed to the function (and therefore it is not called from an anonymous function). function checkUsername() { var elMsg = document.getElementByld('feedback'); if (this .value.length< 5) { elMsg.innerHTML = 'Not long enough'; else { elMsg . innerHTML = ''; var el = document.getElementByld('username'); el .addEventlistener('blur', checkUsername, false); It's like the function had been written here rather than higher up USING PARAMETERS If you pass parameters to the function, the this keyword no longer works because the owner of the fu nction is no longer the element that the event listener was bound to, it is an anonymous function. You could pass the element the event was called on as another parameter of the function. In both cases, the event object is the preferred approach. 8 EVENTS function checkUsername(el , minlength) { var elMsg = document .getElementByld('feedback'); if (el .value.l ength< minlength) { elMsg .innerHTML = 'Not long enough ' ; else { elMsg.innerHTML = ''; var el = document.getElementByld('username'); el.addEventlistener('blur', function() { checkUsername(el , 5); }, false); D IFFEREN T TYPES OF EVE NTS In the rest of the chapter, you learn about the different types of events you can respond to. Events are defined in: • The W3C DOM specification • The HTMLS specification • In Browser Object Models Most are a result of the user interacting with the HTML, but there are a few that react to the browser or other DOM events. We do not show every event, but the examples you see should teach you enough so that you can work with all types of events. W3C DOM EVENTS HTM LS EVENTS SOM EVENTS The DOM events specification is managed by the W3C (who also look after other specifications including HTML, CSS, and XML). Most of the events you will meet in this chapter are part of this DOM events specification. The HTMLS specification (that is still being developed) details events that browsers are expected to support that are specifically used with HTML. For example, events that are fired when a form is submitted or form elements are changed (which you will meet on p282): Browser manufacturers also implement some events as part of their Browser Object Model (or BOM). Typically these are events not (yet) covered by W3C specifications (although some will be added to W3C specifications in the future). Several of these events dealt with touchscreen devices: Browsers implement all the events using the same event object that you already met. It also provides feedback such as which element the event occurred on, which key a user pressed, or where the cursor is positioned). There are, however, some events that are not covered in the DOM event model - in particular those that deal with form elements. (They used to be part of the DOM, but got moved to the HTMLS specification.) submit input change There are also new events introduced with the HTMLS specification that are only supported ~Y more recent browsers. Here are a few (which you will meet on p286): readystatechange DOMContentloaded hashchange touchstart touchend touchmove orientationchange Other events are being added to capture gestures and take advantage of accelerometers. Care is needed using such features, as different browsers often create different implementations of similar functionality. EVENTS 0 USER INTERFACE EVENTS User interface CUI) events occur as a result of interaction with the browser window rather than the HTML page contained within it, e.g., a page having loaded or the browser window being resized. The event handler I listener for UI events should be attached to the browser window. In old HTML code, you may see these events used as attributes on the opening <body> tag. (For example, older code used the on 1oad attribute to trigger code that would run when the page had loaded.) EVENT TRIGGER @ BROWSER SUPPORT load Fires when the web page has finished loading. lt can also fire on nodes of other elements that load, such as images, scripts, or objects. The DOM Level 2 (Nov 2000) states that it fires on the document object, but prior to this it fired on the window object. Browsers support both for backwards compatibility, and developers often st ill attach 1oad event handlers to the window (not document) object. un 1oad Fires when the web page is unloading (usually because a new page has been requested). See also the beforeun 1oad event (on p286) which fires before the user leaves a page. The DOM Levei 2 states that it fires on the node for the <body> element, but in older browsers it fired on the window object (this is often used for backwards compatibility). error Fires when the browser encounters a JavaScript error or an asset doesn't exist. Support for this event is inconsistent across browsers and so it is not reliable for error handling, a topic you learn more about in Chapter 10. resize Fires when the browser window has been resized. Browsers repeatedly fire the resize event as the window is being resized, so avoid using this event to trigger complicated code because this might make the page appear less responsive. scro 11 Fires when the user has scrolled up or down the page. It can relate to the entire page or a specific element on the page (such as a <textarea> that has scrollbars). EVENTS Browsers repeatedly fire the event as the window is scrolled, so avoid running complicated code as the user scrolls. LOAD The load event is commonly used to trigger scripts that access the contents of the page. In this example, a function called The event is automatically raised by the window object when a The setup() function would not work before the page has loaded because it relies on finding the page has finished loading the HTML and all of its resources: element whose id attribute has setup() gives focus to the text images, CSS, scripts (even third a value of username, in order to input when the page has loaded. party content e.g.. banner ads). give it focus. c06/js/load.js JAVASCRIPT II II II II function setup() { var textlnput; textl nput = document .getE l ementByid('username'); text lnput.focus(); window.addEventli st ener('load' , setup , fal se); II Declare function Create variable Get username input Gi ve username focus When page loaded call setup{) Note that the event listener is l;IJiiJil attached to t he win dow object (not the document object - as this can cause cross-browser compatibility issues). If the <script> element is at the end of the HTM L page, t hen the DOM would have loaded t he form elements before the script runs, and there would be no need to wait for the load event. (See also: the DOMContentloaded event on p286 and jQuery's document. r eady () method on p312.) Because the load event only fires when everything else on the Users particularly notice when a script changes the appearance even ads), the user already have of the page, changes focus, or selects form elements after they started to use the page before the script has started to run. have started to use it. (It can make a site look slower to load.) page has loaded (images, scripts, Imagine this form had more inputs; the user may be fil ling in the second or third box when the script fi res - moving focus back to the first box too late and interrupting the user. EVENTS@ FOCUS & BLUR EVENTS The HTML elements you can interact with, such as links and form elements, can gain focus. These events fire when they gain or lose focus. If you can interact with an HTML element, then it can gain (and lose) focus. You can also tab between the elements that can gain focus (a technique often used by those with visual impairments). In older scripts, the focus and b1ur events were often used to change the appearance of an element as it gained focus, but now the CSS : fo cus pseudoclass is a better solution (unless you need to affect an element other than the one that gained focus). 8 The focus and b1ur events are most commonly used on forms. They can be particularly helpful when: • • You want to show tips or feedback to users as they interact with an individual element within a form (the tips are usually shown in other elements and not the one they are interacting with) You need to trigger form validation as a user moves from one control to the next (rather than waiting for them to submit the entire fo rm first) EVENT TRIGGER FLOW focus When an element gains focus, the focus event fires for that DOM node. Capture blur When an element loses focus, the b1ur event fires for that DOM node. Capture focus in Same as focus (see above but not supported in Firefox at time of writing) Bubble & capture focu sout Same as b1ur (see above but not supported in Firefox at time of writing) Bubble & capture EVENTS FOCUS & BLUR In t his example, as the text input gains and loses focus, feedback ti pUsername () is triggered when th e text input gains fo cus. checkUsername () is triggered when the t ext input loses focus. is shown to the user in the <div> It changes the cl ass attribute of the element containing the It adds a m essage and changes the cl ass if the username is less message, and updates the than 5 charact ers; otherwise, it clears the message. element under the text input. The feedback is given using two functions. contents of the element. c06/js/focus-blur. js JAVASCRIPT function checkUsername() { // Declare function // Store username in variable var username =el.value; if (username.length < 5) { // If username < 5 characters elMsg.className = 'warning'; //Change cl ass on message elMsg .textContent ' Not l ong enough , yet .. . ' ;// Update message else { //Otherwise elMsg.textContent // Clear the message • I I• function tipUsername() { //Declare funct i on el Msg.className 'tip' ; //Change class for message elMsg.innerHTML = 'Username must be at least 5 characters ' ;// Add message var el = document.getElementByld('username'); // Username input var el Msg = document.getElementByid('feedback');- / /Element to hold message //When the username input ga ins / loses focus cal l functio ns above : el .addEventlistener( ' focus', tipUsername, false) ; // focus call tipUsername() el.addEventlistener('blur' , checkUsername, false) ;// blur call checkUsername() l;IJi'li' EVENT S 8 MOUSE EVENTS The mouse events are fired when the mouse is moved and also when its buttons are clicked. All of the elements on a page support the mouse events, and all of these bubble. Note that actions are different on touchscreen devices. Preventing a default behavior can have unexpected results. E.g., a click event only fires when both the mousedown and mouseup event have fired. EVENT TRIGGER click Fires when the user clicks on the primary mouse button A tap on the touchscreen will be (usually the left button if there is more than one). The c 1i ck treated like a single left-click. event w ill fire for the element that the mouse is currently over. It will also fire if the user presses the Enter key on the keyboard when an element has focu s. db 1c1 i ck Fires when the user clicks the primary mouse button twice in quick succession. TOUCH A double-tap will be t reated as a double left click. mousedown Fires when the user clicks down on any mouse button. (Cannot be triggered by keyboard.) You can use t he touchstart event. mouseup You can use the touchend event. Fires when the user releases a mouse button. (Cannot be triggered by keyboard.) mouseover Fires when the cursor was outside an element and is then moved inside it. (Cannot be triggered by keyboard.) Fires when the cursor is moved over an element. mouseout Fires when the cursor is moved off an element. Fires when the cursor is over an element, and then moves onto another element - outside of the current element or a child of it (Cannot be triggered by keyboard.) mousemove Fires when the cursor is moved around an element. This Fires when the cursor is moved. event is repeatedly fired. (Cannot be triggered by keyboard.) e WHEN TO USE CSS WHY SEPARATE MOUSEDOWN & UP? The mouseover and mouseout events were often used to change the appearance of boxes or to switch images as the user rolls over them. To change the appearance of the element, a preferable technique would be to use the CSS : hover pseudo-class. The mousedown and mouseup events separate out the press and release of a mouse button. They are commonly used for adding drag and drop functionality, or to add controls in game development. EVENTS CLICK The aim of this example is to use t he c 1 i ck event to remove the Because t he note is over the top of the page, we only want big note that has been added to the middle of the page. But first, to show it to users w ho have JavaScript enabled (otherwise the script has to create that note. they could not hide it). When the c 1 i ck event fires on the close link the di smi ssNote() fu nction is called. This function will remove the note that was added by the same script. JAVASCRIPT c06/js/cl ick . js II Create the HTML fo r the message var msg msg msg msg = '<div class=\"header\"><a id=\"close\" href=" #">close X</a><ldiv>'; += '<div><h2>System Maintenance</h2>'; += 'Our servers are being updated between 3 and 4 a.m . ' ; += 'Duri ng this t i me, there may be minor disrupt i ons to service.</div> ' ; var elNote = document.createElement( ' div'); elNote.setAttribute( 'i d' , 'note'); elNote . innerHTML = msg; document.body.appendChi l d{elNote); // Create a new el emen t //Add an id of note //Add the message II Add it to the page function dismissNote() { document.body. removeChi l d{elNote); II Remove the note // Declare functi on var el Close = document.getElementByid('close ' ); // Get the close button elClose .addEvent l istener( ' click', dismissNote, false);// Cl ick cl ose -clear note ACCESSIBILITY l;IJiiJil The c 1i ck event can be applied to any element, but it is better to only use it on items t hat are usually clicked or it will not be accessible to people who rely SYSTEM MAINTENANCE Our servers are being updated between 3and 4a.m. Ouringthis time, there may be minor disruptions to service. upon keyboard navigation. You may also be tempted to use t he c 1i ck event to run a script when a user clicks on a form element, but it is better to use the fo cus event because that fi res when the user accesses that control using the tab key. EVENTS@ DETERMINI NG POSITION In this example, as you move your mouse around the screen, the text inputs across the top of the page are updated with the current mouse position. This demonstrates the three different positions you can retrieve when the mouse is moved or when one of the buttons is clicked. Note how showPosition() is passed event as a parameter, which refers to the event object. The positions are all properties of this event object. c06/ js/ position .j s JAVASCRIPT var var var var var var sx sy px py ex cy document.getElementByid(' sx '); document.getElementByid( ' sy ' }; document.getElementByid( ' px ' ); document.getElementByld ('py ') ; document.getElementByid( 'cx' ) ; document.getElementByid(' cy ' ) ; function showPosition(event) sx.value event.s creenX; sy.value event.screenY; px.value event . pageX; py.value event. pageY; ex.val ue event.cl ientX; cy.value event.c l i entY; II II II II II II II II II II II II II Element Element Element Element Element Element to to to to to to hold hol d hold hold hold hold screenX sc reenY pageX pageY cl ientX clientY Declare function Update element with Update element with Update element with Update element with Update element wi t h Update el ement wi t h var el = document.getElementByid('body'} ; el.addEventlistener('mousemove'. showPosition, false}; II II screenX screenY pageX pageY cli entX cli entY Get body element Move updates position l ;IJiliil EVENTS@ KEYBOARD EVENTS The keyboard events are fired when a user interacts with the keyboard (they fire on any kind of device with a keyboard). EVENT input TRIGGER Fires when the value of an <input> or <textarea> element changes. First supported in IE9 (although it does not fire when deleting text in IE9). For older browsers, you can use keydown as a fallback. keydown Fires when the user presses any key on the keyboard. If the user holds down a key, the event continues to fire repeatedly. This is important because it mimics what would happen in a text input if the user holds down a key (the same character would be added repeatedly while the key is held down). keypress Fires when the user presses a key that would result in a character being shown on the screen. For example, this event would not fire when the user presses the arrow keys, whereas the keydown event would. If the user holds down a key, the event continues to fire repeatedly. keyup Fires when t he user releases a key on the keyboard. The keydown and keypress events fire before a character shows on screen, whereas keyup fires after it appears. The three events th at begin key ... fire in this order: 1. keydown - user presses key down 2 . keypress - user has pressed or is holding a key that adds a character into the page 3. keyup - user relea ses key WHICH KEY WAS PRESSED? When you use the keydown or keypress events, t he event object has a property called keyCode, which can be used to tell which key was pressed. However, it does not return the letter for that key (as you might expect); it returns an ASCII code that represents th e lowercase character for that key. You can see a table of the characters and their ASCII codes in an online · extra on the website accompanying this book. If you want to get the letter or number as it would be displayed on the keyboard (rather than an ASCII equivalent), the String object has a built-in method called fromCharCode() which will do the conversion foryou: String.fromCharCode(event.keycode} ; @ EVENTS WHICH KEY WAS PRESSED In this example, the <textarea> element should only have 180 characters. When the user enters text, the script will show them how many characters they have left available to use. The event listener checks for the keypr ess event on the <textarea> element. Each time it fires, the charCount () function updates the character count and shows t he last character used. The input event would work well to update the count when the user pastes in text or uses keys like backspace, but it does not tell you which key was the last to be pressed. c06/js/ keypress.js JAVASCRIPT var el ; function charCount(e) { var textEntered, charDisplay, counter, lastKey; textEntered = document.getElementByld('message').value; charDisplay = document.getElementByld('charactersleft'); counter = (180 - (textEntered.length)); charDisplay.textContent = counter; II II II II II II II II Decl are function Decl are variables User's text Counter element Num of chars left Show chars left II II Get msg element keypress event Decl are variabl es lastkey = document .getElementByid ('lastkey'); Get last key used lastkey.textContent = 'Last key in ASCII code : ' + e.keyCode; II Create msg el = document.getElementByld('message'); el.addEventlistener('keypress', charCount, false); l;li.Jllli EVENTS @ FORM EVEN TS There are two events that are commonly used with forms. In particular you are likely to see submit used in form validation. EVENT TRIGGER submit When a form is submitted, the submit event fires on the node representing t he <form> element. It is most commonly used when checking the values a user has entered into a form before sending it to the server. change Fires when the status of several form elements change. For example, when: • • • a selection is made from a drop-down select box a radio button is selected a checkbox is selected or deselected It is often better to use the change event rather than the c 1i ck event because clicking is not the only way users interact with form elements (for example, they might use the tab, arrow, or Enter keys). input @ The i nput event. which you saw on the previous page is commonly used w ith <input> and <textarea> elements. FOCUS AND BLUR VALIDATION The focus and b1ur events (which you met on p274) are often used with forms, but they can also be used in conjunction with other elements, such as links (so they are not specifically related to forms). Checking form values is known as validation. If users miss required information or enter incorrect information, checking it using JavaScript is faster than sending the data to the server for it to be checked. Validation is covered in Chapter 13. EVENTS USING FORM EVENTS When a user interacts w ith the drop-down select box, the change event will trigger the packageHi nt () function. This shows messages below the select box that reflect the choice. JAVASCRIPT When t he form is submitted, the checkTer ms () function is called. This tests to see if the user has checked the box that indicates they agree to the terms and conditions. If not, the script will prevent the default behavior of the form element (and stop it from submitting the form data to the server) and it will show an error message to the user. c06/js/fonn.js var elForm, elSelectPackage, elPackageHint, elTerms; /I Declare variables el Form document .getElementByld('formSignup'); / /Store elements elSelectPackage document.getElementByid{'package'); el PackageHin t document.getElementByld('packageHint'); el Terms document.getElementByid('terms'); elTermsHint document.getElementByid('termsHint'); function packageHint() { II Declare function var package = this.options[this.selectedindex] .value; II Get selected option if (package == 'monthly') { II If monthly package elPackageHint. i nnerHTML = ' Save $10 if you pay for 1 year! ';//Show this msg else { II Otherwise elPackageHint.innerHTML = 'Wise choice!'; II Show this message function checkTerms(event) { II Declare function if (!elTerms.checked) { II If checkbox ticked elTermsHint.innerHTML = 'You must agree to the terms.'; II Show message event.preventDefault(); II Don't submit form //Create event l isteners: submit calls checkTerms(), change calls packageHint() elForm.addEventlistener( ' submit ' , checkTerms, false); elSelectPackage.addEventlistener('change', packageHint, false); EVENTS @ MUTATION EVENTS & OBSERVERS Whenever elements are added to or removed from the DOM, its structure changes. This change triggers a mutation event. When your script adds or removes content from a page it is updating the DOM tree. There are many reasons why you might want to respond to the DOM tree being updated, for example, you might want to tell the user that the page had changed. Below are some events that are triggered when the DOM changes. These mutation events were introduced in Firefox 3, IE9, Safari 3, and all versions of Chrome. But they are already scheduled to be rep laced by an alternative called mutation observers. EVENT TRIGGER DOMNodelnserted Fires when a node is inserted into the DOM tree. e.g. using appendChi 1d (), rep 1aceChi1 d (}, or i nsertBefore (} . DOMNodeRemoved Fires when a node is removed from the DOM tree. e.g. using removeChi 1d (} or rep l aceChil d (}. DOMSubtreeModified Fires when the DOM structure changes. It fires after the two events listed above occur. DOMNodelnsertedlntoDocument Fires when a node is inserted into the DOM tree as a descendant of another node that is already in the document. DOMNodeRemovedFromDocument Fires when a node is removed from the DOM tree as a descendant of another node that is already in the document. PROBLEMS WITH MUTATION EVENTS NEW MUTATION OBSERVERS If your script makes a lot of changes to a page, you M utati on observers are designed to wait until a end up with a lot of mutation events firing. This can make a page fee l slow or unresponsive. They can script has fi nished its task before reacting, then report t he changes as a batch (rather than one at also trigger other event listeners as they propagate t hrough the DOM, which modify other parts of the DOM, triggering more mutation events. Therefore a time). You can also specify the type of changes .to the DOM that you want them to react to. But at the time of writing, the browser support was not they are being replaced by mutation observers. widespread enough to use them on public websites. Browser support: Chrome, Firefox 3, IE 9, Opera 9, Browser support: IE 11, Firefox 14, Chrome 27 (or 18 with webkit prefix), Safari 6.1, Opera 15 Safari 3 On mobile: Android 4.4, Safari on iOS 7. 9 EVENTS .. USING MUTATION EVENTS In this example, two event listeners each trigger their own function. The first is on the last but one line, and it listens for when the user clicks the link to add a new list item. It then uses DOM manipulation events to add a new element (changing the DOM structure and triggering mutation events). The second event listener waits for the DOM tree within the <ul> element to change. When the DOMNodelnserted event fires, it calls a function called updateCount ().This function counts how many items there are in the list, and then updates the list count at the top of the page accordingly. c06/js/mutation .js JAVASCRIPT function addltem(e) { e.preventDefault(); newEl = document.createElement('li '); newText = document.createTextNode('New list item'); newEl .appendChild{newText); elList .appendChild(newEl); II II II II II II II II II II function updateCount() { listitems = list.getElementsByTagName(' l i').len_gth; counter .innerHTML = listitems; II II II var ellist. addlink, newEl, newText, counter, listltems; ellist addlink counter document .getElementByid('list ' ); document.querySelector('a'); document .getElementByid('counter'); Declare variables Get list Get add item button Get item counter Declare function Preven t link action New <li> element New text node Add text to <li> Add <li> to list Declare function Get total of <l i>s Update counter II Click on button addlink.addEventlistener('click'. addltem. false); ellist.addEventlistener('DOMNodeinserted ', updateCount, false); II DOM updated i;IJiii§i EVENTS @ HTM LS EVENTS Here are three page-level events that have been included in versions of the HTMLS spec that have become popular very quickly. EVENT TRIGGER DOMContentLoaded Event fires when the DOM tree is formed (images, CSS, and JavaScript might still be loading). Scripts start to run earlier than BROWSER SUPPORT Chrome 0 .2, Firefox 1, IE9, Safari 3.1, Opera 9 using the load event which waits for other resources such as images and advertisements to load. This makes the page seem faster to load. However, because it does not wait for scripts to load, the DOM tree w ill not contain any HTML that would have been generated by those scripts. It can be attached to the window or document objects. hashchange Event fires wh en the URL hash changes (without the entire window refreshing). Hashes are used on links to specific parts IE8, Firefox 20, Safari 5.1, Chrome 26, and (sometimes known as anchors) within a page and also on pages that use AJAX to load content. The hashchange event handler Opera 12.1 works on the window object, and after firing, the event object will have o1dURL and newURL properties that hold t he url before and after the hashchange. beforeun load Event fires on the window object before the page is unloaded. It Chrome 1, Firefox 1, should only be used to help the user (not to encourage them to IE4, Safari 3, Opera 12 stay on a website if th ey are trying to leave). For example, it can be helpful to let a user know that changes on a form they completed have not been saved. You can add a message to the dialog box that is shown by the browser, but you do not have control over the text shown before it or on the buttons the user can press (which can vary slightly between browsers and operating systems). There are also several other events that are being introduced to support more recent devices (such as phones and tablets). They respond to events such as gestures and movements that are based upon an accelerometer (which detects th e angle at which a device is being held). 8 EVENTS USING HTMLS EVENTS In this example, as soon as the DOM tree has been formed, focus is given to the text input with an id of username. The OOMContentloaded event fires before the load event If users try to leave the page before they press the submit (because the latter waits for all of the page's resources to load). button, the beforeun load event checks that they want to leave. 06/ j s/html5-event s . j s , JAVASCRIPT function setup() { var textlnput; textlnput = document .getElementByld( 'message ' ); textlnput . focus(); window.addEventlistener('DOMContentloaded' , setup, false); window.addEventlistener('beforeunload', function(event){ return ' You have changes that have not been saved •.• ' ; }. false); On the left, you can see the i;IJiiJll dialog box that is shown when you try to navigate away from the page. The text before your message and on the buttons may change from browser to browser (you JavaScript Are you sure you want to INve this page? have no control over this). You have changes that have not been saved •.• ( Stay on Page ] ~ 1' z!!llP • II! J EVENTS 8 EXAMPLE EVENTS This example shows an interface for a user to record voice notes. The user can enter a name which is displayed in the heading, and they can press record (which changes the image that is shown). When the user start s typing a name into the text box, the keyup event will trigger a function called wri telabe 1 () which copies the text from the form input and writes it into the main heading under the logo for List King, replacing the words 'AUDIO NOTE'. The record/ pause button is a bit more interesting. The button has an attribute called data-state. When the page loads, its value is record. When the user presses the button, the value of this attribute changes to pause (this triggers a new CSS rule to indicate that it is now recording). If you have not used HTMLS's data- attributes, they allow you to store custom data on any HTML element. (The name of the attribute can be anything starting with data- as long as the name is lowercase.) This demonstrates a new technique based upon event delegation. The event listener is placed upon the containing element whose i d is buttons. The event object is used to determine the value of the id attribute on the element that was used. The value from that id attribute is t hen used in a switch statement to decide w hich function to call (depending on whether the button is in record state or pause state). This is a good way to handle many buttons because it reduces the number of event listeners in your code. The event listeners are written at the bottom of the page, and they have fallbacks for users who are running IE8 or less (which has a different event model). EVENTS @ EXAMPLE EVENTS The script starts by defining the variables that it will need to use, and then collecting the element nodes that are needed. The player functions (shown on the right-hand page) would appear next, and at the bottom of this page you can see the event listeners. The event listeners live inside a conditional statement so that the attachEvent () method can be used for visitors who have IE8 or less. c06/ js/exampl e.js JAVASCRIPT var username, noteName, textEntered, target; noteName = document.getElementByld('noteName'); function writelabel(e) if (le) { e = window .event; target =event .target I I event . srcElement; textEntered = e.target .value; noteName.textContent = textEntered ; II II This is where the record See right hand page I pause II II II II II II II II Declare variables Elemen t that holds note Declare fu nction If event object not present Use IES-8 fallbac k Get target of event Value of that el ement Update note text controls and functions go ... if (document .addEventlistener) II If event listener suppo rt ed document.addEventlistener('click', function(e){ ll For any click document II Call r ecorderControl s() recorderControls(e); II Capture during bubbl e phase }, false) ; II If input event fi res on username i nput call wr itelabel () username .addEventlistener('input', writelabel, false); else { II Otherwi se document .attachEvent('onclick' , function(e){ II IE fall back: any cl ick II Calls recorderControl s () recorderControls(e); }) ; II If keyup event f ires on username input call wr itelabel() username.attachEvent('onkeyup', writelabel, false); ... j , I 1 ~ t 8 EVENTS EXAMPLE EVENTS The recorderContro1 s () function is automatically passed the event object. Not only does this offer code to support older versions of IE, but also stops the link from performing its default behavior (of taking the user to a new page). The switch statement is used to indicate which function to run depending on whether the user is trying to record or stop the audio note. This technique of delegation is a good way to cope with multiple buttons in the UI. c06/ js/ exampl e .j s JAVASCRIPT function recorderControls(e) if (!e) { e = window.event; II II II target = event .target I I event.srcElement;ll if (event.preventDefault) { II II e.preventDefault(); else { II event.returnValue = false; II switch(target .getAttribute('data-state')) case ' record' : record(target); break; case 'stop': stop(target); break; II More buttons coul d go here ... { II II II II II II II Declare recorderControls() If event object not present Use IE5-8 fallback Get the t arget el ement If preventDefault() supported Stop default action Otherwise IE fa l lbac k: stop default act i on Get the data-state attribute If its val ue is record Cal l the record() funct i on Exit fu nction to where called If i ts value i s stop Cal l t he stop () fun ction Exit function to where called } }; function record(target) { target.setAttribute('data-state'. ' stop') ; target .textContent = 'stop'; II II II Declare fu nction Set data-st ate attr to stop Set text to 'stop' function stop(target) { target . setAttri bute('data-state ' . ' record ' ); llSet data -stat e attr to record target . textContent = 'record'; II Set text t o 'record' EVENTS s Events are the browser's way of indicating when something has happened (such as when a page has finished loading or a button has been clicked). Binding is the process of stating which event you are waiting to happen, and which element you are waiting for that event to happen upon. When an event occurs on an element, it can trigger a JavaScript function. When this function then changes the web page in some way, it feels interactive because it has responded to the user. You can use event delegation to monitor for events that happen on all of the children of an element. The most commonly used events are W3C DOM events, although there are others in the HTMLS specification as well as browser-specific events. ... I ' l ~ jQuery offers a simple way to achieve a variety of common JavaScript tasks quickly and consistently, across all major browsers and without any fallback code needed. SELECT ELEMENTS PERFORM TASKS HANDLE EVENTS It is simpler to access elements using jQuery's CSS-style selectors than it is using DOM queries. The selectors are also more powerful and flexible. jQuery's methods let you update the DOM tree, animate elements into and out of view, and loop through a set of elements, all in one line of code. jQuery includes methods that allow you to attach event listeners to selected elements without having to write any tailback code to support older browsers. This chapter assumes that you have read the book up to this point or are familiar with the basics of JavaScript. As you will see, jQuery is powerful when combined with traditional JavaScript techniques, but you need to understand JavaScript to make full use of jQuery. , • I 1 .j I 8 JQUERY j A BASIC JQUERY EXAMPLE The examples in this chapter revisit the list application used in the previous two chapters, and they will use jQuery to update the content of the page. 1. In order to use jQuery, the first 2. Once jQuery has been added thing you need to do is include the jQuery script in your page. You can see t hat it is included before the closing </body> tag. to t he page, a second JavaScript fi le is included t hat uses jQuery selectors and methods to update the content of the HTML page. lliif,11 c07/ basic-exampl e. html <body> <div i d="page" <hl id=" header">Li st</hl> <h2>Buy groceries</h2> <ul> <li <li <li <l i </ ul> </div> G) <script @ <script </body> id="one" class="hot"><em>fresh</em> figs </li> id="two" class="hot">pine nuts</ li> id="three" class ="hot">honey</ li> id="four">balsamic vinegar</ li> .. src="j s/jquery-1 . 11. 0 .js "></script> src="j s/basic-example.js"></scr i pt> WHERE TO GET JQUERY AND WHICH V ERSION TO USE Above, jQuery is included before the closing </ body> tag just like other scripts. (Another way to include the script is shown on p355.) A copy of jQuery is included with the code for this book, or you can download it from http://jquery . org. The version number of jQuery should be kept in the file name. Here, it isjquery- 1.11.0.js, but by the time you read this book, there may be a newer version. The examples should still work w ith newer versions. @ JQUERY You often see websites use a version of the jQuery file with the file extension .min . js. It means unnecessary spaces and carriage returns have been stripped from t he file. e.g.. jquery- 1.11.0.js becomes jquery-1 . 11.0 .mi n. js. It is done using a process called minificat ion (hence min is used in the file name). The result is a much smaller file which makes it faster to download. But minified files are much harder to read. If you want to look at the jQuery file, you can open it with a text editor - it is just text like JavaScript, albeit very complicated JavaScript. Most people who use jQuery do not try to understand how the jQuery JavaScript file achieves what it does. As long as you know how to select elements and how to use its methods and properties, you can reap the benefits of using jQuery without looking under t he hood. Here, the JavaScript file uses the $ () shortcut for the jQuery () function. It selects elements and creates three jQuery object s that hold references to the elements. The methods of the jQuery object fade the list items in, and remove them when they are clicked on. Don't worry if you don't understand the code yet. First, you will learn how to select elements using jQuery selectors, and then how to update those elements using the methods and properties of the jQuery object. c07/ js/ basic-example .js J AVASCRIPT G) $(' :header').addClass('headline'); @ $(' l i : lt(3) ').hide(). fadeln(lSOO); $('li').on('click', function() { $(this) . remove(); }) ; 1. The first line selects all of the <hl> - <h6> headings, and adds a value of headline to their cl ass attributes. 2 . The second line selects the first three list items and does two things: • • l;IJiiJSI The elements are hidden (in order to allow the next step). The elements fad e into view. 3. The last three lines of the script set an event listener on each of the <l i >elements. When a user clicks on one, it triggers an anonymous function to remove that element from the page. Here is a reminder of the colors used to convey the priority and status of each list item: JQUERY 8 WHY USE JQUERY? jQuery doesn't do anything you cannot achieve with pure JavaScript. It is just a JavaScript file but estimates show it has been used on over a quarter of the sites on the web, because it makes coding simpler. 1: SIMPLE SE LECTORS 2: COMMON TASKS IN LESS CODE As you saw in Chapter 5, which introduced the DOM, it is not always easy to select t he elements There are some tasks that front-end developers that you want to. For example: • • Older browsers do not support the latest methods for selecting elements. IE does not treat whitespace between elements as text nodes, while other browsers do. Such issues make it hard to select the right elements on a page across all major browsers. need to do regularly, such as loop through the elements that have been selected. jQuery has methods that offer web developers simpler ways to perform common tasks, such as: • • loop through elements Add I remove elements from the DOM tree • • Handle event s Fade elements into I out of view • Handle Ajax requests Rather than learn a new way to select elements, jQuery uses a language that is already familiar to front-end web developers: CSS selectors. They: • Are much faster at selecting elements • Can be a lot more accurate about which element s to select jQuery also offers chaining of methods (a technique • Often require a lot less code t han older DOM selected·some elements, this allows you to apply multiple methods to the same selection. • Are already used by most front-end developers methods jQuery even adds some extra CSS-style selectors which offer additional functionality. Since jQuery was created, modern browsers have implemented the querySe1ector () and querySe1ectorA11 () methods to let developers select elements using CSS syntax. However, these methods are not supported in older browsers. 9 jQuery simplifies each of these ta sks, and allows you to write less code to achieve them. JQUERY which you will meet on p311). Once you have jQuery's motto is "Write less, do more," because it allows you to achieve t he same goals but in fewer lines of code than you wou ld need to write with plain JavaScript. 3: CROSS-BROWSER COMPATIBILITY JQUERY 1.9.X+ OR 2.0.X+ jQuery automatically handles the inconsistent ways in which browsers select elements and handle events, so you do not need to write cross-browser fa llback code (such as that shown in t he previous two chapters). As jQuery developed, it built up a lot of code to support IE6, 7, and 8; w hich made the script bigger and more complicated. A s version 2.0 of jQuery was approaching, the development team decided to create a version that would drop support for older browsers in order to create a smaller, fa ster script. To do this, jQuery uses f eat ure det ection to find the best way to achieve a task. It involves the use of many condit ional statements: if the browser supports the ideal way to achieve a task, it us.es that approach; otherwise, it tests to see if it supports the next best option to achieve the same task. The jQuery team was, however, aware that many people on the web still used these older browsers, and that developers therefore needed to support t hem. For this reason, th ey now maintain two parallel versions of jQuery: This was the technique used in the last chapter to determine whether or not the browser supported event listeners. If event listeners were not supported, an alternat ive approach was offered (aimed at users of Internet Explorer 8 and older versions of IE). jQuery 1.9+: Encompasses t he same features as 2.0.x but still offers support for IE6, 7, and 8 Is ' query Sel ector () supported? I Test if browser supports the next best option ' I Great! Use this feature as it is the best option Here, a conditional statement checks if the browser supports querySe 1ector() . If it does, that method is used. If it doesn't, it checks to see if the next best opt ion is supported and uses that instead. jQuery 2.0+: Drops support fo r older browsers to make t he script smaller and faster to use The functionality of both versions is not expected to diverge significantly in t he short term. The jQuery fil e name should cont ain the version number in it (e.g., jquery-1.11.0.js or jquer y-1.11.0 .min .j s). If you don't do this, a user's browser might t ry to use a ca ched version of the file that is either older or newer - which could prevent other scripts from working correctly. JQUERY 8 FINDING ELEMENTS Using jQuery, you usually select elements using CSS-style selectors. It also offers some extra selectors, noted below with a 'jQ'. Examples of using these selectors are demonstrated throughout the chapter. The syntax will be familiar to those who have used selectors in CSS. BASIC SELECTORS * All elements All elements with that element name Elements whose id attribute has the value specified Elements whose cl ass attribute has the value specified Elements that match more than one selector (see also the .add() method, which is more efficient when combining selections) element #id .class selectorl, selector2 HIERARCHY ancestor descendant parent > child An element that is a descendant of another element (e.g., 1i a) An element that is a direct child of another element (you can use* in the place of the child to select all child elements of the specified parent) Adjacent sibling selector only selects elements that are immediately followed by the previous element Sibling selector will select any elements that are a sibling of the previous element previous + next previous - s ib Zings BASIC FILTERS : not (selector) :first : last :even :odd :eq(index) :gt(index) : lt(index) :header :animated :focus 302 JQUERY jQ jQ jQ jQ jQ jQ jQ jQ jQ All elements except the one in the selector (e.g., div: not ('#summary')) The first element from the selection The last element from the selection Elements with an even index number in the selection Elements with an odd index number in the selection Elements with an index number equal to the one in the parameter Elements with an index number greater than the parameter Elements with an index number less than the parameter All <hl> - <h6> elements Elements that are currently being animated The element that currently has focus CONTENT FILTERS :contains ('text ') :empty :parent : has (se lector) jQ jQ Elements that contain the specified text as a parameter All elements that have no children All elements that have a child node (can be text or element) Elements that contain at least one element that matches the selector (e.g., d; v: has (p) matches all d; v elements that contain a <p> element) VISIBILITY FILTERS :hidden :vi sible jQ jQ All elements that are hidden All elements that consume space in the layout of the page Not selected if: d; sp1ay: none; he; ght I w; dth: O; ancestor is hidden Selected if: v; s; bi U ty : hidden; opacity : 0 because they would take up space in layout CHILD FILTERS : nth-child (expr) :first-child : last -child :only-child The value here is not zero-based e.g. ul 1i:nth- ch;1 d (2) First child from the current selection Last child from the current selection When there is only one child of the element (d; v p:only-ch; ld) ATTRIBUTE FILTERS [attribut e] [attri bute=' value '] [attribute! ='value'] jQ [attributeA= 'va lue'] [attribute='val ue'] [attribute*= ' value '] [at tribut el= ' val ue'] [attribut e-= 'value'] [attribute] [a t tri bute2] Elements that carry the specified attribute (with any value) Elements that carry the specified attribute with the specified value Elements that carry the specified attribute but not the specified value The value of the attribute begins with this value The value of the attribute ends with this value The value should appear somewhere in the attribute value Equal to given string, or starting with string and followed by a hyphen The value should be one of the values in a space separated list Elements that match all of the selectors FORM : input :text :password :radio : checkbox :submit : image :reset :button : file : selected :enabled :disabled :checked jQ jQ jQ jQ jQ jQ jQ jQ jQ jQ jQ All input elements All text inputs All password inputs All radio buttons All checkboxes All submit buttons All <img> elements All reset buttons All <button> elements All file inputs All selected items from drop-down lists All enabled fo rm elements (the default for all form elements) All disabled form elements (using the CSS d; sabled property) All checked radio buttons or checkboxes JQUERY 303 DOING THINGS WITH YOUR SELECTION Once you have seen the basics of how jQuery works, most of this chapter is dedicated to demonstrating these methods. These two pages both offer an overview to the jQuery met hods and will also help you find t he methods you are looking for once you have read t he chapter. You often see jQuery method names written starting with a period (.) before the name. This convention is used in this book to help you easily identify those methods as being jQuery methods rat her than built-in JavaScript methods, or methods of custom objects. When you make a selection, the j Query object that is created has a property called length, which will return the number of elements in the object. If t he jQuery select ion did not find any matching elements, you will not get an error by calling any of these methods - they j ust won't do or return anything. There are also methods that are specifically designed to work with Ajax (which lets you refresh part of the page rather than an entire page) shown in Chapter 8. 304 J Q UERY CONTENT FILTERS FINDING ELEMENTS Get or change content of elements, attributes, text nodes Find and select elements to work with & traverse the DOM GET/ CHANGE CONTENT GENERAL . html() . text() .replaceWith() . remove() . f;nd() .closest() . parent() .parents() .children() .sibHngs() . next() . nextAll () .prev() . pr evAll () p316 p316 p316 p316 ELEMENTS . before() . after() .pr epend() .append() . remove() .clone() .unwrap() . detach() .empty() .add() p318 p318 p318 p318 p346 p346 p346 p346 p346 p338 p336 p336 p336 p336 p336 p336 p336 p336 p336 p336 FILTER/ TEST . f;lter() . not() .has() .h() :contains () p338 p338 p338 p338 p338 ATTRIBUTES .attr () . removeAttr () .addClas s() . removeCl ass() .css() p320 p320 p320 p320 p322 FORM VALUES . val() . i sNumer i c () p343 p343 ORDER IN SELECTION .eq() . lt() . gt() p340 p340 p340 Once you have selected the elements you want to work with (and they are in a j Que ry object), the jQuery methods listed on these two pages perform tasks on those elements. 0 DIMENSION/ POSITION EFFECTS & ANIMATION EVENTS Get or update the dimensions or position of a box Add effects and animation to parts of the page Create event listeners for each element in the selection DIMENSION BASIC DOCUMENT/ Fl LE p348 .height() p348 .width() p348 • i nnerHei ght () p348 • i nnerWi dth () p348 • outerHei ght () .outerWidth() p348 $(document).height()p350 $(document).width() p350 $(window).height() p350 $(window).width() p350 .show() .hide() .toggle() p332 p332 p332 .offset() • position() • scro l lleft () .scrol lTop() p351 p351 p350 p350 p312 p313 USER INTERACTION FADING • fadeln() .fadeout() . fadeTo() • fadeToggle() .on() p332 p332 p332 p332 SLIDING POSITION .ready() • load() • s 1i deDown () • sl ideUp() . slideToggl e() p332 p332 p332 p326 There used to be methods for individual types of event, so you may see methods such as .click() , . hover() , .submit(). However, these have been dropped in favour of the •on() method to handle events . CUSTOM .delay() .stop() .animate() p332 p332 p332 JQUERY 305 LOOPING In plain JavaScript, if you wanted With jQuery, when a selector to do the same t hing to several returns multiple elem ents, you can update all of them using the all of the elements that are found one method. There is no need to use a loop. using t he selector. It doesn't matter if there are one or many. elements, you would need to write code to loop through all of the elements you selected. c07/ j s/ looping . js In this code, the same value is added to t he c l ass attribute for JAVASCRIPT $('l i em') .addClass('seasonal ') ; $( ' li . hot') .addClass('favorite'); .. In this example, the first selector applies only to one element and the cl ass attribute's new value 19Jillii triggers a CSS rule that adds a calendar icon to the left of it. The second selector applies to three elements. The new value added to the cl ass attribute for each of these elements t riggers a CSS rule t hat adds a heart icon on the right-hand side. The ability to update all of the elements in the jQuery selection is known as implicit iteration. When you want to get information from a series of elements, you can use t he . each () method (which you meet on p324) rather t han writing a loop. e JQUERY ... CHAINING If you want to use more than one jQuery meth od on the same select ion of elements, you can list several met hods at a time using dot notation to separate each one, as shown below. In this one statement, three methods act on t he same selection of elements: hi de() hides the elements delay ( ) creates a pause fade In () fades in the elements JAVASCRIPT The process of placing several methods in the same selector is referred to as chaining. As you can see, it results in code that is far more compact. c07/js/chaining . j s $( 'l i [i d!="one"] ') . hide() . delay(SOO) . fadeln(1400); l;li.JIJ51 To make your code easier to read, you can place each new method on a new line: $('li[id! ="one"] ') . hide() .delay(500) . fadeln(1400); Each line starts wit h the dot notation, and the semicolon at the end of the statement indicates that you have finished working with this selection. Most methods used to update the jQuery selection can be chained. However the methods t hat retrieve information from the DOM (or about t he browser) cannot be chained. It is worth noting that if one method in the chain does not work, the rest will not run either. JQUERY @ GETTING ELEMENT CONTENT The • htm 1 () and • text () methods both retrieve and update the content of elements. This page will focus on how to retrieve element content. To learn how to update element content, see p316 . 8 . html() . text() W hen this method is used to retrieve information from a jQuery selection, it retrieves only the HTML inside the first element in the matched set, along with any of its descendants. W hen this method is used to retrieve the text from a jQuery selection, it returns the content from every element in the jQuery selection, along with the text from any descendants. For example, $ (' ul ' ) • html () ; will return this: For example, $ ( ' ul ') . text () ; will return this: <li <l i <li <l i fresh figs pine nuts honey balsamic vint;!gar id="one"><em>fres h</em> figs</li> id="two">pine nuts</li> id="three ">honey</li> id="four">balsamic vinegar</l i> , Whereas $ ( 'l i ') . html (); will return this: Whereas $ ( 'l i ') . text () ; will return this: -' <em>fresh</em> figs fresh figspine nutshoneybalsamic vinegar .. Note how this returns only the content of the first <1 i> element. Note how this returns the text content of all <1i > elements ( including spaces between words), but there are no spaces between the individual list items. If you want to retrieve the value of every element. you can use the . each () method (see p324). To get the content from <input> or <textar ea> elements, use the . va1 () method shown on p343. J QUERY GETTING AT CONTENT On this page you can see variations on how the . html() and . text() methods are used on the same list (depending on whether <ul >or <l i > elements are used in the selector). JAVASCRIPT Please note: The . append (} method (covered on p318) lets you add content to the page. c07/ js/ get-html-fragment. js var $listHTML = ${'ul') . html(}; $ ( 'ul '). append($1 i stHTML); The selector returns the <u l > element. The • html () method get s all the HTML inside it (the four <1 i> elements). This is then appended to the end of the selection, in this case after the existing <1i >elements. JAVASCRIPT c07/ js/ get-t ext-f ragment .j s var $1istText = $('ul').text(); ${'ul ') . append('<p>' + $listText + 1 </ p>'); The selector returns the <u 1> element. The . text() method gets the text from all of the <ul >element's children. This is then appended to the end of the selection, in this case after the existing <ul >element. JAVASCRIPT c07/ js/ get -html-node.js var $1 i stltemHTML = $ ( '1 i ') . html() ; $('1i ') . append{'<i>' + $1istltemHTML + '</ i>') ; The selector returns the four <1 i >elements, but the • html () method returns only the contents of the first one. This is then appended to the end of the selection, in this case after each existing <1 i> element. JAVASCRIPT c07/j s/get-text-node .js var $1istltemText = $('1i ').text(); ${'li ').append('<i>' + $1istltemText + '</ i>'); fresh figs trcshnzipc1•cn•tshmrb>lum1..1 pine nuts ,,.,.,,zspin1..1...,..,,,,1n..;.r1 honey trrsthppm,.rt$/lo•trbllum1cr1oezzr The selector returns the four <l i > elements. The . text () method gets the text from these. This is then appended to each of the <l i > elements in the selection. balsamic vinegar lrcil>n1s1»_ocnulshm J QUERY § UPDATIN G ELEMENTS Here are four methods that update the content of all elements in a jQuery selection . When the • htm1 () and . text () methods are used as setters (to update content) they will replace the content of each element in the matched set (along with any content and child elements). The . rep 1aceWith () and . remove () methods replace and remove the elements they match (as well as their content and any child elements). The .html(),. text(), and . rep 1aceWi th () methods can take a string as a parameter. The string can: • Be stored in a variable • Contain markup When you add markup to the DOM, be sure to escape all untrusted content properly on the server. Both the . htm1 () and • rep 1aceWi th () methods carry the same security risks as using the DOM's i nnerHTML property. See p228 - p231 on XSS. @ JQUERY . html() . text() This method gives every element in the matched set the same new content. The new content may include HTML. This method gives every element in the matched set the same new text content. Any markup would be shown as text. .replaceWith() This method replaces every element in a matched set with new content. It also returns the replaced elements. . remove() This method removes all of the elements in the matched set. USING A FUNCTION TO UPDATE CONTENT If you want to use and amend the content of the current selection, these methods can take a function as a parameter. The funct ion can be used to create new content. Here the text from each element is placed inside <em> tags. $(' l i . hot' ) . html( function() return '<em>' + $(this) . text() + '</ em> '; } ); ~~~~ 1. return indicates that content should be returned by the function. 2. <em> tags are placed around the text content of the list item. 3. this refers to the current list item. $ (this) places that element in a new jQuery object so that you can use jQuery methods on it. CHANGING CONTENT In this example, you can see When updating the content of t hree met hods that allow you to an element, you can use a string, a variable, or a function. update t he content of t he page. c07/js/changi ng-content.js JAVASCRIPT CD @{ ® $(function() { $ ( ' l i :contains ("pine") ' ). text(' al monds'); $ ( ' l i. hot'). html (funct i on() { return 1 <em> ' + $(th i s).text() + 1 </ em>' ; }) ; $( ' li #one ' ).remove(); }) ; 1. This line selects any list items 2. These lines select all list items The . html ( ) method uses a that contain the word pine. It then changes the text of the matching element to a 1mends whose cl ass attribute contains the word hot, and uses th e function to place t he content of each element inside an <em> • htm1 () met hod to update the con tent of each of them. element. (See t he bottom of the left-hand page for a closer look using the • text() method. at the syntax.) iijJiiiSI 3. This line selects the <l i > element that has an i d attribute w hose value is one, then uses the remove() method to remove it. (This does not requ ire a parameter.) When specifying new content, carefully choose w hen to use single quotes and when to use double quotes. If you append a new element t hat has·attributes, use single quotes to surround the content. Then use double quotes for t he attribute values themselves. JQUERY e INSERTING ELEMENTS Inserting new elements involves two steps: 1: Create the new elements in a jQuery object 2: Use a method to insert the content into the page You can create new jQuery objects to hold text and markup that you then add to the DOM tree using one of the methods listed in step 2 on the right. If you create a selection that returns multiple elements, these methods will add the same content to each of the elements 1: CREATING NEW ELEMENTS IN A JQUERY OBJECT The fo llowing statement creates a variable called $newFragment and stores a jQuery object in it. The jQuery object is set to contain an empty <l i>element:var $newFragment = $('<li>'}; The following statement creates a variable called $newl tern and stores a jQuery object in it. This jQuery object in t urn contains an <1 i> element with a cl ass attribute and some text: var $newltem = $('<li class="new">item</ li>'); in the matched set. 2: ADD ING THE NEW ELEMEN TS TO THE PAGE When adding content to the Once you have a variable holding th~ new content, you can use the DOM, make sure you have following methods to add the content to the DOM tree: escaped all untrusted content properly on the server. (See p228 - p231 on XSS.) .before() ... .after() This method inserts content before the selected element(s). This method inserts content af ter t he selected element (s). • after() <l i > i tern </1 i > .prepend() .before() . append() .prepend() .append() This method inserts content inside the selected element(s), after the opening tag. inside the selected element(s), before the closing tag. This method inserts content There are also . prependTo() and . appendTo() m eth ods. They work th e other way around from • prepend () and • append () . So: e JQUERY a. prepend (b) adds b to a a. append (b) adds b to a a.prependTo{b) adds a to b a.appendTo(b) adds a to b ADDING NEW CONTENT In this example, you can see three jQuery selections are made. Each selection uses a different method to amend the content of the list. The first adds a new notice before the list, the second adds a + symbol before the hot items, and the third adds a new element to the end of the list. c07/ js/ adding-new-content .js JAVASCRIPT $(function() { $('ul') . before('<p class="notice">Just updated</p>'); @ $ ( ' l i. hot') . prepend ( '+ ') ; ~ var $newlistltem = $('<li><em>gluten-free</em> soy sauce</li>'}; ~ $('li:last').after($newlistltem); <D }) ; 1. The <ul >element is selected, and the • before() method is used to insert a new paragraph before the list. 2. Selects all <l i> elements whose class attribute contains a value of hot and uses the . prepend () method to add a plus symbol(+) before the text. 3. A new <l i> element is created and stored in a variable. Then the last <l i >element is selected, and the new element is added using the .after() method. i;IJiiJil JQUERY e GETTING AND SETT ING ATTRIBUTE VALUES You can create attributes, or access and update their contents, using the following four methods. You can work with any attribute on any element using the attr() and r emoveAttr() methods. If you use the at tr() method to update an attribute that does not exist, it will create the attribute and give it the specified value. The value of the cl ass attribute can hold more than one class name (each separated by a space). The addCl ass() and removeCl ass() methods are very powerful because they let you add or remove an individual class name within the value of the cl ass attribute (and they do not affect any other class names). .attr() . removeAttr() This method can get or set a specified attribute and its value. To get the value of an attribute, you specify the name of the attribute in the parentheses. This method removes a specified attribute (and its value). You just specify the name of the attribute that you want to remove from the element in the parentheses. $( ' li#one').attr('id'); $('1 i #one') . removeAttr (' i d' }; To update the value of an attribute, you specify both the attribute name and its new value. $('li#one').attr('id' , 'hot ' ); . addCl ass() .removeClass() This met hod adds a new value to the existing value of t he cl ass attribute. It does not overwrite existing values. This method removes a value from the cl ass attribute, leaving any other class names w ithin that attribute intact. These two methods are another good example of how jQuery adds helpful functionality commonly needed by web developers. @ JQUERY WORKING WITH ATTRIBUTES The statements in this example use jQuery methods to change the c 1ass and i d attributes of the specified HTML elements. When the values of these attributes change, new CSS rules Using events to t rigger changes to attribute values t hat apply are applied to the elements, changing how they look. new CSS rules is a popular way to make a web page interactive. c07/ js/ attributes. j s JAVASCRIPT CD ~ @ $ (function() { $('li#three').removeClass('hot ' ); $( ' 1i.hot').addClass(' favori t e'); $( ' ul').attr( ' id', 'group ' ); }) ; 1. The first statement finds the third list item (it has an id attribute with a value of t hree) and removes hot from the cl ass attribute on t hat element. This is important to note because it affects the next statement. 2. The second statement selects 3. The t hird statement selects all <1 i > elements whose c 1ass attribute has a value of hot. It adds a new class name called the <u 1>element and adds an id attribute, giving it a value of favor ite. Because step 1 updated the third list item, this statement group (which triggers a CSS rule that will add a margin and border t o the <u 1>element). affects only the first two. i;IJiiJ51 JQUERY@ GETTING & SETTING CSS PROPERTIES The . css () method lets you retrieve and set the values of CSS properties. To get the value of a CSS property, you indicate which property you want to retrieve in parentheses. If the matched set contains more than one element, it will return the value from the first element. HOW TO GET A CSS PROPE RTY This w ill store the background color of the first list item in a variable called backgroundCo l or. The color will be returned as an RGB value. var backgroundColor = $( ' li ' ) . css( 'background-color' ); HOW TO SET A CSS PROPERTY To set the values of a CSS property, you specify the property name as the first argument in the parentheses, then a comma, followed by its value as the second argument. This w ill update every element in the matched set. You can also specify multiple properties in the same met hod using object literal notat ion. This will set the background color of all list items. Note how the CSS property and its value are separated using a comma instead of a colon. Note: In the method used to set an individual propert y. the property name and its value are separated by a comma (because all parameters in a method are separated by a comma). You can set multiple properties using object literal notation: • Properties and values are placed in curly braces • A colon is used to separate property names from their values • A comma separates each pair (but there is not one after the last pair) This sets the background color and typeface for all list items. $( 'li ') .css( 'background- color' , '1272727' ); When dealing with dimensions that are specified in pixels. you can increase and decrease the values using the+= and- = operators. ${'li ' ).css( 'padding-left', '+=20' ); SET TING MULTIPLE PROPERTIES $('1 i ') .css( { In the object literal notation, properties and their values are separated by a colon. @ JQUERY ' background- col or' : ' #272727' , ' font-family' : 'Courier' }) ; .. CHANGING CSS RULES This example demonstrates how the • css () method can be used to select and update the CSS properties of elements. The script checks what t he background color of the first list item is when the page loads and then writes it after the list. Next, it updates several CSS properties in all list items using t he same . css () method with object literal notation. c07/js/css.js JAVASCRIPT G) @ 3 $(function() { var backgroundCo l or = $ ( 'l i ' ). css ('background-col or'); $('ul').append('<p>Color was: ' + backgroundColor + 1 </p>'); $( ' li ') .css({ 'background-col or' : 'Hc5a996 ' , 'border': 'lpx solid Hfff', 'color': '#000', 'font-family': 'Georgia', I padding-left I : I +=75 I }) ; }) ; 1. The backgroundCo 1or variable is created. The jQuery selection contains all <1 i >elements, and the . css () method returns the value of the background-co 1or property of the first list item. 2. The background color of the first list item is written into the page using the . append"() method (which you met on p318). Here, it is used to add content after the <u l >element. 3. The selector picks all <l i > elements, and t hen the • css () method updates several properties at t he same time: • • • •a11111• • • Color was: rgb(215,102,107) The background color is changed to brown A w hite border is added The color of the text is changed to black The typeface is changed to Georgia Ext ra padding is added on the left Note: It is better to change the value of a cl ass attribute (to trigger new CSS rules in the style sheet) rather than to change CSS properties from w ithin the JavaScript file itself. JQUERY 8 WORKING WITH EACH ELEMENT IN A SELECTION jQuery allows you to recreate the functionality of a loop on a selection of elements, using the • each () method. You have already seen several jQuery methods that update all of t he elements in a matched set without the need for a loop. There are, however, times when you will want to loop through each of the elements in the selection. Often this will be to: • • Get information from each element in the matched set. Perform a series of actions on each of t he elements. • each() this or $(this) Allows you to perform one or more statements on each of the items in the select ion of elements that is returned by a selector - rather like a loop in JavaScript. As the . each() method goes through the elements in a selection, you can access the current element using the this keyword. It takes one parameter: a function containing the statements you want to run on each element. You also often see $ (thi s) , which uses the this keyword to create a new jQuery selection containing the current element. It allows you to use jQuery methods on the current element. t r-(i)---, r@--i The • each() method is provided for this purpose. The parameter of the • each () method is a function. This could be an anonymous function (as shown here) or a named fu nction. $( ' li').each( fu nction() { var ids= th is . id; 3 ${this).append(' <em class="order">' +ids+ '</ em>'); )) ; 1. The jQuery selection contains all of the <l i > elements. 2 .. each () applies the same code to each element in the selection. 3. An anonymous function is run for each of the items in the list. Since this refers to the current node, if you want to access a property of that node, e.g.. that element's id or c 1ass attributes, it is better to use plain JavaScript to access those attributes: ids= this . id ; 8 JQUERY It is more efficient than writing ids= ${this) . attr('id'); because this would involve the interpreter creating a new jQuery object, and then using a method to access info that is available as a property. USING .EACH() This example creates a jQuery object containing all of the list items from the page. The . each() method is then used to loop through the list items and run an anonymous function for each of them. The anonymous function takes the value from the id attribute on the <1 i >element and adds it to the text in the list item. c07/ js/ each.js JAVASCRIPT $(function() { $( '1 i ') .each(functi on() @ var ids = this.id; ® $(this).append(' <span c l as s="order">' +ids+ ' </span>') ; }) ; }) ; CD 1. The selector creates a jQuery object containing all <l i > elements. The • each() method calls an anonymous function for each of the list items in the matched set. i;IJiiJil 2. The this keyword refers to the current element node in the loop. It is used to access the value of the current element's id attribute, which is stored in a variable called ids. 3. $(this) is used to create a jQuery object that contains the current element in the loop. Having the element in a jQuery object enables you to use jQuery methods on that element. In this case the • append () method is used to add a new <span> element to the current list item. The content of that element is the value of its id attribute, which was obtained in step 2. JQUERY@ EVENT METHODS The • on ( ) method is used to hand le all events. Behind the scenes, jQuery handles all of the cross-browser issues you saw in the last chapter. r-(i)---, r@ir-@--. + Using the . on () method is no different than using any other jQuery method; you: $('li') . on('click', function() { $(this) .addClass( ' complete'); 4 }); • Use a selector to create a jQuery selection. • Use . on() to indicate which event you want to respond to. It adds an event listener to each element in the selection. 1. The jQuery selection contains all of the <1 i >elements. 2. The . on() method is used to handle events. It needs two parameters: 3. The first parameter is the event you want to respond to. Here it is the c 1i ck event. 4 . The second parameter is the code you want to run when that event occurs on any element in t he matched set. This could be a named function or an anonymous function. Above, it is an anonymous function that adds a value of complete to the cl ass attribute. . on() was introduced in v 1.7 of jQuery. Prior to that. jQuery used separate methods for each event, e.g., . c 1i ck () and . focu s (). You may come across th em in older code, but you should only use the . on() method now. You will see more advanced options for this method on p330. JQUERY EVENTS Some of the most popular events that • on () deals w ith are listed below. jQuery also added some extras to make life easier, such as ready, which fires when the page is ready to be worked with. These are noted with a pink asterisk: * UI focus , blur, change KEYBOARD input, keydown, keyup, keypress MOUSE click, dblclick, mouseup, mousedown, mouseover, mousemove, mouseout, hover* FORM submit, select , change DOCUMENT ready* , load , unload* BROWSER 9 JQUERY error, resize , scro 11 EVENTS In this example, when the mouse moves over a list item, the content of its id attribute is written into the list item. The same happens if the user clicks on a list item (because mouseover does not work on touchscreen devices). The mouseout event also removes this extra information from the page to prevent the added content building up. c07/js/events.js JAVASCRIPT $(function() { var ids="; G) var $1istitems = $( ' 1i'); $listltems.on('mouseover click', function() ids= this.id; $listltems.children('span').remove(); $(this).append(' <span class="priori ty">' +ids+ '</span>'); }) ; $listltems.on('mouseout', function() $(this).children( ' span').remove(); }) ; }) ; 1. The selector finds all list items on the page. The resulting jQuery object is used more than once, so it is stored in a variable called $1 i st Items. lijJilJ51 2. The • on() method creates an event listener, which waits for when the user moves a mouse over a list item or clicks on it. It triggers an anonymous function. Note how the two events are specified in the same set of quote marks, with a space between them. The anonymous function: • Gets the value of the id attribute on that element. • • Removes <span> elements from all of the list items. Adds the value of the id attribute to the list item in a new <span> element. 3. The • mouseout () method triggers the removal of any child <span> elements to prevent build-up of added values. JQUERY@ THE EVENT OBJECT Every event handling function receives an event object. It has methods and properties related to the event that occurred. (!) Just like the JavaScript event object, the jQuery event object has properties and methods that tell you more about the event that took place. If you look at the function that is called when the event occurs, the event object is named in the parentheses. Like any other parameter, this name is t hen used w ithin the funct ion to refer to the event object. The example on the right uses the letter e as shorthand for the event object. However, as noted in the previous chapter, you should be aware that this shorthand is also often used for the error object. $( ' li ') . on( ' c l ick' function( e) eventType }) ; = e . type ; @® 1. Give the event object a parameter name. 2. Use that name in t he function to reference the event object . 3. Access the properties and methods of the object using the fami liar dot notation (the member operator). PROPERTY DESCRIPTION type Type of event, (e.g., click, mouseover) which Button or key that was pressed data An object literal cont aining extra information passed to t he function when the event fi res (See right-hand page for an example) target DOM element that initiated the event pageX Mouse position from left edge of viewport pageY Mouse position from top of viewport timeStamp Number of milliseconds from Jan 1st, 1970, to when the event was triggered (this is known as Unix Time). Does not work in Firefox. METHOD DESCR IPTIO N • preventOef au 1t () Prevents the default (e.g., submitting a form) • stopPropagati on() Stops the event bubbling up to ancestors 9 JQUERY EVENT OBJ ECT In this example, when users click on a list item, the date that the event happened on is written next to t hat item, along wi th t he type of event that triggered it. To achieve this, two properties of t he event object will be used: t i meStamp states when the event occurred; type states the kind of event t hat triggered it. To prevent the list from becoming cluttered with multiple date entries, whenever a list item is clicked, any <span> elements will be removed from t he list. c07/ js/event-object.js JAVASCRIPT $(funct ion() { CD ©[ ® © $(' l i ') .on('cli ck' fu nct i on(e) $( ' l i span').remove () ; var dat e = new Date() ; date.setTime(e .timeStamp); va r clic ked= dat e .t oDat eStri ng() ; $(this) .append('<span class="date"> ' +c lic ked+ ' ' + e.type + '</ span>' ); }) ; }) ; 1. Any <span> elements that already exist inside the <l i > elements are removed. i;IJiiJSI 2. A new Date object is created, and its time is set to the time at w hich the event was clicked. 3. The time the event was clicked is then converted into a date t hat can be read. 4. The date that the list item was clicked is written into the list item (along with the type of event that was used). Note that t he timeStamp property does not display in Firefox. JQUERY 8 ADDITIONAL PARAMETERS FOR EVENT HANDLERS The • on () method has two optional properties that let you: Filter the initial jQuery selection to respond to a subset of the elements; Pass extra information into the event handler using object literal notation. Here you can see two additional properties t hat can be used w ith the •on() method. When square brackets are used inside a method, t hey signify t hat the parameter is optional. Leaving out a parameter written in square brackets w ill not stop the method working. 1. This is the event(s) that you want to respond to. If you want to respond to more than one event, you can provide a spaceseparated list of event names, e.g., 'focus click ' will work on both focus and click . 2 . If you just want to respond to the event happening on a subset of t he elements in the initial jQuery selection, you can provide a second selector that w ill fi lter its descendants. 3. You can pass extra information to the function that is called when the event is triggered. This information is passed along with the event object (e). . on(events[, selector][, data], function(e) ); ~·@ 4. This is the func tion that should be run when the specified events occur on one of the elements in the matched set. 9 JQUERY ·~~ 5. The function is automatically passed the event object as a parameter, as you saw on the previous two pages. (Remember, if you use it you must give it a name in the parentheses.) ® Older jQuery scripts may use the . de 1ega te () method for delegation. However, since jQuery 1.7 • on() is the preferred approach to delegation. DELEGATING EVENTS In this example, the event handler will run w hen users click or mouseover items in the list, except for the last list item. It writes out the content of the element the user interacted wi t h, a status message (using the data property), and the event type. The information passed in the data property here uses object literal notation (so it could handle multiple properties). c07/ js/ event-delegation.js JAVASCRIPT $(function() { var listltem, itemStatus , eventType; $( 'ul ').on( CD ' click rnouseover', ': not(#four) ', {status: 'important'}, function(e) { listltem = 'Item: ' + e.target .textContent + '<br />'; itemStatus = 'Status: ' + e.data .status + ' <br />'; eventType = 'Event : ' + e.type; $('#notes').html(listltem + itemStatus + eventType); @ ® 4 } ); }) ; 19411111 1. The event handler is triggered by cl ick and mouseover events. 2. The selector parameter filters out the element whose id attribute has a value of four. 3. Additional data that will be used by t he event handler is passed in as an object literal. There is an extra element in the HTML for this example to hold the data that appears under the list. 4. The event handler uses the event object to display the content of the element the user interacts with, the informat ion from the data that was passed into the function, and t he event type, under the list in a white box. JQUERY@ EFFECTS When you start using jQuery, the effects methods can enhance your web page with transitions and movement. Here you can see some of the jQuery effects that show or hide elements and their content. You can animate them fading in and out, or slide them up and down. When an element that was previously hidden is shown, faded in, or slides into view, the other elements on the page may move to make space for it. When an element is hidden, has been faded out, or has slid out of view, the other elements on the page can move into the space the se elements took up. Methods w ith toggle in their name will look at the current state of the element (whether it is visible or hidden) and will switch to the opposite state. Increasingly it is possible to create animations using CSS3. They are often faster than their jQuery counterparts, but they only work in recent browsers. § JQUERY BASIC EFFECTS METHOD DESCRIPTION . show () Displays selected elements .hi de () Hides selected elements . togg 1e () Toggles between showing and hiding selected elements FADING EFFECTS METHOD DESCRIPTION . fadeln() Fades in selected elements making them opaque . fadeo ut() Fades out selected elements making them transparent . fadeTo() Changes opacity of selected elements . fade Togg 1e (} Hides or shows selected elements by changing their opacity (the opposite of their current state) SLIDING EFFECTS METHOD DESCRIPTION . sl i deUp () Shows selected elements with a sliding motion . s1i deDown() Hides selected elements with a sliding motion . s 1i deTogg l e() Hides or shows selected elements with a sliding motion (in the opposite direction to its current state) CUSTOM EFFECTS METHOD DESCRIPTION . delay() Delays execution of subsequent items in queue . stop() Stops an animation if it is currently running . animate() Creates custom animations (see p334) BASIC EFFECTS In this example, it appears as if list items are faded into view when the page loads. Each item is faded out when it is clicked on. In fact, the items are loaded normally along with the rest of the page, but then immediately hidden using JavaScript. c07/js/effects.js JAVASCRIPT 2 Once hidden, only then are they faded into view. This is so they will still be visible in browsers that do not have JavaScript enabled. $(function() { $('h2').hide().slideDown(); var $li = $('li'); $li.hide().each{function(index) { $(this).delay(700 * index) . fadeln(?OO); }) ; 3 $li.on('click', function() $(this) . fade0ut(700); }) ; }) ; 1. In the first statement, the selector picks the <h2> element and hides it so that it can be animated in. The chosen effect to show the heading is the • s l i deDown () method. Note how the methods are chained; there is no need to make a new selection for each of the tasks. i;IJiiiii 2. The second part causes the list of items to appear one by one. Again, before they can be faded in, they must be hidden. Then the • each () method is used to loop through each of the <l i> elements in turn. You can see that this triggers an anonymous function. Inside the anonymous function, the index property acts as a counter indicating which <l i > element is the current one. The .delay() method creates a pause before the list item is shown. The delay is set, multiplying the index number by 700 ms (otherwise all of the list items would appear at the same time). Then it is faded in using the fade In() method. 3. The final part creates an event listener that waits for the user to click on a list item. When they do, it will fade that item out to remove it from the list (the fade will take 700 milliseconds). JQUERY 8 ANIMATING CSS PROPERTIES The .animate() method allows you to create some of your own effects and animations by changing CSS properties. The CSS properties are written using camelCase notation, so the first word is all lowercase and each subsequent word starts with an uppercase character, e.g.: border-top-1 eft-radi us would become borderTopleftRadi us. You can animate any CSS property whose value can be represented as a number, e.g., height, width, and font-size. But not those whose value would be a string, such as font-family or text-transfonn. The CSS properties are specified using object literal notation (as you can see on the right-hand page). The method can also take three optional parameters, shown below. . animate({ II Styles you want to change }[,speed][, easing][, complete] ); ~~I @>-----------' 2. easing can have two values: linear (the speed of animation is uniform); or swing (speeds up in the middle of the transition. and is slower at start and end). 1. speed indicates the duration of the animation in milliseconds. (It can also take the keywords slow and fast.) 3. complete is used to call a function that should run when the animation has finished. This is known as a callback function. EXAMPLES OF JQUERY EQUIVA LENTS OF CSS PROPERTY NAMES bottom left right maxHeight minHeight marginTop outlineWidth fontSi ze l etterSpaci ng borderBottomWidth 8 top JQUERY backgroundPositionX maxWidth minWidth padding borderleftWidth margin paddingBottom wordSpaci ng backgroundPositionY l i neHei ght marginBottom height marginleft width marginRight paddingleft paddingRight paddingTop text Indent borderRadi us borderWi dth borderRightWidth borderTopWidth borderSpacing USING ANIMATION In this example, the .animate() method is used to gradually change the values of two CSS properties. Both of them have numerical values: opacity and paddi ng-1 eft. When the user clicks on a list item, it fades out and the text content slides to t he right. (This takes 500ms.) Once that is complete, a callback function removes the element. You can increase or decrease numeric values by a specific amount. Here, +=80 is used to increase the padding property by 80 pixels. (To decrease it by 80 pixels, you would use -=80.) c07/ js/an imate.js JAVASCRIPT $(function() { $(' l i').on( ' click', function() { ~ $(this).animate({ ~r opacity : 0.0, ~ paddingleft: '+=80' @ }, 500, function() { ~ $(this).remove(); d }) ; }) ; }) ; 1. All list items are selected and, when a user clicks on one of them, an anonymous function runs. Inside it, $(this) creates a new jQuery object holding the element the user clicked on. The .animate() method is then called on that jQuery object. l;IJiiJil 2. Inside the .animate() method, the opacity and paddi ngleft are changed. The value of the paddi ngleft property is increased by 80 pixels, which makes it look like the text is sliding to the right as it fades out. 3. The . animate() method has two more parameters. The first is the speed of the animation in milliseconds (in this case, 500ms). The second is another anonymous function indicating what should happen when the animation finishes. 4 . When the animation has finished, the callback function removes that list item from the page using the . remove() method. If you want t o animate between two colors, rather than using the .animate() method, there is a helpful jQuery color plugin here: https://github.com/jquery/ jquery-co 1or JQUERY @ TRAVERSING THE DOM When you have made a jQuery selection, you can use these methods to access other element nodes relative to the initia l selection. Each method finds elements that have a different relationship to those that are in the current selection (e.g., parents or children of the current selection). The . find() and .closest() methods both require a CSSstyle selector as an argument. For the other methods, the CSSstyle selector is optional. But if a selector is provided, both the method and selector must match in order for the element to be added to the new selection. For example, if you start with a selection that contains one list item, you could create a new selection containing the other items from the list using the .siblings() method. If you added a selector into the method such as this: • siblings(' .important ') then it would find only siblings with a cl ass attribute whose value included important. 8 JQUERY SELECTOR REQUIRED METHOD DESCRIPTION • find() All elements within current selection that match selector . closest() Nearest ancestor (not just parent) that matches selector SELECTOR OPTIONAL METHOD DESCRIPTION .parent () Direct parent of current selection . parents() All parents of current selection .children() All children of cur.rent selection . siblings() All siblings of current selection . next() Next sibling of current element . nextAll () All subsequent siblings of current element . prev() Previous sibling of current element . prevAll () All previous siblings of current element If the original selection cont ains multiple elements, these methods will work on all of the elements in the selection (which can result in quite an odd selection of elements). You may need to narrow down your initial selection before traversing the DOM . Behind the scenes, jQuery will handle the cross-browser inconsistencies involved in traversing the DOM (such as whitespace nodes being added by some browsers). TRAVERSING When the page loads, the list is hidden, and a link is added to the heading that indicates the users can display the list if they wish. The link is added inside the heading and, if the user clicks anywhere on the <h2> element, the <ul> element is faded in. Any child <1 i >elements that have a cl ass attribute whose value is hot are also given an extra value of comp 1ete. c07/j s/ travers ing.js JAVASCRIPT $(function() { var $h2 = $('h2'); $ ( Ul •hi de() ; $h2 . append('<a>show</a>'); I CD ~ @ ~ ~ (§) I ) $h2.on('click', function() $h2.next() . fadeln(SOO) .children( ' .hot') .addClass('complete'); $h2.find( ' a').fade0ut(); }) ; }) ; 1. A click event anywhere in the <h2> element will trigger an 3. The <u l > is faded into view. 4 . The .children() methoo 5. The . addClass() method anonymous function. 2 . The • next() method is used then selects any child elements of the <u 1> element, and the to select the next sibling after the <h2> element, which is the selector indicates that it should pick only those whose cl ass elements to add a class name of complete. This shows how you can chain methods and traverse <u 1> element. attribute has a value of hot. is then used on those <l i > from one node to another. 6. In the last step, the • find() method can be used to select lijJjilil the <a> element that is a child of the <h2> element and fade it out because the list is now being shown to the users. JQUERY § ADD & FILTER ELEMENTS IN A SELECTION Once you have a jQuery selection, you can add more elements to it, or you can filter the selection to work with a subset of the elements. The • add() method allows you to add a new selection to an existing one. The second table on the right shows you how to find a subset of your original selection. The methods take another selector as a parameter and return a filtered matched set. The items in this table that begin with a colon can be used wherever you would use a CSSstyle selector. The : not() and : has() selectors take another CSS-style selector as a parameter. There is also a selector called : contains () that lets you fi nd elements that contain specific text. The . is () method lets you use another selector to check whether the current selection matches a condition. If it does, it will return true. This is helpful in conditional statements. @ JQUERY ADDING ELEMENTS TO A SELECTION METHOD DESCRIPTION . add() Selects all elements that contain the text specified (parameter is case sensitive) FILTERING W ITH A SECOND SELECTOR METHOD / SELECTOR DESCRIPTION . fi 1ter() Finds elements in matched that in turn match a second selector . find() Finds descendants of elements in matched set that match the selector . not() / : not () Finds elements t hat do not match t he selector . has() / : has() Finds elements from the matched set that have a descendant that matches the selector : contains() Selects all elements that contain the text specified (parameter is case sensitive) The following two selectors are equivalent: $('1i') .not('.hot ') . addClass('cool'); $ (' l i: not ( . hot)'). addCl ass ('coo 1 '); In browsers that support querySel ector () / querySel ectorA11 () , : not() is faster than • not() and : has() is faster than . has() TESTING CONTENT METHOD DESCRIPTION . ; s () Checks whether current selection matches a condition (returns Boolean) FILTERS IN USE This example selects all list items and then uses different filters to select a subset of the items from the list to work with. The example uses both the filtering methods as well as the CSS-style pseudo-selector :not() . Once the filters have selected a subset of the list items, other jQuery methods are used to update them. c07/js/ fi l ters.js JAVASCRIPT var $listltems = $('li'); $listltems.filter( ' .hot:last').removeClass('hot'); @ $(' l i :not(.hot) ') .addClass( 'cool'); (]) $listitems.has('em ' ).addClass('complete ' ); G) 4 $listitems.each(function() var $this= $(this) ; if ($this.is('.hot')) { $this . prepend('Priority item: '); } }) ; ® $( ' li : contains("honey")').append(' (local) ' ); 1. The . filter() method finds the last list item with a c 1ass attribute whose value is hot. It then removes that value from the c 1ass attribute. ljJiiiil 2. The : not() selector is used within the jQuery selector to find <l i >elements without a va1ue of hot in their cl ass attribute and adds a value of coo1. 3. The • has() method finds the <l i >element that has an <em> element within it and adds the value comp 1ete to the c 1ass attribute. 4 . The • each() method loops through the list items. The current element is cached in a jQuery object. The • is () method looks to see if the <l i > element has a cl ass attribute whose value is hot. If it does, 'Priority item: ' is added to the start of the item. S. The : contains selector checks for <l i >elements that contain the text "honey" and appends the text " ( 1oca1)" to the end of those items. JQUERY s FINDING ITEMS BY ORDER Each item returned by a jQuery selector is given an index number, which can be used to filter the selection. The jQuery object is sometimes referred to as being an array-like object because it assigns a number to each of the elements that is returned by a selector. That number is an index number, which means it starts at 0. FINDING ELEMENTS BY INDEX NUMBER METHOD/ SELECTOR DESCRIPTION . eq () The element that matches the index number : l t () Elements with an index less than the number specified : gt() Elements with an index greater than the number specified ........................................................................................................................................... You can filter the selected elements based on this number using methods or these additional CSS-style selectors that jQuery has added. Methods are applied to the jQuery selection, whereas selectors are used as part of the CSS-style selector. On the right, you can see a selector which picks all of the <l i> elements from the list example used throughout this chapter. The table shows each list item and its corresponding index number. The example on the next page will use these numbers to select list items and update their cl ass attributes. 8 $( 1 li 1 ) INDEX HTML 0 <li i d= "one" cl ass=" hot "><em>fresh</em> figs</l i > 1 <li id="two" class="hot">pine nuts</li> 2 <li id="three" class="hot">honey</li> 3 <li id="four">balsamic vinegar</l i> .. JQUERY c USING INDEX NUMB ERS This example demonstrates how jQuery gives an index number to each of the elements in the jQuery selection. The : lt () and : gt() selectors and the • eq () method are used to find elements based on t heir index numbers. c07/ js/i ndex-numbers. j s JAVASCRIPT G) @ @ For each of the matching elements, the value of the c 1ass attributes are changed. $(function() { $ ( ' l i: l t (2) '). removeCl ass ('hot'); $( ' li ') . eq(O) .addClass('complete'); $( ' l i :gt(2) ') .addClass( 'cool'); }) ; 1. The : l t () selector is used in the selector to pick list items with an index number less than 2. It removes the value hot from their cl ass attribute. 2. The • eq () method selects the first item (using the number 0 because the index numbers start at zero). It adds the value of comp1ete to the cl ass attribute. 3. The : gt() selector is used in the jQuery selector to pick the list items with an index number higher than 2. It adds a value of coo1 to their cl ass attribute. •aH111• JQUERY 8 SELECTING FORM ELEMENTS jQuery has selectors that are designed specifically to work with forms, however, they are not always the quickest way to select elements. SELECTOR DESCRIPTION : button <button> and <input> elements whose type attribute has a value of button :checkbox <input> elements whose type attribute has a value of checkbox. Note that you get better performance with $('(type="checkbox"]') :checked Checked elements from checkboxes and radio buttons (see : selected for select boxes) : disabled All elements that have been disabled :enabled All elements that are enabled : focus Element that currently has focus. Note that you get better performance with$ (document. acti veEl ement) : file All elements that are file inputs : image All image inputs. Note that you get better performance using (type= 11 image"] You can also access elements in a form using the same selectors used to pick any element in jQuery. This will often be the faster option. : input All <button>, <input>. <select>, and <texta rea> elements. Note that you get better performance from selecting elements, then using • filter ( 11 : input 11 ) : password All password inputs. Note that you get better performance using$ ('input: password') It is also worth noting that. because jQuery handles inconsistencies in the way browsers treat whitespace, it is easier to traverse between form elements using jQuery than it is when you are using plain JavaScript. : radio All radio input s. To select a group of radio buttons, you can use$(' input (name="gender"] : radio') :reset All inputs that are reset buttons : selected All elements that are selected. Note that you get better performance using a CSS selector inside the • filter() method, e.g.. . filter(" : selected") : submit <button> and <input> elements whose type attribute has a value of submit. Note that you will get better performance using (type=" submit"] : text Selects <input> elements with a type attribute whose value is text, or whose type attribute is not present. You will likely get better performance from ('input: text') If you use one of these selectors on its own, jQuery will examine each element in the document to find a match (using code in the jQuery file, which is not as quick as CSS selectors). Therefore, you should narrow down the part of the document the script needs to look through by placing an element name or other jQuery selector before using the selectors shown on this page. 8 SELECTORS FOR FORM ELEMENTS JQUERY FORM METHODS & EVENTS RETRIEVE THE VALUE OF ELEMENTS METHOD DESCRIPTION . va 1() Primarily used with <input>, <se1ect>, and <text area> elements. It can be used to get the value of the first element in a matched set, or update the value of all of t hem. OTHER METHODS METHOD DESCRIPTION .filter() Used to filter a jQuery selection using a second selector (especially form-specific filters) . i s() Often used with fi lters to check whether a form input is selected/checked $ . i sNumeri c () Checks whether the value represents a numeric value and returns a Boolean. It returns true for the fo llowing: $.isNumeric(l) $.isNumeric(-3) $.isNumeric("2") $.isNumeric(4.4) $.isNumeric(+2) $.isNumeric{OxFF) EVENTS METHOD DESCRIPTION . on() Used to handle all events EVENT DESCRIPTION bl ur When an element loses focus change When the value of an input changes focus When an element gains focus select When the option for a <se 1ect> element is changed submit When a form is submitted When submitting a form, there is also a helpful method called • seri a1i ze () which you will learn about on p394-p395. The . va 1 () method gets the value of the first <input>, <select>,or<textarea> element in a jQuery selection. It can also be used to set the value for all matching elements. The . filter() and . is() methods are commonly used with form elements. You met them on p338. $. i sNumeri c () is a global method. It is not used on a jQuery selection; rather, the value you want to test is passed as an argument. A ll of the event methods on the left correspond to JavaScript events that you might use to trigger fu nctions. As with other jQuery code, they handle the inconsistencies between browsers behind the scenes. jQuery also makes it easier to work with a group of elements (such as radio buttons, checkboxes, and the options in a select box), because, once you have selected the element s, you can simply apply individual methods to each of them without having to write a loop. There is an example using forms on the next page, and there are more examples in Chapter 13 . JQUERY@ WORK ING WITH FORMS In this example, a button and form have been added under the list. When the user clicks on the button to add a new item, the form will come into view. c07 /form. html The form lets users add a new item to the list with a single text input and a submit button. (The new item button is hidden when the form is in view.) When the user presses the submit button, the new item is added to the bottom of the list. (The form is also hidden and the new item button is shown again.) llHJ1il <!-- li st goes here -->... </ul > <div id="newitemButton"><butt on href= "#" id="showFonn">new item</ button></div> <form id ="newitemForm"> <input type="text" i d="itemDescr i ption" placeholder="Add description . . . " /> <input type="submit" i d="addButton " val ue"'"add" / > </form> l;IJillil 8 JQUERY 1. New jQuery objects are created to hold the new item button, the form to add new items, and the add button. These are cached in variables. 2. When the page loads, the CSS hides the new item button (and shows the form), so jQuery methods show the new item button and hide the form. 3. If a user clicks on the new item button (the <button> element whose id attribute has a value of showForm), the new item button is hidden and the form is shown. c07 / js/ form.js JAVASCRIPT ${function() { var $newitemButton = $('#newitemButton'); var $newitemForm $('#newitemForm') ; var $textlnput = $('input:text') ; $newitemButton.show(); $newitemForm.hide{); $( 1 #showForm') .on('click'. function() { $newltemButton . hide(); $newitemForm. show{); }) ; © ® © 0 @{ $newitemForm.on( ' submit'. function(e){ e . preventDefault(); var newText = $('input:text') . val (); $( ' li : last') . after(' <li> ' + newText + '</li>') ; $newitemForm. hide{) ; $newltemButton.show{); $textlnput . val( ' ' ); }) ; }) ; 4. When the form is submitted, an anonymous function is called. It is passed the event object. 5. The . preventOefault() method can stop the form being submitted. 6. The : text selector picks the <input> element whose type attribute has a value of text, and the •va 1 () method gets the value the user entered into it. This value is stored in a variable called newText. 7. A new item is added to the end of the list using the .after() method. 8. The form is hidden, the new item button is shown again, and the content of the text input is emptied (so the user can add a new entry if they want to). JQUERY 8 CUTTING & COPYING ELEM ENTS Once you have a jQuery selection, you can use these methods to remove those elements or make a copy of them. The . remove () method deletes t he matched elements and all of their descendants from the DOM tree. The . detach() method also removes the matched element s and all of their descendants from the DOM tree; however, it retains any event handlers (and any other associated jQuery data) so they can be inserted back into the page. The . empty () and • unwrap () methods remove elements in relation to the current selection. The . cl one () method creates a copy of the matched set of elements (and any descendants). If you use this method on HTML that contains id attributes, the value of the id attributes would need updating otherwise they would no longer be unique. If you want to pass any event handlers, you should add true between the parentheses. 8 JQUERY CUT METHOD DESCRIPTION . remove() Removes matched elements from DOM tree (including any descendants and text nodes) . detach () Same as . remove () but keeps a copy of them in memory . empty () Removes child nodes and descendants from any elements in matched set . unwrap () Removes parents of matched set, leaving matched elements COPY METHOD DESCRIPTION . cl one () Creates a copy of the matched set (including any descendants and text nodes) PASTE You saw how to add elements into the DOM tree on p318. CUT, COPY, PASTE In this example, you can see parts of the DOM tree being removed, duplicated, and placed elsewhere on the page. The HTML has an extra <p> element after the list, which contains a quote. It is moved to a new position under the heading. JAVASCRIPT In addition, the first list item is detached from the list and moved to the end of it. c07/ js/cut-copy-paste .js $(function() { var $p = $('p'); var $clonedQuote = $p .clone(); Q) $p.remove(); @) $clonedQuote . insertAfter('h2'); CD Q) ~ @) var $moveltem = $( ' #one') .detach(); $moveltem.appendTo('ul '); }) ; l;IJillil 1. A jQuery selection is made containing the <p> element at the end of the page, and this is cached in a variable called $p. 2. That element is copied using the . cl one() method (along with its content and child elements). It is stored in a variable called $cl onedQuote. 3. The paragraph is removed. 4 . The cloned version of the quote is inserted after the <h2> element at the top of the page. 5. The first list item is detached from the DOM tree and stored in a variable called $move Item (effectively removing it from t he DOM tree). 6. That list item is then appended to the end of the list. JQUERY 8 BOX DIMENSIONS These methods allow you to discover or update the width and height of all boxes on the page. CSS treats each element on a web page as if it were in its own box. A box can have padding, a border, and a margin. If you set the width or height of the box in CSS, it does not include any padding, border, or margin - they are added to the dimensions. The methods shown here allow you to retrieve t he w idth and height of the first element in the matched set. The first two also allow you to update the dimensions of all boxes in the matched set. The remaining methods give different measurements depending on whether you want to include padding, border, and a margin. Note how the . outerHei ght () and • outerWi dth () methods take a parameter of true if you want the margin included. RETRIEVE OR SET BOX DIMENSIONS METHOD DESCRIPTION . height() Height of box (no margin, border, padding) .width() Width of box (no margin, border, padding) (1) RETRIEVE BOX DIMENSIONS ONLY METHOD DESCRIPTION . i nnerHei ght () Height of box plus padding . i nnerWi dth () Width of box plus padding ( 2) .outerHeight()' Height of box plus padding and border .outerWi dth () Width of box plus padding and border ( 3) . outerHei ght (true) Height of box plus padding, border, and margin .outerWi dth(true) Width of box plus padding, border, and margin (4) .width() . i nnerWi dth () . outerWi dth () .outerWidth(true) When retrieving dimensions, these methods return a number in pixels. 8 JQUERY PADDING • BORDER MARGIN CHANGING DIMENSIONS This example demonstrates how the .height() and .width() methods can be used to retrieve and update box dimensions. The page displays the height of the container. It then changes the w idth of the list items using percentages and pixels. c07/js/d imens ions.js JAVASCRIPT $(funct ion() { var listHeight = $('#page ' ).height(); @ $( ' ul ').append( '<p>Height: '+ listHeight + 'px</p>'); ® $ (I 1i I) •width ( 50% I ) ; ~ 5( ' 1i #one').width(125); ~ $('1i #two').width( ' 75%'); G) J }) ; 1. A variable called l is tHei ght is created to store the height of the page container. It is obtained using the . height() method. lflj1J51 2. The height of the page is written at the end of the list using the . append () method and may vary between browsers. 3. The selector picks all the <l i> elements and sets their width to 50% of their current width using the . width() method. 4. These two statements set the width of the first list item to 125 pixels and the width of the second list item to be 75% of the w idth it was when the page loaded . Measurements in percentages or ems should be given as a string, w ith the suffix% or em. Pixels do not require a suffix and are not enclosed in quotes. JQUERY 8 W INDOW & PAGE DIMENS IONS The • height() and • width() methods can be used to determine the dimensions of both the browser window and the HTML document. There are also methods to get and set the position of the scrol l bars. On p348, you saw that you can get and set the height or width of a box using the . height () and . width() methods. These can also be used on a jQuery selection containing the window or document objects. METHOD DESCRIPTION . height() Height of the jQuery select ion .width() Width of the jQuery selection . scro 11 Left () Gets the horizontal position of the scroll bar for the first element in the jQuery selection, or sets the horizontal scroll bar position for matched nodes . scrollTop() The browser can display scroll bars if the height or width of: • A box's content is larger than its allocated space. • The current page represented by the document object is larger than the dimensions of the browser window's viewable area (viewport). The . scro 11 Left() and • scro l lTop () methods allow you to get and set the position of the scroll bars. Gets the vertical position of the scroll bar for the first element in the jQuery selection, or sets the vertical scroll bar position for matched nodes ... oc: $(window).height(); ~~=====:=:==~=~=~:::J This method will often When retrieving dimensions, these methods return a number in pixels. $(document) . height{); return the incorrect value unless a DOCTYPE declaration is specified for the HTML page. 1 ! 8 JQUERY POSITION OF ELEMENTS ON THE PAGE The .offset() and .position() methods can be used to determine the position of elements on the page. METHOD DESCRIPTION . off set () Gets or sets coordinates of the element relative to the top left-hand corner of the document object (1) . position ( ) Gets or sets coordinates of the element rela tive to any ancestor that has been taken out of normal flow (using CSS box offsets). If no ancestor is out of normal flow, it will return the same as .offset() (2) ••• • . . . - - - - - - - - - - - - - - - - - - , c: ~ . of fset() t---- <D l . pos i ti on() To get the offset or position, store the object that is returned by these methods in a variable. Then use the l eft or r i ght properties of the object to retrieve their position. The two methods on the left help you to determine the position of an element: • • Within the page . In rela tion to an ancestor that is offset from normal flow. Each of them returns an object that has two properties: top - the position from the top of the document or containing element. 1eft - the position from the left of the document or containing element. As with other jQuery methods, when used to retrieve information, they return the co-ordinates of the first element in the matched set. If they are used to set the position of elements, they will update the position of all elements in the matched set (putting them in the same spot). var off set = $ ( 'di v ' ) . offset ( ); var text = ' Left : ' + off set .l eft + ' Right: ' + offset.right; JQUERY@ DETERMINING POSITION OF ITEMS ON THE PAGE In this example, as the user scrolls down the page, a box slides into view if they get within 500 pixels of the footer. We will call this part of the page the end zone, and you need to work out the height at which the endZone starts. Every t ime the user scrolls, you then check the position of the lllii@i!!ii c07/pos i t ion.html ... <li>quinoa</li> </ul> <p id="footer">© Li stKi ng</p> <div id="slideAd"> Buy ListKing Pro for only $1.99 </div> </div> <script src=" j s/jquery-1.9.1.mi n.js"></script> <script src="js/position.js"></script> scroll bar from the top of the page. llH'i'"' If the scroll bar is further down the page than the start of the end zone, the box is animated into the page. If not, then the box is hidden. The HTML for this example contains an extra <div> element at the end of the page containing the advert. A lot of items have been added to the list to create a long page that scrolls. ~lA BUY LISTKING PRO ~ FOR ONLY $1.99 § JQUERY 1. Cache the window and advert. 2. The height of the end zone is calculated, and stored in a variable called endZone. 3. The scro 11 event triggers an anonymous f unction every time the user scrolls up or down. 4. A conditional statement checks if the user's position is further from the top of the page than the start of the end zone. S. It the condition returns true, the box slides in from the righthand edge of the page. This takes 250 milliseconds. 6. If the condition is fa lse or the box is in t he middle of animating, it is stopped using the • stop () method. The advert then slides off the right-han d edge of the page. Again, this animation will take 250 milliseconds. c07/ js/ posi t ion. j s JAVASCRIPT $(function() { var $window = $(window) ; ~ var $slideAd = $( ' #slideAd') ; ~ var endZone = $('#footer').offset().top - $window.height() - d ~ 500; $window.on('scroll ',function() { @) if ® ® ( (endZone) < $window.scro1 1Top() ) { $s l ideAd . animate(I 'right ' : 'Opx ' }, 250); else { $sl i deAd.stop(true).ani mate({ 'right': '-360px'}, 250); }) ; }) ; CALCULATING THE END ZONE Calculate the height at which the box should come into view by: You can tell how far the user has scrolled down the page using: a) Getting the height from t he top of the page to the top of the footer (the gray bar) in pixels. $(window) . scrol 1Top(); b) Subtracting the height of the viewport from this result. c) Subtracting a further SOOpx for the area where the box will come into view (shown in pink). If the distance extends down further than the height at which the end zone should show, the box should be made visible. If not, then the box should move off the page. JQUERY@ LOADING JQUERY FROM A CDN When a page loads jQuery from a CDN, you will often see a syntax like the one shown below. It starts with a <script> tag that tries to load the jQuery file from the CDN. But note that the URL for the script starts with two forward slashes (not http:). This is known as a protocol relative URL. If the user is looking at the current page through https, then they will not see an error that tells them there are unsecure items on the page. Note: This does not work locally with the f i l e:// protocol. This is often followed by a second <script> tag that contains a logical operator, which checks to see if jQuery has loaded. If it has not loaded, the browser tries to load the jQuery script from the same server as the rest of the websi te. liillfill <script src="//ajax .googl eapi s . com/ ajax/l i bs/ jquery/ 1.10 . 2/ jquery .min. js "> </ script> <script> window .jQuery 11 document. write (' <script src=" j s/j query- 1.10 . 2 . j s 11 ><\jscri pt> ' ) </script> The logical operator looks for the jQuery object that the jQuery script makes available. If it exists, then a truthy value is returned and the logical operator short circuits (see p157). If jQuery has not loaded, then the document .write () method is used to add a new <script> tag into the page. This will load a version of jQuery from the same server as the rest of the website. The fallback option is important because the CDN may be unavailable, the file may have moved, and some countries ban some domain names (such as Google). JQUERY 9 . WHERE TO PLACE YOUR SCRIPTS / The position of <scri pt> elements can affect how quickly a web page seems to load . SPEED HTML LOADED INTO THE DO M TREE In t he early days of th e web, developers were told to place the <script> tags in the <head> of the page Whenever a script is accessing t he HTML within a as you do with style sheets. However, this can make pages seem slower to load. into the DOM tree before the script can work. (This is often referred to as the DOM having loaded.) web page, it also needs to have loaded that HTML Your web page may use fi les from severa l different You can use the load event to trigger a functi on so locations (e.g., images or CSS files might be loaded from one CDN, jQuery could be loaded from the that you know the HTML has loaded. However, it fires only when the page and all of its resources load. jQuery or Google CDNs, and fonts might be loaded from another third party). You can also use the HTMLS DOMContentLoaded event, but it does not work in older browsers. Usually a browser will collect up to two fi les at a time ul from each different server. However, when a browser starts to download a JavaScript file, it stops all other downloads and pauses laying out the page until the script has fi nished loading and been processed. l; l; +iii LOADED NOTYET LOADED Therefore, if you place the script at the end of the page before the closing </body> tag, it will not affect script could access the first two <l i >elements, but t he rendering of t he re st of the page. not the third or fourth. using alternatives to scri pts. For example, use CSS for animations 8 I I • If the script tries to access an element before it has loaded, it causes an error. In the diagram above, the Where possible, do consider < If your page is slow to load and you only wan t to include a small At the time of writing, this technique was commonly used or HTMLS's autofocus attribute amount of code before the rest of the page has loaded, you can rather than using the load event place a <script> tag within the but it is acknowledged that it makes code much harder to to bring focus to an element. body of the page. maintain. by Google for speed advantages, i! .. , 1I I I 1 I 1 I ,1 1 JQUERY JQUERY DOCUMENTATION For an exhaustive list of the functionality provided in jQuery, visi t http : //api . j query . com It is not possible t o teach you everything about W hat you have learned should also give you enough jQuery in one (albeit long) chapter. But you have seen many of th e most popular features, and experience to work with t he comprehensive jQuery documentation available online at: you should now know enough about jQuery to http: //api .jquer y .com understand how it works and how to make use of it in your scripts. This site lists each method and property available to Throughout the remaining chapters of this book, you you, along with new functionality added in the latest versions, and notes that indicate which features are will see many more examples that use jQuery. scheduled to be dropped. HOW THE DOCUM ENTATION WORKS ' bocoup ~- On the left-hand side of the page, you w ill see the different types of functionalit y that you can explore. W hen you click on any of t he methods in th e main column, you w ill see a list of t he parameters th at it can take. When parameters are optional, t hey are show n in square brackets. You will also find deprecated methods. This means that you are no longer advised to use this markup because it is likely to be removed from fut ure versions of jQuery ( if it has not already been remove d). s JQUERY - ---__ ...., ... -..-_ ........._ --___ ·--__-·---··---..... ..,. - ..... ,,, ._..._._ EXTENDING JQUERY WITH PLUGINS Plugins are scripts that extend the functionality of the jQuery library. Hundreds have been written and are available for you to use. Plugins offer funct ionality that is not included in the jQuery library. They usually deal with a Plugins are written so that new methods extend th e jQuery object and can, therefore, be used on a particular task such as creating slideshows or video players, performing animations, transforming data, jQuery selection. As long as you know how to do the following with jQuery: enhancing forms, and displaying new data from a remote server. • Make a selection of elements • Call a method and use parameters To get an idea of the number and range of plugins You can use a lot of the functionalit y of these plugins without having to write the code yourself. In Chapter available, see http: //plugins . jquery.com. All of these are free for you to download and use on your own sites. You may also find other sites listing 11, you will see an example of how to create a basic jQuery plugins for sale (such as codecanyon. net). jQuery plugin. HOW TO CHOOS E A PLU GI N When you are choosing a plugin to work with, it can be worth checking that it is still being maintained or whether other people have experienced problems using it. Finding out th e follow ing can help: t:!l llt•h•\llMl11i.• _______ _____- - ...,._ _ ::::... __.. _,.. .. "':.." '::' ::::..:=:::::: - -- :.::...°':':". ~ ==-=·-. ===l~ -- ·· • • When was the plugin last updated? How many people are watching the plugin? • What do the bug reports say? If you ask a question or find a bug in a script. bear in mind t hat their authors may have a day job and only maintain these plugins in their spare time to help others and to give back to th e community. JQUERY s JAVASCRIPT LIBRARIES jQuery is an example of what programmers call a JavaScript library. It is a JavaScript file that you include in your page, which then lets you use the functions, objects, methods, and properties it contains. 9 The concept of a library is that it allows you to borrow code from one fil e and use its functions, objects, methods, and properties in another script. jQuery is the most widely used library on the web, but when you have learned it. you might like to explore some of the other libraries listed below. Once you have included the script in your page, its functionality is available to use. The documentation for the library w ill tell you how to use it. Popular libraries have the advantage that t hey will be welltested, and some have a whole team of developers who work on them in their spare time. One of the main drawbacks with a library is that they will usually contain functionality that you will not need to use. This means users have to download code t hat will not be needed (which can slow your site down). You may find that you can strip out the subset of the library you need or indeed write your own script to do that job. DOM & EVENTS USER INTERFACE GRAPHICS & CHARTS Zepto.js YUi Dojo.js M ooTools.js jQuery UI jQuery Mobile Twitter Bootstrap YUi Chart.js 03.js Processing.js Raphael.js TEMPLATING WEB APPLICATIONS COMPATIBILITY Mustache.js Handlebars.js jQuery Mobile Angular.js Backbone.js Ember.js Modernizr.js YepNope.js Require.js JQUERY PREVENTING CONFLICTS WITH OTHER LIBRARIES Earlier in the chapter, you saw that $ () was shorthand for j Query (). The $ symbol is used by other libraries such as prototype.js, MooTools, and YUi. To avoid conflicts with those scripts, use these techniques. INCLUDING JQUERY AFTER OTHER LIBRARIES INCLUDING JQUERY BEFORE OTHER LIBRARIES Here, jQuery's meaning of$ takes precedence: Here, the other scripts' use of $ takes precedence: <script src="other . js"></script> <script src="jquery . js"></script> <script src=" jquery . js"></script> <script src="other .j s"></ script> You can use the . noConfl i ct() method at the start of your script, to tell jQuery to release the$ shortcut so that other scripts can use it. Then you can use the full name rather than the shortcut: $ will have the meaning defined in the other library. There is no need to use the . noConfl i ct() method because it will have no effect. But you can continue to use the ful l name jQuery: jQuery.noConflict(); jQuery(function() { jQuery('div') . hide(); }) ; jQuery(document ).ready( function () jQuery('div') .hi de(); }) ; You can wrap your script in an llFE and still use$: You can pass$ as an argument to the anonymous function called by the . ready() method like so: jQuery . noConflict{); (function($) { $( 'd.i v') . hide(); })(jQuery); j Query(document) .ready(function($) $('div') . hide(); }) ; Or you can specify your own alias instead, e.g., $j: This is equivalent to the code shown above: var $j = jQuery . noConflict(); $j{document) .ready(function() $j('div') . hide(); }) ; jQuery(function($) { $('div') .hide(); }) ; JQUERY 8 EXAMPLE JQUERY This example brings together a number of th e techniques you have seen in this chapter to create a list that users can add items to and remove items from. • Users can add new list items. • They can also click to indicate that an item is complete (at which point it is moved to t he bottom of th e list and marked as comp1et e). • Once an item is marked as comp 1ete, a second click on the item will remove it from the list. An updated count of the number of items there are in the list will be shown in the heading. As you will see, the code using jQuery is more compact than it would be if you were writing this example in plain JavaScript. and it w ill work across browsers even t hough t here is no explicit tailback code. Because new items can be added to the list, the events are handled using event delegation. When the user clicks anywhere on the <u 1>element. the . on () event method handles the event. Inside the event handler, there is a conditional statement to check whether the list item is: • Not complete - in which case, the click is used to change the item to • Complete - in which case, the second click on the item fades it out and removes it from the list altoget her. complete, move it to the bottom of the list, and update the counter. The use of conditional statements and custom functions (used for the counter) illustrate how jQuery techniques are used in combination with traditional JavaScript that you have been learning throughout the book. The appearance and removal of the elements is also animated, and these animations demonstrate how methods can be chained toget her to create complex interactions based on the same selection of elements. JQUERY @ EXAMPLE JQUERY c07/ js/ exampl e.js JAVASCR I PT $(fun ct ion() II SETUP var $list, $newltemFonn, $newltemButton; var item = ''; $list= $('ul'); $newitemForm = $('#newltemForm') ; $newltemButton = $('#newltemButton') ; $( 'l i ').hide() .each (function(i ndex) { $(this).delay(450 * index) . fade ln( l600 ); II II II II II II item is an empty string Cache the unordered list Cache form to add new items Cache button to show form Hide list items Then fade them in }) ; I I ITEM COUNTER function updateCount() { II Oeclare function var items = $('li[class!=complete]') .length; II Number of items in list $( ' #counter').text(items); II Added into counter circle } II Call the function updateCount (); II SETUP FORM FOR NEW ITEMS $newltemButton .show{); $newltemFonn.hide(); $(' #showFonn') .on('click', function() { $newltemButton.hide{); $newltemFonn.show(); II II II II Show the button II Hide the fonn When new item clicked Hide the button Show the fonn }) ; The entire script will wait until the DOM is ready before running, because it is inside the shorthand for the document. ready () method. Variables are created that will be used in the script, including jQuery selections that need to be cached. 8 JQUERY The updateCounter() function checks how many items are in the list and writes it into the heading. It is called straight away to calculate how many list items are on t he page when it loads, and then write that number next to the heading. The form to add new items is hidden when the page loads, and is shown when the user clicks on the add button. When the user clicks on the add button a new item is added to the form and the updateCounter() is called. .• EXAMPLE JQUERY c07/ js/ exampl e.js JAVASCRIPT II ADDING A NEWLIST ITEM $newitemForm. on ('submit', func t ion ( e) e. preventDefault(); var text= $('input:text').val() ; $list.append('<li> ' +text+ '<lli>'); $( 'input:text ' ) .val ( updateCount () ; 11 ); }) ; II II II II II II When a new item i s submitted Prevent form being submitted Get val ue of text i nput Add item to end of the l ist Empty t he text input Update t he count II CLICK HANDLI NG - USES DELEGATION ON <ul> ELEMENT $list.on(' cl i ck', 'li ', function() { var $this= $(this); II Cache t he el ement i n a j Query object var complete= $this.hasCl ass( ' complete'); II Is item complete if (comp lete === true) $this.animate({ opacity : 0.0, paddingLeft: '+=180' }, 500, 'swing', function() $this. remove() ; } }) ; II II II II }) ; else { II i tem= $th i s.text(); II II $thi s.remove(); II $list .append('<li cl ass=\"complete\">' II .hide().fadein(300); updateCount(); II II II Check if i tem i s complete If so, an i mate opacity+ padd i ng Use callback when ani mati on complet es Then completely remove this it em Otherwise indi cate i t is complete Get t he t ext from t he l ist i t em Remove the list item Add back t o end of l ist as complete +item + '<ll i>' ) Hide it so it can be faded i n Update t he count er End of el se option End of event handler }) ; The • on() event method listens for the user clicking anywhere on the list because t his script uses Next, the code checks if t hat element has a class name of When it is added to t he end of the list, its c 1ass attri bute is given a comp 1ete. If it does, then the list value of comp 1ete. event delegation. When they do, item is animated out of view and the element that was clicked on is stored in a jQuery object and removed. If it was not already complete, then it is moved to the end of the list. cached in a variable called $this. Finally, updateCount () is called to update the number of items left to do on the list. JQUERY 8 jQuery is a JavaScript file you include in your pages. Once included, it makes it faster and easier to write cross-browser JavaScript, based on two steps: Using CSS-style selectors to collect one or more nodes from the DOM tree. Using jQuery's built-in methods to work with the elements in that selection. jQuery's CSS-style selector syntax makes it easier to select elements to work with. It also has methods that make it easier to traverse the DOM. jQuery makes it easier to handle events because the event methods work across all browsers . jQuery offers methods that make it quick and simple to achieve a range of tasks that JavaScript programmers commonly need to perform. Ajax is a technique for loading data into part of a page without having to refresh the entire page. The data is often sent in a format called JavaScript Object Notation (or JSON). The ability to load new content into part of a page improves the user experience because the user does not have to wait for an entire page to load if only part of it is being updated. This has led to a rise in so-called single page web applications (web-based tools that feel more like software applications, even though they run in the browser). This chapter covers: WHAT AJAX IS 8 DATA FORMATS JQUERY & AJAX Ajax allows you to requ est Servers typically send jQuery makes it easier data from a server and back HTML, XML, or load it without having to JSON, so you will learn to create Ajax request s and process the data the refresh the entire page. about these formats. server return s. AJAX&JSON WHAT IS AJAX? You may have seen Ajax used on many websites, even if you were not aware that it was being used. Moog Music Inc. @moogmusicinc multimoog Born today in 1896: Leon Theremin, physicist, spy & inventor of one of the earliest electronic musical instruments. pic.twitter.com/theremin multimoog multimoog for sale multimodal Live search (or autocomplete) commonly uses Ajax. You may have seen it used on the Google website. When you type into the search bar on the home Websites with user-generated content (such as Twitter and Flickr) may allow you to display page, sometimes you w ill see results coming up photographs) on your own website. This involves before you have finished typing. collecting data from their servers. $4,995. esig.. mm ~ 1 item added to cart view cart .._~~~~~~~~~~~~~~pg odel D. Fat osc llators and warm Moog filters give it that Sometimes when you are shopping online and add items to your shopping cart, it is updated without you leaving the page. At the same time, the site may your information (such as your latest tweets or Choose your username Iminimoog This username is taken. Try another? Available: minimoog70 If you are registering for a website, a script may check whether your username is available before you have completed the rest of the form. display a message confirming the item was added. Sites may also use Ajax to load data behind the scenes so that they can use or show t hat data later on. e AJAX&JSON WHY USE A JAX? Ajax uses an asynchronous processing model. This means the user can do other things while the web browser is waiting for the data to load, speeding up the user experience. USING AJAX WH ILE PAG ES ARE LOA DING USING AJAX WHEN PAGES HAVE LOADED When a browser comes across a <script> tag, it will Once a page has loaded, if you want to update w hat typically stop processing t he rest of the page until it has loaded and processed th at script. This is kn own as a synchronous processing model. the user sees in the browser window, typically you would refresh the entire page. This means t hat the user has to wait fo r a whole new page to download and be rende red by the browser. When a page is loading, if a script needs to collect data from a server (e.g., if it collects fina ncial exchange rates or status updates), t hen the browser would not just wait for the script to be loaded and processed; it would also have to wait fo r a server to send the data that the scri pt is going to display. With Ajax, if you only want to update a part of the page, you can just update the content of one element. This is done by intercepting an event (such as the user clicking on a link or submitting a form) and requesting t he new content from the server using an asynchronous req uest . W ith Ajax, the browser can request some data from a server and - once that data has been requested continue to load t he rest of the page and process the user's interactions with t he page. It is known as an asynchronous (or non-blocking) processing model. While t hat data is loading, the user can continue to interact w ith the rest of the page. Then, once the server has responded, a special Ajax event will trigger anot her part of the script tha t reads th e new data from t he server and updates just t hat one part The browser does not wait for the t hird party data in of the page. order to show t he page. When t he server responds w ith the data, an event is fired ( like the load event that f ires w hen a page has loaded). This event can then call a f unction that processes t he data. Because you do not have to refresh the whole page, the data will load faster and the user can still use the rest of th e page w hile they are waiting. Historically, AJAX was an acronym for the technologies used in asynchronous requests like this. It stood for Asynchron ous JavaScript And XML. Since then, technologies have moved on and the term Ajax is now used to refer to a group of technologies that offer asynchronous ·functionality in the browser. AJAX&JSON@ · ---- ·:= =-- == · --= - -·- --·-·------ ·----·----·- - --- HANDLING AJAX REQUESTS & RESPONSES To create an Ajax request, browsers use the XMLHttpRequest object. When the server responds to the browser's request, the same XMLHt tpReques t object will process the result. T HE REQUEST G) var xhr = new XMLHttpRequest () ; @ xhr . open ( 'GET', 'datal test.json', true); ® xhr . send ( ' search=ardui no ' ); 1. An instance of the XMLHttpRequest object is created using object constructor notation (which you met on p106). It uses the new keyword and stores the object in a variable. The variable name xhr is short for XMLHttpRequest (the name of the object). 2. The XMLHttpRequest object's open () method prepares the request. It has three parameters (which you meet on p379): i) The HTTP method ii) The url of the page that will handle your request iii) A Boolean indicating if if should be asynchronous 3. The send() method is the one that sends the prepared request to t he server. Extra information can be passed to the server in the parentheses. If no extra information is sent, you may see the keyword null used (although it is not strictly needed): xhr.send(null). THE RES PONSE G) xhr . onload = funct i on() @ if (xhr.status === 200) II Code to process the resul ts from the server 1. When the browser has received and loaded a response from the server, the on l oad event will fire. This will trigger a function (here, it is an anonymous fu nction). 2 . The function checks the status property of the object. This is used to make sure t he server's response was okay. ( If this property is blank, check the set up of the server.) Note that IE9 was the first version of IE to support this way of dealing w ith Ajax responses. To support older browsers, you can use jQuery (see p388). AJAX&JSON 8 DATA FORMATS The response to an Ajax request usually comes in one of three formats: HTML, XML, or JSON. Below is a comparison of these formats. XML and JSON are introduced over the next three pages. HTML XML You are probably most familiar with HTML, and, when you want XML looks similar to HTML, JavaScript Object Notation but the tag names are different (JSON) uses a similar syntax to update a section of a web page, it is the simplest way to because they describe the data that they contain. The syntax is to object literal notation (which you met on p102) in order to get data into a page. also more strict than HTML. represent data. BENEFITS BENEFITS BENEFITS • It is easy to write, request. and display. It is a flex ible data format • and can rep resent complex • • The data sent from the server goes straight into the page. JSON -; There's no need for the browser to process it (as with the other two methods). structures. It works well with different • platforms and applications. is processed using the same • ItDOM met hods as HTML. It can be called from any domain (see JSON-P/CORS). It is more concise (less • verbose) than HTML/XML. It is commonly used with • JavaScript (and is gaining wider use across web applications). DRAWBACKS DRAWBACKS DRAWBACKS • The server must produce th e HTML in a fo rmat that is • • ready fo r use on your page. add a lot of extra characters • It is not well-suited for use in applications other than web to th e data being sent. • browsers. It does not have good data portability. • The request must come from the same domain* (see below). It is considered a verbose language because the tags The request must come from the same domain as the rest of the page* (see below). • It can require a lot of code to process the result. The syntax is not forgiving. A missed quote, comma, or colon can break th e file. • Because it is JavaScript, it can contain malicious content (see XSS on p228). Therefore, you should only use JSON that has been produced by trusted sources. • Browsers only let Ajax load HTML and XML from the same domain name as the rest of the page (e.g., if the page is on www. example. com, the Ajax request must return data from www. example. com). 8 AJAX&JSON r XML: EXTENSIBLE MARKUP LANGUAGE XML looks a lot like HTML, but the tags contain different words. The purpose of the tags is to describe the kind of data that they hold. <?xml version="l . O" encoding="utf-8" ?> <events> <event> <location>San Francisco , CA</locat ion> <date>May l </date> <map>img/map-ca . png</map> </ event> <event> <location>Austin, TX</ location> <date>May 15</ date> <map>img/ map-tx.png</ map> </ event> <event> <location>New York, NY</location> <date>May 30</ date> <map>img/map-ny . png</ map> </ event> </events> You can process an XM Lfile using the same DOM methods as HTML. Because different browsers deal with whitespace in HTML/XML documents in different ways, it is easier to process XML using jQuery rather than plain JavaScript (just as it can be with HTML): In the same way that HTMLis a markup language that can be used to describe the structure and semantics of a web page, XML can be used to create markup languages for ot her types of data - anything from stock reports to medical records. The tags in an XML file should describe the data they contain. As a result, even if you have never seen the code to the left. you can see that the data describes information about several events. The <events> element contains several individual events. Each individual event is represented in its own <event> element. XML works on any platform and gained w ide popularity in the early 2000s because it made it easy to transfer data between different types of applications. It is also a very flexible data format because it is capable of representing complex data structures. AJAX&JSON 8 JSON: JAVASCRIPT OBJECT NOTATION Data can be formatted using JSON (pronounced "Jason"). It looks very similar to object literal syntax, but it is not an object. JSON data looks like the object literal notation which you met on p102; however, it is just plain text data (not an object). The distinction may sound small but remember that HTML is just plain text, and the browser converts it into DOM objects. You cannot transfer the actual objects over a network. Rather, you send text which is converted into objects by the browser. "location": "San Francisco, CA" , "capacity": 270 , 11 booking 11 : true KEY VALUE (in double quotes) KEYS VALUES In JSON, the key should be placed in double quotes (not single quotes). The value can be any of the following data types (some of these are demonstrated above; others are shown on the right-hand page): The key (or name) is separated from its value by a colon. Each key/ value pair is separated by a comma. However, note that there is no comma after the last key/value pair. s AJAX&JSON DATA TYPE DESCRIPTION stri ng Text (must be written in quotes) number Number Boolean Either true or false array Array of values - this can also be an array of objects object JavaScript object - this can contain child objects or arrays null This is when the value is empty or missing WORKING W ITH JSO N DATA JavaScript's JSON object can turn JSON data into a JavaScript object. It can also convert a JavaScript object into a string. "events": [ "location": "San Francisco, CA", "date": "May 111 , "map": "img/map-ca.png" The object on the left represents a series of three events, stored in an array called events. The array uses square bracket notation, and it holds three objects (one for each event). }, { "l ocat ion": "Austin, TX", "date": "May 15", "map ": "img/map-tx.png" }, { "location": "New York, NY", "date": "May 30", "map": "img/map-ny.png" • OBJECT • JSON . stringify() converts JavaScript objects into a string, formatted using JSON. This allows you to send JavaScri pt objects from the browser to another application. JSON . pars e () processes a string containing JSON data. It converts the JSON data into a JavaScript objects ready for the browser to use . ARRAY An object can also be written on one line, as you can see here: Browser s upport: Chrome 3, Firefox 3.1, IE8, and Safari 4 "events" : [ "location": "San Francisco, CA", "date": "May l", "map": "img/map-ca.png " }, "location" : "Austin, TX", "date" : "May 15", "map": "img/map-tx.png" }, "location": "New York, NY ", "date": "May 30", "map": "img/ map-ny.png" } AJAX&JSON @ LOADING HTML WITH AJAX HTML is the easiest type of data to add into a page using Ajax. The browser renders it just like any other HTML. The CSS rules for the rest of the page are applied to the new content. The page users open does not hold the event data (highlighted in pink). Ajax is used to load it into the page from another file. Below, the example loads data about three events using Ajax. (The result will look t he same for the next four examples.) Whether HTML, XML, or JSON is being returned from the server, the process of setting up the Ajax request and checking whether the file is ready to be worked w ith is the same. What changes is how you deal with t he data tha t is returned. THE MAKER BUS The bus stops here. Ausdr>. Tl( NewYorl<,NY May1S May30 HIGHLIGHTED AREA LOADED USING AJAX W hen a server responds to any request, it should send back a status message, to indicate if it completed the request. The values can be: 200 The server has responded and all is ok 304 Not modified 404 Page not found Internal error on the server 500 If you run the code locally, you will not get a server status property, so this check must be commented out, and return true for the condition. If a server fails to return a status property, check the server setup. 8 AJAX&JSON Browsers will only let you use this technique to load HTML that comes from the same domain name as the rest of the page. In the example on the right-hand page, the code to display the new HTML is placed inside a conditional statement. Please note: These examples do not work locally in Chrome. They should work locally in Firefox and Safari. IE support is mixed until IE9. Later in the chapter, you will see that jQuery offers better crossbrowser support for Ajax. . 1. An XMLHttpRequest object is stored in a variable called xhr. 2. The XMLHttpRequest object's open() method prepares the request. It has three parameters: i) Either HTTP GET or POST to specify how to send the request ii) The path to the page that will handle the request iii) Whether or not the request is asynchronous (this is a Boolean) 3. Up to this point, the browser has not yet contacted the server to request the new HTML. 4 . The object's on load event will fire when the server re sponds. It triggers an anonymous function. This does not happen until the script gets to the last line that calls the XMLHttpReques t object's send() method. The send() method requires an argument to be passed. If there is no data to send, you can just use null. 5. Inside the function, a conditional statement checks if the status property of the object is 200, indicating the server responded successfully. If the example is run locally, there will be no response so you cannot perform this check. c08/js/data-html .js JAVASCRIPT CD var xhr = new XMLHttpRequest(); ~ II II Create XMLHttpRequest object II II Prepare the request Send the request xhr.onload = function() { When response has loaded II The foll owing conditional check will not work locally - only on a server ® if( xhr.s t atus === 200) { // If server status was ok @) document .getElementByid('content') . innerHTML = xhr. responseText ; //Update } }; ~ xhr .open('GET', 'data/ data.html' , true); (]) xhr.send(nul l ); 6. Finally, the page is updated: document . get El ementByid ('content'). i nnerHTML '---- ----t@ ~ A) The element that will contain the new HTML is selected. ( Here it is an element whose id attribute has a value of content.) 8) The i nnerHTML property replaces the content of that element with the new HTML that has been sent from the server. = xhr. response Text; ©i--~ C) The new HTML is retrieved from the XMLHttpRequest object's responseText property. Remember that i nnerHTML should only be used when you know that the server will not return malicious content. All content that has been created by users or third parties should be escaped on the server (see p228). AJAX& JSON 8 LOADING XML WI TH AJAX Requesting XML data is very similar to requesting HTML. However, processing the data that is returned is more complicated because the XML must be converted into HTML to be shown on the page. On the right-hand page, you can see that the code to request an XM L file is almost identical to the code t o request an HTML file shown on the previous page. What changes is the part inside the conditional statement that processes the response (points 1- 4 on the right-hand page). The XML must be turned into HTML. The structure of the HTML for each event is shown below. 1. When a server responds with XML, it can be obtained using the responseXML property of the XMLHttpRequest object. Here, the XML returned is stored in a variable called response. 2. This is followed by the declaration of a new variable called events, which holds all of the <event> elements from the XML document. (You saw the XML file on p375.) 4 . Inside the for loop, you 3. The XML file is then i) obj is an XML fragment. processed using the DOM methods you learned about in Chapter 5. First, the for loop goes through each of the <event> elements, collecting the data stored in their child elements, and placing it into new HTML elements. ii) tag is the name of the tag you want to collect the information from. Each of t hose HTML elements is t hen added into t he page. w ill see the getNodeVa l ue () function is called several times. Its purpose is to get the contents from each of the XML elements. It takes two parameters: The function looks for the matching tag within the XML fragment (using the DOM's getElementsByTagName() method). It then gets the text from the first matching element within that fragment. .... The XML for each event is being transformed into t he follow ing HTM L structure: <div class= "event"> <img src="file.png " alt="Location " /> <p><b>Location</ b><br / >Event date</ p> </ div> 9 AJAX&JSON . c08/js/data-xml . js JAVASCRIPT var xhr =new XMLHttpRequest(); II Create XMLHttpRequest object xhr.onload = function() { II When response has l oaded II The fo l lowing conditional check wi l l not work l ocal ly - only on a server if (xhr.st atus === 200) { II If server status was ok II THIS PART IS DIFFERENT BECAUS E IT IS PROCESSING XML NOT HTML G) var response= xhr.responseXML; II Get XML from the server ~ var events = response.getElementsByTagName('event'); II Find <event> elements for (var i = 0; i <events . l ength ; i++) { var container, image, location , city, newline; container= document.createElement('div ' ); container.className = 'event'; II II II II Loop through t hem Declare variables Create <div> container Add class attr i bute image= document.createElement('i mg'); II Add map image image . setAttribute('src', getNodeValue(events[ i] , 'map ' )); image.appendChi l d(document.createTextNode(getNodeValue(events[i], 'map'))); container.appendChild(image); 3 location = document .createElement( 'p'); II Add l ocat i on data city = document .createElement('b' ) ; newl ine= document.createElement('br') ; city.appendChi ld(document.createTextNode(getNodeValue(events[i], 'location'))); location.appendChi l d(newline); location .i nsertBefore(city, newline); location.appendChild(document .createTextNode(getNodeValue(event s[i] , 'date'))); contai ner.appendCh i ld(location); document.getEl ementBy id('content').appendChild(contai ner); } ~function getNodeVa lue (obj, tag) { ~}return II II Gets content from XML obj .getElementsByTagName(tag)[O] .fi rstChild.nodeValue; THE FINAL PART IS THE SAME AS THE HTML EXAMPLE BUT IT REQUESTS AN XML FILE } }; xhr.open('GET', 'dataldata.xml ', true); xhr.send(null); II II Prepare the request Send the request AJA X& J SON@ LOADING JSON WITH AJAX The request for JSON data uses the same syntax you saw in the requests for HTML and XML data. When the server responds, the JSON will be converted into HTML. When JSON data is sent from a server to a web browser, it is transmitted as a string. When it reaches the browser, your script must then convert the string into a JavaScript object. This is known as deserializing an object. This is done using the parse () method of a built-in object called JSON. This is a global object, so you can use it without creating an instance of it first. Once the string has been parsed, your script can access the data in the object and create HTML that can be shown in the page. The HTML is added to the page using the i nnerHTML property. Therefore, it should only be used when you are confident that it will not contain malicious code (see XSS on p228). This example will look the same as the last two examples when you view it in a web browser. The JSON object also has a method called st ringify(), which converts objects into a string using JSON notation so it can be sent from the browser back to a server. This is also known as serializing an object. This method can be used when the user has interacted with the page in a way that has updated t he data held in t he JavaScript object (e.g., filling in a form), so that it can then update the information stored on the server. Here you can see the JSON data that is being processed again ( it was introduced on p377). Note how it is saved with the . j son fi le extension. c08/data/data.j son JAVASCRIPT "events": [ "location" : "San Francisco, CA" , " date" : "May l ", "map" : " img/map- ca.png" } , "location": "Austin , TX", "date": "May 15", "map" : "img/ map-tx . png" } , "location" : "New York, NY", "date" : "May 30", "map" : "img/map-ny.png") ] @ AJAX&JSON ... 1. The JSON data from the server 2. The newContent variable is Inside the loop, the contents is stored in a variable called re sponseObject. It is made available by the XMLHttpRequest created to hold the new HTML data. It is set to an empty string of the object are added to the newContent variable, along object 's responseText property outside th e loop so that th e code in the loop can add to the string. w ith their corresponding HTML markup. When it comes from the server, 3. Loop through the objects that 4 . When the loop has finished t he JSON data is a stri ng, so it is converted into a JavaScri pt object using the JSON object's represe nt each event using a fo r loop. The data in the objects are ru nning through th e event objects in responseObj ect, the accessed using dot notation, just like you access other objects. new HTML is added to the page using the i nnerHTML property. parse() method. c08/js/data-json.js JAVASCRIPT var xhr =new XMLHttpRequest(); CD //Create XMLHttpRequest object xhr.onload =function() { //When readystate changes if(xhr.status === 200) { // If server status was ok responseObject = JSON . parse(xhr. responseText); // BUILD UP STRING WITH NEW CONTENT (could also use DOM manipulation) var newContent = ''; for (var i = O; i < responseObject.events .l ength; i++) {//Loop through object newContent += '<div class= event > newContent += ' <img src= + responseObject :events[i] .map + newContent += ' alt=" ' + responseObject.events[i] . location + / >' ; newContent += ' <p><b>' + responseObject .events[i] .location+ '</b><br>'; newContent += responseObject.events[i] .date+ ' </p>' ; newContent += '</div>'; G) 11 11 11 1 ; 111 ' '; 1 11 3 //Update the page with the new content document. getElementByid('content ' ).innerHTML @) newContent ; } }; xhr.open( 'GET', 'data/data.json' , true); xhr .send(null); //Prepare the request //Send the request AJAX&JSON 8 WORKING WITH DATA FROM OTHER SERVERS Ajax works smoothly with data fro m your own server but - for security reasons - browsers do not load Ajax responses from other domains (known as cross-domain requests). There are three common workarounds. A PROXY FILE ON THE W EB SERVER JSONP (JSON WITH PA DDIN G) CROSS-ORIGIN RESOURCE SHARI NG The first way to load data from JSONP (sometimes written a rem ote server is to create a file on your server that collects JSON- P) involves adding a Every t ime a browser and server communicate, t hey <scr ipt> element into the page, which loads the JSON data send information to each other using HTTP headers. Cross- from another server. This works because there are no rest rict ions on the source of script in a <script> element. Origin Resource Sharing or CORS involves adding extra information to the HTTP headers the data from the remote server (using a server-side language such as ASP.net, PHP, NodeJS, or Ruby). The other pages on your site then request the data from t he file on your server (which in turn gets it from the remote server). This is called a proxy, because it acts on behal f of the other page. Because t his relies upon creating pages in server-side languages, it is beyond the scope of this book. The script contains a call to a function, and th e JSONformatted data is provided as an argument to that function. The function that is called is defined CORS is a W 3C speci fication, but is only supported by the most recent browsers and - in t he page that requests t he data, and is used to process and because it requires setting up of HTTP headers on t he server - is display the data. See next page. beyond the scope of this book. ALTE RNATIVES CORS SUPPORT Many people use jQuery when making requests for remote data, Standard support is as follows: Chrome 4, FF 3.5, IE10, Safari 4 as it simplifies the process and handles backward compat ibility Android 2.1, iOS 3.2 for older browsers. A s you can IE8+9 used a non-standard see in the next column, support XDomai nRequest object to handle cross-origin requ ests. for new approaches is an Issue. 9 AJAX&J SON to let t he browse r and server know tha t they should be communicating with each other. HOW JSONP WORKS First, the page must include a function to process the JSON data. It then requests the data from the server using a <script> element. The server returns a file that calls the function that processes the data . The JSON data is provided as an argument to that function. BROWSER SERVER The HTML page will use two pieces of JavaScript: 1. A function that will process the JSON data that the server sends. In the example on the next page, the function is called showEvents () . When the server responds, the script contains a call to t he named function that will process the data (that function was defined in step 1). This function call is the "padding" in JSONP. The JSON -formatted data is sent as an argument to this function. 2 . A <script> element whose src attribute will request the JSON data from the remote server. So, in this case, the JSON data sits inside the call to the showEvents () function. <script> function showEvents(data) showEvents({ "events" : [ {. // Code to process data and // display it in t he page here " l ocation " : " San Franc i sco , CA", "date ": "May 1", "map" : 11 i mg/ map- ca . png" </ script> <script sr c="http : //example.or g/jsonp"> </ script> }... ] }) ; It is important to note that there is no need to use the JSON object's parse() or stri ngi fy () methods when working with JSONP. Because the data is being sent as a script file (not as a string), it will be treated as an object. The file on the server is often written so that you can specify the name of the function that will process the data that is return ed. The name of the function is usually given in the query string of a URL: http://example.org/upcomingEvents.php?cal l back=showEvents AJAX&JSON 8 USING JSONP This example looks the same as the JSON example, but the event details come from a remote server. Therefore, the HTML uses two <script> elements. The first <script> element loads a JavaScript file that contain s the the showEvents () function. This will be used to display the deals information. The second <script> element loads the information from a remote server. The name of the function that processes the data is given in the query string. ""*'' c08/data-jsonp.html <script src="js/ data-jsonp.js"></ script> <script src="http ://deciphered.com/ js/jsonp .js?callback=showEvents"></script> </body> </ html> c08/js/data-jsonp.js JAVASCRIPT function showEvents(data) var newContent = ''; //Callback when JSON loads II Variable to hold HTML // BUILD UP STRING WITH NEW CONTENT (could also use DOM man ipulation) //Loop through data for (var i = O; i <data.events . length; i++) { newContent += ' <div cl ass="event"> ' ; newContent += '<img src="' + data.events[i].map + '"'; newContent += ' alt="' + data .events[i].location + '" />'; newContent += ' <p><b> ' + data .events[i].location + -, </b><br>'; newContent += data.events[i].date + '</p>'; newContent += '</div>'; //Update the page with the new content document.getElementByid('content') . innerHTML 1. The code in the for loop (which is used to process the JSON data and create the HTML) and the line that writes it into the page are the same as the code that processed the JSON data from the same server. 8 AJAX&JSON newContent; } There are three key differences: i) It is wrapped in a function called showEvents (). ii) The JSON data comes in as an argument of the function call. iii) The data does not need to be parsed with JSON.parse(). In the for loop, it is just referred to by the parameter name d(!ta. Instead of using a second <script> element in the HTML pages, you can use JavaScript to write that <script> element into the page (just like you would add any other element into t he page). That would place all the functional ity for the external data in the one JavaScript file. JSONP loads JavaScript, and any JavaScript data may contain malicious code. For this reason, you should load data only from trusted sources. Since JSONP is loading data from a different server, you might add You will see more about handling errors in Chapter 10, and there is timer to check if the server has replied within a fixed time (and, if not, show an error message). an example of a timer in Chapter 11 (where you create a content slider). http://htmlandcssbook .com/js/jsonp.j s JAVASCRIPT showEvents({ "events" : [ { "location": "San Francisco, CA", "date": "May 1", "map": "irng/map-ca.png" }, { "location": "Austin, TX", "date": "May 15", "map": "img/map-tx.png" }, { "location" : "New York, NY", "date": "May 30", "map": "img/map-ny . png" ] }) ; The file that is returned from the server wraps the JSON- l;IJjiHI formatted data inside the call to the showEvents () function. So the showEvents () function The bus stops here. is only called when the browser :.\'\ ~ ··. - - ,.., ~ · ""'-. has loaded this remote data. I '; ~t ;, ' · ...,., San frllndfcO. CA Austin. TX MlylS AJAX&JSON s JQUERY & AJAX: REQUESTS jQuery provides several methods that handle Ajax requests. Just like other examples in this chapter, the process involves two steps: making a request and handling the response. Here you can see the six ways METHOD/ SYNTAX DESCRIPTION jQuery lets you make Ajax requests. The first five are all • 1oad () Loads HTML fragments into an element It is the simplest method for retrieving data shortcuts for the $. aj ax () method, which you meet last. $ . get() Loads data using the HTTP GET method Used to requ est data from the server The • 1oad () method operates $.post() on a jQuery selection (like most jQuery methods). It loads new HTML content into the selected Loads data using the HTTP POST method Used to send data that updates data on server $.getJSON() Loads JSON data using a GET request Used for JSON data element(s). $. getScri pt() You can see that the other five Loads and executes JavaScript data using GET Used for JavaScript (e.g., JSONP) data methods are written differently. They are methods of the global jQuery object, which is why they st art with $. They only request data from a server; they do not automatically use that data to update the elements of a matched set, which is why the $ symbol is not fo llowed by a selector. When the server returns data, the script needs to indicate what to do with it. e AJAX&JSON $. ajax() This method is used to perform all requests The above methods all use this under the hood JQUERY & AJAX: RESPON SES When using the • load() method, the HTML return ed from t he server is inserted into a jQuery selection. For the other methods, you specify what should be done when the data that is returned usi ng the j qXHR object. JQXHR PROPERTIES DESCRIPTION response Text Text-based data returned responseXML XML data returned status Status code status Text Status description (typically used to display information about an error if one occurs) JQXHR METHODS DESCRIPTION .done() Code to run if request was successful . fail() Code to run if request was unsuccessful .al ways() Code to run if request succeeded or failed . abort() Halt the communication _ jQuery has an object called jqXHR, which makes it easier to handle t he data that is returned from the server. You will see its properties and met hods (shown in the tables on the left) used over the next few pages. Because jQuery let s you chain met hods, you can use the .done(), . fail(}, and . al ways() methods to run different code depending on the outcome of loading the dat a. RELATIVE URLS If the content you load via Ajax contains relative URLs (e.g., images and links) those URLs get treated as if they are relative to the original page that was loaded. If the new HTML is in a different folder from the original page, the relative paths could be broken. 1. This HTML fi le uses Ajax to load content from a page in the folder shown in step 2. 2. The page in the this fo lder has an image whose path is a relative link to the second fo lder: <img src=" img/box . gif" /> 3. The HTML fi le cannot find the image as the path is no longer correct - it is not in a child folder. CD [i . 0 ® AJAX&JSON s LOADING HTML INTO A PAGE WITH JQUERY The • 1oad () method is the simplest of the jQuery Ajax methods. It can only be used to load HTML from the server, but when the server responds, the HTML is then loaded into the jQuery Selection for you . JQUERY SE LECTOR URL O F THE PAGE SELECTOR You start by selecting t he Then you use the . 1oad () You can specify that you want to element th at you want the HTML code to appear inside. method to specify th e URL of the HTML page to load. load only part of the page (rather than the whole page). $( 1 #content 1 ) . load( 1 jq-ajax3 . html #content'); ~ @ ~ 1. This creates a jQuery object 2. This is the URL of t he page with the element whose id attribute has a value of content. you want to load the HTML from. 3. This is the fragment of the HTML page to show. Again, it is There must be a space between t he section w hose id at tribute the URL and the selector in step 3. has a value of content. --- Here, links in t he top right corner take the user to other pages. If the user has JavaScript enabled, when t hey click on a link, code --- inside the • on () event method stops it from loading a wh ole new page. Instead, the . 1oad () method will replace the area highlighted in pink (whose i d attribute has a value of content) with t he equivalent area from th e page that the user just requested. Only t he pink area is refreshed - not the whole page. 8 AJAX&JSON _......,____ --..---__ ____ ...... _..,._...,_ ____...........,_ .... ,,_,,,,,.,...... .... -------· -·~............. _,_ ---~ ~-- __,,....______ ...,.., ............. _____ __ __ ....-.. ..--....--·__ ......,........... ------_____ __......._ ------..,_,..._.. ..... .....,,.._,..._ _.,.,__ ..... ...... _ "" __ ___. ::-.:n-::4·:": ......... -_....,,______ .. ___ _ _____ .....................,.,.. ........ ........ ..----...-· ...... ...................--..==:--.:=.:.-. ...........__ --~ ......_ .., _.... _.,._ .,, "' ,,...._ ,.. ...._ ...., ~-- LOADING CONTENT When users dick on any of the links in the <nav> element, one of two things will occur: Inside the anonymous function, five things happen: 3. The cl ass attributes on the links are updated to indicate which page is the current page. 1. e.preventDefault() stops If they have JavaScript enabled, a click event will trigger an anonymous function that loads new content into the page. the link taking users to a new page. 4 . The element holding the content is removed. 2. A variable called url holds the 5. The container element is If they do not have JavaScript enabled, they will move from page to page as normal. URL of the page to load. This is collected from the href attribute of the link the user clicked on. It indicates which page to load. selected and . load () fetches new the new content. It is hidden straight away using . hi de() so that fade In() can fade it in. c08/js/jq-load.js JAVASCRIPT $( ' nav a').on('click ' , funct ion(e) { e.preventOefault(); @ var ur 1 = th i s . href ; CD II II II II User clicks nav lin k Stop loading new link Get va l ue of href @{ $('nav a.current').removeClass( ' current'); $(this).addClass('current'); © ® $('#container').remove(); II Remove old content $('#content'). load(url + ' #content').hide().fadein( 's low '); II New content /I Clear current indicator New current indicator }) ; ""*'' c08/jq-load.html <nav> <a href="jq-load.html " class="cur rent" >Home</a> <a href="jq- load2.html" >Route<la> <a href="jq-load3.html ">Toys</a> </nav> <section id="content"> <div id="container"> <!-- Page content li ves here --> </ div> </section> The links still work if JavaScript is not enabled. If JavaScript is enabled, jQuery w ill load content into the <div> whose id has a value of content from the target URL. The re st of the page does not need to be reloaded. AJAX&JSON@ JQUERY'S AJAX SHORTHAND METHODS jQuery provides four shorthand methods to handle specific types of Ajax requests. The methods below are all shorthand methods. If you looked at the source code for These methods do not work on a selection like other jQuery methods, which is why you prefix jQuery, you would see that they all use the $.ajax() method. them with only the$ symbol what the server sends back to rather than a jQuery selection. They are usually triggered by an the browser. event, such as the page having loaded or the user interacting with the page (e.g., clicking on a As with HTML forms (and the Ajax requests you met earlier in the chapter), you can send th e link, or submitting a form). data using HTTP GET or POST. You will meet each one over the next few pages because they introduce key aspects of the $. aj ax() method. METHOD/ SYNTAX DESCRIPTION $. get(urZ [, data][, callback][, type]) HTTPGETrequestfordata- With an Ajax request, you will often want to send data to the server, which will in turn affect $ . post (url [, data] [, callback] [, type]) HTTP POST to update data on the server $ . getJSON(urZ [, data][, callback] ) Loads JSON data using a GET request $. getScript(urZ [, callback] ) Loads and executes JavaScript (e.g., JSONP) using a GET request The parameters in square brackets are optional. $ shows that this is a method of the jQuery object. url specifies where the data is fetched from. data provides any extra information to send to the server. callback indicates that the function should be called when data is returned (can be named or anonymous). type shows the type of data to expect from the server. Note: The examples in this section only work on a web server (and not on local fi le systems). Server-side languages and server setup are beyond th e scope of this book, but you can try out the examples on our website. PHP files have been included with the download code, but they are for demonstration purposes only. 8 AJAX&JSON REQUESTING DATA Here, users vote for their favorite t-shirt without leaving the page. 1. If users click on a t-shirt an anonymous functi on is triggered. 2. e.PreventDefault() stops the link opening a new page. 3. The user's choice is the value of the id attribute on the image. It is stored in a variable called queryStri ng in the format of a query string, e.g.. vote=gray 4 . The $.get() method is called using three parameters: i) The page that will handle the request (on the same server). ii) The data being sent to the server (here it is a query string, but it could be JSON). iii) The function that handles the result the server sends back; in this case it is an anonymous function. When the server responds, the anonymous callback function handles the data. In this case, the code in that function selects the element that the held the t-shirts and replaces it with the HTML sent back from the server. This is done using jQuery's .html() method. c08/js/jq-get .j s JAVASCRIPT G) $('#sel ect or a ' ).on('click ', fun ction (e) { e . preventDefau lt () ; ~ var queryString = 'vote=' +event . target . id; @) $.get('votes.php' , queryString , function(data) $(' #selector') . html(data) ; }) ; }) ; @ (ID ""·'·'' (Thi s HTM~ is created by code inside the JS fi l e.) <d i v class="third"><a href="vote.php?vote=gray"> <img src="img/ t-gray.png" id="gray" al t ="gray" / ></ a></ div> <di v class="th i rd"><a href="vote.php?vote=yellow"> <i mg src="img/ t-yell ow. png " i d="ye 11 ow" al t="ye 11 ow" / ></ a></ div> <div class="third"><a href="vote.php?vote=green"> <img src="img/t-green.png" id="green" alt="green" / ></ a></ div> l;IJilJii The t-shirt links are created in the JavaScript file to ensure they only show if the browser supports JavaScript (the resulting HTML structure is shown above). When the server responds, it does not have to send back HTML; it can return any kind of data that the browser can process and use. A J AX& JSON s SENDING FORMS USING AJAX To send data to the server, you are likely to use the . pos t() method. jQuery also provides the • seriali ze () method to collect form data. SENDING FORM DATA COLLECTING FOR M DATA The HTTP POST method is often used w hen sending form data to a server and it has a corresponding jQuery's • seri a1 i ze ( ) m ethod: • Selects all of the information from the form function, the . post() method. It takes the same • Puts it into a string ready to send to the server three parameters as the . get() method: • Encodes characters that cannot be used in a query string i) The name of the fil e on the (same) server that will process the data from the form ii) The form data that you are sending Typically it will be used on a selection containing a <fonn> element (although it can be used on iii) The callback function that will handle the individual elements or a subsection of a form). response from the server It will only send successful form controls, which On the right-hand page you can see the $.post () means it will nol send: method used with a method called • seri a1 i ze (), • • Controls that have been disabled Controls where no option has been selected • The submit button which is very helpful when working with forms. Together they send the form data to the server. SERVER-SIDE When a server-side page handles a form, you might want the same page to work whether: • It was a normal request for a web page (in which • case you would send the whole page); or It was an Ajax request (where you might respo nd with just a fragment of the page) 8 AJAX&JSON On the server. you can check whet her a page is being requested by an Ajax call using the X-Requested-Wi th header. If it is set and has a value of XMLHttpRequest, you know that the request was an Ajax request. SUBMITTING FORMS 1. When users submit the form, an anonymous function runs. 2 . e. Preventoefau 1t () stops the form from submitting. 3. The form data is collected by the . seri a1i ze () method and stored in the details variable. 4. The $ .post () method is called using all three parameters: i) The url of the page that the data is being sent to ii) The data that was just collected from the form iii) A callback function that will display the results to the user 5. When the server responds, the content of the element whose id attribute has a value of register is overwritten with new HTML sent from the server. c08/ js/ jq-post .js JAVASCRIPT G) $('#register') .on('submit', function(e) { ~ ~ ~ ([) // When form i s submi t t ed e. preventOefau lt(); / / Prevent it being sent var details = $( ' #register ' ).serial ize(); // Serial ize form data $.post('register.php', details, function(data) { // Use $.post() to send i t $('#register').html(data); //Where to di splay result }) ; }) ; +:HMM c08/ jq-post .html <form id="register" action="register.php" method="post"> <h2>Register</h2> <label for="name"> Username</label><input type="text" id="name" name="name" /> <label for="pwd"> Password</ label><input type="password" id="pwd" name="pwd" / > <l abel for="emai 1"> Emai1 </ label><input type="email" id="emai 1" name="emai l" / > <input type="submit" va l ue="Join" / > </ form> Register - This example needs to be run on a web server. The server-side page will return a confirmation message (but it does not validate the data submitted nor send a confirmation email). AJAX&JSON@ LOADING JSON & HANDLING AJAX ERRORS You can load JSON data using the$. getJSON () method. There are also methods that help you deal with the response if it fails. LOADING JSON SUCCESS/ FA ILURE If you want to load JSO N data, there is a method called$ . getJSON () which will retrieve JSON from the same server that the page is from. To use JSONP you should use the method called $. getScri pt (). There are three methods you can chain after $ . get(), $.post() , $.getJSON(), and $.ajax() to handle success I failure. These methods are: AJAX AND ERRORS Occasionally a request for a web page will fail and Ajax requests are no exception. Therefore, jQuery provides two meth ods that can trigger code depending on whether the request was successful or unsuccessful, along with a third method that w ill be triggered in both cases (successful or not). Below is an example that will demonstrate these concepts. It loads fictional exchange rates. Older scripts may use the • success() , • error(), and . comp1ete () methods instead of these methods. They do the same thing, but these newer methods have been the preferred option since jQuery 1.8. Exchange Rates Exchange Rates a Sorry, we cannot load rates. UK: 20.00 US:35.99 a AU:39.99 Last update: 9 .done() - an event method that fires when the request has successfully completed . fai 1 () - an event method that fires when the request did not complete successfully . al ways () - an event method that fires when the request has completed (whether it was successful or not) AJAX&JSON 15:34 JSON & ERRORS 1. In this example, JSON data 4. Inside loadRates(), the representing currency exchange rates is loaded into the page by a $.getJSON method tries to load some JSON data. There are function called l oadRates (). three methods chained after this method. They do not all run. 2. On the first line of the script an element is added to the page 6 .• fail () only runs if the server cannot return the data. Its job is to display an error message to the user. 7.• al ways() will run whether 5 .. done() only runs if the or not the answer was returned. to hold the exchange rate data. data is retrieved successfully. It contains an anonymous function It adds a refresh button to the page, along with an event 3. The function is called on the that shows exchange rates and the time they were displayed. handler that triggers the l oadRates () function again. last line of the script. JAVASCRIPT c08/js/jq-getJSON.js @ $ ( '#exchangerates') . append ('<div id=" rates 11 ></d i v><di v id= "rel oad"></di v> ' ); CD ~ ~ fu nction l oadRates () { $.getJSON('data/rates .json') .done( function(data){ //SERVER RETURNS DATA var d =new Date(); //Create date object //Get hours var hrs= d.getHours(); var mins = d.getMinutes(); //Get mins var msg = '<h2>Exchange Rates</h2> ' ; //Start message $.each(data, function(key, val) { // Add each rate msg +='<div class="'+ key+ 111 > 1 +key +-•: ' +val + '</div>'; }) ; @ CZ) msg += '<br>Last update: ' + hrs + ':' + mins + '<br> ' ; // Show update time $('#rates').html (msg); //Add rates to page }).fail( function() { //THERE IS AN ERROR $('aside').append( ' Sor ry, we cannot load rates. '); //Show error message }) .always( function() { //ALWAYS RUNS var reload"' '<a id="refresh" href="#">' ; //Add refresh link reload+= ' <i mg src=" img/refresh .png" alt= "refresh" /></a>' ; $( ' #reload ' ).html (re load); //Add refresh link //Add click handler $('#refresh ' ).on('click ' , functio n(e ) //Stop link e.preventDefault(); // Ca 11 l oadRates () l oadRates (); }) ; }) ; ® l oadRates (); //Call loadRates() AJAX&JSON s AJAX REQUESTS WITH FINE-GRAIN ED CONTROL The $. aj ax () method gives you greater control over Ajax requests. Behind the scenes, this method is used by all of jQuery's Ajax shorthand methods. Inside the jQuery file, the$ :ajax () method is used by the other Ajax helper methods that you have seen so far (which are offered as a simpler way of making Ajax requests). The example on the right-hand page looks and works like the one that demonstrated the • 1oad () method on p390. But it uses the$. aj ax () method instead. • This method offers greater control over the entire process, with over 30 different settings that you can use to control the Ajax request. You can see a selection of these settings in the table below. These settings are provided using object literal notation (the object is referred to as the settings object). • • The settings can appear in any order, as long as they use valid JavaScript literal notation. The settings that take a function can use a named function or an anonymous fu nction written inline. $. aj ax () does not let you load just one part of the page so the jQuery . find() method is used to select the required part of the page. SETTING DESCRIPTION type Can take values GET or POST depending on whether the request is made using HTTP GET or POST url The page the request is being sent to data The data that is being sent to the server with the request success A function that runs if the Ajax request completes successfully (similar to the • done () method) error A function that runs if there is an error with the Ajax request (similar to the . fa i 1() method) befo r eSend A function (anonymous or named) that is run before the Ajax request starts In the example on the right, this is used to trigger a loading icon s compl ete Runs after success/error events In the example on the right, this removes a loading icon t i meout The number of milliseconds to wait before the event should fail AJAX&JSON CONTROLLING AJAX When the user clicks on a link in the <nav> element, new content is loaded into the page. This is very similar to the example on p390 for the . load () method, but that shorthand method only required one line. 1. Here the click event handler triggers the $. aj ax() method. This example sets seven settings for the $.ajax() method. The first three are properties, the final four are anonymous 'functions triggered at different points in the Ajax request. 3. The code also adds elements into the page to show that data is loading. You may not see them appear if the request is handled quickly, but you will see them if the page is slower to load. 2. This example sets the timeout property to wait two seconds for the Ajax response. 4 . If the Ajax request fai ls, then an error message will be shown to the user. c08/ js/ j q-aj ax. j s JAVASCRIPT CD $('nav a').on( ' click', function(e) { e.preventDefault(); var url = this.href; var $content = $('#content'); $('nav a.current').removeClass('current'); $(this).addClass('current'); $('#container').remove(); II II II II URL to load Cache sel ection Update links Remove content $. aj ax ( { type: "POST", GET or POST url: url, Pat h to fi l e timeout: 2000, Waiting time beforeSend: funct i on() 11 Before Ajax $content.append('<div id="load">Loading<ldi v>'); Load message }, compl ete: funct i on() { Once finished $('#loading').remove(); Clear mes sage }, success : function(data) { Show content $content.html( $(data).find( ' #cont ainer') ).hide() . fadeln(400); }, fail: funct i on() { Show e r ror msg $(' #panel ' ).html('<div class="loading">Please try again soon.<l div> ' ); II II II II II II II II } }) ; }) ; A JAX&JSON s • - IGU1! llJ!S 0111.1111 , _ -......---~ ...'Iii'#' .. >n '""'''··~·-- ..... , ~ ,,~ --· ..... --....-~-..,.......-' ~- ...............WO _ _ _ _ w---...irne-.:1 ......_ , "''"". . . ~......__:c.~4' U~tllO----· ......._.,...........,_ .. """',.,_ ,...,,.,...,,UM~P'O'~\.<~~ (..-IQ .. 1..Ctl'l<e.>IMll~lllllhr'""'"' ~·•u~\~nn.uvlt""""•' -~111\IOll(~, EXAMPLE AJAX & JSON This example shows information about three events. The data used comes from three different sources. 1) When the page loads, event locations are coded into the HTML. Users click on an event in the left-hand co lumn; it updates the timetable in the middle co lumn. In the left column, the links have an id attribute whose value is a twoletter identifier for the state the event is in: <a id=" tx " href="tx.html"> ... Austin , TX</a> 2) The timetables are stored in a JSON object, in an external fi le collected when the DOM has loaded. When users click on a session in the middle column, its description is shown in the right-hand column. In the middle column showing timetables, the title of each session is used inside a link that will show the description fo r the session. <a href="descript i ons.html#Circuit- Hacking "> Circuit Hacki ng</ a> 3) Descriptions of all sessions are stored in one HTML file. Individual descriptions are selected using jQuery's • 1oad () method (and the # selector shown on p390). In the righ t column, the session description is taken from an HTML file. Each session is stored in an element whose id attribute contains the title of the session (with spaces replaced by dashes). <div id="Intro- to- 30- Modeli ng"> <h3>Intro to 30 Modeling</h3> <p>Come learn hm~ to create 30 models of ... </ p> </ div> Because links are added and removed, event delegation is used. AJAX&JSON 8 EXAMPLE AJAX & JSON This example uses data from three separate sou rce s to demonstrate Aj ax techniques. In th e left-hand column you can see three locations for an event. These are written into the HTML for the timetable page. Each one is a link. 1. Clicking on an event loads the session times for that event. They are stored in a file called ex amp 1e . j son, w hich is collected w hen the DOM has loaded. /!)~ 2. Clicking on a session w ill load it s description. They are stored in descriptions . ht ml, w hich is loaded w hen a user clicks on a session ti tle. HOME ROUTE TOYS TIMETABLE THE MAKER BUS Roll up! Roll up! Ifs the maker bus... CD • SAHllAHCISCO,CA ·Mnn~U 1, 8 AJAX&JSON I 9:00 Arduino Antics 10:00 Brain Hacking 11:30 Intro to 30 Modeling 1:00 The Printed lunch 2:00 Droning On 3:00 Circuit Hacking 4:30 Make The Future NEWYORUl Arduino Antics Learn how to program and use an Arduino! This easy-to-learn open source microcontroller board takes all sorts of sensor inputs, follows user-generated programs, and outputs data and power. Ardulnos are commonly used ln robotics, mechatronics, and all manners of electronics projects around the world . Taught by Elsie Denney, professional software developer with a long previous career as a technical artist in the video game industry, electronics enthusiast and instructor. EXAMPLE AJAX & JSON W:H,•.11 c08/example . html <body> <header> <hl>THE MAKER BUS</hl> <nav> <a href="jq-load.html">HOME</a> <a href="jq-load2 . html">ROUTE</a> <a href="jq-load3.html">TOYS</a> <a href="example.html" class ="current">TIMETABLE</a> </nav> </header> <section id="content"> <div id="container"> <div class="third"> <div id="event"> <a id="ca" href="ca.html"> <img src="img/map-ca . png" alt="SF, CA" />San Francisco, CA</a> <a id= "tx" href="tx.html"> <img src="img/map-tx . png" alt="Austin, TX" />Austin, TX</a> <a id="ny" href="ny.html"> <img src="img/map-ny.png" alt="New York, NY" />New York, NY</a> </div> </div> <div class="third"> <div id="sessions">Select an event from the left</div> </div> <div class="third"> <div id= "details>Detai ls</div> </div> </div><!-- #container --> </section><!-- #content --> <script src="js/jquery-1.11.0 .min.js"></scri pt> <script src="js/example.js"></script> </body> Here you can see the HTML page. It has a header, followed by three columns. Two scripts appear before the closing </body> tag. Left column: list of the events Middle column: timetable of the sessions Right column: description of the sessions AJAX&JSON 8 EXAMPLE AJ AX & JSON cNN/data/exampl e.json JAVASCRIPT "CA": [ "ti me": "09 .00", "title ": "Intro to 30 Mode l ing " }' { "time": "10.00", "title": "Circuit Hacking" }' { } ... "time": "11 .30", "title": "Arduino Antics" c08/descri ptions.html <div id=" Intro-to-30-Modeling"> <h3> Intro to 30 Modeling</h3> <p>Come learn how to create 30 models of parts you can then make ... </ p> </ div> <div id="Circuit-Hacking"> <h3>Circuit Hacking</h3> <p>Head to the Electro-Tent for a free introductory so ldering ... </p> </div> <div i d="Arduino-Antics"> <h3>Arduino Antics</ h3> <p>Learn how to program and use an Arduino! This easy-to-learn ... </ p> </div> 8 ""*'' When the script is run, the 1oadTimetab1 e () function loads the timetables for all three events from a file Events are identified by a two-letter code for the state. You can see a sample of the JSON-formatted formatted using JSON, stored in example. j son. The data is cached in a variable called ti mes. data above and a sample of the HTML that will be created using that data. AJAX&JSON .. EXAMPLE AJAX & JSON c08/js/example. js JAVASCRIPT G) $(function() var times; $.ajax( { beforeSend : function(xh r ){ if (xhr.overrideMimeType) { xhr.overrideMimeType("applicat i onl json"); II II II II II II When the DOM is ready Declare global variable Setup request Before requesting data If supported set MIME to prevent errors } }) ; II © FUNCTION THAT COLLECTS DATA FROM THE JSON FILE II Declare function function loadTimet able() { II Try to collect JSON data $.getJSON( ' datal example.json') II If successful .done( function(data){ II Store it in a variable times = data; II If a problem: show message }) . fai 1( function() { $('#event').html ('Sorry! We could not load t he timetable at the moment'); }) ; (i) loadTimetable(); 1. The script that does all t he work is in example. j s. It runs when the DOM has loaded. II Call the function 4. Next you can see a function called l oadTi met able(), which is used to load the timetable data from a f ile called example . json. 2. The ti mes variable will be used to store t he session timetables for all of the event s. 5. If the data loads successfully, the data for t he timetables w ill be stored in a variable called times. 3. Before the browser requests the JSON data, the script checks if the browser supports the overrideMimeType() method. This is used to indicate t hat the response from the server should be treated as JSON data. This method can be used in case the server is accidentally set up to indicate that 6. If it fails to load, an error message will be shown to the users. 7. The l oadTimetab 1e () function is then called to load the data. the data being returned is in any other format. AJAX & JSON 8 . EXAMPLE AJAX & JSON c08/js/example.js JAVASCRIPT " //CLICK ON THE EVENT TO LOAD A TIMETABLE G) (]) ® © $('#content') . on('click', '#event a', function(e) e.preventDefault{); var loc = this. id . toUpperCase(); // User cl icks on place // Prevent loading page //Get value of id attr @ var newContent = '' ; //To build up timetable for (var i = O; i < times[loc] . length; i++) { // loop th rough sessions newContent += '<li><span class="time">' + times[loc][i].time +'</span>'; newContent += '<a href="descriptions . html#'; newContent += times[loc][i].title.replace(/ /g , '-') + 111 > 1 ; newContent += times[loc][i].tit l e + ' </a></li>'; (2) $('#sessions').html('<ul>' + newContent + 1 </ul>') ; //Display t i me ® @ 0 $('#event a.current') . removeClass( ' current'); $(this).addClass('current'); ® $ ( ' #details' ) . text (' ' ) ; }) ; 1. A jQuery event helper method waits for users to click on the name of an event. It w ill load the timetable for that event into the middle column. 2. The preventDefaul t () method prevents the link from opening a page (because it is w ill show the AJAX data instead). 3. A variable called l oc is created to hold the name of the event location. It is collected from the id attribute of the link that was clicked. 4. The HTML for the timetables will be stored in a variable called newContent. It is set to a blank string. 5. Each session is stored inside an <l i> element, //Update selected l i nk //C lear third column 6 . A link is added to the timetable, which will be used to load the description. The link points to the descriptions . html file. It is followed by a# symbol so it links to the correct part of t he page. 7. The session title is added after the I symbol. The • rep 1ace () method replaces spaces in the title with a dash to match the value of the id attribute in the descriptions. html file for each session. 8. Inside the link you can see the title of the session. 9. The new content is added into the middle column. 10. The cl ass attributes on the event links are updated to shows which event is the current event. which starts by displaying the time of the session. 11. The third column is emptied if it had content. 8 AJAX&JSON .. EXAMPLE AJAX & JSON c08/js/example.js JAVASCRIPT II CD @ ® CLICK ON A SESSION TO LOAD THE DESCRIPTION $(' #content') . on('click', '#sessions li a' , functio n(e) e.preventDefault(); var f ragment = this.href; @ fragment= fragment.replace('#', ' #'); $( ' #details').load(fragment); ® $('#sessions a.current').removeClass('current '); $(this).addClass('current'); ( II II II II II II Click on session Prevent loading Title is in href Add space after# To l oad info Updat e selected }) ; II CLICK ON PRIMARY NAVIGATION $('nav a').on( ' click', function(e) e.preventDefault(); var url = this.href; $('nav a . current ').removeCl ass('current' ); $(this).addClass('current'); 7 II II II II Cli ck on nav Prevent loadi ng Get URL to load Update nav $('#container').remove() ; II Remove old $(' #content'). load(url + ' #container') .hide().fadeln('slow'); II Add new }) ; }) ; 1. Another jQuery event helper method is set up to respond when a user clicks on a session in the middle column. It loads a description of the session. 5. A jQuery selector is used to find the element whose id attribute has a value of deta i 1s in the third column. The . 1oad () method is then used to load the session description into that element. 2. preventoefaul t () stops the link opening. 3. Avariable called fragment is created to hold the linkto the session. This is collected from the href attribute of the link that was clicked. 6. The links are updated so that they highlight the appropriate session in the middle column. 7. The main navigation is set up as shown on p391. 4. A space is added before the # symbol so that it is the correct format for the jQuery 1oad () method to collect part (not all) of the HTML page, e.g., description.html #Arduino-Antics AJAX&JSON 8 Ajax refers to a group of technologies that allow you to update just one part of the page (rather than reload a whole page). You can incorporate HTML, XML, or JSON data into your pages. (JSON is becoming increasingly popular.) To load JSON from a different domain, you can use JSONP but only if the code is from a trusted source. jQuery has methods that make it easier to use Ajax . . load() is the simplest way to load HTML into your pages and allows you to update just a part of the page . . aj ax () is more powerful and more complex. (Several shorthand methods are also offered.) It is important to consider how the site will work if the user does not have JavaScript enabled, or if the page is not able to access the data from a server. . .., I 1 User interfaces allow humans to interact with programs. Application Programming Interfaces (APls) let programs (including scripts) talk to each other. j Browsers, scripts, websites, and other applications frequently open up some of their fu nct ionality so that programmers can interact with them. For example: BROWSERS SCR IPTS PLATFORMS The DOM is an APL lt allows scripts to access and update the contents of a web page while loaded in the browser. ln this chapter you will meet some HTMLS JavaScript A Pls that provi de access to ot her browser feature s. jQuery is a JavaScript file with an APL It allows you to select elements, then use its methods to work with those element s. lt is just one of many scripts that let you to perform powerful tasks using their code. Sites such as Facebook, Google, and Twitter open up their platforms so that you . can access and update data they store (via websites and apps). In this chapter you see how Google lets you t o add their maps to your sites. You do not need to know how t he ot her script or program achieves its task; you only need to know what it does. how to ask it to do something, and how to understand its replies. Therefore, this chapter will familiarize you with the form in which APls are described. I ~ 'I' , ,,I r. @APIS ..l I ~~ '1 ~I - - I O;>: PLAYING NI CELY WITH OTHERS You do not always need to know how a script or program works, as long you know how to ask it to do something, and how to process its response. The questions you can ask and the format of the answers form the API. WHAT THE API CAN DO HOW TO ACCESS IT THE SYNTAX If there is a script or program Next you need to kn ow how to access the functionality of the Finally, you need to learn how to ask the A PI to do something and API in order to use it. the format in which you should that offers functionality you need, consider using it rather expect any replies. than writing something from scratch. The DOM's functionality is built into the JavaScript interpreter in Because each script, program, or platform has different features, the browser. the first thing you need to do is understand what the A PI allows With jQuery you need to include the jQuery script from your you to do. For example: server or a CDN in your pages. • Facebook, Google+, Twitter, and other sites provide various ways The DOM and jQuery APls allow you to access and update a web page that is loaded in the browser and respond to events. • Facebook, Google+, and Twitter APls let you to access and update profiles and create status updates on their platforms. When you know what the API allows you to do, you can decide if it is the right tool for the job. @APIS to access the functionality of their platforms using APls. As long as you know how to call a function, create an object, and access the properties and methods of an object, you will be able to use any JavaScript API. This chapter introduces you to a range of APls so you gain the confidence to learn more about them and other APls. l HTML5 JAVASCRIPT APIS First, we will look at some of t he new HTM LS APls. Along with the markup in the HTMLS specification, a set of APls define that describe how to interact with features of web browsers. WHY HTMLS HAS AP IS WHAT THEY COVER WH AT YOU'LL LEAR N As technologies evolve, so does the browsing experience. For example, smartphones may have smaller screens and less power than the latest desktop computers; but they include features that are rarely found on desktop machines such as accelerometers and GPS. Each of the HTMLS APls focuses on one or more objects that browsers implement to deliver specific functionality. There is not space for an exhaustive reference of each of the HTMLS APls (there have been whole books dedicated to these new HTMLS features). But you will meet three of the APls and see examples of how to work w ith them. The HTM LS specification has not only added new markup, but also includes a new set of JavaScript APls that standardize how you can make use of these new features in any device that implements them. For example, the geolocation API describes a geo1ocat ion object that lets you ask users for their location and two objects that handle t he browsers response. There are also APls that offer improvements over existing functionality. For example, the web storage API lets you store information within the browser without relying on cookies. A PI DESCRIPTION geolocat i on How to tell where the user is located This should get you used to using t he HTMLS APls so that you can then go on and learn more about them as you need them. You will also learn how you can test to see whether or not a browser supports the functionality in any of the APls. p418 1oca1 Storage Store information in the browser (even when user closes tab/window) sess i onStorage Store information in the browser while a tab/window is open p420 history p424 How to access items from the browser's history APIS 8 FEATURE DETECTION When you write code that uses the HTMLS APls (or any other new feature in a web browser), you may need to check if the browser supports that feature before your code tries to use it. The HTMLS APl s describe objects that browsers use to implement new functionality. For example, you are about to meet an object called the geo location object that is used to determine a user's location. However, this object is only supported in modern browsers, so you need to check whether a browser supports this it before trying to use the object. It is possible to check whether a browser supports an object using a conditional statement. If the browser support s t he object, then the condition will return a truthy value and the first set of statements are run. If it is not implemented, the second set of statements is run. i f (navigator . geolocation) { Is ' navigator.geolocation supported? I Run statements that do not use geolocation ' I Run statements that use geolocation You may not be surprised to hear that there are some cross-browser issues with feature detection. For example, in the case of the code above, there was a bug in IE9 which could result in a memory leak when you check for the geo location object. This could slow down your pages. 8 APIS II II ReturRs truthy so it is supported Run statements in this code block } else { II Not supported I turned off II Or user rejected request Luckily, there is a library called Modernizr, which takes away the hassles of cross-browser issues (like jQuery for feature detection). It is a better way to check if the browser supports recent features. The script is regularly updated and refined to deal with cross-browser issues as they are discovered, so they are less likely to affect you. MODERNIZR Modernizr is a script you can use in your pages to tell whether the browser supports features of HTML, CSS, and JavaScript. It will be used in the coming HTMLS API examples. HOW TO GET MODERNIZR HOW MODERNIZR WORKS First, you need to download the script from the Modernizr.com website, where you will see: When you include the Modernizr script in your page, it adds an object called Moderni zr, which tests whether the browser supports the features that you specified that it should test for. Each fea ture you want it to test becomes a property of the Moderni zr object. Their values are a Boolean (true or false) that tell you if a feature is supported. • • A development version of the script. It is uncompressed and features every check that the script is capable of performing. A tool (see screenshot below) that lets you select which features you want to test for. You can t hen download a custom version of t he script t hat only contains the checks you need. On a live sit e, you should not test for feat ure s t hat you do not use as it would slow your site down. In our examples, Modernizr is used near the end of the page just before the script that uses it. But you may see Modernizr included in the <head> of an HTML page (if the content of the page is uses features that you are testing for). You can use Modernizr as a condition like this: If Moderni zr's geo l ocation property return s true run the code in t he curly braces: if (Modernizr . geolocation) { II Geolocation is supported MODERNIZR PROPERTIES In t he screenshot on the left, you can see some of the features that Modernizr can check for. To see a full list of Moderni zr's properties, visit: modernizr.github.io/Modernizr/test/index.html API S @ GEOLOCATION API: FINDING USERS' LOCATIONS An increasing number of sites offer extra functionality to users who disclose their location. The users' location can be requested using the geolocation API. WHAT THE GEOLOCATION API DOES HOW TO ACCESS GEOLOCATION Browsers that implement the geolocation API The geolocation API is available by default in any browser that supports it (just like the DOM is). let users share th eir location with websites. The location data is provided in the form of longitude and latitude points. There are several ways for It was first supported in IE9, Firefox 3.5, Safari 5, Chrome 5, Opera 10.6, iOS3, and Android 2. the browser to determine its location, including using data from its IP address, wireless network connection, cell towers, or GPS hardware. In some devices, the geolocation API can give you more data along with longitude and latitude. But, we Browsers that support geolocation allow users to turn the feature on and off. If it is on, the browser will ask users if they want to share data for each individual web site that requests that information. focus on these features because they have the most The way in which the browser asks the user if they support. Having seen how to use them, if you need to work with the other features, you will be able to. the next and one device to the next. will share location data differs from one browser to CHROME ON MAC ®' javascriptbook.com wants to use your computer's location. "http://javascriptbook.com" Would Like To Use Your Current Location Learn more Would you like to share your location with javascriptbook.com7 Learn More... j Shire Location Don't Allow OK x I• I FIREFOX ON PC 105 ON I PHONE 8 APIS REQUEST ING A USER'S LOCATION PROCESSING THE RESPONSE When the browser responds, t here are t wo possible outcomes: 0 Is e ' navigator.geolocation supported? I Run statements that do not use geolocation ' I e Call method: navigator.geolocation .getCurrentPosi tion() The geolocation API relies on an object called geo 1ocat ion. If you want to try and make use of the user's location, first you need to check if the browser supports t his object. This example will use the Modernizr script is used to perform this check. 1. A conditional statement is used to check whether the browser supports geolocation. 2. If geolocation is supported, the browser returns a truthy value and the first set of statements run. They request the user's location using the geo 1ocat ion object's getCurrentPosi ti on() method. 3. If geolocation is not supported, then a second set of statements is run. i f {Moder nizr . geolocati on) II Returns truthy so it is supported II Run statements i n this code block else { II Not supported I turned off II Or user rejected request getCurrentPosition() getCurrentPosition() did no t get a location got a location • I • I Call funct ion: Call function: fai 1() success() Returns object: Returns objects: Position and PositionError Position.coords Once you call the getCurrentPos i t ion () method, the code cont inues onto the next line because it is an asynchronous request ( like the Ajax calls in the last chapter). The request is asynchronous because the browser will take a while to determine the user's location (and you do not want the rest of the page to stop loading while the browser works out w here the user is). Therefore, the method has two parameters: getCur rentPositi on{success, f ail ) success is the name of a function to call if the longitude and latitude are successfully returned. This method will automatically be passed an object called position, which holds the user's location. fail is the name of a function called if the details cannot be obtained. This method will automatically be passed an object called Position Error containing details about t he error. So in all, there are three new objects you need to use in order to work with the geolocation API: geolocation, position, and PositionError. Their syntax is shown on the next page. APIS e THE GEOLOCATION API There are three objects involved in adding geolocation to your web page. The tables demonstrate how API documentation typically describes the objects, properties, and the methods you can use. geolocation OBJECT The geo 1ocati on object is used to request location data. It is a child of the navigator object. METHOD getCurrentPos it i on (success , RETURNS fail) Requests the position of the user and, if the user permits, returns the user's latitude I longitude plus other location information success is the name of a function to call if coordinates are retrieved fail is the name of a function to call if coordinates are not returned Position OBJECT If a user's location is found, a Position object is sent to the callback f unction. It has a child object called coords whose properties hold the user's location. If a device support s geo 1ocati on, it must provide a minimum amount of data (see the required column); other properties are optional (they may depend on the device's capabilities). PROPERTY RETURNS REQUIRED Position.coords . latitude Latit ude in decimal degrees Yes Position.coords . longitude Longitude in decimal degrees Yes Position . coords.accuracy Accuracy of latitude and longitude in meters Yes Position.coords.altitude Meters above sea level Yes (value can be nu 11) Position. coords. a 1ti tudeAccuracy Accuracy of altitude in meters Yes (value can be nu 11) Position . coords.heading Degrees clockwi se from north No (up to device) Position.coords.speed Speed traveling in meters per second No Cup to device) Position.coords.timestamp Time since created (formatted as Date object) No (up to device) PositionError OBJECT If location is not determined, the callback function is passed the Position Error object. PROPERTY PositionError.code RETURNS REQUIRED An error number with the following values: Yes 1 Permission denied 2 Unavailable 3 Timeout PositionError.message e APIS A message (not intended for the end user) Yes , WORKING WITH LOCATION In this example, Modernizr checks if geolocation is supported by the browser and enabled by the user. 2. When getCurrentPos i t ion() is called, the user will be asked for permission to share their location. 3. If the location is gained, the user's latitude and longitude are written into the page. 1. 4 . If it is not supported, then the user will see a message that shows their location could not be found. 5. If the location is not gained (for any reason), again the message will say that a location cannot be found. The error code is logged to the browser console. c09/ js/geolocat i on.js JAVASCRIPT II II HTML element No l oca ti on msg II II II II II Is geo supported Ask f or locat ion Say chec king . . . Not s upported Add manual entry function success(position) { msg = '<h3>Longitude:<br>'; msg += position.coords.lat i tude + '<lh3>'; msg += '<h3>Latitude:<br>'; msg += position . coords.longitude + ' <lh3>'; el Map.innerHTML = msg; II II II II II II Got location Create message Add latitude Creat e message Add l ongitude Show location function fail (msg) { elMap . textContent = msg; } console.log(msg.code); II II II Not got location Show text input Log the error var elMap = document.getElementByld( ' loc'); var msg = 'Sorry, we were unable to get your l ocation. ' ; CD @:) i f (Modernizr.geolocation) { navigator .geolocation.getCurrentPosition(success, fail); elMap.textContent ' Checking l ocation ... ' ; else { @) elMap . textContent msg; 3 c09/ geolocation.html <script src="jslgeolocation.js"><lscript> If you are unable to see a result on a desktop browser, try the example on a smart phone. You can try all examples directly from the website for the book, http://www.javascriptbook.com/. To support older browsers, search fo r a script called geoPos it ion . j s APIS 8 WEB STORAGE API: STORING DATA IN BROWSERS Web storage (or HTMLS storage) lets you store data in the browser. There are two different types of storage: local and session storage. HOW TO ACCESS THE STORAGE API Before HTMLS, cookies were the main mechanism for storing information in the browser. But cookies The data is stored as properties of the storage objects (using in key/value pairs). The value in the have several limitations, most notably they are: pair is always a string. To protect the information that • Not able to hold much data. a website stores in these storage objects, browsers employ a sam e origin policy, which means data can • Sent to the server every time you request a page from that domain. Not considered secure. • only be accessed by other pages in the same domain. http://www.google .com: 80 L\I)--J@ ~© Therefore, HTMLS introduced a storage object. There are two different flavors of the storage object, These four parts.of the URL must match: 1oca1Storage and sess i onStorage. Both use the same methods and properties. The differences are 1. Protocol: The protocol must be a match. If data how long the data is stored for and whether all tabs can access the data that is being stored. STORAGE Is t he data stored when you close a window/tab? Can all open windows/tabs access the data? LOCAL ~ SESSION 0 0 in a storage object. If a site tries to store more than Smb of data, the browser will usually ask the user whether t hey want to allow this site to store more information (never rely on users agreeing to give a 8 APIS For example, maps . googl e. com cannot access data stored by www. goog 1e. com. 3. Domain: The domain name must match. For example, googl e. com cannot access local Commonly, browsers store SMB of data per domain site more space). wa s stored by a page that starts http, the storage object cannot be accessed via https. 2. Subdomain: The subdomain name must match. storage from facebook. com. 4 . Port: The port number must match. Web servers can have many ports. Usually a port number is not specified in a URL, and the site uses port 80 for web pages, but the port number can be changed. The storage objects are just one of the new HTMLS APl s for storing data. Others include access to the file system (through the FileSystem API) and client side databases such as the Web SQL database. HOW TO ACCESS THE STORAGE API Both of these objects are implemented on the window object, so you do not need to prefix the method names with any other object name. You can also set and retrieve keys and values of the storage objects as you might with other objects using dot notation. To save an item into the storage object, you use the setltem() method, which takes two parameters: the name of the key and the value associated with it. The storage objects are commonly used to store JSON-formatted data. The JSON object's: • parse() method is used to turn the JSONformatted data into a JavaScript object • stri ngify() method is used to transform objects into JSON-formatted strings To retrieve a value from the storage object you use the get Item() method, passing it the key. II Store information 1oca1 Storage. set Item ('age' , '12') ; local Storage. setltem(' col or ' , 'blue'); II Access information and store in variable var age = localStorage.getltem('age'); var color= localStorage . get!tem('color'); II Number of items stored var items= localStorage.length; II Store information (object notation) local Storage. age 12; localStorage.color = 'blue ' ; II Access information (object notation) var age = localStorage.age; var color = localStorage.color; II Number of items stored var items= loca lStorage.length; Data for the storage objects is stored and accessed in a synchronous manner: all other processing stops while the script accesses or saves the data. Therefore, if a lot of data is regularly accessed or stored, the site can appear slower to use. Below, you can see a table that shows the methods and property of the storage objects. This table is very similar to the one you saw for the geolocation API and is indicative of the types of tables you see in documentation for APls. METHOD DESCRIPTION setltem(key, value) Creates a new key/value pair get Item( key) Gets the value for the specified key remove Item(key) Removes the key/value pair for the specified key clear() Clears all information from that storage object PROPERTY DESCR IPTION length Number of keys A PIS @ LOCAL STORAGE The examples on this page and the right-hand page store what the user enters into text boxes, but both examples store it for different lengths of time. 1. A conditional statement is used to check if the browser supports the relevant storage APL 2. References to the inputs for the username and answer are stored in variables. 3 . The script checks to see if the storage object has a value for either of these elements using the get I tern() method. If so, it is written into the appropriate input by updating its va 1ue property. 4 . Each time an input event fires on one of the inputs, the form will save the data to the 1oca1 Storage or sess i onStorage object. It will automatically be shown if you refresh the page. c09/js/local-storage.js JAVASCRIPT G) if (window.localstorage) var txtUsername = document .getElementByid('username'); // Get form elements var txtAnswer = document.getElementByld('answer'); txtUsername.value = localStorage .getitem('username'); //Elements populated txtAnswer .value = localStorage.getitem( ' answer ' ) ; // by localStorage data txtUsername.addEventlistener('input', function () { // Data saved localStorage.setitem('username ' , txtUsername .value); }, false); 4 txtAnswer.addEventListener('input', function () { localStorage.setltem('answer', txtAnswer.val ue); }, false); // Data saved c09/local-storage.html (The only difference in session-storage.html is the link to the script.) <div class="two-thirds"> <form i d="appl i cation" action="apply.php"> <label for ="username">Name</label> <input type="text" id="username" name="username" / ><br> <label for="answer">Answer</label> <textarea id="answer" name="answer"> 8 APIS 11111$1111 .. SESSION STORAGE sess i onStorage is more suited to information that: 1oca1 Storage is best suited to information that: • Changes frequently (each time t he user visit s the site - such as whether they are logged in or • location dat a). • • Only changes at set intervals (such as timetables price lists), which can be helpful to store offline. I Is personal and should not be viewed by other users of the device. The user might want to come back and use again (such as saving preferences I settings). c09/ js/ session-storage.js JAVASCR I PT G) if (window.sessionstorage) { var txtUsername = document.getElementBy!d('username ' ); var txtAnswer = document.getElementByld('answer'); II Get form element s txtUsername.value = sessionStorage .getltem('username ' ); txtAnswer.value = sessionStorage.getltem('answer'); II II Elements popul ated by sessionSt orage txtUsername.addEventl ist ener('input ' , function () { II Save data sess i onStorage.setltem('username', txtUsername. val ue); }, false) ; 4 txtAnswer.addEventlistener('input', function () { sessionStorage.set!tem('answer', txtAnswer.value); }, false); II Sa ve da t a i;jJiiJil What would you like to make? Name Answer 11!1M APIS @ HISTORY API & PUSHSTATE If you move from one page to another, the browser's history remembers which pages you visited. But Ajax applications do not load new pages, so they can use the hi story AP I to update the location bar and history. WHAT THE HISTORY API DOES Each tab or window in the browser keeps its own history of pages you have viewed. When you visit a new page in that tab or window, the URL is added to the list of pages you have visited in the history. Because of this, you can use the back and forward buttons in a browser to move between pages you have visited in that tab or w indow. However, on sites that use Ajax to load information, the URL is not automatically updated (and the back button might not show the last thing that the user was viewing). FIRST LINK: one.html ONE TWO THREE The first page you visit is added to history stack one.html SECON D LIN K: two.html O N E TWO THREE APIS • • You can update the browser history stack using the pushState () and r ep l aceState () methods. Extra information can be stored with each item. As you will see, information can be added to the history object when an Ajax request is made, and the user can be shown the righ t content when they press back or forward buttons. THIRD LINK: three.html O NE TWO THREE BACK BUTTON: 0 two.html ONE TWO TH REE Click a link: that page goes Click a link: that page goes Pressing back takes you to the top of history stack to the top of history stack down the history stack two.html three.html three.html one.html two.html two.html one.html one . html Browsing pages: As you browse, the URL in your web browser's address bar updates. The page is also added to the top of something called the history stack. 9 HTMLS's history API can help fix this problem. It lets you interact with the browser's hi story object: Pressing back: takes you back down the stack Pressing forward: takes you up the stack (where possible) New page: if you request a new page, it will replace anything above the current page in the stack State refers to the condition that something is in at a particular time. The browser history is like a pile (or stack) of states, one on top of t he other. The three methods on this page allow you to manipulate the state in browsers. ADDING INFORMATION TO THE HISTORY OBJECT pushState() adds an entry to the hi story object. replace State () updates.the current entry. Both take the same three parameters (below), each of which updates the hi story object. Because the hi story object is a child of the window object, you can use its name directly in the script; you can write hi story. pushState () , you do not need to write wi ndow. hi story. pushState (). history.pushState(state , title , url ); L ....G} ....! 1. The hi story object can store information wi th each item in the history. This is provided in the state parameter and can be retrieved when you go back to that page. L..... ~}- ..! 2. Currently unused by most browsers, the title parameter is intended to change the title of the page. (You can specify a string for this value, ready for when browsers support it.) '·®·' 3. The URL that you want the browser to show for this page. It must be on the same origin as the current URL and it should show the correct content if the user goes back to that URL. GETTING INFORMATION FROM THE HISTORY OBJECT Adding content to the browser history is only part of t he solution; the other half is loading the right content when the user presses the back or forward buttons. To help show the right content, the onpopstate event fires whenever the user requests a new page. This onpopstate event is used to trigger a function that will load the appropriate content into the page. There are two ways to determine what content should be loaded into the page: • • The location object (which represents the browser's location bar) The state information in the hi story object The 1ocat ion object: If the user presses back or forward, the address bar will update itself, so you can get the URL for the page that should be loaded using 1ocat ion. pathname (the 1ocati on object is a child of the window object and its pathname property is the current URL). This works well when you are updating an entire page. The state: Because the first parameter of the pushState () method stores data with the hi story object for that page, you can use it to store JSON-formatted data. That data can then be loaded directly into the page. (This is used when the new content loads data rather than a traditional web page.) APIS@ THE HISTORY OBJECT The HTMLS history API describes the functionality of the hi story object in modern web browsers. It lets you access and update the browser history (but only for pages the user visited on your site). Even if the visitor is not taken to a new page in the browser window (for example, when only a part of the page is updated using Ajax), you can modify the hi story object to ensure that the back and forward buttons work as the user would expect them to on non-Ajax pages. Again, the table below is indicative of the kind you might see in API documentation. As you become comfortable using the methods, properties, and events of an object you will find it easier to work with all kinds of APls. hi story OBJECT METHOD DESCRIPTION histor y .back() Takes you back in the history, like the browser's back button history.forward() Takes you forward in the history, like the browser's forward button hi story .go() Takes you to a specific page in the history. It is an index number, starting at 0 . • go(l) is like clicking the forward button and . go (-1) is like clicking back history.pushState() Add s an item to the history stack (Clicking on a relative link in a page usually triggers a hashchange event, rather than 1oad, but no event fires if you use pushState () and the url contains a hash) history. rep 1aceState () Does the same as pus hState () except it modifies the current history entry 8 PROPERTY DESCRIPTION length Tells you how many items are in the hi story object EVENT DESCRIPTION window . onpopstate Used to handle the user moving backwards or forwards APIS WORKING WI TH HISTORY 1. The l oadContent () function uses jQuery's . load() method (see p390) to load content into the page. 2. If a link is clicked on, an anonymous function runs. 3. The page to load is held in a variable called href. 4. The current links are updated. 5. The l oadContent () function is called (see step 1). 6. The pushState() method of the hi story object updates the history stack. c09/js/history.js JAVASCRIPT $(function() { //DOM has loaded ~ function loadContent(url){ // Load new content into page ~ $( ' #content').load(url + ' #container ').hide{).fade ln('slow'); @ ® @{ ® © (j) ® ® @{ $( ' nav a').on('click ' , funct ion(e) e.preventOefault(); var href = this.href; var $this = $(th i s); $('a') . removeClass('current'); $this.addClass('current'); loadContent(href); history.pushState(' ', $this.text, href); }) ; II II II II II II II II Click handler Stop lin k loading new page Get href attri bute of lin k Store l ink in jQuery object Remove current from links Update current link Ca 11 function : loads content Update history window.onpopstate = function() { //Handle back/forward buttons var path= location.pathname; //Get the fi le path loadContent{path); 11 Call function to l oad page var page= path.substring(location.pathname.lastindexOf("/") + 1); $('a').removeClass('current'); //Remove current f rom links $('[href='" +page+ 111 ] 1 ).addClass( ' current'); //Update current lin k }; }) ; l;IJiiJil lST 2ND 3RD First prize is t he OJI Phantom· a small, all-in one quadcopter designed for aerial photography enthusiasts. 11 comes fully configured and ready to fly. Both compact and stylish, the highly integrated design means that it's easy to carry w herever you go, ready at a moment's notice. 7. When the user clicks backwards or forwards, the onpopstate event fires. This is used to trigger an anonymous function. 8. The browser's location bar will display the corresponding page from the history stack, so l ocation.pathname is used to obtain the path fo r the page that needs to be loaded. 9. The 1oadContent () function (in step 1) is called again, to retrieve the specified page. 10. The fi le name is retrieved so that the current link can be updated. APIS 8 SCRIPTS WITH APIS There are hundreds of scripts available for free on the web. Many have an API you need to use to get them to work for you. SCRIPT APIS JQUERY PLUGINS Lots of developers share their scripts through a range of Many developers have Angular.js is another JavaScript written code that adds extra functionality to jQuery. These library, but it is very different from jQuery. Its purpose is to scripts add methods to extend the jQuery object, which are make it easier to develop web websites. Some are relatively simple scripts with a single purpose (such as sliders, lightboxes, and table sorters). Others are far more complicated and can be used for a range of purposes (such a·s jQuery). ANGULAR applications. known as jQuery plugins. One of the most striking things is that it allows you to access When you use these plugins, first you include the jQuery script, followed by the plugin and update the contents of a page without writing code to In this section, you will meet two script. Then, when you select handle events, select elements, different types of scripts whose elements (as you do with standard in jQuery methods), or update the content of an element. We only have space to you have learned their API: the plugin allows you to apply • A set of jQuery plugins known as jQuery UI. new methods that it has defined to that selection, offering new func tionality that was not in the provide a very basic introduction to Angular in this chapter, but it does help demonstrate the • A script that makes it easier to create web apps called code you can make use of when variety of scripts available. original jQuery script. AngularJS. THIRD -PARTY SCRIPTS It is always a good idea to check: This helps to ensure that the Before writing your own script it can pay to check if someone • Whether it has been updated fairly recently else has already done the hard work for you (there is no point • That the JavaScript is separate from the HTML script uses modern practices and is still being updated. It is also worth noting that the reinventing the wheel). • Reviews of the script if they are available @APIS instructions for using a script are not always called an API. JQUERY UI The jQuery foundation maintain its own set of jQuery plugins called jQuery UI. They help create user interfaces. WHAT JQUERY UI DOES HOW TO ACCESS IT SYNTAX jQuery UI is a suite of jQuery plugins that extends jQuery with a set of methods to create: To use jQuery UI, first you must include jQuery in your page; then you must include the jQuery UI script (after the jQuery file). Once you have included the jQuery and jQuery UI scripts in the page, the syntax is very similar to using other jQuery methods. You create a jQuery selection and then call a method that will be defined in the plugin. • • • Widgets (such as accordions and tabs) Effects (that make elements appear and disappear) Interactions (such as drag and drop functionality) jQuery UI not only provides JavaScript you can use, but it also comes with a set of themes that help control how the plugins look on the page. If you want fine-grained control over how the jQuery plugins look in the browser, you can also use the theme roll er, which gives you more precise control over the appearance of the elements. Versions of jQuery UI are available on the same CONs as the main jQuery file. But, if you only need part of the jQuery UI functionality, you can just download the relevant parts from the jqueryui. com website. This creates a smaller JavaScript file. which in turn makes the script faster to download. As you will see, the jQuery UI documentation not only has to explain the JavaScript methods and properties it uses, but also how to structure your HTML if you want to use many of its widgets and interactions. - ----·---------·----.. -- ---..-.-. . .-.. ·----... .. ..... ---------------·---· ___ _ _ _ _ _ _ ...__.. _ ___ • ..,_ 0 APIS@ JQUERY UI ACCORDION Creating an accordion with jQuery UI is very simple. You only need to know: • • • How to structure your HTML What element(s) should be used in the jQuery selector The jQuery UI method to call t. In this example, the HTML for an accordion is contained within a

element ( its id attribute has a value of prizes, which will be used in the script). Each panel of the accordion has: 2. An

element for the clickable heading 3. A

element for the content of that panel ""*'' c09/ jqui-accordion .html G) @ ® ® ©

lst Prize

First prize is the OJI ...

2nd Prize

Second pri ze is the •••

3rd Prize

Third prize is a • • •

11 4 . Before the closing tag l;IJillii the jQuery and jQuery UI scripts are both included in the page. • 1st Pr1D 5. Finally, you can see a third 2nd Prize 3rd Prize First prize is the OJI Phantom · a small, all-in-one quadcopter designed for aerial photography enthusiasts. It comes fully configured and ready to fly. Both compact and stylish, the highly integrated design means that ifs easy to carry wherever you go, ready at a moment's notice. This structure is common in most jQuery plugins: 1. jQuery is loaded . 2. The plugin is loaded. 3. An anonymous function runs when the page is ready. element that will be used in the jQuery selector. The content, however, is slightly different. 2. The tabs are created using an unordered list. The link inside each list item points to a

element lower down the page that holds content for that tab. 3. Note that the id attributes on the

elements must match the value of the href attribute on the tabs. Once you have included jQuery and jQuery UI in the page, there is a third script tag with an anonymous function that runs when the DOM has loaded. l;IJiiJll 1st Prize The tabs are a similar concept to the accordion. The anonymous function will create a jQuery selection and applies the method defined in the jQuery plugin to that selection. Some methods will also require parameters in order to do their job. · 4 . A jQuery selector picks the element whose id attribute has a value of prizes (this is the containing element for the tabs). Then it calls the • tabs () method is called on that selection. On a live site, the JavaScript should be kept in an external file to maintain a separation of concerns, but it is shown here for convenience and to show how little work needs to be done to achieve this effect. APIS@ JQUERY UI FORM jQuery UI introduces several form controls that make it easier tor people to enter data into forms. This example demonstrates two of them: Slider input: This allows people to select a numeric value using a draggable slider. This slider has two handles that allow the user to set a range between two numbers. As you can see on the right, the HTML tor the slider is made up of two components: 1. A normal label and text input that would allow users to enter a number. 2. An extra

element used to hold the slider that you see on the page. Date picker: This allows people to pick a date from a pop-up calendar, which helps ensure that users provide the date in the correct format that you need. 3. It is just a text input, and does not need any additional markup. Before the closing tag, you can see that there are three i;IJiiJii Pr'lct l'ange: J17S-UOO • t , ,. 4 11 1J 6 U 1 H • U t t6 " It ,, 10 11 u u s UDUUUH» II Most jQuery scripts live within the . ready() function or its shortcut (used on the next page). As you saw in Chapter 7, this ensures that the script only runs when the DOM has loaded. If you include more than one jQuery plugin, each of which uses the. ready() method, you do not repeat the function - you combine the code from inside both functions into the one. ' .. 1. The JavaScript is contained within the shortcut for the jQuery • ready() method. It contains the setup instructions for both of the form controls. 2. To turn a text input into a date picker, all you need to do is select the text input and then call the datepi cker () method on that selection. 3. Cache the inputs for price. 4. The slider uses an object literal to set the properties of the . s 1i der () method (see below). c09/js/form-init.js JAVA SCRIPT CD $(function() { @ $(' #arrival ').datepicker(); II ® var $amount = $(' #amount ' ); var $range = $( ' 1price-range'); II Cache the price input II Cache the

for the price range II Turn price-range input into a slider II If i t is a range it gets two handles II Minimum value II Maximum value II Values to use when the page loads II When slider used update amount element 4 Turn input to JQUI datepicker $('#price-range').slider({ range: true, min: 0, max: 400, values: [175, 300], slide : function(event, ui) { $amount.val('$ ' + ui . values[O] +' - $ ' + ui.values[l]); } }) ; $amount Set initial values of amount element .val( ' $' + $range.slider('values', O) A$ sign then lower range + ' - $' + $range.slider( ' values', l)); A$ sign then higher range II II II }) ; 5. When the form loads, the text input that shows the amount as text needs to know the initial range for the slider. The value of that input is made up of: When a jQuery plugin has settings that vary each time it is used, it is common to pass the settings in an object literal. You can see this with the •s 1i der() method; it is passed several parameters and a method: a) A dollar sign: $ followed by the lower range value. range A Boolean to give the slider two handles (not just a single value) b) A dash and dollar sign: - $ followed by the higher range value. min The minimum value for the slider max The maximum value for the slider values An array containing two values to specify an initial range in the slider when the page first loads METHOD DESCRIPTION slider() Updates the text input which shows the text values for the slider (the documentation shows examples for this) The script is called form-i nit. js. Programmers often use init as a shorthand for initialize; and this script is used to set an initial state for the form. PROPERTY DESCRIPTION APIS 8 ANGULARJS AngularJS is a framework that makes it easier to create web apps. In particular, it assists in creating apps that write, read, update, and delete data in a database on a server. Angular is based on a software development approach called model view controller or MVC. (It is actually variant on MVC, not strict MVC). To use Angular, first you include the angular.js script in your page, and then it makes a set of tools available to you (just like jQuery does). The point of MVC is that it separates out parts of a web application, in t he same way that front-end developers should separate content (HTML), presentation (CSS), and behavior (JavaScript). We do not have space to go into Angular in detail, but it introduces another example of a very different script with an API, as well as concepts such as t he MVC approach, templat ing, and data binding. You can download Angular and view the full API at http: //angul arjs. org. - { ! ) - ................................. - - VIEW The View is what the user sees. In a web app, it is the HTML page. Angular lets you create templates with spaces for particular types of content. If the user changes values in the view, commands (1) are sent to up the chain to update the model. There can be different views of the same data, e.g., users and administrators. 8 APIS ~ This ViewModel (or controller) will update t he view if t here are changes to the model, and will update the model if there are change s in t he view. The task of keeping data synchronized between the two is known as dat a binding (2). For example. if a form in the view is updated, it reflects the changes and updates the server. MODEL In a web app, the Model is usually stored in the database, and managed by server-side code that can access and update the model. When the model has been updated, change notifications (3) are sent to t he ViewModel. This info can be passed onto the View to keep it updated. USING ANGULAR W:lifull c09/ angular-introducti on.html ... .. . Item: {{ description }} Cost: ${{ cost }} Qty: Subtotal: {{qty *cost I currency}} c09/j s/angular-controll er.js G) functi on BasketCtrl ($scope) $scope .descripti on = ' Single t i ck et I; $scope.cost = 8; $scope .qty = 1; @ } 9 APIS ""Mi' JAVASCRIPT DATA BINDING & SCOPE 2. It is also possible to evaluate expressions inside the curly braces. In step 3, the subtotal is calculated in the template. This is then formatted as a currency. Furthermore, if you update the quantity in the form, the underlying data model ( in the JavaScript object) is updated along with the subtotal. Try updating the values in the JavaScript file, then refreshing the HTML to see t he connection. This is an example of something programmers call data binding; the data in the JavaScript file is bound to the HTML and viceversa. If the ViewModel changes, the view updates. If the view changes, the View Model updates. As this shows, Angular is particularly helpful when you load data from a separate file into the view. A page can have multiple controllers, each of which has its own scope. In the HTML, the ng- contro 11 er attribute is used on an element to define the scope of that controller. This is similar to variable scope. For example, a different element might have a different controller (e.g., StoreCtr1), and both controllers would be able to have a property called description. Because the scope is only within that element, each controller's description property would only be used within that controller's scope. •aii•JS• THE MAKER BUS Buy tickets ...• I •1111• ·-. ·- ·-Ism•\ •• I I I ()- o~ Item: Single ticket Cost: $8 Qty: 1 Subtotal: $8.00 APIS 8 GETTING EXTERNAL DATA Here, the controller (the JavaScript file) collects the model (the JSON data) from a fi le on the server. ( In a web app, the JSON data would usually come from a database.) This updates the view in the HTML. To collect the data, A ngular uses what it calls the $http service. Inside the angular .js file, the code uses the XMLHttpRequest object to make Ajax requests (like those you saw in Chapter 8). 1. The path to the JSON file is relative to the HTML template, not the JavaScript file (even though the path is written in the JavaScript). Just like jQuery's . aj ax () method, t he $http service has several shortcuts to make it easier to create some requests. To fetch data it uses get(), post(), and j sonp ();to delete data it uses delete ();and to create new records: put (). This example uses get (). 1111&11 c09/ angular-external -data . html ® c09/js/angular-external -data.js G) @ ~ .. JAVASCRIPT f un cti on Ti metabl eCtrl ($ scope, $http) { $http .get ( ' j s/ i t ems . json ' ) .success(function(data) { $scope .sessions data . sessions ; }) .error(funct ion(data) { console . log(' error') }) ; // The er ror cou ld show a f r i endl y message to users ... c09/js/items .json JAVASCR I PT 'l "sessi ons" : [ {"time": "09. 00" , "title" : "Intro to 30 Modeling", "detail" : "Come .. . "} {"time" : "10.00", "title" : "Circuit Hacking", "detail" : "Head t o the . .. "} {"time" : "11 . 30" , "ti tle": "Arduino Antics" , "detail" : "Learn how ... "} ] 9 APIS LOOP THROUGH RESULTS 2 . If t he request successfully fetches data, the code in the success() function runs. In t his case, if it is successful the $scope object is passed the data from the JSON object. This allows the template to display the data. 3. If it fa ils, the error () function is run instead. This would to show an error message to users. Here it writes to the console (which you meet on p4 64). 4. The JSON data contains several objects, each of which is displayed in t he page. Note, there is no JavaScript loop written in t he controller. Instead, the HTML template (or view) is where the loop occurs. 5. The ng-repeat directive on the opening tag indicates that the table row should act like a loop. It should go through each object in t he sessions array and create a new table row for each of them. l;lii'li' Session Times TIME TITLE DETAIL ~~~~~~~~--~~~~~~~~~~~ 09.00 Intro to 30 Modeling Come learn how to create 30 models of parts you can then make on our bus! You'll get to know the same 30 modeling software that used worldwide in professional settings like engineering, product design, and more. Develop and test ideas in a fun and informative session hosted by Bella Stone. professional roboticist. 1o.oo Circuit Hacking Head to the Electro-Tent for a free introductory soldering lesson. There will be electronics kits on hand for those who wish to make things. and experienced hackers and engineers around to answer all your In the HTML, the value of the ng- repeat directive is: session in sessions • sessions matches the JSON data; it corresponds with the object name. • session is t he identifier used in t he template to indicate the name of each individual object w ithin the sessions object. This is just a very high-level int roduction to Angular, but does demonstrate some popular techniques when using JavaScript to develop web apps, such as: • • • If the ng-r epeat attribute used different names t han sessi on, the value in t he curly braces in the HTML would have to change to reflect t hat name. For example, if it said 1ectur e in sessi ons, then the curly braces would change to reflect that: { { lectur e. ti me}},{{ l ect ure . title }},etc. The use of templates that take content from JavaScript and update the HTML page. The rise in MVC-influenced frameworks for web based application development. The use of libraries to save developers having to w rite so much code. For more on A ngular, see http : //angul arj s . or g A nother very popular alternative is Backbone http : //backbonejs . org • A PIS@ PLATFORM APIS Many large websites expose their APls that allow you to access and update the data on their sites, including Facebook, Google, and Twitter. WHAT YOU CAN DO HOW TO ACCESS THE SYNTAX Each site offers different capabilities, for example: On the web, you can access The syntax of an API will vary from platform to platform. But • Facebook offers features such as allowing people to like sites or add comments and discussion to the bottom of a web page. • • several of these platform APls by including a script they provide in your page. That script will typically create an object (just like the jQuery script adds a jQuery object). In turn, that object will have methods and properties that you can use to tables of objects, methods, and properties like those you saw in the first section of this chapter. You m ay also see sample code that demonstrates tasks people access (and sometimes update) commonly use the API for ( like the examples you have seen in in your pages. t he data on that platform. this chapter). Twitter allows you to display your latest tweets on your Most sites that offer an API will Some platforms offer APls in multiple languages, so that you can interact wit h them using Google Maps lets you to include various types of maps web pages or send new tweets. By exposing some of the also provide documentation that explains how to use its objects, methods, and properties (along with some basic examples). functiona lity of their platforms 8 they will be documented using server-side languages such as PHP IC# as well as using JavaScri pt. these companies are advertising Some of the larger sites prov ide t heir sites and encouraging people back to them. This in turn pages where you can get code In the rest of this chapter we will increase their total amount of activity (and their revenue). that you can copy and paste into your site without even needing be focusing on the Google M aps API as an example of what you to understand the APL can do with platform APls. Be aware that companies can Facebook, Google, and Twitter If you work on a site for a client. change either how you access have all made changes to both APls or change what you are allowed to use the APls fo r. how you access their APls and make them aware that APls can change (and that could resu lt in what you can use th em for. recodi ng pages that use them). APIS GOOGLE MAPS API Currently, one of the most popular APls in use on the web is the Google Maps API, which allows you to add maps to web pages. WHAT IT DOES WHAT YOU'LL SEE API KEY The Google Maps JavaScript API We only have space to show a few of the features of the Google Some APls require that you register and request an API Maps API, as it is very powerful and contains a lot of advanced key in order to get data from allows you to show Google maps in your web pages. It also allows you to customize the look of the maps and what information is shown on them. You may find it helpful to look at the documentation for the Google Maps API while going features. But the examples in their servers. An API key is a set of letters and numbers that this chapter will get you used to working with its API. uniquely identify you to the application so th e owners of t he You will start by seeing how to add a map to your web pages, site can track how much you use the API and what you use it for. through this example. It will then you will see how to change At the time of writing, Google show you other things that you allowed websites to call their can do with the API. https: // the controls, and finally how to change the colors and add developers.google.com/maps/ markers on top of the map. ~ ( . -. ,.....,, '• I If .... - ......-- - but sites that consistently make more requests are required to use a key and pay for the service. - '*" "" •""'-"" maps API 25,000 times per day for free without an API key, If you run a busy site, or the map is part of the core application, it is good practice to use an API ..,........., ,1,..,_.,...,,....~ u.u._._. .. ---·---.... ....... ...--........ ........... . . ........ ...................... _. .......__ _ .,.. "Ml_....... . .........._ ... _ .......... ~ - ...u .......,""""" ,..,~, .. o WW ...._. .. _.,_...,.. .... ..,...., .. _ . . , _ _ 1... .i..c ............... wu. ... -----. .... o.•o __ .............. __ ...... ___ o.,..._.,.,,. .. ,,,. ..,...,., ., ......... -.-...... ..... .....,.Tlol-. .... "'""'"''"'() ..... -w11.-..-.~ -t 1•ll•._,,,.11t) ~l • ltll\I ltl ,.,tJHO...C) PtutiuJM ~ _ ~ ,... .. _... .....jlfttt..... •wr---•· -.-i~... ... ......iw-••Nit._ ... _.."""~ · . .. . . . . . . .. _ . _ _ "'...,,...,.._ ,.._...... ,.!.. ..,........ .......... . ... ll'•)ft~ .. d,~-rit\...( ) f\lt_ _ _ ...,.. . . . _ ....... _."4•-w'.-C ) tV"1~1" ° ' -. ....... _ _.. ,._ ..... ....,. . ... . . . , _, _ _ _ key with Google Maps because: • You can see how many times your site requests the API • Google can contact you if they change terms of service or charge for use To get a Google API key, see https://cloud .google.com/ console APIS 8 BASIC MAP SETTINGS Once you have included the Google Maps script in your page, you can use their maps object. It lets you display Google maps in your pages. CREATING A MAP MAP OPTIONS The maps object is stored w ithin an object called The settings that control how the m ap should look are stored inside another JavaScript object called googl e. This creates scope for all Google objects. To add a map to your page, you create a new map object using a constructor: Map () . The constructor is the righ t, you can see that the mapOpt ions object part of the maps object, and it has two parameters: • The element into which you want the map drawn uses three pieces of data: • Longitude and latitude of the center of the map • • • A set of map options that control how it is displayed given using object literal notation Zoom level is typically set using a number between 0 (the full earth) and 16. (Some cities can go higher.) ZOOM LEVEL: 0 ZOOM LEVEL: 4 ..:-.:::::::_. _ .. 8 mapOpti ons. It is created as an object literal before you call th e Map() constructor. In the JavaScript on APIS ZOOM LEVEL: 16 The zoom level for the map The type of map data you want to show The images that_make up the map are called tiles. Four map types each show a different style of map. A BASIC GOOG LE MAP ""*'' c09/ google-map. html

JAVASCRIPT cll/js/no-js. js var el Oocument = document.documentElement; elDocument . className = el Document .c lassName.replace(/ (Al\s)no- js(\s l $) / , '$1'); CONTENT PANELS e ACCORDION When you click on the title of an accordion, its corresponding panel expands to reveal the content. An accordion is usually created within an unordered list (in a element). Each element is a new item in the accordion. The items contain: • • A visible label (in this example, it is a ) A hidden panel holding the content (a

) Clicking a label prompts the associated panel to be shown (or to be hidden if it is in view). To just hide or show a panel, you could change the value of the cl ass attribute on the associated panel (triggering a new CSS rule to show or hide it). But, in this case, jQuery will be used to animate the panel into view or hide it. HTMLS introduces

and elements to create a similar effect. but (at the time of writing) browser support was not widespread. Therefore, a script like this would still be used for browsers that do not support those features. 8 CONTENT PANELS Other tabs scripts include liteAccordion and zAccordion. They are also included in jQuery UI and Bootstrap. ACCORDION WITH ALL PANE LS CO LLAPSED LABEL 1 COLLAPSED LABEL 2 COLLAPSED LABEL 3 COLLAPSED When t he page loads, CSS rules are used to hide t he panels. A CCO RDION WIT H SECOND PANEL EXPANDED LABEL 1 . COL LAPSED Clicking a label prompts the hidden panel that follows it to animate and reveal its full height. This is done using jQuery. Clicking on the label again would hide the panel. CO NTENT 2 EXPANDED LABEL 3 COLLAPSED AN IMATING CONTENT WIT H SHOW, HIDE, AND TOGG L E jQuery's .show(}, .hide{}, and • toggle () methods animate the showing and hiding of elements. jQuery calculates t he size of the box, including its content, and any margins and padding. This helps if you do not kn ow what content appears in a box. (To use CSS animat ion, you would need to calculate the box's height, margin and padding.) I • MARGIN The t hree methods are all shorthand for the animate () method. For example, the show() method is shorthand for: BOX HEOGHT • BORDER • PADDING • togg 1e () saves you writ ing con ditional code to tell w hether t he box is already being shown or not. (If a box is shown, it hides it, and if hidden, ·i t will show it.) $(' . accor di on-panel ') . animate( { height : 'show ' , paddingTop: ' show ' , paddi ngBott om: 'show', mar ginTop : 'show', marginBottom : ' show ' }) ; CONTENT PANELS 8 CREATING AN ACCORDION Below you can see a diagram, rather like a f lowchart. These diagrams have two purposes. They help you: i) Follow the code samples; the numbers on the diagram correspond with the steps on the right, and t he script on the right-hand page. Together, the diagrams, steps, and comments in the code should help you understand how each example works. ii) Learn how to plan a script before coding it. This is not a "formal" diagram style, but it gives you a visual idea of w hat is going on with the script. The diagrams show how a collection of small, individual instructions achieve a larger goal, and if you follow the arrows you can see how the data flows around the parts of the script. 0 Event: c1i ck on tab J ANONYMOUS FUNCTION: Shows/hides the corresponding panel e e 0 1. A jQuery collection is created to hold elements whose cl ass attribute has a value of accordion. In the HTML you can see that this corresponds to the unordered list element (there could be several lists on the page, each acting as an accordion). An event listener waits for the user to click on one of the buttons whose cl ass attribute has a value of accordion-control . This triggers an anonymous function. 2. The preventDefault () method prevents browsers treating the the button like a submit button. It can be a good idea to use the preventDefaul t () method early in a function so that anyone looking at your code knows that the form element or link does not do what they might expect it to. Prevent default action of button I Get button user clicked on I Get accordion panel after that button + I ' ' Is panel being animated? l Is p anel visible? I ' I 5 .. not (':animated') checks that it is not in t he middle of being animated. (If the user repeatedly clicks t he same label, this stops the . s 1i deToggl e () method from queuing multiple animations.) Hide panel Some programmers use Unified Modeling Language or class diagrams - but they have a steeper learning curve, and these flowcharts are here to help you see how the interpreter moves through the script. CONTENT PANELS 3. Another jQuery selection is made using t he this keyword, which refers to the element the user clicked upon. Three jQuery methods are applied to that jQuery selection holding the element the user clicked on. 4 •• next ( ' • accordion-panel ') selects the next element with a class of accordion-panel . \ Show panel 0 Now let's take a look at how the diagram is translat ed into code. The steps below correspond to the numbers next to the JavaScript code on the right-hand page and the diagram on the left. 6 . • s l i deToggl e() will show the panel if it is currently hidden and will hide the panel if it is currently visible. 1111$11 el l/accordi on.html

Classics

Panel content goes here ...

The Flower Series

Pane l content goes here ...

Salt O' the Sea

Panel content goes here ... cl l/css/accordion.css .accordion-panel { display: none; } JAVASCRIPT cll/js/accordi on.js G) $(' .accordion ' ) . on('cl i ck', ' .accordion -control', fu nct i on(e){ II When clicked @ e.preventDefault() ; II Prevent def ault action of button II Get the element the user clicked on ® $(this) ~ .next( '. accordion-panel ' ) II Select following panel II If it is not currentl y animating ~ .not(' :animated ' ) II Use slide toggle to show or hide it © .sl ideToggl e() ; }) ; Note how steps 4, 5, and 6 are chained off the same jQuery selection. You saw a screenshot of the accordion example on p492, at th e start of this secti on. CONTENT PANELS 8 TABBED PANEL When you click on one of the tabs, its corresponding panel is shown. Tabbed panels look a little like index cards. You should be able to see all of th e tabs, but: • Only one tab should look active. • Only the panel t hat corresponds to th e act ive tab should be shown (all other panels should be hidden). The tabs are typically created using an unordered list. Each element represent s a tab and within each tab is a link. Other tabs script s include Tabslet and Tabulous. They are also included in jQuery UI and Bootstrap. The panels follow the unordered list that holds the tabs, and each panel is stored in a

. To associate the tab to the panel: • The link in the tab, like all links, has an href attribute. • The panel has an id attribute. Both attributes share the same value. (This is the same principle as creating a link to another location within an HTML page.) 8 CONTENT PANELS FIRST TAB SELECTED - TAB 1 HIGHLIGHTED CONTEN T PANELl SHOWING PANEL 2 HIDDEN PANEL 3 HIDDEN SECOND TAB SELECTED *H:fH *M='* - TAB 2 HIGHLIGHTED PANEL 1 HIDDEN CONTENT PANEL 2 SHOWING When the page loads, CSS is used to make the tabs sit next to each other and to indicate which one is considered active. CSS also hides the panels, except for the one that corresponds with the active tab. When the user clicks on the link inside a tab, the script uses jQuery to get the value of the href attribute from the link. This corresponds to the id attribute on the panel that should be shown. The script then updates the values in the cl ass attribute on that tab and panel, adding a value of active. It also removes that value from the tab and panel that had previously been active. If the user does not have JavaScript enabled, t he link in the tab takes the user to the appropriate part of t he page. CONTENT PANELS 8 CREATING TAB PAN ELS 0 The flowchart shows the steps that are involved Select all sets of tabs on page ( • 'i·'·l!"'iMll§iil.ijifii'·JIU+I 1 ANONYMOUS FUNCTION: Set up this group of t abs e function that is run for each set of tabs ( like a loop). The code in the anonymous function deals with one set of tabs at a time, and the steps would be • repeated for each set of tabs on the page. 2. Four variables hold details of the active tab: i) $this holds the current set of tabs. ii) $tab holds the currently active tab. I Event : cl i ck on tab control I ANONYMOUS FUNCTION Show this tab and hide others 0 e e The . find() method selects the active tab. iii) $1 ink holds the element within that tab. Prevent default action of link I Create variables: $1 i nk: jQuery object containing link id: value of href attribute from tab user just cli cked iv) $panel holds the value of the href attribute for the active tab (this variable will be used to hide the panel if the user selects a different one). 3. An event listener is set up to check for w hen the user clicks on any tab w ithin t hat list. When they do, • I 0 5. Creates a variable called $1 ink to hold the current l e 0 it runs another anonymous function. 4 . e. preventDef au 1t () prevents the link that users clicked upon taking them to that page. Is this item active? ' translated into code: 1. A jQuery selection picks all sets of tabs w ithin the page. The . each ( ) met hod calls an anonymous Create variables: $thi s: current list $tab: current ly act ive tab $1 ink: link element in act ive tab $panel: value of href attribute on link f) in creating tabs when they are found in the HTML. Below, you can see how these steps can be ~ link inside a jQuery object. Remove active from cl ass on tab I Remove active from cl ass on panel I Set tab user clicked on as active I Set corresponding panel as active 6. Creates a variable called i d to hold the value of the href attribute from the tab that was clicked. It is called id because it is used to select the matching content panel (using its id attribute). 7. An i f statement checks whether the id variable contains a value, and the current item is not active. • If both conditions are met: I 8 . The previously act ive tab and panel have the cl ass of act i ve removed (which deactivates the tab and hides the panel). Update $panel & $t ab variables GO TO NEXT SET O F TABS ) 9. The tab that was clicked on and its corresponding panel both have active added to their cl ass attributes (which makes the tab look act ive and displays its corresponding panel, w hich was hidden). At the same time, references to these elements are stored in the $pane 1 and $tab variables. 8 CONTENT PANELS IHIMI ell/ tabs . html

• Descri ption
• Ingredients
• Del i very
  Content l . ..

  Content 2. . . Content 3. . . cl l/css/ta bs . css .tab-panel display: none;} . tab-panel.active { display: block;} cll/j s/tabs . j s JAVASCRIPT G) $( ' . tab-1 ist') .each(function() { var $this = $(this); var $tab $this . find('li .active'); var $link $tab.find( ' a'); var $panel = $($link.attr('href')); ® @ ® © (j) @{ @{ $thi s.on(' click ' , ' .tab-control', function(e) e.preventDefault(); var $link $(this); var id = this.hash; II II II II II { II II II II if (id && !$link.is( '. active')) $panel . removeClass('active'); $tab.removeClass('active'); $panel = $(id).addClass( ' active'); $tab = $l i nk . parent() .addClass('active ' ); II II II II II Find l ists of t abs Store this l ist Get the active list item Get link from active tab Get active panel When click on a tab Prevent li nk behavior Store the current link Get href of clicked tab If not currently active Ma ke panel i nact i ve Make tab inactive Make new panel act ive Make new tab active } }) ; }) ; CONTENT PANELS 9 MODAL WINDOW A modal window is any type of content that appears "in front of" the rest of the page's content. It must be "dosed" before the rest of the page can be interacted with. In this example, a modal window is created w hen the user clicks on the heart button in the top left-hand corner of the page. The modal window opens in the center of the page, allowing users to share the page on social networks. The content for the modal window will typically sit within the page, but it is hidden when the page loads using CSS. JavaScript then takes that content and displays it inside

  elements that create the modal window on top of the existing page. Sometimes modal w indows will dim out the rest of the page behind them. They can be designed to either appear automatically when the page has finished loading or t hey can be triggered by the user interacting with the page. 9 CONTENT PANELS Other examples of modal window scripts include Colorbox (by Jack L. Moore), Lightbox 2 (by Lokesh Dhakar), and Fancybox (by Fancy Apps). They are also included in jQuery UI and Bootstrap. A design pattern is a term programmers use to describe a common approach to solving a range of programming t asks. This script uses t he module pattern. It is a popular way to write code that contains bot h public and private logic. Once t he script has been included in the page, other scripts can use its public methods: open () , cl ose() , or center() . But users do not need to access the variables that create t he HTML, so they remain private (on p505 the pri vate code is shown on green). Using modules to build parts of an application has benefits: • It helps organize your code. • You can test and reuse the individual parts of the app. • It creates scope, preventing variable /meth od names clashing with ot her scripts. This modal window script creates an object (called moda 1), which, in turn, provides three new methods you can use to create modal windows:

  open () opens a modal window cl ose() closes the window center() centers it on the page Another script would be used to call t he open() method and specify what content should appear in the modal window.

close Users of this script only need to know how the open() method works because: • c 1ose () is called by an event listener when the user clicks on the close button. • center() is called by the open() method and also by an event listener if the user resizes the window. When you call the open() method, you specify the content that you want the modal wind ow to contain as a parameter (you can also specify its width and height if you want). In the diagram, you can see that the script adds the content to the page inside

elements. div .mod a1 acts as a frame around the modal window. div. modaI - content acts as a container for the content being added to the page. button . mod a1- cl ose allows the user to close the modal window. CONTENT PANELS 8 CREATING MODALS The modal script needs to do two things: 1. Create the HTML for the modal window 2. Return the modal object itself, which consists of t he open(), close (), and center () methods Including the script in t he HTML page does not have any visible effect (rather like including jQuery in your page does not affect the appearance of the page). But it does allow any other script you write to use the functionality of the mod a1 object and call its open () method to create a modal window (just like including jQuery script includes the jQuer y object in your page and allows you to use its methods). This means that people who use the script only need to know how to call the open () method and tell it what they want to appear in the modal window. The mod a1-i nit . j s fi le removes the share content from the HTML page. It then adds an event handler to call the modal object's open () method to open a modal window containing the content it just removed from the page. i nit is short for initialize and is commonly used in the name of files and functions that set up a page or other part of a script. 0 Create variable: $content: p art of page to appear In m odal I Hide th at part of pag e by d et aching i t + I Event: click o n share bu tton I ANO NYMOUS FUNCTION: In the example on the right, the modal window is called by a script called mod a1-i ni t.j s. You will see how to create the mod a1 object and its methods on the next double page spread, but for now consider that including t his script is the equivalent of adding t he following to your own script. It creates an object called modal and adds three methods to the object: var modal = { center : function() { II Code for center() goes here }, open: function(sett ings) { II Code for open() goes here . } close : function() { II Code for close() goes here } }; 1. First the script gets the contents of the element that has an id attribute whose value is shareopt ions. Note how the jQuery • detach () method removes this content from the page. 2. Next an event handler is set to respond to when the user clicks on the share button. When they do, an anonymous function is run. 3. The anonymous function uses the open() method of the moda 1 object. It takes parameters in the form of an object literal: • content: the content to be shown in t he modal window. Here it is the content of the element whose id attribute has a value of share-options. • width: the width of the modal window. • height: the height of the modal window. Show content in modal window Call open () method of moda1 object, then pass it t he $content variable as a parameter, alo ng w ith the modai's w idt h and height @ CONTENT PANELS Step 1 uses the . detach() method because it keeps the elements and event handlers in memory so they can be used again later. jQuery also has a . remove () meth.od but it removes the items completely. USING TH E MODAL SCRIPT iiiiMI

11 On the right, you can see the tagged object for the HTML sample used in this example. For each new tag in the images' data-tags attribute, a property is created on the tagged object. Here it has five properties: animators, designers, fi 1mmakers, illustrators, and photographers. The value is an array of images that use that tag. tagged = { animators: [pl.jpg, p6.jpg, p9.jpg], designers: [p4 . jpg, p6.jpg, p8.jpg] filmmakers: [p2.jpg, p3.jpg, p5.jpg] i l lustrators: [pl.jpg, p9.Jpg] photographers: [p2.jpg, p3.jpg, pB.jpg] FILTERING, SEARCHING & SORTING 8 PROCESS ING THE TAGS Here you can see how the script is set up. It loops through the images and the tagged object is given a new property for each tag. The value of each property is an array holding the images with that tag. 1. Place the script in an llFE (not shown in flowchart). 2 . The $imgs variable holds a jQuery selection containing the images. 3. The $buttons variable holds a jQuery selection holding the container for the buttons. 4 . The tagged object is created. 5. Loop through each of the images stored in $i mgs using jQuery's . each() method. For each one, run the same anonymous function: 6 . Store the current image in a variable called img. 7. Store the tags from the current image in a variable called tags. (The tags are found in the image's data-tags attribute.) 8. If th e tags variable for this image has a value: 9. Use the String object's sp 1it () method to create an array of tags (split ting t hem at th e comma). Chaining the . forEach () method off the sp 1it () method lets you run an anonymous function for each of the elements in the array (in this case, each of the tags on the current image). For each tag: 10. Check if the tag is already a property of the tagged object. 11. If not, add it as a new property whose value is an empty array. 12. Then get the property of the tagged object that matches this tag and add the image to the array that is stored as the value of that property. Then move onto the next tag (go back to step 10). A e v O Creat e var iables: $1mgs: all images $buttons: element with id of buttons I Creat e ob ject: tagged: array of tags & tagged images ·--0 0 + LOOPTHROUGHEACHIMAGE A NONYMOUS FUN CTION: Processes Image Create variables: img: current image tags: valu e of data-tags attribute + I Does the tags variable have a value? ' ' A NO NY MOUS FUNCTIO N: Add tags & images to tagged object Is this tag a property of the tagged obj ect? ' I Add tag name as a property of the tagged object ' Add image to array for this tag ' - - - - GO TO N EXT TAG _ _ ___.) When all of the tags for that image have been processed, move to the next image (step 5). 8 FILTERING, SEARCHING & SORTING - - - -- GO TO NEXT IMAGE - -- - - THE TAGGED OBJECT c12/ js/fi l t er-t ags.js JAVASCRIPT CD (function() { @ @ var $imgs =$( ' #gallery img ' ); var $buttons = $ ( ' #buttons'); var tagged = {}; ~ $imgs.each(function () var img = th i s; var tags= $(this).data('tags') ; © © element Add text: Show A11 Add class: active + I e 0 0 Event: c1i ck on button I l A NONYMOUS FUNCTION: Shows all images Add active class to this b utton & remove active class from siblings + I (i) f) Show all images Add button to the filter buttons + G> ANONYMOUS FUNCTION: Makes button for tag CD • G) Create empty element I Add tag name & count to the button + I - Event: c1i ck on button I AN ONYMOUS FUN CTIO N: Shows images with selected tag e e Add active class to this button & remove active class from siblings + I 0 Hide all photos + • Filter for i mages with this tag G) Show the matching images G> I + I Add button to the filter buttons GO TO NEXT PROPERTY ) THE FILTER BUTTONS c12/ js/ f i l t er-tags.js JAVASCRIPT Q) (function() { / /Create variables (see p547) /I Create tagged object (see p547) @ ® © ® @{ cv{ ® $ (' ' , { text : 'Show All', class: ' acti ve' , click: function() $(thi s) .addClass( ' active ' ) .s i bl ings() . removeCl ass( ' active'); $i mgs.show(); } II Create empty button II Add text 'show al l ' II Make it active II Add onclick handler to it //Get the clicked on button II Add the class of active //Get i ts siblings //Remove act i ve from them II Show all images II II Add to buttons II Add to the buttons ® }) .appendTo($buttons); @ $.each(tagged, f unction(tagName){ For each tag name $(' ' , { /I Create empty button text : tagName + ' ( ' + tagged[tagName] . length + ' )', II Add tag name click: function() { II Add click handler /I The button clicked on $(thi s) .addClass('active') - II Make clicked i tem active .sibl i ngs() II Get its siblings .removeClass('active ' ) ; //Remove active from them $i mgs I/ With all of the images . hide() II Hide them . fi l ter(tagged[tagName]) //Find ones with this tag II Show just those images . show(); ® @ @ @{ @{ @{ ® @ } ~ }) .appendTo($but tons); }) ; } ()); FILTERING, SEARCHING & SORTING 8 SEARCH Search is like filtering but you show only results that match a search term. In this example, you will see a technique known as livesearch. The alt text for the image is used for the search instead of tags. SEARCH LOOKS IN ALT TEXT OF IMAGES IT USES INDEXOF() TO FIND A MATCH SEAR CH A CUSTOM CACHE OBJECT This example will use the same set of photos that you saw in the last example, but will implement a livesearch feature. As you type, the images are narrowed down to match the search criteria. The i ndexOf () method of the String object is used to check for the search term. If it is not found, i ndexOf () returns -1. Since i ndexOf () is casesensitive, it is important to convert all text (both the a1t text and the search term) to lowercase (which is done using the String object's tolowerCase () function). We do not want to do the case conversion for each image every time the search terms change, so an object called cache is created to store the text along wit h the image that uses that text. The search looks at the a 1t text oneachimageandshowson~ elements whose a1t text contains the search term. Crca ti\·eFol k \I\\ ' '1j t •• \<> 1 :~ l ,11: 11 I \l\I' .. 9 FILTERING, SEARCHING & SORTING '1 1 f d ~' upl" l,_,r J0'-1 <.r• 11\ ;(:,. . I" 1 ; 1/' ""i .. a;. ' . ' ~¥ '' ..~, ,:;~ ... :' ., . When the user enters something into the search box, this object is checked rather than looking through each of the images. I ·' P' .J• c• SEARCHABLE IMAGES c12/filter-search.html

CreativeFolk

For each of the images, the cache array is given a new object. The array for the HTML above would look like the one shown on the right (except where it says i mg, it stores a reference to the corresponding element). When the user types in the search box, the code will look in the text property of each object, and if it finds a match, it will show the corresponding image. cache = [ {element: {element: {el ement : {el ement: {element: {element: {element: {element: {element: img, img, img , img, img, img, img, img, img, text : text: text: text: text: text: text: text: text: 'rabbi t'} , ' sea'}, 'deer ' }, 'new york street map'}, 'trumpet pl ayer'} , ' 1ogo i dent ' }, 'bicycle japan'}, 'aqua 1ogo' }, ' ghost'} FILTERING, SEARCHING & SORTING @ SEARCH TEXT This script can be divided into two key parts: SETTING UP THE CACHE OBJECT 1. Place the script in an llFE (not shown in flowchart). 2. The $imgs variable holds a jQuery selection containing the images. 3. $search holds search input. 4. The cache array is created. 5. Loop through each image in $imgs using .each() , and run an anonymous function on each one: 6. Use push() to add an object to the cache array representing that image. 7. The object's element property holds a reference to the element. 8 . Its text property holds the alt text. Note that two methods process the text: • trim() removes spaces from the start and end. . tolowerCase () converts it all to lowercase. FILTERING IMAGES WHEN USER TYPES IN SEARCH BOX 9. Declare a function called filter() . 10. Store the search text in a variable called query. Use . trim() and . tolowerCase () to clean the text. 11. Loop through each object in the cache array and call the same anonymous function on each: 12. A variable called index is created and set to 0. 13. If query has a value: 14. Use i ndexOf () to check if the search term is in the text property of this object. The result is stored in the index variable. If found, it will be a positive number. If not, it will be -1. 15. If the value of index is -1, set the display property of the image to none. Otherwise, set display to a blank st ring (showing the image). Move onto the next image (step 11). 16. Check if the browser supports the input event. (It works well in modern browsers, but is not supported in IE8 or earlier.) 17. If so, when it fires on the search box, call the filter() function. 18. Otherwise, use the input event to trigger it. 0 FILTERING, SEARCHI NG & SORTING A V eO : Create va riables: $imgs: all Images $search: searc h input cache: array of objects (text/ Images) • r,. ._A_d_d-ob~:1.:1·:m:1:t1:=1 .=;:1:1:1:1:•1:1:.=:·1 .:1:1:m11 ca_c_h_e _a -rr--. a} element: reference to text: processed alt text (see bottom p553) ' - - - - - GO TO NEXT IMAGE - -- - - Does browser support input event? ' Event: input on search Inpu t Event: keyup on search input I FUNCTION: filter{) Checks a 1 t text & shows matching images Create variable: query to hold the query Create variable: index: position of text Doesa query have value? ' for query within text usL g l .Search i ndexOf () store position In index & 'I ts value of index - 1? ' ~ L dhployto" to •how lmoge I Set display to none to hide image ' - - - - - GO TO NEXT IMAGE - - - - LIVESEARCH cl2/js/filter-search.js JAVASCRIPT O Indicates that it should ·show a before b Indicates that the items should remain in the same order Indicates that it should show b before a To see the order in which the values are being compared, you can add the con so 1e. 1og () method to the compare function. For example: con so 1e. 1og (a + ' - ,· + b + ' = ' + (b - a)) ; F ILTERING, SEARCHING & SORTING 8 SORTING NUMBERS Here are some examples of compare functions that can be used as a parameter of the sort () method. ASCEND ING NUMERICAL ORDER To sort numbers in an ascending order, you subtract the value of the second number b from the first number a. In the table on the right, you can see examples of how two values from the array are compared. DESCENDING NUMERICAL ORDER To order numbers in a descending order, you subtract the value of the first number a from the second number b. RANDOM ORDER This will randomly return a value between -1 and 1 creating a random order for the items. 8 var prices = [l, 2, 125, 2, 19, 14]; prices.sort(function(a, b) { return a - b; }) ; a OPERATOR b RESULT ORDER 1 2 -1 2 2 0 2 l a comes before b leave in same order b comes before a var prices = [l, 2, 125, 2, 19, 14]; prices.sort(function(a, b) { · return b - a; }) ; b OPERATOR a RESULT ORDER 2 1 1 b comes before a 2 2 0 leave in same order 2 -1 a comes before b var prices = [1, 2, 125, 2, 19, 14]; prices.sort(function() { return 0.5 - Math.random(); }) ; FILTERING, SEARCHING & SORTING SORTING DATES Dates need to be converted into a Date object so that they can then be compared using< and >operators. var holidays = [ ' 2014- 12 - 25 ' ' ' 2014-01-01', 1 I 2014-07-04 ' 2014-11-28' t DATES IN ASCENDING ORDER If the dates are held as strings, as they are in t he array shown on the left, the compare function ]; needs to create a Date obj ect holidays.sort(function(a, b) { var dateA = new Date(a); dates can be compared. from the string so t hat the two var dateB =new Date(b); Once they have been converted return dateA - dateB into a Date object, JavaScript stores the date as the number }) ; of milliseconds since t he 1st January 1970. The array is now ordered as follows: holidays = [ ' 2014-01-01 ' ' ' 2014-07 - 04', ' 2014- 11- 28 ' ' '2014-12-25 ' With the date stored as a number, two dates can be compared in t he same way that numbers are compared on the left-hand page. FILTERING, SEARCHING & SORTING 9 SORTING A TABLE In this example, the contents of a table can be reord ered. Each row of the table is stored in an array. The array is then sorted when the user clicks on a header. SORT BY HEADER DATA TYPES COMPAR E FU NCTION S When users click on a heading, it triggers an anonymous function to sort the contents of the array (which contains the table rows). The rows are sorted in ascending ord er using data in that column. Each column can contain one of the fol lowing types of data: Each type of data needs a different compare function. The compare functions will be stored as three methods of an object called compare, which you create on p563: Clicking the same header again will show the same column sorted in descending order. If you look at the

.. . Enter your age: JAVASCR I PT c13/ js/ number-polyfi l l-eg.js yepnope( { test: Modernizr. i nputtypes.number, nope: ['js/numPolyfill .js ' , ' css/number.css'], compl ete: function() { consol e .l og( ' YepNope + Modernizr are done'); } }); l:IJiQil This example tests if the browser supports the element using a type attribute with a value of number. Bot h Modernizr and YepNope are included in the of the page so that t he fal lback is shown correctly. The yepnope () function takes an object literal as a parameter. It's properties include: • test: the feature you are checking fo r. In this case it is checking Modernizr to see if the number input is support ed. • yep: not used in this example can load files if the feature is supported. • nope: what to do if feat ure is not supported (you can load multiple fi les in an array). • comp 1ete: can run a function when t he checks are complet e, and any necessary files have loaded. Here it adds a message to t he console to demonstrate how it works. Note that Modernizr stores the value of the element 's type attribute, in a child object called i nputtypes. E.g., to check if t he HTMLS date selector is supported, you use: Modernizr.inputtypes.date (not Moderni zr. date). FORM ENHANCEMENT & VALIDATION 0 FORM VALIDATION The final section of this chapter uses one big script to discuss the topic of form validation. It helps users give you responses in the format you need. (The example also has some form enhancements, too.) Validati on is t he process of checking w heth er a value meets certain rules (for example, t hat a password has a minimum number of characters). It lets you tell users if there is a problem with t he values they entered so that th ey can correct the form before they resubmit it. This has three key advant ages: • • You are more likely to get th e inform ati on you need in a fo rmat you can use. It is faster to check values in t he browser t han it • It saves resources on the server. is to send data to t he server to be checked . s FORM ENHANCEMENT & VALIDATION In this section you see how to check the values a user enters into a fo rm. These checks happen w hen the form is submitted. To do t his users could press submit or use the Enter on t he keyboard, so t he valida tion process will be triggered by t he submi t event (not th e c 1 i ck event of a submit but ton). W e will look at validation using one long example. You can see the form below, and the HTM L is shown on t he right. It uses HTMLS form controls, but t he validation is going to be done using JavaScript to make sure that the experience is consistent across all browsers (ev.en if th ey do support HTM LS). FORM HTML This example uses HTMLS markup, but validation is performed using JavaScript (not HTMLS validati on). ""*'' Due to limited space, the code below only shows the form inputs (not the markup for the columns). cl3/va11dation.html

Name:

Email:

Password :

Confirm password:

Birthday:

You need a parent's permission to join . Tick here if your child can join:

Short Bio (max 140 characters) : l 40

FORM ENHANCEMENT & VALIDATION 8 VALIDATION OVERVIEW This example has over 250 lines of code and will take 22 pages to explain. The script starts by looping through each element on the page performing two generic checks on every form control. GENERIC CHECKS First, the code loops through every element in t he form and performs two t ypes of generic checks. They are generic checks because t hey would work on any element, and would work with any form. 1. Does the element have the requi r ed attribute? If so, does it have a value? 2. Does the value match with the type attribute? E.g., Does an email input hold an email address? CHECKING EACH ELEM ENT To work through each element in the form, the script makes use the form's e 1ements collection (which holds a reference to each form control). The collection is stored in a variable called e1ements. In this example, the el ements collection will hold the following form controls. The right-hand column tells you which elements are required to have a value: INDEX ELEMENT elements.name Yes elements. email Yes 2 elements.password Yes 3 elements.conf-password Yes 4 elements.birthday Yes 5 elements .parents- consent lfu nder13 6 elements .bio 0 8 REQUIRED No FORM ENHANCEMENT & VALIDATION Some developers proactively cache form elements in variables in case validation fai ls. This is a good idea, but to keep this (already very long) example simpler, the nodes for the form elements are not cached. If you have not already done so, it would be helpful to download the cod e for this example from t he website, javascriptbook.com, and have it ready when you are reading through the following pages. Once the generic checks have been performed, the script then makes some checks that apply to individual elements on the form. Some of t hese checks apply only to this specific form. CUSTOM VALIDATION TASKS Next the code performs checks t hat correspond w ith specific elements in the form (not all elements): • • Do the passwords match? Is the bio in the textarea under 140 characters? • If the user is less than 13 years old, is t he parental consent checkbox selected? These checks are specific to this form and only apply to selected elements in the form (not all of them). TRACKING VALID ELEMENTS To keep track of errors, an object called va 1id is created.- As the code loops through each element performing the generic checks, a property is added to the va 1id object for each element: • • The property name is the value of its id attribute. The value is a Boolean. Whenever an error is found on an element, this value is set to fa 1se. PROPERTIES OF THE VALID OBJECT val id.name valid.email valid . passwor d valid.cont-password valid . birthday valid.parents-consent valid . bio FORM ENHANCEMENT & VALIDATION 8 DEALING WITH ERRORS If there are errors, the script needs to prevent the form being submitted and tell the user what they need to do in order to correct their answers. As the script checks each element, if an error is found, two things happen: • The corresponding property of the valid object is updated to indicate the content is not valid. • A fu nction called setErrorMessage () is called. This function uses jQuery's • data() method, which allows you to store data with the element. So the error message is stored in memory along with the form element that has the problem. Each time the user tries to submit the form, if an error was not found on an element it is important to remove any error messages from that element. Consider the following scenario: a) A user filled out a form with more than one error. b) This triggered multiple error messages. c) The user fixes one problem, so its corresponding message must be removed, while error message(s) for problems that have not been fixed must remain visible. After each element has been checked, then error messages can be shown using showErrorMessage(). It retrieves the error message and puts it in a element, which is added after the form control. Therefore, when each of the elements is looped through, either an error message is set, or the error message is removed. form I elements email password conf-password birthday parents-consent I key/value Above you can see a representation of the form and its elements collection. There was a problem with the email input, so the . data() method has stored a key/value pair with that element. 8 FORM ENHANCEMENT & VALIDATION This is how the setErrorMessage() fu nction will store the error messages to show to the user. If the error is fixed, then the error value is cleared (and the element with the error message removed). SUBM ITTING THE FORM Before sending the form, the script checks whether there were any errors. If there were, the script stops the file from being submitted. In order to check whether any errors were fou nd, a variable called i sFormVa lid is created and is given a value of true. The script then loops through each property of the valid object, and if there was an error (if any property of that object has a value of false), then there is an error in the form and the isFormValid variable is also set to false. It is important to check and process all of the element s before deciding w hether to submit the form so that you can show all of the relevant error messages in one go. If every value has been checked, the user can be shown all of the things they have to amend before re-submitting the form. So, i sFormVa lid is being used as a flag (you can think of it being like a master switch) if an error is found, it is turned off. At the end of the script, if is FormV a1i d is fa 1 se then an error must have been found and the form should not be submitted (using the pr eventOefau 1t () method). Create variable: i sFonnVa lid + If the form only showed the first error it came across, and stopped, the user would only see one error each time they submitted the form. This could soon become frustrating for the user if they were to keep trying to submit the form and see new errors. ~~~.............···" ....... ·· PROPERTIES OF val id OBJECT ··.... T ' Is value fa l se? ~ ' ·.··... ··... GOTONEXTPROPERTY -+----- Set isFonnValid to false ··. ·······.............. valid.name true valid.email true valid.password true valid.conf-password true valid.birthday false valid . parents-consent false valid.bio true Prevent default action of form submitting The loop stops when the first error is found. (Note that error messages are already visible.) FORM ENHANCEMENT & VALIDATION @ CODE OVERVIEW On the right is an outline of the validation code, spl it into four sections. On line 3, an anonymous function is called when the form is submitted. It orchestrates the validation, in turn calling other functions (not all of which are shown on t he right-ha nd page, see fu rther pages for more). 8 A: SET UP THE SCRIPT B: PERFORM GENERIC CHECKS 1. The code lives inside an llFE (creat ing function level scope). 2. This script uses JavaScript validation to ensure that error messages look the same on all browsers, so HTMLS validat ion is turned off by set ting the no Va1i date propert y of the form to tru e. 3. When the user submits t he form, an anonymous function is run (this cont ains the validation code). 4. e1ements holds a collection of all form elements. 5. va 1id is the object that keeps track of whether or not each form control is valid. Each form control is added as a property of the valid object. 6. i sValid is a fl ag t hat is re-used to check whether individual elements are valid. 7. i sFonnVa lid is a flag that is used as a master switch to check w hether the entire form is valid. 8. The code loops through each form cont ro l. 9. It performs two generic checks on each one: i) Is t he element required? If so, does it have a value? Uses va1i dateRequi red() . See p606. ii) Does the value correspond w ith the type of data it should hold? Uses validateTypes() . See p610. If either of these functions does not return t r ue, t hen is Val id is set to f alse. 10. An if • • • e1se statement checks if that element passed the tests (by checking if is Val id is false). 11. If t he control is not valid, showErrorMessage () shows an error message to t he user. See p609. 12. If it is valid, r emoveErrorMessage () removes any errors associated with that element. 13. The value of the element's id att ribute is added as a property val i d object; it s value is whether or not t he element was valid. C: PERFORM CU STOM VALIDATION D: DID THE FORM PASS VALIDATION? 14 . After the code has looped through every element on the form, the custom validat ion can occur. There are three types of custom validat ion occurring (each one uses its own function): i) Is the bio too long? See p61 5. ii) Do passwords match? iii) ls user old enough to join on own? If not, is the parental approval checkbox selected? See p617. 15. If an element fails one of the custom validation checks, showErrorMessage () will be called, and the corresponding property in the valid object will be set to fa l se. 16. If the element passes t he check, r emoveErrorMessage () is called fo r t hat element. The val id object now has a propert y for each element, and the value of t hat property states wh et her or not the element was valid or not. 17. The code loops through each propert y in the va 1id object. 18 . A n i f statement checks to see if the element was not valid. 19. If it was not valid, set i s FormVa lid to false and stop the loop. 20. Otherwise, is FormVa l i d is set to true. 21. Finally, having looped through the valid object, if i sFormVal id is not true, t he preventDefault () met~ od prevents the form being submitted. Otherw ise, it is sent. FO RM ENH A NCEMENT & VALIDATION c13/js/validation.js JAVASCRIPT II SET UP THE SCRIPT G) (function () { ~ document. forms. register .noVal idat e = true; @ $( ' form ') .on( 'submit' , fu nction(e) { var element s = t his .element s; © var va l id ={} ; ® var i sVal i d; © var i sFormValid ; 0 @ ® @) ® @ @ II Disable HTML5 validation II When form is submitted II Collection of form controls II Custom valid object II isValid : checks form controls II isFormValid : checks entire form II PERFORM GENERIC CHECKS (calls funct i ons outside the event handler) for (var i = 0, l = (elements. lengt h - l) ; i < l ; i++) { II Next line calls validateRequired() see p606 &validateTypes() p610 isValid = validateRequi red (el ements[i]) &&val idateTypes(elements[i]); i f (!i sValid) { II If it does not pass these two tests showErrorMessage (el ements[i]); II Show error messages (see p608) else { II Otherwise removeErrorMessage (el ements[i]); II Remove error messages } II End if statement val id[elements[i] . id] = isVali d; II Add element to the valid object II End for loop II @ @{ PERFORM CUSTOM VALIDATION (just 1 of 3 functions - see p614-p617) if (!validateBio()) { II Call validateBio(), if not valid showEr rorMessage(document.getEl ementBy ld( 'bi o' )); II Show error valid. bio = false ; II Update valid object-not valid II Otherwise el se { removeErrorMessage (document.getElement By ld('b i o')); II Remove error II two more functions follow here (see p614-p617) II II ® @ ® DID IT PASS I CAN IT SUBMIT THE FORM? Loop through va l i d object, if there are errors set isFormVal i d to false II Check properties of the va li d obj ect for (var fie ld in valid) { if (!valid[field]) { II If it is not valid II Set isFormValid variable to false i sFormVal i d = false ; II Stop the for loop, error was found break; II Otherwise isFormValid = true; II The form is valid and OK to submit } II If the form did not validate, prevent it being submitted II If isFormValid is not true e. preventDefault() ; II Prevent the form being submitted if (!i s FormValid) { } }) ; } ()) ; II II JI End event handler Functions called above are here End of IIFE FORM ENHANCEMENT & VALIDATION 9 REQUIRED FOR M ELEMENTS The HTMLS required attribute indicates a field must have a value. Our val i dateRequi red () function will first check for the attribute. If present, it then checks whether or not it has a value . val i dateRequi red () is called fo r each element individually (see step 9, p605). Its one parameter is the element it is checking. In turn, it calls upon three other named functions. i) i sRequ ired() checks for the required attribute. function validateRequired(el) if (isRequired(el)) { var valid = !isEmpty(el); if (!val id) { setErrorMessage(el, 'Field is required'); return valid; // Is this element required // Is value not empty (true/false) // If val id variable holds false //Set the error message //Return valid variable (true/false) return true; // If not required, all is okay A: DOES IT HAVE A REQUIRED ATT RIBUTE? B: IF SO, DOES IT HAVE A VALUE? C: SHOULD AN ERROR MESSAGE BE SET? 1. An if statement uses a function called i sRequi red() to check whether the element carries the required attribute. You can see the i sRequi red() function on the right-hand page. If the attribute is present, the subsequent code block is run. If the field is required, the next step is to check whether or not it has a value. This is done using a function called i sEmpty (),also shown on the right-hand page. 3. An i f statement checks if the va 1id variable is not true. 6. If not, the code skips to step to step 6 to say this element is OK. e ii) i sEmpty() can check if the element has a value. iii) setErrorMessage() sets error messages if there are problems. 2. The result from is Empty() is stored in a variable called va 1id. If it is not empty, the valid variable will hold a value of true. If it is empty, it holds false. FORM ENHANCEM ENT & VALIDATION 4. If it is not true, an error message is set using the setErrorMessage () function, which you meet on p608. 5. The va 1id variable is returned on the next line, and that is where this function ends. va 1i dateRequi red() uses two functions to perform checks: 1: i sRequi red() checks whether the element has a required attribute. 2: i sEmpty () checks whether the element has a value. i sRequ i red() The i sRequ ired() function takes an element as a parameter and checks if the required attribute is present on t hat element. It returns a Boolean. There are two types of check: The first, in blue, is for browsers that support the HTMLS required attribute. The one in orange is for older browsers. function i sRequired(el) { return ( (typeof el .required === ' boolean') (typeof el .required === 'string') ; && el . requ ired ) To check if the required attribute is present, t he typeof operator is used. It checks what datatype the browser thinks the required attribute is. II MODERN BROWSERS OLDER BROWSERS WHAT IS VALIDATED Modern browsers know the required property is a Boolean, so the fi rst part of this check tells us if it is a modern browser. The second part checks if it is present on this element. If the attribute is present, it will evaluate to true. If not, it returns undefined, which is considered a falsy valu e. Browsers that do not know HTM LS can still tell whether or not an HTMLS attribute is present on an element. In those browsers, if the requi red attribute is present, it gets treated as a string, so the condition would evaluate t9 true. If not, the type would be undefined, which is falsy. It is important to note that t he required attribute only indicates that a value is required. It doesn't stipulate how long the value should be, nor does it perform any other kind of validation. Specific checks, such as these, would have to be added in the va 1i dateTypes() function or the script's custom validation section. ALL BROWSERS OLDER BROWSERS The first check looks to see if the element does not have a value. If it has a value, the function should return fa 1se. If it is empty, it will return true. If older browsers use a polyfill for placeholder text, the value would be the same as the placeholder, so it is considered empty if those values match. i sEmpty() The i sEmpty() function (below) takes an element as a parameter and checks to see if it has a value. As with i sRequi red(), two checks are used to handle both new and older browsers. functio n isEmpty(el) { return !el.val ue I I el . value === el . placeholder ; FORM ENHANCEMENT & VALIDATION 8 CREATING ERROR MESSAGES The validation code processes elements one by one; any error messages are stored using jQuery's • data() method. HOW ERRORS ARE SET HOW DATA IS STORED WITH NODES Throughout the validation code, whenever an error is found, you will see calls to a function called setErrorMessage(), which takes two parameters: i) e1: the element that the error message is for ii) message: the text the error message will display Each error message is going to be stored with the element node that it relates to using the jQuery . data() method. When you have elements in a jQuery matched set, the . data() method allows you to store information in key/value pairs for each individual element. For example, the following would add the message 'Fie 1d is required' to the element that is stored in the el variable: setErrorMessage(el, 'Field is required'); The . data() method has two parameters: i) The key, which is always going to be errorMessage ii) The value, which is the text that the error message will display set ErrorMessage( ) function setErrorMessage(el, message) { $(el ) .data('errorMessage', message); 8 FORM ENHANCEMENT & VALIDATION II Store error message with element DISPLAYING ERROR MESSAGES After each element has been checked, if one or more were not valid, showErrorMessage () will display the error messages on the page. HOW ERRORS ARE DISPLAYED If an error message needs to be shown, first a e lement will be added to the page directly after the form field with the error. Next, the message is added into the element. To get the text for the error message, the same jQuery . data() method that set the message is used again. This time, it only takes one parameter: the key (which is always errorMessage). This all happens within the function called showErrorMessage() which is shown below. 1. $el holds a jQuery selection containi ng the element that the error message relates to. 2. $errorConta i ner looks for any existing errors on this element by checking if it has any sibling elements tha t have a class of error. 3. If the element does not have an error message associated with it, the code in the curly braces runs. 4 . $errorContai ner is set to hold a element. Then . i nsertA fter () adds the element into the page after the element causing the error. 5. The content of the element is populated with the error message fo r that element, which is retrieved using the .data() method of the element. showErrorMessage() fu nct i on showErrorMessage(el) var $el = $(el ) ; var $errorContainer = $el .sibl i ngs( ' . er ror'); II II Fi nd e l ement with the error Does i t have err or s already II if (! $errorContainer. l ength) { If no errors found Crea t e a to hold t he error and add it after the element with the err or $errorContainer = $( ' ') . insertAfter($el ); II $errorConta i ner . text($(el) . da t a( ' errorMessage ' )); II Add error message FORM ENHANCEMENT & VALIDATION @. VALIDATING DIFFERENT TYPES OF INPUT HTMLS's new types of input come with built-in validation. This example uses HTMLS inputs, but validates them with JavaScript to ensure that the experience is consistent across all browsers. The va 1i dateTypes() function is going to perform the validation just like modern browsers do with HTMLS elements, but it will do it for all browsers. It needs to: • Check what type of data the form element should hold • Ensure the contents of the element matches that type 2. If there is a value, a variable called type is created to hold the value of the type attribute. First, the code checks to see if jQuery stored info about the type using its .data() method (see why on p618). If not, it gets the value of the type attribute. 1. The first line in the function checks if the element has a value. If the user has not entered any information, you cannot validate the type of data. Furthermore, it is not the wrong type of data. So, if there is no value, the function returns true (and the rest of the function does not need to run). function validateTypes(el) { if (!el.value) return true; II II If element has no value, return true Otherwise get the value from .data() var type= $(el) . data( ' type') II el.getAttribute('type'); or get the type of input if (typeof validateType[type] 'function ' ) { Is type a method of validate object? return validateType[type](el); If yes, check i f the value validates else { 11 If not return true; Return true as it cannot be tested II II II II The getAttri bute() method is used rather than the DOM property for type because all browsers can return the value of the type attribute, whereas browsers that don·t recognize a new HTMLS DOM property types would just return text. 8 3. This function uses an object called val idateType (shown on the next page) to check the content of the element. The if statement checks if the va 1i dateType object has a method whose name matches the value of the type attribute. FORM ENHANCEMENT & VALIDATION If it has a method name that matches the type of form control: 4. The element is passed to the object; it returns true or fa 1se. 5. If there is no matching method, the object is not able to validate the form control and no error message should be set. CREATING AN OBJECT TO VALIDATE DATA TYPES The validate Type object (outlined below) has three methods: var validateType = { email: function(el) Check email address II }, number: function(el) { Check it is a number II The code inside each method is virtually identical. You can see the format of the ema i l () method below. Each method validates the data using something called a regular expression. The regular expression is the only thing that changes in each method to test the different data types. }, date: function(el) { Check date format } Regular expressions allow you to check for patterns in strings, and here t hey are used with a method called test () . II You can learn more about regular expressions and their syntax on the next two pages. For now, you just need to know that they are used to check the data contains a specific pattern of characters. Storing these checks as methods of an object makes it easy to access each of t he the different checks when it comes time to validate the different types of input in a form. /[A@J+@[A@]+/ .test(el . value); ._____,CD i) The regular expression is ["@] +@["@]+(it is between t he I and I characters). It states a pattern of characters that are found in a typical email address. II ii) The test () method takes one parameter (a string), and checks whether t he regular expression can be found within the string. It returns a Boolean. email: function (el) { var val id= l["©]+@["@]+l.test(el.value); if (!valid) { setErrorMessage(el, 'Please enter a valid emai l '); return valid; @t----~ II iii) In this example, the test() method is passed t he value of t he element you want to check. Below you can see t he method to test email addresses. II Create email method Store result of test in valid If the value of valid is not true Set error message II Return the valid variable II II }, 1. A variable called valid holds t he result of the test using t he regular expression. 2. If the string does not contain a match for the regular expression, 3. an error message is set. 4. The function returns the value of the valid variable (which is true or false). FORM ENHANCEMENT & VALIDATION e· REGULAR EXPRESSIONS Regular expressions search for characters that form a pattern. They can also replace those characters with new ones. Regular expressions do not just search for matching letters; they can check for sequences of upper/lowercase characters, numbers, punctuation, and other symbols. • any single character (except newline) [ The idea is similar to the functionality of find and replace features in text editors, but it makes it possible to create far more complicated searches for combinations of characters . J single character contained within brackets ( ) 612 sub expressions (sometimes called a block or capturing group) preceding element zero or more times \D \s non-digit character whitespace character FORM ENHANCEMENT & VALIDATION Below you can see the building blocks of regular expressions. On the right-hand page, you can see some examples of how they are combined to create powerful pattern-matching tools. [A J $ single character not contained within brackets the starting position in any line the ending position in any line \n {m,n} \d nth marked subexpression (n is digit 1-9) preceding element at least m, but no more than n, times digit \w \W alphanumeric character (A-Z, a-z, 0-9) non-alphanumeric character (except_) \S . anything but whitespace CUSTOM VALIDATION ' The final part of the script performs three checks that apply to individual form elements; each check lives in a named function. -. On the next pages, you will see these three functions. Each is call ed in the same manner as the va1 i dateBi o() fu nction shown below. (The full code that FUNC T ION PURPOSE va l idateBio() Check bio is 140 characters or less validatePassword() Check password is at least 8 characters va 1 i datePa re ntsConsent () If user is under 13, test if parental consent calls them is available from the website, along with th e code for all examples from the book.) box is checked Each of these functions will return a value of true or fa 1se. 1 i f (!val i dateBio()) { showErrorMessage(document.getElementByld( ' bio')); va l id . bio : = f alse ; else { removeErrorMessage(document . getElementByld('bio')); II II II II Call validateBio(), i f not valid Show error message Update valid object - not valid Otherwise remove error message 1. The function is called as a condition in an if. . . e1 se statement. This was shown in 0 steps 14-16 on p605. 2. If the function returns fa 1se, ..: Call function, does it return true? an error message is shown and the corresponding property of the va 1id object is set to fa 1se. I• Call function: showErrorMessage() removeErrorMessage() & set corresponding 3. If the function return s true, ' Call function: property of val id object t he error message is removed from the corresponding element. 8 FORM ENHANCEMENT & VALIDATION .' BIO & PASSWORD VALIDATION The val i dateBi o () function: 1. Stores the form element containing the user's biography in a variable called bi o. 4. The setErrorMessage() function is called (see p608). 5. The val id attribute is returned to the calling code, which will show or hide the error. 2. If the length of the bio is less than or equal to 140 characters, the va 1id variable is set tot rue (otherwise, it is set to false) . 3. If valid is not true, then ... c13/js/validation.js JAVASCRIPT function validateBio() { var bio document.getElementByid ( ' bio'); II Store ref to bio text area ~ var valid= bio.value.length <= 140; II Is bio <= 140 characters? @ if (!valid) { II If not, set an error message @) setErrorMessage(bio, 'Your bio should not exceed 140 characters'); CD ® return valid; The va 1i datePassword () function starts by: 1. Storing the element containing the password in a variable called password. II Return Boolean va l ue 2. If the length of the value il'l the password input is greater than or equal to 8, val id is set to true (otherwise, it is set to false). 3. If valid is not true, then ... 4. The setErrorMessage() function is called. 5. The val id attribute is returned to the calling code, which will show or hide the error. c13/js/validati on . js JAVASCRIPT funct i on validatePassword() { var password= document.getElementByid( ' password'); l l St ore ref to element ~ var valid =password.value. l ength>= 8; I I Is its value>= 8 chars @ if ( ! va 1 id) { 11 If not, set error msg @) setErrorMessage(password, 'Password must be at least 8 characters'); CD ® return va l id; II Return t r ue I f alse FORM ENHANCEMENT & VALIDATION s• CODE DEPENDENCIES & REUSE In any project, avoid writing two sets of code that perform the same task. You can also try to reuse code across projects (for example, using utility scripts or jQuery plugins). If you do, note any dependencies in your code. DEPEND ENCIES Sometimes one script will require another script to be included in the page in order to work. When you write a script that relies on anot her script, the other script is known as a dependency. For example, if you are writing It is a good idea to note a script that uses jQuery, then your script depends upon jQuery dependencies in a comment at the top of the script so that they being included in the page in order to work; otherwise, you would not be able to use its selectors or methods. are clear to others. The final custom function in this example depends on another script that checks the user's age. CO DE REUSE VS. DUPLI CATION When you have two sets of code You may hear programmers that do the same job, it is referred refer to this as the DRY to as code duplication. This is usually considered bad practice. principle: don't repeat yourself. "Every piece of knowledge must have a single, unambiguous, The opposite is code reuse where authoritative representation within a system." It was the same lines of code are used in more than one part of a script (functions are a good example of code reu se). formulated by Andrew Hunt and Dave Thomas in a book called The Pragmatic Programmer (Addison-Wesley, 1999). 8 FORM ENHANCEMENT & VALIDATION To encourage reu se, programmers sometimes create a set of smaller scripts (instead of one big script). Therefore, code reuse can lead to more code dependencies. You have already seen an example of this with the helper functions for event handling. You are about to see another example ... VALIDATING PARENTAL CONSENT When the validation script was introduced, it was noted that the form would use a couple of scripts to enhance the page. You start to see those scripts on the next page, but one of them needs to be noted now because it hides the parental consent checkbox when the page loads. That parental consent checkbox is only shown again if the user indicates that they are 13 years old or younger. T he validation code to check whether the parent has given their consent will only run if that checkbox is showing. So the code to check whether the parent has given consent depends upon (reuses) the same code that checked if the checkbox should be shown. This works well as long as the other script (to show/hide the checkbox) is included in the page before the validation script. ThevalidateParentsConsent() function is called in the same way as the other two custom validation checks (see p614). Inside the function: 1. It stores the checkbox for parental consent and its containing element in variables. 2. Sets a val id variable to true. 3. An if statement checks whether the container for the checkbox is not hidden. It does this by fetching the value of its cl ass attribute and using the i ndexOf () function (which you saw on p128) to check if it contains a value of hi de.. If the value is not found, then i ndexOf () will return -1. 4. If it is not hidden, the user is under 13. So, if the checkbox is selected, the va 1id variable is set to the t rue, and if it was not selected, it will be set to fa 1se. 5. If it is not valid, an error message is added to the element. 6. The function returns the value of the va 1id variable to indicate whether the consent was given. JAVASCR I PT cl3/ js/ vali dati on . js func ti on validateParentsConsent() { var parentsCon sent document . getEl emen t Byid('parents - consent'); \..!.11_ var consentContainer = document.getElementByid('consent-container'); @ va r vali d = true ; / /Variable : valid set to true ~ i f (consentContainer . c l as sName.indexOf( ' hide') === - 1) { / / I f ch eckbox shown va l id = parentsConsent . checked; // Update valid: i s i t checked/ not if ( ! va 1i d) { / / If not, set the error message ~ setErrorMessage(paren t sConsent, 'You need your parents\' consent'); ~ © return valid; / / Return whe t her val id or not FORM ENHANCEMENT & VALIDATION 8 . HIDE PARENTAL CON SENT As you saw on the previous page, the subscription form uses two extra scripts to enhance the user experience. Here is the first; it does two things: • • A V Create va riables: $birth: birthday text input $parentsConsent: age consent checkbox $consentContai ner: age consent container I Uses the jQuery UI date picker to show a consistent date picker across browsers Q Create date picker using )Query Checks whether the parental consent checkbox should be shown when the user leaves the date input (it does this if they are under 13) 0 Event: blur or change o n birthday + I I FU NCTION: checkDate() Checks user's date of birth 1. Place the script in an llFE (not shown in flowchart). 2. Three jQuery select ions store the input where users enter their birthday, the consent checkbox, and t he container for the consent checkbox. Create var iabl e: dob: the date of birth as an array (split into year, month, & day at '·' characters) 3. The jQuery selection for the date of birth input is converted from a date input to a text input so Call funct ion: toggleParentsCon sent() & pass it a Date object created using dob array th at it does not conflict with HTMLS date picker functionality (done using the jQuery • prop () method to alter the value of its type attribute). The selection uses • data() to note t hat it is a date input FUNCTION: toggl eParentsConsent () Shows/hides parental consent based on age and jQuery Ul's . datepi cker() method to create the jQuery UI date picker. 4 . When the user leaves the date input, the checkDate () f unction is called. 5. The checkDate () fu nction is declared. 6. A variable called dob is created to hold the date Is date a number? + the user selected. The date is converted into an array of three values (month, day, and year) using the I Was birthday < 13 years ago? split () method of the String object. 7. togg l eParentsConsent () is called. It has one parameter: the date of birth. It is passed into the function as a Date object. 8. togg 1ePa rentsConsent () is declared. 9. Inside the function, it checks the date is a number. If not, return indicates the function should stop. 10. The current time is obtained by creating a new Date object (the current time is the default value of a new Date object). It is stored in a variable called now. 11. To find the user's age, the date of birth is subtracted from the current date. For simplicity, leap years are ignored. If that is less than 13 years: 12. Show the container for the parental consent. 13. Otherwise, the container of the consent box is hidden, and the checkbox is unchecked. @ FORM ENHANCEM ENT & VALIDATION ' I Create a new Date object called now (sub!racting dob from now gives age) Add hide class to consent container I Set checked on consentcheckbox to false Remove hide class from consent container I Give focus to consent checkbox AGE CONFIRMATION cl3/js/birthday.js JAVASCRIPT CD (function() { var $birth $('#birthday'); II D-0-B input var $parentsConsent $('#parents-consent'); II Consent checkbox var $consentContainer $( ' #consent-container'); II Checkbox container II Create the date picker using jQuery UI @ $birth . prop{'type', 'text') .data('type', 'date').datepicker({ dateFormat: 'yy-mm-dd' II Set date format }) ; © ® © $birth.on('blur change ' , checkDate); II D-0-B loses focus function checkOate() { II Declare checkDate() var dob =this.value . split('-'); II Array from date II Pass toggleParentsConsent() the date of birth as a date object toggleParentsConsent(new Oate(dob[O], dob[l] - 1, dob[2])); ® ® function toggleParentsConsent(date) II Declare function if (isNaN(date)) return; II Stop if date inval id II New date obj: today var now= new Date(); II If difference (now minus date of birth, is less than 13 years II show parents consent checkbox (does not account for leap years) II To get 13 yrs ms* secs* mins *hrs* days* years if ((now - date) < (1000 * 60 * 60 * 24 * 365 * 13)) { $consentContainer.removeClass('hide'); II Remove hide class $parentsConsent.focus(); II Give it focus else { II Otherwise $consentContainer.addClass('hide'); II Add hide to class $parentsConsent.prop('checked', false); II Set checked to false } @ @ @{ } } ()); When creating a date picker using jQuery UI, you can specify the format in which you want the date to be written. On the right you can see several options for the format of the date and what this would look like if the date were the 20th December 1995. In particular note that y gives you two digits for the year, and yy gives you four digits for the year. FORMAT RESULT rrm/dd/yy 12/20/1995 yy-nvn-dd 1995·12-20 m, y 20 Dec, 95 d mm d, yy December 20, 1995 00, d rmn, yy Saturday, 20 December, 1995 FORM ENHANCEMENT & VALIDATION @ A PASSWORD FEEDBACK The second script designed to enhance the form provides feedback to the users as they leave either of the password inputs. It changes the value of the cl ass attribute for the password inputs. offering feedback to show whether or not the password is long enough and whether or not the value of the password and its confirmation box match. 1. Place the script in an l lFE (not shown in flowchart). 2. Variables store references to the password input and the password confirmation input. 3. setErrorHi gh lighter() function is declared. 4. It retrieves the target of the event that called it. 5. An if statement checks the value of that element. If it is less than 8 characters, that element's class attribute is given a value of fai l . Otherwise, it is given a value of pass. 6. removeErrorHighl ighter () is declared. 7. It retrieves the target of the event that called it. 8. If the value of the c 1ass attribute is fa i 1, then the value of the cl ass attribute is set to a blank string (clearing the error). 9. passwordsMatch () is declared (it is only called by the password confirm box). 10. It retrieves the target of the event that called it. 11. If the value of that element is the same as the first password input, its cl ass attribute is given a value of pass; otherwise, it is given a value of fai 1. 12. Event listeners are set up: ELEMENT EVENT METHOD password focus removeErrorH ighl i ghter ( ) password blur setErrorHi ghlighter ( ) conf-password focus removeErrorHi gh 1i ghter() conf-password b1ur passwordsMatch () This demonstrates how scripts often group all of the functions and the event handlers together. f) Create variables: password: password input passwordConfi nn: confirmation input G> Event: b 1ur on password + I I e FUNC TIO N: setErrorHi gh 1i ghter() Sets error highlight ing 0 Get t arget element + I Is it< 8 characters? ' G> I 0 FUNCTION: removeErrorHighl ighter() Removes error highlighting 0 Get target element + I Does class indicate an error? ' I Set cl ass attribute to '' Event: b1ur on password confirm I FUNCTION: passwordsMatch () Checks both pa ssword s match Get target element + I ' Do password & passwordConfinn match? I FORM ENHANCEMENT & VALIDATION Add class: fai 1 Event: focus on password or password confirm Add class: fail § ' I I Add class: pass ' I Add class: pass PASSWORD SCRIPT c13/js/password-signup.js ' JAVASCRIPT G) (function () { ~ var password= document.getElementByld('password'); II Store password inputs ~ var passwordConfirm = document.getElementByid('conf-password ' ); Q) function setErrorHighlighter(e) { @) var target= e.target I I e.srcElement; II Get target element if (target.value.length< 8) { II If its length i s< 8 II Set class to fail target.className ='fa il'; else { II Otherwise target.className = 'pass'; II Set class to pass , function removeErrorHighlighter(e) { var target= e.target I I e.srcElement; if (target.className ' fail ' ) { target.className = ''; ® ®> , 12 II II II Get target element If class is f ail Clear class function passwordsMatch(e) { II Get target element var target= e.target I I e.srcElement; II If value matches pwd and it is l onger t han 8 characters if ((password.value=== target.value) && target.val ue.length>= 8){ target.className 'pass'; II Set class to pass II Otherwise else { target.className 'fail'; II Set class to fail } addEvent(password, ' focus', removeErrorHigh lighter); addEvent(password, 'blur', setErrorHi ghlighter); add Event ( passwordConf i rm, 'focus' , removeErrorHi gh 1i ghter); addEvent(passwordConfirm, ' blur', passwordsMatch); } ()); FORM ENHANCEMENT & VALIDATION s• Form enhancements make your form easier to use. Validation lets you give users feedback before the form data is sent to the server. HTMLS introduced new form contro ls which feature validation (but they only work in modern or mobile browsers). HTM LS inputs and their validation messages look different in various browsers. You can use JavaScript to offer the same functionality as the new HTMLS elements in all browsers (and control how they appear in all browsers). Libraries like jQuery UI help create forms that look the same across different browsers. Regular expressions help you find patterns of characters in a string. INDEX SYMBOLS $(}shortcut for jQuery() function 296, 299, 313, 361 $ () conflicts with other scripts that use $ () 361 $(document) . ready(funct i on(){ ... }) 312 $ (function() { • .• } ) (shortcut) 313, 364-5 $(this) 324, 549 [] Array syntax 72 [] Accessing an object's properties 103 {} Code blocks 57 {} Code block (function) 90 () Final parentheses (calling a fu nction) 97 () Grouping operator 97 = Assignment operator 107 += Operator (adding to a string) 111, 125 == Equal to (comparison operator) 150, 168 ===Strict equal to (comparison operator) 150, 168 ! =Not equal to (comparison operator) 150, 168 ! == Strict not equal to (comparison operator) 150, 168 >Greater than (comparison operator) 151 >= Greater than or equal to (comparison operator) 151 < l ess than (comparison operator) 151 <= Less than or equal to (comparison operator) 151 && Logical and (logical operators) 157, 158, 537 ! logical not (logical operators) 157, 159 11 Logical or (logical operators) 157, 159, 169 . Member operator 50, 103 / / (No http: in a url) 355 A • abort() method (j qXHR object) 389 Accessibility 46, 491 Accordion 430, 492-5, 522- 5 . accordion() (jQuery UI method) 430 action (DOM property - forms) 572 add() (option to select box) 584 . add () (jQuery method) 531 • addCl ass() (jQuery method) 320, 498, 512-3. 519, 565 addEventl i stener() (DOM method) 254-5, 570-1 Adding or removing HTML Content Comparing techniques 226-7 i nnerHTML & DOM manipulation 218 -225, 240-1 Using jQuery 314 -9, 346-7 Addition 76-7, 181 .after() (jQuery method) 318 -9 Age verification 617-9 Ajax Introduction to 370-3 Data fo rmats HTML 374, 378-9, 390-1 JSON 374, 376-7, 382-3, 396-7 XML 374-5, 380-1 Forms 394- 5 . serialize() (jQuery method) 394 jqXHR object (see J > jqXHR object) JSON object (see J > JSON > JSON object) Relative URls 389 Requests (loading data): CORS (Cross Origin Resource Sharing) 384 HTML 378-9 HTML (jQuery) 390-1, 393 JSON 382-3 JSON/JSONP from a remote server 385-8 Proxy for loading rem ote content 384 XML 380-1 jQuery 388-9, 392-3 . load() 390-1, 407, 427 $.ajax() 388, 398-9, 405 $.get() 392-3 $.getJSON() 392,396-7 $.getScript() 392 $ . post() 392,394-5 Responses 373-391 Update URL 424-7 URLs (maintaining) 424-7 XMLHttpRequest object Methods open(), send() 372-3 Properties r esponseText 379,383,389 responseXML 380-2,389 status 373,378-9,389 XOoma i nReques t object (IE8-9) 384 A lert box 125 al ert() (window object) 124-5 .always() (jqXHRobject) 389,396-7 AngularJS 428, 434-9 .animate() (jQuery method) 332, 334-5, 352-3, 493, 515, 520-1 Anonymous functions 88, 96 A Pis Introduction to 410, 412 API Keys 441 Console API 470 HTML5 APls 413 Geolocation API 416-9 History API 424-7 Web Storage API 420-3 Platform APls 440 Google Maps API 441-7 Scripts Introduction to 428 AngularJS 434-9 jQuery UI 429-433 • append() (jQuery method) 318, 565 .appendTo() (jQuery method) 318, 505, 519 appendChild() Feature detection) JavaScript console 464-79 (see also C >Console) Rendering engine 40 Scrollbars 35"0 Support in examples 10 Browser Object Model Introduction to 121-2 hi story object 122, 124- 5, 424-7 1ocat ion object 122 navigator object 122 screen object 122, 124-5 window object 122, 124-5 Bubbling (event flow) 260-1 Built-in objects 120-7 : button (jQuery selector) 342 c Caching Cross-references 540-1 DOM queries 190-1, 575 Images (in custom object) 509-511 jQuery selections 308-9, 540-1 Object references 540-1 Calling a function 91 cancel able property (event object) 262 Capturing (event flow) 260-1 Case sensitivity 56 catch (error handling) 480-1, 576-7 CDN 354-5 cei 1 () (Math object) 134 Centering images 511 Chaining (jQuery methods) 311 change event 247, 282, 573, 576-7, 586-7 Character count 588-9 charAt() (String object) 128-130 Checkboxes 580-1 : checkbox (jQuery selector) 342 : checked (jQuery selector) 342 checked (DOM property - forms) 573, 580-1 . children() (jQuery method) 336 clearTimeout() (window object) 517-9 • c 1i ck() (jQuery method) 512-3 click() (DOM method) 573 click event 39, 246, 276-7, 573 cl i entX, clientY (event object) 278-9 • c 1one() (jQuery method) 34 6-7 . closest() (jQuerymethod) 336 Code blocks 56, 90 Code dependencies 616 Code reuse 616 Collections elements (nodelists) 196-9 element s (form) 572, 600 Color picker 591 Comments 57 Compare functions (sorting) 555-9 Comparison operators 150-9 Checking equality 168 Comparing expressions 154-5 Operands 152 Truthy and falsy values 167 concat () (array object) 530 Conditional loading 596-7 Conditional statements 149 if 160-1, 181 if ... else 162-3 switch 164-5, 291 Conditions (loops) 170-1 Console Breakpoints 476- 8 console.asser t() 475 console.error() 472 console .group() 473 console .groupEnd() 473 console . info() 472 console . log() 470-1 console.table() 474 console . warn() 472 debugger keyword 479 Constructor notation 106-111, 113 : contains() (jQuery selector) 338 Content layer 44 Content panels Accordion 492-5, 522-5 Modal window 500- 5 Photo viewer 506-513 Slider 515-520 Tabs 496-9 continue keyword 174, 594- 5 Coordinates (geolocation API) 417-9 copy event 247 CORS (Cross Origin Resource Sharing) 384 Create attributes (DOM) 234 Create elements (DOM) 126, 222-3, 240 Create text nodes (DOM) 126, 222-3, 240 Cross-Site Scripting (XSS) Attacks 228-231 . css () (jQuery method) 322-3, 504- 5, 510-1, 521 css Box dimensions 348 CSS-style selectors in jQuery 302-3 Properties and values 9 Selectors to find elements (DOM) 193, 197, 202 Updating class names 189, 195, 232 Updating id attributes 189, 232 Updating styles (DOM) 195, 232 Updating styles (jQuery) 320-3, 497-9 Cut, copy, paste element (jQuery) 346-7 cut event 247 D . data() (jQuery method) 546-7, 565, 602, 608-9 data-* attributes (HTML5) 289-90, 544- 6, 608 Data binding (Angular) 437 Data models Introduction to 26-7 Comparing techniques 116- 7 Arrays and objects 118- 9, 533 Objects and properties 28, 102-5, 142 Data types Complex data types Objects (Arrays and functions) 131 Simple (primitive) data types Boolean 62, 131, 167 Number 6 2, 131-5 Null 131 String 62, 128-130, 131 Undefined 131 Type coercion and weak typing 166-7 Dates / Date object Introduction to 136-9 Comparing 618- 9 Creating I Constructor 136, 138, 143 Date formats 136-9 Date pickers 432-3, 591, 618-9 Day & month names 137, 143 Difference between two dates 139, 143 Sorting 559, 562-3 Methods getTime(),getMilliseconds(), getSeconds() , getMinutes() , getHours(), getDate{), getDay{), getMonth(), getFul lYear(), getTimeZoneOffset() 137 setTime{),setMilliseconds(), setSeconds() , setMinutes{) , setHours{) , setDate() . setMonth{) , setFullYear(). toString() . toTimeString{), toDateString{) 137 dbl click event 246 Debugging Errors and a debugging worktlow 462-3 Tips 484 (see also Console and Troubleshooting) Declare a vari able 60-1 Declaring an array 71-3 Declaring a function 90, 92 defaul tChecked (DOM property - forms) 573 defau 1tVa1 ue ( DOM property - forms) 573 Delays clearTimeout() 517-9 • de 1ay () (jQuery method) 311, 332- 3, 364 setTimeout() 517-9 Delegating events 266- 70, 290-1, 331 del ete keyword 107, 112, 533 Deserializing JSON data 382-3 Design patterns 501 . detach() (jQuery method) 346, 502- 3, 505 Developer tools 236- 7, 464-5 : di sab 1ed (jQuery selector) 342 disabled (DOM property - forms) 573, 578 disabled (JavaScript is disabled) 491 document object Introduction to 36- 9, 123, 126-7 Events load 39,246, 272- 3 M ethods get El ementByld () 39, 126, 193-195 createElement() , createTextNode() 126, 222-3 querySe l ectorA 11 () 126, 193, 197, 202, 204-5 write() 39, 49, 126, 226 Properties domain 126 lastModified 36, 39, 126-7 title 36, 39, 126-7 URL 126-7 DOMContentLoaded event 286-7 DOM (document object model) Introduction 121, 126-7, 18 4, 186-7 Elements Accessing getElementByld() 193- 5 get El ementsByCl ass Name() 193, 197-9, 200 get El ementsByTagName () 193, 197, 201 querySelector() 193- 4, 202- 3 querySe l ectorAl 1 () 193, 197, 202- 3, 204-5 Adding appendChild() 222-3 i nsertBefore {) 222, 240 Creating createElement() 222-3 Updating DOM manipulation 219, 222- 5, 227 i nnerHTML 218, 220-1, 227, 228-31 textContent and i nnerText 216 to Attributes cl ass attribute/cl assName property 195, 232 getting and updating 232-5 id property 232 Text nodes createTextNode() 222 nodeValue 214-5 textContent and i nnerText 216-7 Document nodes 186 document object (see D > document object) DOM queries Performance (fastest route) 192 Caching DOM queries 190-1, 575 DOM tree Introduction to 40-1, 186-7 Inspecting (exploring - browser tools) 236-7 Traversing the DOM 208, 210-11 Updating 212-3 Events (see E >Events) Event handlers 250, 252-3 Event listeners 250, 254-5, 263, 265 Nodes 40, 186-9 Whitespace 209-211 Nodelist 192, 196-9, 202-205 length property 196 Live and static Nodelists 196 Looping through 204-5 Selecting items from a Nodelist 198-9 . done() (jqXHR object) 389, 405 Dot notation 103 (see also member operator) Do while loops 170, 177 Drop-down boxes 584-7 DRY principle (don't repeat yourself) 616 Dynamic filtering 538-43 E . each() (jQuery method) 324-5, 333, 339, 498-9, 519, 531, 546-7 ECMAScript 532 Elements (see D> DOM > Elements and J > jQuery) Dimensions (jQuery) 348-9 Finding elements (DOM) 192-203 Finding elements (jQuery) 296, 302-3, 336, 342 Form element content (jQuery) 342-5 Hiding/showing 332-3, 582-3, 618-9 Inserting new elements (jQuery) 318-9 Updating elements (DOM) 212-3 Updating elements (jQuery) 313 elements collection (DOM property) 572, 574-5 . empty () (jQuery method) 346, 504-5 : enabled (jQuery selector) 342 . eq () (jQuery method) 340-1, 512-3, 521 Equality 150-1, 168 equals sign (assignment operator) 61 Errors Common errors 460-1, 485 Debugging workflow 462-3 (and tips 484-5) error event 246, 272 Error handling 480-1, 576-7 Error objects 459, 461, 481 EvalError 459-460 RangeError 459,461 Ref erenceError 459-60 SyntaxError 459-60 TypeError 459, 461 UR!Error 459-60 Exceptions 458, 480-1 NaN 461 Understanding errors 458 e (shorthand: event or error object) 328 EvalError 459-460 Evaluating conditions 149-59 Events Introduction to 5, 30-31, 244-50 All events beforeunload 286-7 blur 247,274-5, 282 change 282- 3,586-7 click 260-1, 268-9, 276-7 dblclick 246,276 DOMContentloaded 286-7 DOMNodeinserted 284,285 DOMNodelnsertedlntoDocument 284 DOMNodeRemoved 284 DOMNodeRemovedFromDocument 284 DOMSubtreeModified 284 error 246, 272 focus 274-5,282,588-9,594-5 focusin 274 focusout 274 hashchange 286,426-7 input 247, 271, 280-2, 552-3, 573, 588-9 Events continued. keydown 280 keypress 280-1 keyup 280 load 39,246,272- 3 mousedown 276 mousemove 276,279 mouseout 276 mouseover 276 mouseup 276 resize 272, 504-5 scrol 1 272 submit 282-3,572,574-5 unload 272 binding 248, 250 Delegation (DOM) 266, 268-71, 290-1 Delegation (jQuery) 330-1, 365 Determining position 278-9 Event flow (bubbling and capturing) 260-1 Event handlers Cross browser 570-1 DOM Event handlers 250, 252-3 DOM Event listeners 250, 254 - 5 Removing event listeners 255 Using parameters with events 256- 7, 263 HTML event handlers 250-1 event object DOM 262-3, 265-70 M ethods preventDefault() 262,26~283 stopPropagation() 262,267 Properties cancelable, clientX,clientY, pageX, pageY, screenX,screenY, target,type 262, 278-9 event object (jQuery) 328-9, 331 M ethods .preventDefault() 328 .stopPropagation() 328 Properties data, pageX,pageY, target, timeStamp, type, which 328 IE8 event model attachEvent() 255, 258-9, 290 Cross- browser helper function 570-1 event object 264 -5, 570-1 Property and method equivalents 262 Fallback example 258-9 jQuery (consider as alternative) 300-1 jQuery events 326-331, 343 Performance (delegation) 266, 268-9, 290, 331 Terminology (fired, raised, triggered) 247 Types of event 246-7, 271 W3C DOM 271-286 HTML5 286-7 jQuery events 326-331, 343- 5 Which element user interacted with 262- 70 every() (array object) 530 Exceptions (see Errors) Execution contexts 453- 6 Expressions 74-6 Comparing expressions 154 Function expressions 9 6-7 F . fade In() (jQuery method) 298, 311, 332-7, 365 . fadeout() (jQuery method) 332- 3, 337, 510-11 . fade To() (jQuery method) 510-11 . fai 1 () method (jqXHR object) 389, 396-7, 405 Falsy and truthy values 167-9 Feature detection Feature detection (in jQuery) 301 Modernizr 414 - 5, 417, 419, 593, 596-7 : fi 1e (jQuery selector) 342 File extension .js 46 .min.js 298 Filtering Introduction to 534 filter() (array object) 530, 536- 7 . f i 1ter () (jQuery method) 338-9, 343, 531, 548-9 Tags 544-9 Text/ live search 550-3 finally (error handling) 480-1 Final parentheses 97 . find() (jQuery method) 336-7, 518- 9, 564- 5 Firebug 237 firs tChi 1d (DOM property) 188- 9, 208-9, 211 Flags 578- 9 floor() (Math object) 134 -5, 139 Flowcharts 18, 23, 148, 494 fn object (jQuery) 523- 5 focus() (DOM method) 273. 573 . focus() (jQuery method) 326, 619 : focus (jQuery selector) 342 focus event 274-5, 282, 573, 588-9 focus in event 247 focusout event 247 forEach () (array object) 530, 536-7, 542-3 for loop 172-3, 175, 207 Forms Controls (types of) 573 Changing type of form control 576-7 Checkboxes 580-1 Date picker (HTML5) 591 Date picker (jQuery) 432-3, 619-9 Email 590, 611 Radio buttons 582-3 Range inputs 591 Select boxes 584 -7 Submit button 578-9 Text input 576- 7, 594-5 Textareas 588-9 elements collection 600 Enhancement Introduction to 568 jQuery UI (Date picker & slider) 432- 3 Password length and match 620-1 Show or hide based on other form input 618-9 Giving focus to an element 273, 326, 573, 619 Methods 343, 572-3, 584 Properties 343, 572-3, 584 Submitting forms 574- 5, 578-9 Validation 282, 598-619 Introduction to 568, 598 Age 617-9 Character count 588-9 Checkbox selected 580-1 Checking for a value 606-7 Checking length of text input 615 Dates 617-9 Email 611 HTML5 form validation 590-1, 604-5 Length of text/password input 588-9, 620-1 Numbers 132, 343 Password length and match 615 Radio button selected 582-3 Regular expressions 612-3 Required elements 606-7 test() and regular expressions 611-3 Turn off HTML5 validation 591 URL 590 Which element the user interacted with 576-7 (see also Event object) forward() (history object) 426 Function-level scope 98 Functions Introduction to 88- 9 Anonymous fu nctions 88 Arguments 92-3 Calling 91, 93 Code block 90 Declaring 90, 92, 96 Final parentheses 97 Function expressions 96-7 Helper functions 570- 571 initialize/ init() 539, 542-3 Parameters 8 8, 92-3 return 92, 94-7, 578-9, 586-7, 594- 5 this (scope of keyword) 270 (see also this keyword) G Geolocation API 416-9 $.get() (jQuery method) 388, 392-3 getAttribute() (DOM method) 232-3 getCurrentPos it ion () (Geo location API) 417-9 getDate() (Date object) 137 getDay () (Date object) 137 getElementByld() (DOM method) 126, 192-5 get El ementsByCl assName () (DOM method) 193, 197, 200 getElementsByTagName() (DOM method) 193, 197, 201, 240 get Full Year() (Date object) 137-8 getHours () (Date object) 137 get Item() (storage API) 421 -3 $.getJSON() (jQuery method) 388, 392, 396-7, 405 getMi 11 seconds() (Date object) 137 getMi nutes () (Date object) 137 getMonth () (Date object) 137 $. getScri pt () (jQuery method) 388, 392 get Seconds() (Date object) 137 getTime() (Date object) 137 getTimezoneOffset () (Date object) 137 Global JavaScript Objects Introduction to 121, 124-139 Boo 1ean object 123 Date object 123, 136-9 Math object 123, 134-5 Number object 123, 132-3 Regex object 123 String object 123, 128-130 Global scope 98 go() (hi story object) 426 Google Maps API 441-7 Grouping operator 97 :gt() (jQueryselector) 340-1 H : has () (jQuery selector) 338-9 hasAttribute() (DOM method) 232-3, 235 . hasCl ass() (jQuery method) 365 hashchange event 286, 426-7 . height () (jQuery methods) 348-9, 350, 353 height (screen object) 124-5 Helper functions 570- 571 .hide() (jQuery method) 332-3, 512- 3, 582-3, 618-9 History API 424- 7 hi story object (Browser Object Model) 124-5, 424-7 M ethods back(), forward{), go(), pushState(),replaceState() 426 Properties length 426 History stack 424 Hoisting 456 How many characters in a string 128-130 . html() (jQuery method) 314-7 HTML5 APls 413 Geolocation API 416-9 History API 424- 7 Web Storage API 420-3 Attributes data-* attributes 289-90, 544- 6, 608 required 591, 607 Events 286-7 Form controls (support, polyfills, styling) 590-2 placeholder tailback 594-7 id (DOM property) 189, 232 if ••• e1se 148-9, 162-3 if statements 148- 9, 160-3, 181 : image (jQuery selector) 342 Images centering 511 Immediately Invoked Function Expressions ( llFE) 97, 142, 504, 523 Implicit iteration 310 Increment in loops 170-3 • index() (jQuery method) 565 Index numbers 129 i ndexOf () (String object) 128-130, 550-3 Initialize / i nit() (functions) 539, 542-3 lnline scripts 49 • i nnerHei ght () (jQuery methods) 348 i nnerHei ght (window object) 124-5 i nnerHTML (DOM property) 218, 220-1, 227 Security risks 228 i nnerText (DOM property) 216-7 • i nnerWi dth () (jQuery methods) 348 i nnerWi dth (window object) 124-5 : input (jQuery selector) 342 input event 247, 271, 280-2, 552-3, 573, 588-9 i nsertBefore () ( DOM method) 240 Instances (of objects) 109-11 Interpreter Definition 40 How it works· 452- 7 . is () (jQuery method) 343, 521, 565 i sNaN () (Number object) 132 $.isNumeric() 343 item() (Array) 71 item() ( Nodelists) 196, 198 j JavaScript console 462-79 JavaScript History I Standards 532 JavaScript libraries 360-1, 428 JavaScript not enabled 491 jQuery Introduction to 294, 296, 298-9 $()shortcut for jQuery() 296, 299, 313, 361 $(function() { ... } ) ; 313 Advantages 300 Ajax (see Ajax) API 358 Caching selections 308-9 Chaining methods 311 Conflicts with other scripts 361 document. ready () 312-13 Documentation 358 Elements 302-3, 314 -6, 318-9, 336-9,342-7 Events object 326-331 . fn object 523- 5 Forms(. seri a1i ze()) 394 Global methods $. aj ax() 388, 398-9, 405 $. get() 388,392-3 $.getJSON() 388, 392, 396-7, 405 $.getScr ipt() 388 $. isNumeric() 343 $.post() 388, 394 -5 How to include 298, 354-5 Implicit iteration 310 jQuery () function (see also$ () ) 296, 299, 313, 361 Where to place script 313, 354-7 jqXHR object 389, 405 Methods . abort() , • a1ways(), .done() , . fail() 389, 396-7 .overrideMimeType () 4 0 5 Properties responseText, respon seXML, status, statusText 389 JSON Introduction to 376-7 A s an Ajax data format 374 Debugging JSON 474 Displaying JSON 382- 3 JSON object parse() & stringify() methods 377, 382-3 Serializing and deserializing data 382-3 JSONP 385-7 jQuery methods: full list of methods 304- 5 Keyboard events 246-7, 280-1 keydown, keypress, keyup, i nput event 246-7 keys (objects) 101, 533, key/value pairs 118 Keyword s break 164-5, 174 case 164-5 catch 4 80-1, 576-7 continue 174, 595 debugger 479 delete 107, 112, 533 finally 480-1 new (array) 71 new (object) 106, 109 return 92,94-~578-9, 586-~594-5 swi tch 164-5 this 102-9, 114-5, 270, 324 throw 482 try 480-1, 576- 7 var 60, 63-8 jQuery selection (matched set) 296- 7, 306 Adding to I filtering selection 338-341 Caching 308-9 Number of elements (1 ength property) 364 jQuery selectors 296, 300, 302-3 jQuery Selectors: full list of selectors 302- 3 jQuery UI 429 Accordion 430 Date picker 432- 33, 618-9 Form enhancements 432-3 Tabs 4 31 looping Through elements (implicit iteration) 310 Through elements . each() (see E > . each()) Matched set (see J > jQuery > jQuery selection) Page is ready to work with 312-3 Plugins 359, 428 Creating your own 522-5 Date picker 619 jQuery UI 429-434, 618-9 noUISlider 538 Versions 298, 301 Where to get/ download 298, 354-5 K L las tChi l d ( DOM property) 208, 211 l astindexOf () (String object) 128-130 length (hi story object) 124, 426 length ( item s in a select box) 584 length (Stri ng object) 128-130, 588-9, 620-1 Length of text input 588-9 Lexical scope 457 Lexicographic sort 554 Libraries 360-1, 428 Linking to a JavaScript file 47, 51, 298, 313, 354-7 Links Get value of href attribute 407 Which link was clicked 498-9 Literal notation 102, 104-5, 113, 142 (see also 0 > Objects> Creating your own objects) Livesearch (autocomplete) 370 load event 246, 272-3, 286-7 • load() (jQuery method -Ajax) 388, 390-1, 407 Local scope 98-9 (see also p456-7) Locale 137 localStorage 420-3 1ocat ion property (window object) 124-5 Logical operators 156-9, 169 Logical and 157-8, 537 Logical not 157, 159 Logical OR 157. 159 Short-circuit evaluation 157, 169 Looking for text 550-3 Loops Introduction to 170-7 break keyword 174 (see also Keywords> break) Conditions 170-3 continue keyword 174. 595 Counters 171-4, 181 do wh i 1e loop 170. 177 for loop 175 Introduction to 170, 175 Diagram 172-3 Looping through elements 204-7 Increment(++) 171 Infinite loop 174 jQuery implicit iteration 310 jQuery . each() method 324 Looping through an array 175, 530, 534-7, 542-3 checkboxes 580-1 DOM elements (nodelist) 204-7, 594-5 properties of an object 533, 605 radio buttons 582- 3 Performance 174 whi 1e loop 170, 176, 181 Lowercase 128-130 : 1t () (jQuery selector) 340 M map () (array object) 530 Maps (Google maps) 441 -7 Matched set (jQuery) 296-7, 306-9, 338-41, 364 Math object 134-5 Methods ceil (),floor(), random() , round() , sqrt() 134 Properties PI 134 Member operator 50. 103 method property (DOM property - forms) 572 Methods Introduction to 32-3, 100-11 Calling a method 50, 103 M inification (.min . js extension) 298 Modal window 500-5 Modernizr 414-5, 417, 419, 593, 596-7 Module pattern 501 mousedown,mousemove,mouseout, mouseover, mouseup event 246, 276-7 multiple (DOM property - forms) 584 Multiplication 76-7, 176-7, 181 Mutation events 247, 284-5 MVC I MV• 360, 434-9 N name (DOM property - forms) 572- 3 Name/value pairs 28, 88-9, 101, 113, 116- 8, 131 Naming conflicts (collisions) 97, 99, 361 NaN 78, 132, 461, 483 navigator object (Browser Object Model) 122, 414, 417-9 new keyword 71, 106, 109 . next() (jQuery method) 336-7, 495 . next A11 () (jQuery method) 336 nextSi bl i ng (DOM property) 208, 210, 214 NodeLists 196-9 Nodes (introduction to) 40, 186-7 node Va1ue (DOM property) 184, 214-5, 241 No JavaScript 491 Non-blocking processing 371 • not() (jQuery method) 338, 494-5, 531 : not() (jQuery selectors) 338-9 noUiSlider 538, 542-3 nova 1i date property (HTMLS forms) 591, 604-5 Number object (Built-in Objects) Methods isNan(), toExponential(), toFixed{),toPrecisi on() 132- 3 Rounding numbers 132- 3 Numbers 62-3 Random numbers 135 Rounding 132-3 Sorting 558 Numeric data type 62 (see also D > Data types) 0 Objects Introduction to 26-9, 34-5, 10 0-1 Accessing properties and methods Dot notation 103- 5, 110 Square brackets 103, 107 Ad ding and removing properties 112 Arrays and objects 118-9, 308, 34 0, 533 Built- in objects 120-3 Creating Comparison of techniques 113 Constructor notation 106, 108-111, 113 Literal notation 102, 104-5, 113, 142 Instances of 109-11 Multiple objects 105, 108-111 Creating your own objects (examples of) Compare functions for sorting 562-3 Custom object for valid elements 601, 604-5 Data: cameras and projectors 586-7 Data: people for filtering 533- 4 Image cache 509-13 Modal window 501- 5 Tags 544 -9 keys 101-2, 113, 117-8, 131, 533 Methods 32-5, 38-9, 100-11 Properties 28-9, 34-5, 100-12 this 114-5 Updating properties 107 vs variables and arrays 116-7 Object models (introduction to) 121 .off() (jQuery method) 505 . offset () (jQuery methods) 351, 353 . on() (jQuery method) 326-31, 343-5, 365 onpopstate property (window object) 426-7 . open() (XMLHttpRequest object) 373, 379, 381, 383 Operators += adding to a string 111, 125, 127, 130, 133 Comparison operators 148- 56 >greater than,>= greater than or equal to 151- 5 () grouping operator 97 elements 584 -7 options (DOM property- forms) 584 Order of execution 452 . outerHei ght () . (jQuery method) 34 8 .outerWidth() (jQuery method) 348 .overri deMimeType () (jqXHRmethod) 4 0 5 p Page loads - run script 273, 312-3 pageXOffset, pageYOffset (window object) 124-5 pageX, pageY (window object) 124, 278-9 Parameters 50, 88, 92- 3 W ith event listeners 256-7 . parent() (jQuery method) 336, 498- 9 . parents() (jQuery method) 336 parentNode (DOM property) 208, 224-5 : password (jQuery selector) 342 paste event 247 Performance Caching DOM queries 190-1, 575 Images (custom object) 509-11 jQuery selections 308- 9, 540-1 Object references 540-1 Text (custom object) 551 Event delegation 266, 268-71, 290-1, 330-1, 365 Global vs Local variables 98-9 Selecting cl ass and id attributes (jQuery vs DOM) 324 Where to place scripts 356-7 PI property (Math object) 134 p1aceho l der (and its fall back) 590-1, 594- 5 Polyfills 593-7 pop{) (ar ray object) 530 . position() (jQuery method) 351 Position object (geolocation API) 418-9 Position Error object (geolocation API) 418-9 Position of items on page 351-3 $.post() (jQuery method) 388, 392, 394- 6 . prepend () & . prependTo () (jQuery methods) 318 Presentation layer 44 preventDef au l t () (event object) 262, 267, 283, . preventDefaul t() (jQuery method) 328, 345, 365, 494-5, 504-5 previ ousSi bl i ng (DOM property) 208-10 Primitive data types (see Data types) Progressive enhancement 45 . prop() (jQuery method) 618-9 Properties 28-9, 34-5, 100-12 Protocol relative URL 355 Proxy (Ajax) 384 push() (array object) 519, 530, 536-7, 540, 542-3 pushState () ( hi story object) 424-7, 426 Q querySel ector () (DOM method) 193-6, 202, 241 querySe l ectorA 11 () (DOM method) 126, 193, 197 R : radio (jQuery selector) 342 random() (Math object) 134-5 Random numbers 135 RangeError 459, 461 Range slider 432-3, 538. 542-3 . ready() (jQuery method) 312-3, 361, 364 Reference To an element DOM 190-1, 575 To an element jQuery 308-9, 540-1 To an object 540-1 ReferenceError 459-60 Regular expressions 563, 611-3 Relative URLs (Ajax) 389 Removing content: . remove() (jQuery method) 299, 316-7, 346, 584 • removeAttr() (jQuery method) 320 removeAttribute() (DOM method) 232, 235 removeChi l d () (DOM method) 224-5 . removeCl ass() (jQuery method) 320-1, 339, 341, 512-3 removeEventlistener() (DOM method) 255 (see also i nnerHTML an(d detach ()) replace() (String object) 128-130, 406-7, 562-3 rep l aceState () method (hi story object) 424-6 . rep l aceWi th () (jQuery method) 316 Require.js 593 : reset (jQuery selector) 342 reset() (DOM method - forms) 572 reset event 247, 572 resize event 246, 272, 504-5 responseText (XMLHttpRequest object) 379, 383, 389 responseXML (XMLHttpRequest object) 380, 389 return keyword 92, 94-7, 578-9, 586-7, 594-5 reverse() (Array object) 530, 564-5 RangeError 459,461 Rounding numbers 132-5 round() (Math object) 134 s Same origin policy 420 Saving a script 46 Scope 98-9, 457 Global scope 98-9, 453-7 llFEs 97 lexical scope 457 Local (function-level) scope 98-9, 453 Naming collisions and namespaces 99, 523 Screen dimensions 124-125, 278, 350 screen object (Browser Object Model) 124-5 Properties height, width 124 screenX, screenY (window object) 124, 278

---

time	title	detai l
{{ session . time }}	{{ session.title }}	{{ session.detail }}
elements, the type of data used is specified in an attribute called data-sort. • • • Strings Time durations (mins/secs) Dates l!I My Videos GENII£ e • • • -..mclN DATE Camille Berger 9 Peri,Fteneo Fiim Arll element needs to carry a c 1ass attribute whose value contains sortable. 2. Table headers have an attribute called data-sort. It reflects the type data in that column. The value of the data-sort attribute corresponds with the methods of the compare object. cl2/sort-table.html ©
Genre	Title	Duration	Date
Animation	Wildfood	3:47	2014-07- 16
Film	The Oeer	6:24	2012 -02-28
Animation	The Ghost	ll :40	2013-04-10