Chapter 4:- JavaScript. Compiled By:- Sanjay Patel Assistant Professor, SVBIT.

Transcription

1 Chapter 4:- JavaScript Compiled By:- Assistant Professor, SVBIT.

2 Introduction JavaScript is a scripting language. A JavaScript consists of lines of executable computer code. A JavaScript is usually embedded directly into HTML pages. JavaScript was designed to add interactivity to HTML pages. JavaScript is free. Everyone can use JavaScript without a license. A scripting language is a lightweight programming language.

3 Client Side Server Side The client side scripting is a class of scripting language that are used on the client machine in the user s web browser. The client side scripting allows to change the content of the web page depending upon the user input. For example:- on clicking the button some message should be displayed. JavaScript is about "programming" the behavior of a browser. This is called client-side scripting (or browser scripting). Server-side scripting is about "programming" the behavior of the server (ASP/PHP/JSP).

4 Difference between Java and Java Script Java Requires the JDK to create the applet Requires a Java virtual machine to run the applet. Applet files are distinct from the XHTML code. Source code is hidden from the user. Programs must be saved as separate files and compiled before they can be run. Programs run on the server side. Java Script Requires a text editor Required a browser that can interpret JavaScript code JavaScript can be placed within HTML and XHTML. Source code is made accessible to the user Programs cannot write content to the hard disk. Programs run on the client side.

5 More Differences Java Java is a programming Language Java is a Object Oriented programming Language Java is strongly typed language and the type checking is done at compile time Object in java are static. That means the number of data members and method are fixed at compile time. Java Script Java script is a scripting Language Java Script is not a object oriented programming Language. It is object model is far different than a typical object oriented programming language such as C++ or Java. In Java Script variables need not be declared before their use. Checking the compatibility of type can be done dynamically. In JavaScript the objects are dynamic. That means we can change the total data members and method of an object during execution.

6 Advantages of JavaScript JavaScript is executed on the client side This means that the code is executed on the user's processor instead of the web server thus saving bandwidth and strain on the web server. JavaScript is a relatively easy language The JavaScript language is relatively easy to learn and comprises of syntax that is close to English.

7 Cont d.. JavaScript is relatively fast to the end user As the code is executed on the user's computer, results and processing is completed almost instantly depending on the task (tasks in JavaScript on web pages are usually simple so as to prevent being a memory hog) as it does not need to be processed in the site's web server and sent back to the user consuming local as well as server bandwidth.

8 Cont d.. Versatility JavaScript plays nicely with other languages and can be used in a huge variety of applications. Unlike PHP or SSI scripts, JavaScript can be inserted into any web page regardless of the file extension. JavaScript can also be used inside scripts written in other languages such as Perl and PHP.

9 Disadvantages Security Because the code executes on the users computer, in some cases it can be exploited for malicious purposes. This is one reason some people choose to disable JavaScript. Reliance on End User JavaScript is sometimes interpreted differently by different browsers. Whereas server-side scripts will always produce the same output, client-side scripts can be a little unpredictable. Don't be overly concerned by this though - as long as you test your script.

10 Java script Syntax Unlike HTML, JavaScript is case sensitive. Dot Syntax is used to combine terms. e.g., document.write("hello World") Certain characters and terms are reserved. JavaScript is simple text (ASCII).

11 Two ways to insert JS Code First way is to embedded it directly within the <script> and </script> tag pair The <script> tag notifies the browser that everything contained within is script and is to be interpreted by suitable interpreter. <script language= javascript > </script> Javascript code

12 Java Script in HTML Scripts in HTML must be inserted between <script> and </script> tags. Scripts can be put in the <body> and in the <head> section of an HTML page. The <script> and </script> tells where the JavaScript starts and ends.

13 Cont d.. <html> <body> <h1>my First Web Page</h1> <script language= JavaScript > document. write("<p>my First JavaScript</p>"); </script> </body> </html>

14 Second ways to insert JS Code Second way to insert JS code is to place and external source file and refer to it from an HTML file. This external source file generally has the extension.js. A source file contains only JavaScript statements without any script tag or other HTML tags <script language= javascript src= source.js > </script> Javascript code

15 Using the <script> Tag To embed a client-side script in a Web page, use the element: <script type= text/javascript > script commands and comments </script> To access an external script, use: <script src= url type= text/javascript > script commands and comments </script>

16 First JavaScript Program

17 Adding Comment

18 Example

19 Output

20 Methods Methods are actions applied to particular objects. Methods are what objects can do. e.g., document.write( Hello World") document is the object. write is the method.

21 Properties Properties are object attributes. Object properties are defined by using the object's name, a period, and the property name. e.g., background color is expressed by: document.bgcolor. document is the object. bgcolor is the property.

22 Basic Programming Technique Java scrip offers the very same programming capabilities found in most programming languages. Creating variables, constants, programming constructs, user defined functions and so on. These are the techniques that makes the java script the exciting programming language that extends the functionality of HTML and makes web pages interactive

23 Basic Programming Technique The <head> </head> tag make an ideal place to create JavaScript variables and constants and so on. This is because the head of an HTML document is always processed before the body. By using this technique the interpreter will always create functions, constants of structure before using them.

24 Basic Programming Technique It is important because any attempt to use a variable or any object before it is defined, results in an error. Variable name can begin with upper case or lowercase or underscore character or dollar sign character. The remaining characters can consist of letters, or underscore or digits. Variable names are case sensitive.

25 Point to be Remember The dollar sign ($) character is reserved for machine generated code and should not be used in scripts.

26 Data Types There are following types used in Java Script String Number Boolean Null & Undefined. Object Array

27 Variable Variables contain values and use the equal sign to specify their value. Variables are created by declaration using the var command with or without an initial value state. e.g. var month; e.g. var month = April ;

28 Which one is legal? My_variable $my_variable 1my_example My_variable_example ++my_variable %my_variable #my_variable ~my_variable myvariableexample Legal Illegal

29 Keyword

30 Local Variable Local variables are declared with in a function. Syntax:- var name_of_variable=value; The keyword var specifies the variable is a local variable and visible within the scope in which it is declared var total=0 //number var message= Hello ; var found=false; //string //boolean

31 Strings A string is a variable which stores a series of characters like MCA Dept.". A string can be any text inside quotes. You can use simple or double quotes: var carname="volvo XC60"; var carname='volvo XC60';

32 Cont d.. You can use quotes inside a string, as long as they don't match the quotes surrounding the string. var answer="it's alright"; var answer="he is called 'Johnny'"; var answer='he is called "Johnny"';

33 Concatenation The + operator can also be used to add string variables or text values together. txt1="what a very"; txt2="nice day"; txt3=txt1+txt2; What a verynice day

34 Number JavaScript has only one type of numbers. Numbers can be written with, or without decimals. var x1=34.00; var x2=34; //Written with decimals //Written without decimals Extra large or extra small numbers can be written with scientific (exponential) notation: var y=123e5; // var z=123e-5; //

35 Boolean Booleans can only have two values: true or false. var x=true var y=false Booleans are often used in conditional testing.

36 Null Undefined is the value of a variable with no value. Variables can be emptied by setting the value to null; cars=null; person=null;

37 Object An object is delimited by curly braces. Inside the braces the object's properties are defined as name and value pairs (name : value). The properties are separated by commas: var person={firstname:"john", lastname:"doe, id:5566};

38 Object The object (person) in the example Below has 3 properties: firstname, lastname, and id. Spaces and line breaks are not important. Your declaration can span multiple lines: var person={ firstname : "John, lastname : "Doe, id : 5566 };

39 Operator Arithmetic Assignment Concatenation Comparison Logical Conditional

40 Arithmetic Arithmetic operators are used to perform arithmetic between variables and/or values. Operator Name Description Example + Addition Adds the operands Subtraction Subtracts the right operand from the left operand 5-3 * Multiplication Multiplies the operands 3 * 5 / Division Divides the left operand by the right operand 30 / 5 % Modulus Calculates the remainder 20 % 5

41 Arithmetic Operator Given that y=5, the table below explains the arithmetic operators:

42 Example Of operator

43 Output

44 Cont d.. Example Result var result = 2 + 3; 5 result = Hello + World ; Hello World result = 2 + MB ; 2MB result = P + 4 ; P4 result = Y K ; Y2K result = K ; (2+3) + K = 5K result = K ; ( K +2) +3 = K23 result = Age: <br> ; Age: 32 <br>

45 Assignment Assignment operators are used to assign values to JavaScript variables. Given that x=10 and y=5, the table below explains the assignment operators:

46 Comparison Comparison operators are used in logical statements to determine equality or difference between variables or values. Given that x=5, the table below explains the comparison operators:

47 Comparison Operator Name Description Example == Equal Perform type conversion before checking the equality 5 == 5 === Strictly equal No type conversion before testing 5 === 5!= Not equal true when both operands are not equal 4!= 2!== Strictly not equal No type conversion before testing nonequality 5!== 5 > Greater than true if left operand is greater than right operand 2 > 5 < Less than true if left operand is less than right operand 3 < 5 >= Greater than or equal <= Less than or equal true if left operand is greater than or equal to the right operand true if left operand is less than or equal to the right operand 5 >= 2 5 <= 2

48 Operator Precedence Operators having higher precedence are evaluated before operators having lower precedence. Arithmetic operator precedence Precedence Operators Lowest +, - *, /,% Highest ++, - -

49 Example

50 Output

51 Logical Logical operators are used to determine the logic between variables or values. Operator Name Description Example && Logical and Evaluate to true when both operands are true Logical or Evaluate to true when either operand is true! Logical not Evaluate to true when the operand is false 3>2 && 5<2 3>1 2>5 5!= 3

52 Cont d.. Given that x=6 and y=3, the table below explains the logical operators:

53 Conditional Statement JavaScript also contains a conditional operator that assigns a value to a variable based on some condition. Syntax variablename=(condition)?value1:value2; Example voteable=(age<18)?"too young":"old enough";

54 Conditional Statements if if...else if...else if...else switch

55 Conditional Statements Very often when you write code, you want toperform different actions for different decisions. You can use conditional statements in your code to do this. if statement - use this statement to execute some code only if a specified condition is true if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false if...else if...else statement - use this statement to select one of many blocks of code to be executed switch statement - use this statement to select one of many blocks of code to be executed

56 If Statements if statement:- Use the if statement to execute some code only if a specified condition is true. Syntax :- if (condition) Example:- { code to be executed if condition is true } if (time<20) { x="good day"; }

57 If.else statement if...else statement :- Use the if...else statement to execute some code if a condition is true and another code if the condition is not true. Syntax:- else if (condition) { code to be executed if condition is true } { code to not be executed if condition is true }

58 Example if (time<20) { } else { } x="good day"; x="good evening";

59 Example

60 Output

61 Example

62 Output

63 Switch case Statement Syntax:- switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 }

64 Example

65 Output

66 Looping Statements While Loop Do while Loop For Loop

67 Syntax

68 Example

69 Output

70 Example

71 Output

72 Cont d..

73 For loop

74 For loop

75 Cont d..

76 Mathematical Functions abs() ceil() random() pow() floor() sqrt()

77 abs() Return the absolute value of a number: Syntax:- The output of the code above will be: NaN 5

78 ceil() Round a number upward to it's nearest integer: Syntax:- The output of the code above will be:

79 random() The random() method returns a random number between 0 and 1. Syntax:-

80 pow() The pow() method returns the value of x to the power of y (x y ). Syntax:- The output of the code above will be:

81 floor() The floor() method rounds a number DOWNWARDS to the nearest integer, and returns the result. If the passed argument is an integer, the value will not be rounded. Syntax:- Output:

82 sqrt() The sqrt() method returns the square root of a number. Syntax:- Output: Nan

83 Example of more Math Function Method Description Example abs( x ) absolute value of x abs( 7.2 ) is 7.2 abs( 0.0 ) is 0.0 abs( -5.6 ) is 5.6 ceil( x ) rounds x to the smallest integer not less than x ceil( 9.2 ) is 10.0 ceil( -9.8 ) is -9.0 cos( x ) trigonometric cosine of x cos( 0.0 ) is 1.0 (x in radians) exp( x ) exponential method ex exp( 1.0 ) is exp( 2.0 ) is floor( x ) rounds x to the largest floor( 9.2 ) is 9.0 integer not greater than x floor( -9.8 ) is log( x ) natural logarithm of x (base e) log( ) is 1.0 log( ) is 2.0 max( x, y ) larger value of x and y max( 2.3, 12.7 ) is 12.7 max( -2.3, ) is -2.3

84 Cont d.. min( x, y ) smaller value of x min( 2.3, 12.7 ) is 2.3 and y min( -2.3, ) is pow( x, y ) x raised to power y pow( 2.0, 7.0 ) is (xy) pow( 9.0,.5 ) is 3.0 round( x ) rounds x to the closest integer round( 9.75 ) is 10 round( 9.25 ) is 9 sin( x ) trigonometric sine of sin( 0.0 ) is 0.0 x (x in radians) sqrt( x ) square root of x sqrt( ) is 30.0 sqrt( 9.0 ) is 3.0 tan( x ) trigonometric tangent tan( 0.0 ) is 0.0 of x (x in radians) Fig Math object methods.

85 String Functions big() blink() bold() italics() charat() tolowercase() touppercase() substring()

86 big() The big() method is used to display a string in a big font. This method returns the string embedded in the <big> tag, like this: Syntax:- The output of the code above will be: hello world!

87 blink() The blink() method is used to display a blinking string. This method returns the string embedded in the <blink> tag, like this: Syntax:- The blink() method only works in Firefox and Opera.It is not supported in Internet Explorer, Chrome, or Safari.

88 bold() The bold() method is used to display a string in bold. This method returns the string embedded in the <b> tag, like this: Syntax:- The output of the code above will be:-hello world!

89 Date Functions getdate() setdate() gethours() sethours() gettime() settime()

90 getdate() The getdate() method returns the day of the month (from 1 to 31) for the specified date. Syntax:- The output of the code above will be: 21

91 SetDate() The setdate() method sets the day of the month to the date object. Syntax:- The output of the code above will be: Fri Jul :15:00 GMT+0530

92 SetDate() An integer representing the day of a month. Expected values are 1-31, but other values are allowed: 0 will result in the last day of the previous month -1 will result in the day before the last day of the previous month If the month has 31 days.32 will result in the first day of the next month If the month has 30 days.32 will result in the second day of the next month

93 gettime() The gettime() method returns the number of milliseconds between midnight of January 1, 1970 and the specified date. Syntax:-

94 settime() The settime() method sets a date and time by adding or subtracting a specified number of milliseconds to/from midnight January 1, Syntax:-

95 gethours() The gethours() method returns the hour (from 0 to 23) of the specified date and time. Syntax:- The output of the code above will be: 1

96 sethours() The gethours() method returns the hour (from 0 to 23) of the specified date and time. Syntax:- The output of the code above will be: Fri Nov :35:01 GMT+0530

97 Array An array literal is written using square brackets with array elements separated using by commas(,).. Examples var array_name=[element 0, element 2..element n ]; var number=[1,2,3,4]; How to access an element? Same as other language Example var alpha=[ a, b, c, d, e ]; var colors=[ red, green, blue ]; Name_of_an_array[index/subscript] number[0],number[2] colors[0]

98 Array The following code creates an Array called cars: var cars=new Array(); cars[0]="saab"; cars[1]="volvo"; cars[2]="bmw"; It can also be declared as: var cars=new Array("Saab","Volvo","BMW"); And even as: var cars=["saab","volvo","bmw"];

99 Heterogeneous Array

100 Array Example

101 Output

102 Example

103 Output

104 Array concat

105 Output

106 Array Push The push() method adds new items to the end of an array, and returns the new length. Note: The new item(s) will be added at the end of the array. Note: This method changes the length of the array. var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits. Push("Kiwi ) Banana,Orange, Apple,Mango,Kiwi

107 Array Pop The pop() method removes the last element of an array, and returns that element. Note: This method changes the length of an array. var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.pop(); Banana,Orange,Apple

108 Array Join

109 Output

110 Array Shift The shift() method removes the first item of an array, and returns that item. Note: This method changes the length of an array! Tip: To remove the last item of an array, use the pop() method. var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits. Shift() Orange, Apple,Mango

111 Array Unshift The unshift() method adds new items to the beginning of an array, and returns the new length. Note: This method changes the length of an array. Tip: To add new items at the end of an array, use the push() method var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("lemon","pineapple"); Lemon,Pineapple,Banana, Orange,Apple,Mango

112 Slice() The slice() method returns the selected elements in an array, as a new array object. The slice() method selects the elements starting at the given start argument, and ends at, but does not include, the given end argument. Syntax:- array.slice(start, end) var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits. slice(1,3); Orange,Lemon

113 Syntax Syntax:- array.slice(start, end) Parameter start end Description Required. An integer that specifies where to start the selection (The first element has an index of 0). Use negative numbers to select from the end of an array Optional. An integer that specifies where to end the selection. If omitted, all elements from the start position and to the end of the array will be selected. Use negative numbers to select from the end of an array

114 Example

115 Output

116 splice() The splice() method adds/removes items to/from an array, and returns the removed item(s). Syntax:- array.splice(index,howmany,item1,...,itemx) Parameter index howmany item1,..., itemx Description Required. An integer that specifies at what position to add/remove items, Use negative values to specify the position from the end of the array Required. The number of items to be removed. If set to 0, no items will be removed Optional. The new item(s) to be added to the array

117 Example var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2,0,"lemon","kiwi"); var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2,2,"lemon","kiwi"); var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2,1,"lemon","kiwi"); Banana,Orange,Lemon,Kiwi,Apple,Mango Banana,Orange,Lemon, Kiwi Banana,Orange,Lemon, Kiwi,Mango

118 Built in Objects Date String Math

119 String Complete Example

120 Output

121 Date constructor Date() Constructor Description This creates a Date object with the current date and time of the browser s PC Date( Month dd, yyyy hh:mm:ss ) This creates a Date object, with the date specified by a date string in the format Month dd, yyyy hh:mm:ss Date( Month dd, yyyy ) Date(yy, mm, dd hh, mm, ss) Date(yy, mm, dd) This creates a Date object, with the date specified by a date string in the format Month dd, yyyy This creates a Date object with the specified date and time This creates a Date object with the specified date

122 Full Date Example Demo

123 Output

124 Mathematical Functions abs() ceil() random() pow() floor() sqrt()

125 Math() Object Example

126 Output

127 Built in Function eval() parseint() parsefloat() isfinite()

128 eval() The eval() function evaluates or executes an argument. If the argument is an expression, eval() evaluates the expression. If the argument is one or more JavaScript statements, eval() executes the statements. Syntax The eval() function is supported in all major browsers.

129 Example The output of the code above will be:

130 parseint() The parseint() function parses a string and returns an integer. Syntax:- The radix parameter is used to specify which numeral system to be used, for example, a radix of 16 (hexadecimal) indicates that the number in the string should be parsed from a hexadecimal number to a decimal number

131 parseint() If the radix parameter is omitted, JavaScript assumes the following: If the string begins with "0x", the radix is 16 (hexadecimal) If the string begins with "0", the radix is 8 (octal). This feature is deprecated If the string begins with any other value, the radix is 10 (decimal)

132 parseint() Only the first number in the string is returned! Leading and trailing spaces are allowed. If the first character cannot be converted to a number, parseint() returns NaN.

133 Example

134 Output

135 parsefloat() The parsefloat() function parses a string and returns a floating point number. This function determines if the first character in the specified string is a number. If it is, it parses the string until it reaches the end of the number, and returns the number as a number, not as a string.

136 Cont d.. Only the first number in the string is returned! Leading and trailing spaces are allowed. If the first character cannot be converted to a number, parsefloat() returns NaN.

137 Example

138 Output

139 isfinite() The isfinite() function determines whether a number is a finite, legal number. Syntax:- This function returns false if the value is +infinity, - infinity, or NaN.

140 Example

141 Output

142 User-defined Functions A function is a block of code that will be executed when "someone" calls it: A function is written as a code block (inside curly { } braces), preceded by the function keyword:

143 Cont d..

144 Function Example

145 Factorial with Function

146 JavaScript Pop boxes JavaScript has three kind of popup boxes. Alert box. Confirm box. Prompt box.

147 Alert box An alert box is often used if you want to make sure information comes through to the user. When an alert box pops up, the user will have to click "OK" to proceed. Syntax:- window.alert("sometext");

148 Syntax There are many ways to add a handler to an event. The straightforward way is to specify it in the tag as follows <input type= button value= clickme onclick= alert( You clicked Me ); event Event Handler

149 Example <html><head> <script> function myfunction() { alert("i am an alert box!"); } </script> </head><body> <input type="button" onclick="myfunction()" value="show alert box > </body></html>

150 Output

151 Confirm box A confirm box is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false. Syntax:- window.confirm("sometext");

152 <html><body> <p>click the button to display a confirm box.</p> <button onclick="myfunction()">try it</button> <p id="demo"></p> <script> function myfunction() { var x; var r=confirm("press a button!"); if (r==true) { x="you pressed OK!"; } else { x="you pressed Cancel!"; } document.getelementbyid("demo").innerhtml=x; } </script></body></html>

153 Output

154 Prompt box. A prompt box is often used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null. Syntax:- window.prompt("sometext","defaultvalue");

155 <html><body> <p>click the button to demonstrate the prompt box.</p> <button onclick="myfunction()">try it</button> <p id="demo"></p> <script> function myfunction() { var x; var name=prompt("please enter your name","harry Potter"); if (name!=null) { x="hello " + name + "! How are you today?"; document.getelementbyid("demo").innerhtml=x; } } </script></body></html>

156 Output

157 getelementbyid() The getelementbyid() method accesses the first element with the specified id. This is the most powerful and the most complex method (but don't worry, it's really easy!).

158 Syntax Syntax:- document.getelementbyid("id") Where id is required. Everything on a web page resides in a box. A paragraph (<P>) is a box. When you mark something as bold you create a little box around that text that will contain bold text. You can give each and every box in HTML a unique identifier (an ID), and Javascript can find boxes you have labeled and let you manipulate them. Well enough, check out the code!

159 Code <html><head></head> <body> <div id='feedback'></div> <script type='text/javascript'> document.getelementbyid('feedback').innerhtml= 'Hello World!'; </script> </body></html> Output:- Hello World!

160 Description Here we defined a division <div> and named it "feedback". That HTML has a name now, it is unique and that means we can use JavaScript to find that block, and modify it. We do exactly this in the script below the division! The left part of the statement says on this web page (document) find a block we've named "feedback" ( getelementbyid('feedback') ), and change its HTML (innerhtml) to be 'Hello World!'. We can change the contents of 'feedback' at any time, even after the page has finished loading (which document.writeln can't do), and without annoying the user with a bunch of popup alert boxes (which alert can't do!).

161 innerhtml and getelementbyid

162 Output

163 Can you find out the Problem?

164 Output

165 Solution is:-getelementsbytagname() Method

166 Output

167 Input (One Click To Rule Them All) Input, of course, is a little more complicated. For now we'll just reduce it to a bare click of the mouse. If everything in HTML is a box and every box can be given a name, then every box can be given an event as well and one of those events we can look for is "onclick". Lets revisit our last example...

168 Mouse click example <html><head></head> <body> <div id='feedback' onclick='goodbye()'>users without Javascript see this.</div> <script type='text/javascript > document.getelementbyid('feedback').innerhtml='hello World! ; function goodbye() { document.getelementbyid('feedback').innerhtml='goodbye World!'; } </script></body></html>

169 Output

170 Two Concept has been done first we added an "onclick" event to our feedback division which tells it to execute a function called goodbye() when the user clicks on the division. A function is nothing more than a named block of code. In this example goodbye does the exact same thing as our first hello world example, it's just named and inserts 'Goodbye World!' instead of 'Hello World!'.

171 Cont d.. Second new concept in this example is that we provided some text for people without Javascript to see. As the page loads it will place "Users without Javascript will see this." in the division. If the browser has Javascript, and it's enabled then that text will be immediately overwritten by the first line in the script which looks up the division and inserts "Hello World!", overwriting our initial message. This happens so fast that the process is invisible to the user, they see only the result, not the process. The goodbye() function is not executed until it's explicitly called and that only happens when the user clicks on the division.

172 Input (User Input) Clicks are powerful and easy and you can add an onclick event to pretty much any HTML element, But sometimes you need to be able to ask for input from the user and process it. For that you'll need a basic form element and a button

173 HTML Forms and JavaScript JavaScript is very good at processing user input in the web browser HTML <form> elements receive input Forms and form elements have unique names Each unique element can be identified Uses JavaScript Document Object Model (DOM)

174 Naming Form Elements in HTML <form name="addressform"> Name: <input name="yourname"><br /> Phone: <input name="phone"><br /> <input name=" "><br /> </form>

175 Forms and JavaScript document.formname.elementname.value Thus: document.addressform.yourname.value document.addressform.phone.value document.addressform. .value

176 Using Form Data Personalising an alert box <form name="alertform"> Enter your name: <input type="text" name="yourname"> <input type="button" value= "Go" onclick="window.alert('hello ' + document.alertform.yourname.value);"> </form>

177 Example <html><head></head> <body> <input id='userinput' size=60> <button onclick='usersubmit()'>submit</button><br> <div id='result'></div> <script type='text/javascript > function usersubmit() { var UI=document.getElementById('userInput').value; document.getelementbyid('result').innerhtml='you typed: '+UI; } </script></script></body></html>

178 Output

179 Explanation Here we create an input field and give it a name of userinput. Then we create a HTML button with an onclick event that will call the function usersubmit(). These are all standard HTML form elements but they're not bound by a <form> tag since we're not going to be submitting this information to a server. Instead, when the user clicks the submit button, the onclick event will call the usersubmit() function

180 Cont d.. we create a variable called UI which looks up the input field userinput. This lookup is exactly the same as when we looked up our feedback division in the previous example. Since the input field has data, we ask for its value and place that value in our UI variable. The next line looks up the result division and puts our output there. In this case the output will be "You Typed: " followed by whatever the user had typed into the input field.

181 onkeyup() event (Without Button) <html><head></head><body> <input id='userinput' onkeyup="usersubmit()" size=60><br> <div id='result'></div> <script type='text/javascript > function usersubmit() { var UI=document.getElementById('userInput').value; document.getelementbyid('result').innerhtml='you typed: '+UI; } </script></body></html>

182 Output

183 Password Validation Criteria

184 Password Validation Example <script type="text/javascript > function confirmpass() { var sa = document.getelementbyid("pass").value; var confpass = document.getelementbyid("c_pass").value; if(sa==null) { alert("please enter"); pass.focus(); return false; } else if(sa!= confpass) { alert("re-enetr!"); pass.focus(); pass.select(); return false; } else { alert("enjoy"); return true; } }

185 Validation

186 Regular Expression Brackets are used to find a range of characters. Expression Description [abc] Find any character between the brackets [^abc] Find any character not between the brackets [0-9] Find any digit from 0 to 9 [A-Z] Find any character from uppercase A to uppercase Z [a-z] Find any character from lowercase a to lowercase z [A-z] Find any character from uppercase A to lowercase z [adgk] Find any character in the given set (red blue green) Find any of the alternatives specified

187 Regular Expression Metacharacters are characters with a special meaning. Metacharacter Description. Find a single character, except newline or line terminator \w Find a word character \W Find a non-word character \d Find a digit \D Find a non-digit character \s Find a whitespace character \S Find a non-whitespace character \b Find a match at the beginning/end of a word \B Find a match not at the beginning/end of a word \0 Find a NUL character

188 Event The purpose of using JavaScript is to add interactivity in web pages. i.e. we need to respond to user actions. When users performs some tasks on a web page are called events. For example, when user click on a button on a web page, a click event occurs. The button is called the source of the event. Other events such as, hyperlink( mouse over event), submitting a form(submit event), a keystroke (key press event)

189 Event Handlers JavaScript identifies an event and takes an action by executing piece of code. The procedure of taking action is called event handling The specific JavaScript code that take the action is called event handler. An event handler may be any valid JavaScript statements. In JavaScript, the handler of provided as a function. an event is usually

190 Window object Method Method alert() blur() close() confirm() createpopup() focus() moveby() moveto() open() print() prompt() resizeby() resizeto() scrollby() scrollto() setinterval() settimeout() Description Displays an alert box with a message and an OK button Removes focus from the current window Closes the current window Displays a dialog box with a message and an OK and a Cancel button Creates a pop-up window Sets focus to the current window Moves a window relative to its current position Moves a window to the specified position Opens a new browser window Prints the content of the current window Displays a dialog box that prompts the visitor for input Resizes the window by the specified pixels Resizes the window to the specified width and height` Scrolls the content by the specified number of pixels Scrolls the content to the specified coordinates Calls a function or evaluates an expression at specified intervals (in milliseconds) Calls a function or evaluates an expression after a specified number of milliseconds

191 Example

192 Output

193

194

195 Example

196

197 Prompt Box Demo

198 Output

199 Java Script is an Event Driven Language As you can tell from the input examples, Javascript is an event driven language which means your scripts react to events you set up. Your code isn't running all the time, it simply waits until an event starts something up! Going into all the JavaScript events is beyond the scope of this document but here's a short-list of common events to get you started.

200

201 Location Object The JavaScript window object has a property location (access by window.location or location), which encapsulates the current URL that is displayed in the visitor s browser. This object has several useful properties and methods that may be used to inspect or changed different fields of a URL or even change the entire URL.

202 Example

203 Another Location Object Example

204 History Object The JavaScript window object has another important property history (accessed as window.history or history ), which stores information about URLs already visited from the browser s window. Property length back() forward() go() Method Description Returns the number of URLs in the history list Description Loads the previous URL in the history list Loads the next URL in the history list Loads a specific URL from the history list

205 Example

206 HTML DOM The HTML DOM defines a standard way for accessing and manipulating HTML documents. The DOM presents an HTML document as a treestructure. In Simple words, With the HTML DOM, JavaScript can access all the elements of an HTML document. When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is constructed as a tree of Objects:

207 What is DOM? Document object model is a set of platform independent and language-neutral application programming interface(api) which describes how to access and manipulate the information stored in XML,XHTML and javascript document DOM is a platform- and language-neutral interface that allow programs and scripts to dynamically access and manipulate the content, structure and style of documents.

208 HTML DOM Tree

209 DOM Node According to the DOM, everything in an HTML document is a node. The DOM says: The entire document is a document node Every HTML element is an element node The text in the HTML elements are text nodes Every HTML attribute is an attribute node Comments are comment nodes

210 Example The root node in the HTML above is <html>. All other nodes in the document are contained within <html>. The <html> node has two child nodes; <head> and <body>. The <head> node holds a <title> node. The <body> node holds a <h1> and <p> node.

211 Programming Interface In the DOM, HTML documents consist of a set of node objects. The nodes can be accessed with JavaScript or other programming languages Properties are often referred to as something that is (i.e. the name of a node). Methods are often referred to as something that is done (i.e. remove a node).

212 HTML DOM Properties x.innerhtml - the text value of x x.nodename - the name of x x.nodevalue - the value of x x.parentnode - the parent node of x x.childnodes - the child nodes of x x.attributes - the attributes nodes of x

213 HTML DOM Methods x.getelementbyid(id) - get the element with a specified id x.getelementsbytagname(name) - get all elements with a specified tag name x.appendchild(node) - insert a child node to x x.removechild(node) - remove a child node from x

214 The innerhtml Property The easiest way to get or modify the content of an element is by using the innerhtml property. innerhtml is not a part of the W3C DOM specification. However, it is supported by all major browsers. The innerhtml property is useful for returning or replacing the content of HTML elements (including <html> and <body>), it can also be used to view the source of a page that has been dynamically modified.

215 Example

216 Accessing Nodes We can access a node in three ways: By using the getelementbyid() method By using the getelementsbytagname() method By navigating the node tree, using the node relationships

217 JavaScript HTML DOM - Changing HTML <html><body> <p id="p1">hello World!</p> <script> document.getelementbyid("p1"). innerhtml="new text!"; </script> <p>the paragraph above was changed by a script.</p> </body></html> New text! The paragraph above was changed by a script

218 JavaScript HTML DOM - Changing CSS <html><body> <p id="p1">hello World!</p> <p id="p2">hello World!</p> <script> document.getelementbyid("p2").style.color="blue"; document.getelementbyid("p2").style.fontfamily="arial"; document.getelementbyid("p2").style.fontsize="larger"; </script> <p>the paragraph above was changed by a script.</p> </body></html>

219 Cont d.. Hello World! Hello World! The paragraph above was changed by a script.

220 DHTML DHTML is the combination of 3 browser technologies to render a dynamic browser experience HTML for content Cascading Style Sheets for general presentation Javascript to enable dynamic presentation Generally, DHTML refers to applications that allow a Web page to change dynamically without requiring information to be passed to/from a web server. More specifically, DHTML refers to the interaction of HTML, CSS and Scripting language (JavaScript). DHTML = HTML + CSS + JavaScript + DOM

221 Affect the DOM through HTML (content) Cascading Style Sheets (general presentation) Browser DOM Javascript (and other scripting languages) for most dynamic effects

222 Why comes DHTML? With Dynamic HTML the emphasis is on making the browser provide a richer viewing experience through effects like Animation Filters Transitions This is done by applying properties and methods of the Browser s Document Object Model (DOM) This is usually done through Javascript, but it can also be done by any scripting language supported by the browser, such as VB-Script

223 In simple Words. To make Web pages interactive. HTML pages have static nature. DHTML provides us with enhanced creative control so we can manipulate any page element at any time. It is the easiest way to make Web pages interactive. It doesn t increase server workload and require special software to support.

224 Difference Between HTML and DHTML HTML HTML is used to create static web pages DHTML DHTML is used to create Dynamic web pages The HTML consists of simple HTML tags DHTML is made up of HTML tags + CSS + Java Script The HTML does not allow to alter the text and graphics on the web page unless web page get changed Creation of HTML web pages is simplest but less interactive DHTML, you can alter the text and graphics of the web page and for that matter you need not have to change the entire web page. Creation of DHTML web pages is complex but more interactive

225 Change an HTML Element HTML DOM and JavaScript can change the inner content and attributes of HTML elements. The following example changes the background color of the <body> element:

226 Example