Tutorial 11 1 JavaScript Operators and Expressions

Review Function Call Writing Text to a Web Page Element 2

JavaScript Function Call 3 Event handler calls the startClock() function

Writing Text to a Web Page 4 Specify the JavaScript command to write the code to the Web page, where file is the value stored in the fileName variable document.write(“ ”); document.write(“<img src=‘”); Note single quote here document.write(fileName); document.write(“’ alt=‘’ />”); Matches with 1 st single here - - or, this: Could be either this:

Inserting the Element 5 Link to an external JavaScript file: JavaScript inserted within HTML code: JavaScript inserted within HTML code, with “hiding” comments:

Sec 11.1 Event handlers Insert a value into a Web form field Date() objects Extract information from Date() objects 6

Introducing onevent Processing An event is an action that occurs within a Web browser or Web document. An event handler is a statement that tells browsers what code to run in response to the specified event.  One of the most commonly used event handlers is the onclick event, this occurs when the mouse button is clicked _pg-620-simple-onclick-event-handler.htm 236_pg-620-hide-balloon.htm

Introducing onevent Processing To insert an event handler as an element attribute, use the syntax... where element is the Web page element, event is the name of an event associated with the element, and script is a command to be run in response to the event 8 237_pg-621-onload.htm237_pg-621-onload.txt

9 Event Handlers

Inserting a Value into A Form Field 10 The general command to insert a value into a form field is: document.form.field.value = field_value; The value you want to place in the field. Form nameField name 240_insert_data_to_form.htm The value will be changed to whatever value the variable seconds has 238_pg-622-onchange.htm

Date Objects Date objects hold information about a specified date and time To store a date and time in a variable, use the command var variable = new Date("month day, year hours:minutes:seconds") where variable is the name of the variable that contains the date object, and month, day, year, hours, minutes, and seconds indicate the date and time to be stored in the object. Time values are entered in 24-hour time 11 To create a date object containing the current date and time, use the following JavaScript command: variable = new Date() Date and time is taken from the client computer’s clock. 243_pg-623-setting-dates.htm

Working with Date Objects You can also use Numeric values to store the date and time variable = new Date(year, month, day, hours, minutes, seconds) where year, month, day, hours, minutes, and seconds are the values of the date and time, and the month value is an integer from 0 to 11, where 0 = January, 1 = February, and so forth. Time values are entered in 24-hour time. Mydate = new Date(2011, 0, 31, 14, 30, 35); Sets Mydate to January at 2:30:35 pm Notice on previous slide there is only one comma, meaning there are only 2 parameters. This slide there are five commas, meaning there are six parameters _pg-623-setting-dates.htm

Extracting Information from Date Objects Date methods can be used to retrieve information from a date object or to change a date object’s value _pg-626-extracting-dates.htm

Working with Date Objects _pg-627-setting-dates.htm Notice that even though there is a getDay function, there is no corresponding setDay function. This is because any given date in history has to be a particular day of the week.

Sec 11.2 Arithmetic, unary, conditional, and logical operators Properties and methods of the Math object JavaScript numeric values Run time-delayed commands Timed-interval commands 15

Operators and Operands An operator is a symbol used to act upon an item or a variable within a JavaScript expression. Operands are the variables or expressions that operators act upon. 16

Operators and Operands Binary operators work with two operands in an expression: + - * / % Num2 = num1 + 10; // sets num2 = num1 plus 10 Unary operators work with one operand:  Increment operator a unary operator that increases the value of the operand by 1. x++; // Increments the value in x by 1 // Same as: x = x + 1  Decrement operator a unary operator that decreases the value of the operand by 1. x--; // Decrements the value in x by // Same as: x = x -1  Negation operators a unary operator that changes the sign of the operand. -x; // Changes the sign of x 17

Operators and Operands Assignment operators assign values to items.  Equal sign (=) x = 10; y = 5; x = x + 1;// Same as: x++; x = x + (y -1); Although not algebraically correct, the 3 rd and 4 th examples are syntactically correct. First, evaluate the right side of the equal sign and then take that value and assign it to the variable on the right side of the equal sign 18

Operators and Operands _pg-633-funky-assignments.htm

Operators and Operands Assignment operators assign values to items.  A common use of the += operator is to concatenate strings or add a value to an existing value of a variable 20 Adding onto the quote: document.write(quote); 260_pg-632-concat-with-assignment.htm

The Math Object and Math Methods The Math object is an object that can be used for performing mathematical tasks and storing mathematical values. Math methods store functions used for performing advanced calculations and mathematical operations such as: Generating random numbers Extracting square roots Calculating trigonometric values 21

22 Math Methods 265_pg-637-math-object.htm

Math Methods The Math object also stores numeric values for mathematical constants. 23

How JavaScript Works with Some “Non-Numeric” Values Some mathematical operations can return results that are not numeric values. You cannot divide a number by a text string Returns “ NaN ” (Not a Numeric) You cannot divide a number by zero Returns “ Infinity ” The isNaN function is a Boolean function that tests a value to see whether it is numeric or not. The isFinite function is a Boolean function that checks for the value of Infinity _pg-643-invalid-numbers.htm

How JavaScript Works with Some “Non-Numeric” Values 25 js_examples/272_pg-645-text-to-numeric.htm

Conditional, Comparison, and Logical Operators A comparison operator is an operator that compares the value of one expression to another. 26

Conditional, Comparison, and Logical Operators The conditional operator is a ternary operator (combines 3 expressions into a single expression) that tests whether a certain condition is true or not. 27 Both have the same result. We don’t get to this until next tutorial 275_pg-647-conditional-operator.htm

Working with Conditional, Comparison, and Logical Operators Logical operators allow you to connect several expressions 28

Running Timed Commands A time-delayed command is a JavaScript command that is run after a specified amount of time has passed. The time is specified in milliseconds setTimeout(“command”, delay); (Note that “command” can be a function) clearTimeout(); //cancel time delay A time-interval command instructs the browser to run the same command repeatedly at specified intervals. setInterval (“command”, interval); clearInterval(); //cancel interval 29 ( Interval and Delay are in Milliseconds)

setTimeout() The setTimeout() function executes a command after a specified time delay. setTimeout(“command”, delay) COMMAND TO EXECUTE LENGTH OF THE DELAY – in milliseconds 30 <input type="button" id="id1" value="Click Me " onclick='setTimeout("loadImages()", 5000)' /> 280_pg-652-timed-command.htm

setInterval() The setInterval() function continues to execute the command repeatedly, at the specified time interval This will execute the function moveIt( ) repeatedly, at intervals of 130 milliseconds. If you are going to use more than one setInterval( ) function in a script, you should assign a distinct variable name to each one. This will allow you to cancel one if you want to _pg-647-setinterval-to-hide-baloon.htm

The clearInterval() function stops the repeated execution of a command that was started by setInterval( ) This clearInterval( ) function will stop the repeated execution that was started by setInterval( ). 32 clearInterval() 282_pg-647-clearinterval.htm

The End 33