XP Tutorial 2 New Perspectives on JavaScript, Comprehensive1 Working with Operators and Expressions Creating a New Year’s Day Countdown Clock

XP Tutorial 2New Perspectives on JavaScript, Comprehensive2 Objectives Work with event handlers Insert a value into a Web form field Create and work with date objects Extract information from date objects

XP Tutorial 2New Perspectives on JavaScript, Comprehensive3 Objectives Work with arithmetic, unary, conditional, and logical operators Understand the properties and methods of the Math object Understand how JavaScript works with numeric values Run time-delayed and timed-interval commands

XP Tutorial 2New Perspectives on JavaScript, Comprehensive4 Working with onEvent Processing Hector’s vision for Web site –Clock that updates itself every second Function to be created will –Calculate current date and time –Calculate time remaining until New Year’s Day –Run once every second

XP Tutorial 2New Perspectives on JavaScript, Comprehensive5 Form Field Names

XP Tutorial 2New Perspectives on JavaScript, Comprehensive6 Inserting the NYClock Function

XP Tutorial 2New Perspectives on JavaScript, Comprehensive7 Understanding Event Handlers Event –Action that occurs within a Web browser Event handler –Statement that tells browsers what code to run in response to specified event Syntax to insert event handler as an attribute...

XP Tutorial 2New Perspectives on JavaScript, Comprehensive8 JavaScript Event Handlers

XP Tutorial 2New Perspectives on JavaScript, Comprehensive9 Running JavaScript Commands as Links Syntax content The following code runs the calcTotal() function Calculate total cost

XP Tutorial 2New Perspectives on JavaScript, Comprehensive10 Working with Dates Date object –Contains information about a specified date and time –Syntax variable = new Date("month day, year hours:minutes:seconds");

XP Tutorial 2New Perspectives on JavaScript, Comprehensive11 Retrieve the Date, Month, and Hour Values Date methods –Used to retrieve information from or modify a date object Syntax to apply the getDate() method DateObject.getDate()

XP Tutorial 2New Perspectives on JavaScript, Comprehensive12 Retrieve the Date, Month, and Hour Values Storing value of current year in a variable ThisDate = new Date("February 24, :35:05"); thisYear = thisDate.getFullYear();

XP Tutorial 2New Perspectives on JavaScript, Comprehensive13 Retrieving the Hour, Minute, and Second Values Methods –DateObject.getSeconds() –DateObject.getMinutes( –DateObject.getHours()

XP Tutorial 2New Perspectives on JavaScript, Comprehensive14 Extracting Date and Time Values from Date Objects

XP Tutorial 2New Perspectives on JavaScript, Comprehensive15 Setting Date and Time Values for Date Objects

XP Tutorial 2New Perspectives on JavaScript, Comprehensive16 Creating a Date and Time Function showDate() function function showDate(dateObj) { thisDate = dateObj.getDate(); thisMonth = dateObj.getMonth()+1; thisYear = dateObj.getFullYear(); return thisMonth + "/" + thisDate + "/" + thisYear; }

XP Tutorial 2New Perspectives on JavaScript, Comprehensive17 Creating a Date and Time Function showTime() function function showTime(dateObj) { thisSecond=dateObj.getSeconds(); thisMinute=dateObj.getMinutes(); thisHour=dateObj.getHours(); return thisHour + ":" + thisMinute + ":" + thisSecond; }

XP Tutorial 2New Perspectives on JavaScript, Comprehensive18 Calling the showDate() and showTime() Functions

XP Tutorial 2New Perspectives on JavaScript, Comprehensive19 Working with Operators Operator symbol – Used to act upon an item or a variable within a JavaScript expression Arithmetic operators –Perform simple mathematical calculations

XP Tutorial 2New Perspectives on JavaScript, Comprehensive20 Arithmetic Operators

XP Tutorial 2New Perspectives on JavaScript, Comprehensive21 Arithmetic Operators Binary operators –Work with two items in an expression Unary operators –Work on only one item Increment operator –Used to increase the value of an expression by 1

XP Tutorial 2New Perspectives on JavaScript, Comprehensive22 Arithmetic Operators Decrement operator –Decreases an item’s value by 1 Negation operator –Changes the sign of (or negates) an item’s value

XP Tutorial 2New Perspectives on JavaScript, Comprehensive23 Unary Operators

XP Tutorial 2New Perspectives on JavaScript, Comprehensive24 Assignment Operators Used when assigning values to items within a JavaScript statement The following expressions create the same result x = x + y; x += y;

XP Tutorial 2New Perspectives on JavaScript, Comprehensive25 Assignment Operators

XP Tutorial 2New Perspectives on JavaScript, Comprehensive26 Calculating the Days Left in the Year Function needs to function calcDays(currentDate) { create a date object for January 1 of next year calculate the difference between currentDate and January 1 }

XP Tutorial 2New Perspectives on JavaScript, Comprehensive27 Adding Commands to the calcDays() Function

XP Tutorial 2New Perspectives on JavaScript, Comprehensive28 Calling the calcDays() Function

XP Tutorial 2New Perspectives on JavaScript, Comprehensive29 Working with Math Methods and Constants Math object –Used to perform mathematical tasks and store mathematical values Math methods –Used to perform advanced calculations Syntax for applying a Math method Math.method(expression)

XP Tutorial 2New Perspectives on JavaScript, Comprehensive30 Math Methods

XP Tutorial 2New Perspectives on JavaScript, Comprehensive31 Math Constants

XP Tutorial 2New Perspectives on JavaScript, Comprehensive32 Using the Math.floor() Method

XP Tutorial 2New Perspectives on JavaScript, Comprehensive33 Calculating the Hours, Minutes, and Seconds Left in the Year To calculate number of hours left in current day var hours = (days - Math.floor(days))*24; To calculate minutes left in current hour var minutes = (hours - Math.floor(hours))*60; To calculate seconds left in current minute var seconds = (minutes - Math.floor(minutes))*60;

XP Tutorial 2New Perspectives on JavaScript, Comprehensive34 Controlling How JavaScript Works with Numeric Values NaN –Not a Number isNaN() –Used to check whether a value is numeric –Syntax: isNaN(value)

XP Tutorial 2New Perspectives on JavaScript, Comprehensive35 Specifying the Number Format To control number of digits displayed by browser value.toFixed(n) Applying the toFixed() function testValue = 2.835; testValue.toFixed(0) // returns "3" testValue.toFixed(1) // returns "2.8" testValue.toFixed(2) // returns "2.84"

XP Tutorial 2New Perspectives on JavaScript, Comprehensive36 Numeric Functions and Methods

XP Tutorial 2New Perspectives on JavaScript, Comprehensive37 Working with Conditional Operators Conditional operator –Tests whether a certain condition is true or not –Syntax (condition) ? trueValue : falseValue Comparison operator –Compares value of one expression to another

XP Tutorial 2New Perspectives on JavaScript, Comprehensive38 Comparison Operators

XP Tutorial 2New Perspectives on JavaScript, Comprehensive39 Logical Operators

XP Tutorial 2New Perspectives on JavaScript, Comprehensive40 Running Timed Commands Time-delayed command –Run after a particular amount of time has passed –Syntax setTimeout("command", delay);

XP Tutorial 2New Perspectives on JavaScript, Comprehensive41 Running Commands at Specified Intervals Timed-interval command –Instructs browser to run same command repeatedly at specified intervals –Syntax setInterval("command",interval); –Method to stop command clearInterval();

XP Tutorial 2New Perspectives on JavaScript, Comprehensive42 Performing Special Mathematical Tasks Math.floor(), Math.ceil(), and Math.round() methods –Used to round values to the next highest, next lowest, and nearest integer No Math methods for –Rounding values to decimals

XP Tutorial 2New Perspectives on JavaScript, Comprehensive43 Generating Random Numbers Math.random() method –Generates random values Generating random number between 0 and 10 var randValue = 10*Math.random(); Generating random number from 20 to 30 var randValue = *Math.random();

XP Tutorial 2New Perspectives on JavaScript, Comprehensive44 Tips for Working with Operators and Expressions Use unary and assignment operators to create compact code When performing advanced mathematical calculations –Use constants from the Math object Never apply mathematical operations to text strings

XP Tutorial 2New Perspectives on JavaScript, Comprehensive45 Tips for Working with Operators and Expressions In case of logical error involving a mathematical operation –Use the isFinite() and isNaN() functions Use the toFixed() method to –Format numeric output