Chapter 4 Java Script - Part1

2 Outlines Introduction to Java Script Variables, Operators and Functions Conditional statements JavaScript Objects Forms Validation

3 Introduction to Java Script It is a scripting language. Used for client side validations Decreasing the network traffic. Increasing the functionality of web server Java script is embedded into HTML It is an interpreter language No Data Types – Loosely typed language – Declare variables any where. Event driven language

4 Generating HTML Dynamically Idea Script is interpreted when the page is loaded, and uses document.write or document.writeln to insert HTML at the location the script occurs Template... Regular HTML <!-- Build HTML Here // --> More Regular HTML

5 A Simple Script See Program 1 First JavaScript Page First JavaScript Page window.document.write(" "); window.document.write("Hello World Wide Web"); window.document.write(" ");

6 Simple Script, Result

7 Variables in JavaScript See Program 2 Variables in JavaScript To print 1 to 10 numbers in JavaScript for(var i=1;i<=10;i++) { window.document.write(i); window.document.write(" "); } A Simple Script to print Numbers

8 Variables in JavaScript To print a string 10 times in JavaScript for(var i=1;i Hello World "); window.document.write(" "); } A Simple Script to print String See Program 3

9 Functions in JavaScript See Program 4 Functions JavaScript function display() { window.document.write(" Hello World "); } display();

10 Functions JavaScript function display(str) { window.document.write(" "+str+" "); } display("Hello"); Passing string to a function See Program 5

11 Calling function from one file to another See Program 6 Functions JavaScript display("Imam Muhammed Ibn Saud Islamic Uiversity"); function display(str) { window.document.write(" "+str+" ") ; }

12 Events In JavaScript onLoad onUnload onClick onMouseOver onMouseOut onFocus onBlur onSelect onSubmit etc…

Example Simple JavaScript Button <!-- function dontClick() { alert("I told you not to click!"); } // --> Simple JavaScript Button <INPUT TYPE="BUTTON" VALUE="Don't Click Me" onClick="dontClick()">

Result

15 Object Hierarchy

16 Window Object Every object has properties and methods Every object has properties and methods Using a special loop called for in is used to display properties of window object Using a special loop called for in is used to display properties of window object Properties – See Program 7 Properties – See Program 7 Methods – open(), close(), focus(), blur(), moveBy(), moveTo(), resizeBy(), resizeTo() etc… Methods – open(), close(), focus(), blur(), moveBy(), moveTo(), resizeBy(), resizeTo() etc…

17 Program 7.html Functions JavaScript for (var i in window) { window.document.write(i+"="+window[i]+" "); }

18 7.html, Result

Window Object

20 Example for window methods Some more methods of window are alert(), prompt(), confirm() Program 8.html

21 See Program 9 Example for onclick writes the text in new document - See Program 9 function dis() { var w=window.open() w.document.write("hello world"+" ") }

22 Program 9 - Result

23 See Program 10 Example using confirm() and alert() See Program 10 function dis() { var ch=window.confirm("open a window"); if (ch) { window.open(); } else { alert("Dont open a window"); }

24 Example 10 - Result

E.g.Dynamic Welcome Page Using Prompt and Alert Boxes <!-- var name; // string entered by the user // read the name from the prompt box as a string name = window.prompt( "Please enter your name", "GalAnt" ); document.writeln( " Hello " + name + ", welcome to JavaScript programming! " ); // --> Click Refresh (or Reload) to run this script again.

Result