1. Client-Side Scripting JavaScript

2.  produced by Netscape for use within HTML Web pages.  built into all the major modern browsers. properties  lightweight, interpreted programming language  Integrated with HTML  Cross-platform

3. Usage  To improve the design  To validate forms  Detect browsers  Create cookies

4. Syntax /* Scripts will be written here

5. Where to use JavaScript

6. In the Syntax: JS in head body goes here

7. In the Syntax: JS in body // scripts here

8. Along with html elements  Syntax: JS along html element Button Clicked

9. Linking to external JS Syntax : External JS Demo

10. JavaScript cont..  Alerting a user  Confirming user’s choice  Prompting a users

11. Alert  Used to interact with a user by popping up an alert box.  It has an “OK” button by default.  The user should click on the ok button or close the alert box before proceeding.

12. How alerts work Alert box alert(‘Please click ok to continue’);

13. Confirm Box  To get information back from the user.  Has got “yes” and “no” options.

14. How confirmation works Confirmation Box confirm(‘can I close this window?’);

15. Prompt Box  To accept an input from a user.  Has “ok” and “cancel” buttons

16. How prompt works Prompt Box prompt(‘what is your name:’, ’enter your name’);

17. JavaScript cont…  Declaring and using variables  Decisions, loops and functions  Events  Page redirection  Form validation

18. variables  Can hold any type of data  You can start by storing text and then change to storing numbers without JavaScript having any problems.

19. How variables work Syntax  Using the keyword var var x; x = 10; alert(x);

20. Decisions  if  if … else  if … else if … else  switch

21. if Syntax if (condition) { //executable code; }

22. if … else Syntax if (condition) { //something here } else { //some other thing }

23. if … else Syntax if (condition) { //something here } else if (condition) { //some other thing } else { //if both the conditions above are not true execute this }

24. How they works var x = 5; if (x == 2) { alert(x); } else if(x >5) { alert(‘its five’); } else if(x == 5) { document.write(‘the value of x is: ’ + x); } else { document.write(“no value found”); }

25. switch Has four (4) statements  Test statement  Case statement  Break statement  Default statement

26. Switch cont… Syntax switch(test) { case ‘1’: //some code here; break; case ‘2’: // some code here; break; default: //default code }

27. How switch works var x = “honey”; switch(x) { case “boy”: alert(x); break; case “honey”: alert(“hello ” + x); break; default: alert(“you are not ” + x); }

28. Loops  Used to iterate while a condition is true  If number of iteration is known use for loop  Otherwise use while loop  To run the code at least one use do…while loop

29. Loops cont… Loops  for loop  while loop  do … while loop

30. for loop for ( n= 1; n<= 3; n++) { document.write(n +“ ”); }

31. while loop var degCent = 10; while ( degCent != 100) { document.write(degCent + “ ”); degCent += 10; }

32. do…while loop  execute at least once, regardless of whether the condition in the while statement evaluates to true. var userAge; do { userAge = prompt(“Please enter your age: ”,””) } while (isNaN(userAge) == true);

33. functions  Something that performs a particular task  invoked by: Event handlers By statements elsewhere in the script.  Designed for reuse.

34. functions cont… Syntax: function functionName[arg1,arg2…] { statement[s]; } Remember: function is a keyword and arguments are optional.

35. How it works How to create a function in JavaScript function displayName(x) { x = prompt(“What is your name please?”,”Enter your name”); alert(“Hello” + x); } displayName(x);

36. Events  Used to interact with users onclick onmouseover onmouseout onLoad onUnload

37. How onclick works function showDate() { document.write(Date()); } Show Date

38. How onmouseover works function displayAlert() { alert(“Your mouse is on the paragraph”); } hover your pointer

39. How onmouseout works function displayAlert() { alert(“please put your mouse over the paragraph”); } hover your pointer

40. onLoad and onUnload

41. Page redirection  When you click a URL to reach to a page X but internally you are directed to another page Y that simply happens because of page re- direction.  Why?  Changing your domain name  Search engine already indexed your domain name  Load a specific webpage for a specific browser version

42. Page redirection cont…  To redirect your site visitors to a new page, you just need to add a line in your head section as follows: window.location="http://newlocation";

43. Form validation  Used to occur at the server, after the client had entered all necessary data and then pressed the Submit button.  Was lengthy process and over burdening server.  Basic validation  Data format validation

44. Basic Validation  Make sure data was entered into each form field that required it.

45. How it works

46. Data format validation  The data that is entered must be checked for correct form and value

47. How it works

48. Document Object Model in JavaScript