1. Making dynamic pages with javascript Lecture 1

2. Java script java versus javascript Javascript is a scripting language that will allow you to add real programming to your webpages. Its not stand alone language as java.

3. uses for javascript Browser Detection Detecting the browser used by a visitor at your page. Depending on the browser, another page specifically designed for that browser can then be loaded. Cookies Storing information on the visitor's computer, then retrieving this information automatically next time the user visits your page. This technique is called "cookies". Control Browsers Opening pages in customized windows, where you specify if the browser's buttons, menu line, status line or whatever should be present. Validate Forms Validating inputs to fields before submitting a form. An example would be validating the entered email address to see if it has an @ in it, since if not, it's not a valid address.

4. Position of script tag 1. Internal Between the head tag / body tag  What is the different between the scripting between head tag and between body tag? In the tag itself  example text 2. External One quote

5. Components of javascript 1. tag 2. Objects  ( window, document, form) 3. Properties  document.color 4. Methods  document.write( )  document.write( string) 5. Variables  var name=“ ali”  var age=30 6. Operators and expression  +,-, %,/ …..

6. Cont. 6. Statements  If - If … else  For  while 7. Event handlers.  KB events: onkeydown – onkeyup- onkeypress  Mouse events : onmousemove – onmouseover- onmousedown- onmouseout- onmouseup- onclick- ondblclick  Load & unload Its specified in the tag.

7. Script tag <!-- document.write ("Hello World"); //--> Notes: Its necessary to but the code between comment tag. Why? Case sensitive write (ex. document.Write <> document.write) Comment statement (// or /* */) Comment tag code

8. output methods 1. alert 2. Write 3. Print

9. alert alert (“ text”) = window.alert(“ text”) Ex.  In the tag : Example : click  Using script tag in the head <!-- function demo() { alert ("Hello World"); } //--> Calling: click Function without parameter Calling function when event is occurred

10. Write method Examples:  documet.write(“hello”)  document.write(" red text ”)  document.write(" red text green text ”)  Notes: Use tags within document

11. Newline in write( ) and alert ( )  document.write(" ppu graphics")  alert(" are you sure \n press OK" )

12. Print  window.print()

13. Input methods 1. Confirm 2. Prompt confirm  One of window methods as alert. It return value false/true by contrast of alert.  confirm(“ message "); or window.confirm(“ message");  to show the result: Alert( confirm (message) )

14. prompt Window method that pass a message to user (undefined is default value) Prompt( “message”, ”default value”) Alert(prompt(…….))

15. variables Types of variables:  String  Numbers  Boolean  Null Naming variables  Ex these variable names are correct Address1 A4xb5 lastName _firstName parent_Name  Not correct 1stName ?subName last name @ userID

16. Declaration/assignment var firstName; var firstName, lastName, userID; var firstName, lastName = “ali", userID = 13; assignment  var stname;  stname = "Ahmed“;

17. cont. function demo( ) { var username = ” ali"; alert("welcome\n"+username); } - improve this code in order to accept your name from the KB.

18. Conditional statement If (condition) {…..} If (condition) {……} Else { ……} If (condition) {……} Else if ( ) { ……}

19. example <!-- var age, name; name = prompt(“what’s your name”,”enter your name here"); age=prompt(“what’s your age?”,”enter your age here"); document.write( " welcome : " + name + " " ); If ( age<40) document.write( " you still youth : " + age+ " " +”is your age”); document.write( " you are experienced person : " + age + " " + ”is your age”); //-->

20. switch switch(value/expression) { case " val1" : break; case " val2 " : break; case " val3 " : break;. default :

21. example var num = 4; switch( num ) { case 1 : alert( " num is \n one " ); break; case 2 : alert( " num is \n two " ); break; case 3 : alert( ” num is \n three " ); break; default : alert( " num is " + num ); break; }

22. Iteration For While Print your name four times, each one in a separate line. var x = 0; for( i=1; i<5 ; i++ ) { document.write( “ali” ) }

23. while 1- var i = 0; while( i<5 ) { document.write( “ali” + " " ); i++; } 2- var userPassword = "123"; var password = prompt(“enter password", “password "); while( password != userPassword ) { alert( “ wrong try again " ); password = prompt(“enter password", “password "); } Alert (“its correct”);

24. function What is a function> Types of functions:  Function with no parameters  Function with parameters Structure of function: function function-name( ) { // ……….. ………… } javascript Statements parameters

25. Function without parameter Accept the user name and write welcome statement to the entered user. function showMessage ( ) { var userName = prompt(”enter",""); alert(" welcome" + userName ); } // calling click to show message

26. Cont. using the "document" object's location property function distination() { var choice = confirm ("Click \“ OK \" to go to Google. Click \“ Cancel \" to go to Yahoo!"); if (choice == true) {document.location = "http://www.google.com/";} else {document.location = "http://www.yahoo.com/";} } Box #2

27. Using Date( ) object and time function displaydate() { date = new Date(); day= date.getDay(); month=date.getMonth(); year=date.getYear(); hour=date.getHours(); alert( day +" - "+month+" - "+ year +"\n"+hour); } display date and time Exercise: Adjusting For Military Time AM- PM

28. Function with parameter function showmessage(name) { alert(" welcome" + name ); } click

29. Call same function more than once JavaScript Alert Boxes function change( color) {document,bgColor=color; } Box #1 Box #2 Property of the object document

30. Multiple parameters function box (Text, color) { document.bgColor=color; alert (Text); document.bgColor="white";} Box #1 Box #2 Note: # the same page

31. Good site http://www.jsmadeeasy.com/javascripts/Pull%20Down% 20Surfing/list_test.asp http://www.jsmadeeasy.com/javascripts/Pull%20Down% 20Surfing/list_test.asp http://www.yourhtmlsource.com/javascript/ http://www.webteacher.com/javascript/ch01.html