Lecture 1 Term 2 9/1/12 1

Objects You normally use the “.” Operator to access the value of an object’s properties. The value on the left of the “.” should be a reference to an object. The value to the right of the “.” should be the name of the method (property). This must be an identifier, not a string or expression. In the brackets following the method name is the argument to the method. 2

The Date object The Date object is used to work with dates and times. You create an instance of the Date object with the "new" keyword. To store the current date in a variable called "my_date": var my_date=new Date(); 3

Date () Returns today's date including date, month, and year. Note that the getMonth method returns 0 in January, 1 in February etc. So add 1 to the getMonth method to display the correct date. 4

Example Date var d = new Date(); document.write(d.getDate()); document.write("."); document.write(d.getMonth() + 1); document.write("."); document.write(d.getFullYear()); 5

Time() Returns the current local time including hour, minutes, and seconds. To return the GMT time use getUTCHours, getUTCMinutes 6

Example -Time var d = new Date(); document.write(d.getHours()); document.write("hours"); document.write(d.getMinutes()); document.write("minutes"); document.write(d.getSeconds()); document.write("seconds"); 7

Window Object alert("Hello World!") Opens alert box in window confirm("Press a button") Opens confirm box in window prompt("Please enter your name","") Opens prompt box in window window.open() Opens a new window May open multiple windows Location() Opens new URL in browser 8

Window Object location.reload() Refreshes a document window.status() Writes text in the window status bar. window.print() Prints the web page window.focus() tells the browser to send the window to the front of the screen. window.blur() tells the browser to send the window to the back of the screen. 9

function multipleWin() { window.open(" window.open(" window.status = "Happy New Year"; } 10

11 Math object Math.sqrt() Is called to calculate the square root of the number contained in the parenthese. Example var a =9; document.write(Math.sqrt(a));

12 Math Object Math.min(x,y) Smaller values of x and y var a = ; var b= ; document.write(Math.min(a,b)); Output= Math.max(x,y) Larger value of x and y var a = ; var b= ; document.write(Math.max(a,b)); Output= Math.round() Rounds to the nearest integer var a = ; document.write(Math.round(a)); Output=8

13 Events These are available event handlers that you can use: NB JavaScript is case sensitive: onClick() onSubmit() onMouseOver() onMouseOut() onFocus() onChange() onBlur() onLoad() onUnLoad()

14 Example 1-Mouseover <h1 onmouseover="style.color='blue'" onmouseout="style.color='green'"> Mouse over this text

15 Example 2 – onload() function mymessage() { alert("This message was triggered from the onload event"); }

16 Example 3 – onsubmit() var firstname; var x; function validate1() { x=document.myForm; firstname=x.myname.value; if (firstname =="") { alert("You must complete the name field"); x.myname.focus(); return false; } else { return true; } Enter your First Name:

17 JavaScript Functions A function is a set of statements You can reuse functions within the same script, or in other documents Functions can be defined both in the and in the section of a document. To assure that a function is read/loaded by the browser before it is called, it could be wise to put functions in the section To keep the browser from executing a script when the page loads, you can put your script into a function A function contains code that will be executed by an event or by a call to the function You may call a function from anywhere within a page (or even from other pages if the function is embedded in an external.js file)

18 How to Define a Function To create a function you define its name, any values ("arguments"), and some statements: function myfunction(argument1,argument2,etc) { some statements; }

19 How to Call a Function A function is not executed before it is called You can call a function containing arguments: function myfunction(argument1,argument2) { } or without arguments function myfunction() { }

20 Example Call Function function myfunction() { alert("HELLO IS6116"); }

Return Statement The return statement is used to specify the value that is returned from the function Functions that are going to return a value must use the return statement 21

22 var a=5; var b=4; var sum; function myFunction() { sum=a+b; return sum; } document.write(myFunction());

Form Validation Example var x; var firstname; var country1; var ; var phone1; var comment1; var at; var dot; function validate1() { x=document.myForm; dot=x.my .value.indexOf("."); firstname=x.myname.value; country1=x.country.value; =x.my .value; phone1=x.phone.value; comment1=x.comment.value; 23

if (firstname =="") { alert("You must complete the name field"); x.myname.focus(); return false; } else if(isNaN(firstname)== false) { alert("Please enter your name correctly"); x.myname.focus(); return false; } else if (country1 =="") { alert("You must complete the country field"); x.country.focus(); return false; } else if(isNaN(country1)== false) { alert("Please enter country correctly"); x.country.focus(); return false; } else if( == "") { alert("Please enter a vaild address"); x.my .focus(); return false; } 24

else if (at==-1) { alert("Please enter a vaild address "); x.my .focus(); return false; } else if (dot==-1) { alert("Please enter a vaild address "); x.my .focus(); return false; } else if(phone1=="") { alert("Please enter your phone number"); x.phone.focus(); return false; } else if(isNaN(phone1)==true) { alert("That phone number is not valid"); x.phone.focus(); return false; } else if(comment1=="") { alert("Please enter your comment!"); x.comment.focus(); return false; } return true; } 25

Enter your First Name: Enter your Country: Enter your Enter your Phone Number: Your Comment: 26