JavaScript www.profburnett.com Session II Chapter 4 - JavaScript Events, Objects, & Functions Chapter 5 - Testing and Debugging JavaScript Chapter 6 - JavaScript and the DOM www.profburnett.com Master a Skill / Learn for Life 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Chapter 4 - JavaScript Events, Objects, & Functions 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

JavaScript Objects Browser DOM – The Window Object HTML DOM – The Document Object JavaScript Objects The Quick JavaScript Reference of HTML & JavaScript Objects 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Window Object Methods window.open() - open a new window window.close() - close the current window window.moveTo() - move the current window window.resizeTo() - resize the current window Window confirm() Method alert() Method prompt() Method 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Document Object Methods getElementById write(string) writeln(string) Examples of document methods // returns the object for the HTML element var rateBox = document.getElementById("rate"); // writes a line into the document document.write("Today is " + today.toDateString()); 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Other JavaScript Objects Date Objects String Objects Regular Expressions Objects Boolean Objects Number Objects Math Objects Array Objects Function Objects 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Create a JavaScript Object The syntax for creating an object var variableName = new ObjectType(); A statement that creates a Date object var today = new Date(); 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

JavaScript Function Syntax function functionName(parameter1, parameter2, parameter3) {   // code to be executed } function keyword, followed by a name Function parameters are listed inside the parentheses () in the function definition. Function arguments are the values received by the function when it is invoked. 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

A function declaration with no parameters that doesn’t return a value function showYear() { var today = new Date(); alert( "The year is " + today.getFullYear() ); } How to call the function showYear(); A function declaration with one parameter that returns a DOM element function $(id) { return document.getElementById(id); var emailAddress1 = $("email_address1").value; 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

A function declaration with two parameters that returns a value function calculateTax ( subtotal, taxRate ) { var tax = subtotal * taxRate; tax = tax.toFixed(2); return tax; } How to call the function var subtotal = 85.00; var taxRate = 0.05; var salesTax = calculateTax( subtotal, taxRate ); alert(salesTax); // displays 4.25 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Syntax for a function expression as a variable value var variableName = function(parameters) { // statements that run when the function is executed }; A function expression with no parameters that doesn’t return a value var $ = function(id) { return document.getElementById(id); How to call the function var emailAddress1 = $("email_address1").value; 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

A function expression with two parameters that returns a value var calculateTax = function( subtotal, taxRate ) { var tax = subtotal * taxRate; tax = tax.toFixed(2); return tax; }; How to call the function var subtotal = 85.00; var taxRate = 0.05; var salesTax = calculateTax( subtotal, taxRate ); alert(salesTax); 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

JavaScript Scope Scope determines the accessibility (visibility) of variables. In JavaScript there are two types of scope: Local scope Global scope 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Local JavaScript Variables function myFunction() { var carName = "Volvo"; } Global JavaScript Variables var carName = "Volvo"; // code here can use carName function myFunction() { // code here can also use carName } 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

JavaScript Use Strict Strict mode makes it easier to write "secure" JavaScript. Strict mode changes previously accepted "bad syntax" into real errors. As an example, in normal JavaScript, mistyping a variable name creates a new global variable. In strict mode, this will throw an error, making it impossible to accidentally create a global variable. In normal JavaScript, a developer will not receive any error feedback assigning values to non-writable properties. In strict mode, any assignment to a non-writable property, a getter-only property, a non-existing property, a non-existing variable, or a non-existing object, will throw an error. 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Declaring Strict Mode Strict mode is declared by adding "use strict"; to the beginning of a script or a function. Declared at the beginning of a script, it has global scope (all code in the script will execute in strict mode): 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Examples "use strict"; myFunction(); function myFunction() {   y = 3.14;   // This will also cause an error because y is not declared } Watch Out! The "use strict" directive is only recognized at the beginning of a script or a function. x = 3.14; // This will not cause an error. myFunction(); function myFunction() { "use strict"; y = 3.14; // This will cause an error } 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

HTML DOM Events HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document. Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button). HTML DOM Events HTML DOM Events Tutorial 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Common HTML Events Event Description onchange An HTML element has been changed onclick The user clicks an HTML element onmouseover The user moves the mouse over an HTML element onmouseout The user moves the mouse away from an HTML element onkeydown The user pushes a keyboard key onload The browser has finished loading the page 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

The syntax for attaching an event handler objectVariable.oneventName = eventHandlerName; An event handler named joinList var joinList = function() { alert("The statements for the function go here"); }; 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Student Exercise 1 Chapter 4-1 and 4-2 1. Complete Chapter 2 - Exercise 4-1 and 4-2 on Page 137 using Dreamweaver. 2. Students will upload test files to development site. 3. Students will preview in browser development files. 4. Students will upload files to live site. 5. Students will preview in browser live files. 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Chapter 5 - Testing and Debugging JavaScript 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Three Types of Errors Syntax errors Runtime errors Logic errors 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Common Syntax Errors Misspelling keywords, like coding getElementByID instead of getElementById. Omitting required parentheses, quotation marks, or braces. Not using the same opening and closing quotation mark. Omitting the semicolon at the end of a statement. Misspelling or incorrectly capitalizing an identifier, like defining a variable named salesTax and referring to it later as salestax. 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Problems with HTML references Referring to an attribute value or other HTML component incorrectly, like referring to an id as salesTax when the id is “sales_tax”. 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Problems with data and comparisons Not testing to make sure that a user entry is the right data type before processing it. Not using the parseInt() or parseFloat() method to convert a user entry into a numeric value before processing it. Using one equals sign instead of two when testing for equality. 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Problems with floating-point arithmetic Floating-point numbers can lead to arithmetic results that are imprecise. var salesAmount = 74.95; salesTax = salesAmount * .1; // result is 7.495000000000001 One way to fix this potential problem is to round the result and then convert it back to a floating-point number: salesTax = salesTax.toFixed(2) // result is 7.50 as a string   salesTax = parseFloat(salesTax.toFixed(2)); // result is 7.50 as a number 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Problems with undeclared variables that are treated as global variables If you don’t use strict mode and you assign a value to a variable that hasn’t been declared, the JavaScript engine treats it as a global variable, as in this example: var calculateTax = function(subtotal, taxRate) { var salesTax = subtotal * taxRate; // salesTax is local   salestax = parseFloat(salesTax.toFixed(2)); // salestax is global return salesTax; // salesTax isn't rounded but salestax is }; The solution to this type of problem is to always use strict mode. 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Major Browsers' Debugging Tools Firefox – Getting started with Firefox DevTools Edge - Microsoft Edge Developer Tools Chrome - Chrome DevTools Opera – Opera DevTools Safari - Safari Developer Help 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Chapter 6 - JavaScript and the DOM 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

The Document Object Model (DOM) for a Web Page Objects Properties Methods Inheritance Data Encapsulation HTML <html> </html> Head <head> </head> Body <body> </body> Title <title> </title> section <section> </section> h1 <h1> </h1> ul <ul> </ul> p <p> </p> Text li <li> </li> What is important to understand is the Document Object Model. But first let review what makes up an object. In Chapter 1 we covered what a object is and what characteristics a object possess. 1. Object posses properties. These can be such things as size, color, and shape. 2. Object posses methods. These can be move, pour, open and close. 3. Objects can inherit properties, method and data from a parent object. 4. And objects can encapsulated data by using metadata. With this understanding about the characteristics about an object we can apply this same understanding to the objects that make up a web page. In this case, the overarching parent object of a web page is the HTML declaration. This object is created with the html opening and closing tags. The tags create the HTML object and all object oriented characteristics of the HTML object can be changed based on triggering events. In order for these characteristics to be changed on the client side, a scripting language must be used. In the case, the standard is JavaScript and this language is interpreted through the JavaScript interpreter engine that is part of all browsers. The next object in the web page document object model is the head. This object is created by the head opening and closing tags. It can inherit any characteristics from its parent object, the HTML object. The next object is the body. This object is created by the body opening and closing tags. It can inherit any characteristics from its parent object, the HTML object. A child object of the Head object is the Title object. This object is created by the title opening and closing tags. It can inherit any characteristics from its parent object, the Head object. The next object is the new HTML5 document object called a section. This object is created by the section opening and closing tags. It can inherit any characteristics from its parent object, the body object. The next objects can be many objects to define the content of body or section or any other object container. These objects inlcude the h1 object, the ul object and the p object. These objects are created by the h1, ul, and p opening and closing tags. That can inherit any characteristics from its parent object, the body object. The last objects are the li objects that are created with the li tags. They can inherit any characteristics from its parent object, the ul object. Each of these object can contain data and for the h1 object, the ul li objects and p object all contain textual data that can be changed with the JavaScript language. 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Common methods of the Document and Element interfaces getElementsByTagName(tagName) getElementsByName(name) getElementsByClassName(classNames) Common methods of the Element interface hasAttribute(name) getAttribute(name) setAttribute(name, value) removeAttribute(name) 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Typical properties available with the DOM HTML specification Element Property Attribute all Id The id attribute title The title attribute className The class attribute. To set multiple class names, separate the names with spaces. tagName The name of the tag, like div, h1, h2, a, or img. <a> href The href attribute img src The src attribute alt The alt attribute input disabled The disabled attribute 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

FAQs Application FAQs application 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Attributes of the Form Dlement Description name The name in client-side or server-site code. action The URP of the script file. method GET or POST (GET is default) 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Examples Register Application Register Application with Table 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett

Student Exercise 2 Chapter 6-1, 6-2 and 6-3 1. Complete Chapter 3 - Exercise 6-1, 6-2 and 6-3 on Page 197 using Dreamweaver. 2. Students will upload test files to development site. 3. Students will preview in browser development files. 4. Students will upload files to live site. 5. Students will preview in browser live files. 5/18/2019 Copyright ©2015 - 2019 Carl M. Burnett