JavaScript www.profburnett.com Session III Chapter 7 - JavaScript Links, Images, & Timers Chapter 13 - How to Work with Number, Strings and Dates Chapter 14 - How to Work with Control Structure Exceptions and Regular Expressions www.profburnett.com Master a Skill / Learn for Life 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

Chapter 7 - JavaScript Links, Images, & Timers 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

How to preload an image with the Image object How to create an Image object var image = new Image(); How to load an image in an Image object image.src = "image_name.jpg"; How to preload all images referenced by the href attributes of <a> tags var links = document.getElementsByTagName("a"); var i, link, image; for (i = 0; i < links.length; i++) { link = links[i]; image = new Image(); image.src = link.href; } 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

Image Swap Application 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

Two methods for working with a timer that calls a function once setTimeout( function, delayTime ) // creates a timer clearTimeout ( timer ) // cancels a timer Two methods for working with a timer that calls a function repeatedly setInterval( function, intervalTime ) // creates a timer clearInterval ( timer ) // cancels a timer 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

Slide Show Application 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

Student Exercise 1 Chapter 7-1 and 7-2 1. Complete Chapter 7 - Exercise 7-1 and 7-2 on Page 219 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. 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

Chapter 13 - How to Work with Number, Strings and Dates 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

Working with Numbers Do Not Declare Strings, Numbers, and Booleans as Objects! When a JavaScript variable is declared with the keyword "new", the variable is created as an object: var x = new String();        // Declares x as a String object var y = new Number();        // Declares y as a Number object var z = new Boolean();       // Declares z as a Boolean object Avoid String, Number, and Boolean objects. They complicate your code and slow down execution speed. 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

Math Object JavaScript Math Object JavaScript Math Reference The JavaScript Math object allows you to perform mathematical tasks on numbers. Math.PI;            // returns 3.141592653589793 Math Constructor Unlike other global objects, the Math object has no constructor. Methods and properties are static. All methods and properties (constants) can be used without creating a Math object first. JavaScript Math Object JavaScript Math Reference 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

PIG Application PIG Application 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

Working with Strings JavaScript Strings JavaScript String Methods Warning - Don't create strings as objects. It slows down execution speed. The “new” keyword complicates the code. This can produce some unexpected results. JavaScript Strings JavaScript String Methods JavaScript String Reference 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

Working with Date and Time and the Data Object JavaScript Data Formats JavaScript Get Date Methods JavaScript Set Date Methods JavaScript Date Objects 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

How the Constructor for the Date Object works If you call the Date constructor with no parameters, it creates a new Date object and sets it to the current date and time. If you call the Date constructor with a string as the parameter, the constructor parses the string as a date or a date and time and uses it to create a new Date object. However, you may get unexpected results if you don’t use slashes and a 4-digit year in the parameter. If you call the Date constructor with two or more numbers as parameters, the numbers are used in the order shown above to create a new Date object. In this case, year and month are required, but the remaining parameters are optional. If you call the Date constructor with another Date object as the parameter, it creates a new Date object that is a copy of the other Date object. If you call the Date constructor with parameters that aren’t a valid date, it creates a new Date object that contains “Invalid Date”. 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

Count Down Application 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

Student Exercise 2 Chapter 13-1 1. Complete Chapter 13 - Exercise 13-1 on Page 399 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. 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

Chapter 14 - How to Work with Control Structure Exceptions and Regular Expressions 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

JavaScript Control Structures and Exceptions Comparison Operators Conditional Statements Switch Statement Loop For Statements Loop While Statements Break / Continue Statement Type Conversion Statement Bitwise Operators 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

Invoice Application Invoice Application 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

Handling Exceptions try catch throw finally Error Object JavaScript Errors JavaScript Error Reference 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

JavaScript Regular Expression Object JavaScript Regular Expressions JavaScript RegExp Reference Two ways to create a regular expression object By using the RegExp() constructor var variableName = new RegExp("expression"[, "flags"]); By coding a regular expression literal var variableName = /expression/[flags]; 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

Account Profile Application 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett

Student Exercise 3 Chapter 14-2, and 14-3 1. Complete Chapter 14 - Exercise 14-2, and 14-3 on Page 433 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. 9/12/2019 Copyright ©2015 - 2019 Carl M. Burnett