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

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

3. 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 © Carl M. Burnett

4. 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 © Carl M. Burnett

5. 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 © Carl M. Burnett

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

7. 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 © Carl M. Burnett

8. 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 © Carl M. Burnett

9. 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 Address1 = $(" _address1").value;
5/18/2019
Copyright © Carl M. Burnett

10. 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 © Carl M. Burnett

11. 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 Address1 = $(" _address1").value;
5/18/2019
Copyright © Carl M. Burnett

12. 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 © Carl M. Burnett

13. 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 © Carl M. Burnett

14. 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 © Carl M. Burnett

15. 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 © Carl M. Burnett

16. 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 © Carl M. Burnett

17. 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 © Carl M. Burnett

18. 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 © Carl M. Burnett

19. 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 © Carl M. Burnett

20. 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 © Carl M. Burnett

21. Student Exercise 1
Chapter 4-1 and 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 © Carl M. Burnett

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

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

24. 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 © Carl M. Burnett

25. 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 © Carl M. Burnett

26. 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 © Carl M. Burnett

27. 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
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 © Carl M. Burnett

28. 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 © Carl M. Burnett

29. 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 © Carl M. Burnett

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

31. 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 © Carl M. Burnett

32. 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 © Carl M. Burnett

33. 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 © Carl M. Burnett

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

35. 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 © Carl M. Burnett

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

37. Student Exercise 2
Chapter 6-1, 6-2 and 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 © Carl M. Burnett