JavaScript Part 1
JavaScript Simple scripting language => suitable for implementing simple tasks Tasks which run for short time Manipulation of the DOM of a Web page JavaScript is JUST ONE scripting language ( Perl, VBScript, Python, Tcl) Javascript has no relationship to Java
JavaScript : Good & bad news Widely supported in Web browsers Easy access to the DOM of Web pages No need for special plug-in to use the scripts Simple, easy to understand Secure since JavaScript can not read/write local hard drive ------------------------------------------------------------- DOM is not supported consistently Script does not work => Web page is useless Scripts can be slow and take long time to start up
Including JavaScript in HTML The tag <script> Attributes : Language Code enclosed as HTML comments <script language=“javascript”> <!-- JavaScript code --> </script>
If there are many scripts (complex) then it is better to include the JavaScript source code in a separate file Re-usability <script language=“javascript” src=“sample.js”></script>
JavaScript events JavaScript functions are activated by user events. (eventdriven programming). JavaScript => reactive to the user Examples: onChange onClick onFocus onLoad onMouseover onSelect onSubmit onUnload
JavaScript event handlers When an event happens then it is checked whether there is an appropriate event handler Event handler : JavaScript function If there is an event handler then the appropriate function is executed Event handlers are defined by associating events to Javascript functions --------------------------------------------------------------- <body onLoad=“mypage()”> <a href=“www.msn.com” onClick=“mylink()”>text</a>
JavaScript syntax JavaScript is interpreted by the browser comments : //some text statements are terminated with a semicolon code is enclosed in pairs of curly brackets arithmetic and logical operators as in Perl and C variables need to be declared before used automatic type conversion
JavaScript variables in JavaScript you can define global or local variables variable names : consist of letter/digit/_ Case sensitive, no spaces, no reserved words data types : numeric, string, boolean var first = 23; var second = “some text”; var third = true;
JavaScript program control if (name == “John”) { do_something } else if (name == “Mike”) { do_something_else } }
var I; for(I=1;I<10;I++) { do_something } while (I > 1) { I--; Note: we can use break and continue statements as C language
JavaScript output // An example of creating HTML with JavaScript { document.write(“<h1>Your details</h1>”); document.write(“<p>Your Name is :” + name); document.write(“<p>You Are” + age + “Years Old”); } ------------------------------------------------------------------------ notice that: there is no need to print the HTML header. the plus operator is used for embedding variables in HTML.
JavaScript functions function name(parameter_list) code in curly brackets. no return type. no parameters type. The return statement.
// An example of a javascript function function welcome() { var message = “Hello World!”; document.write(“<h1>” + message + “</h1>”); } ------------------------------------------------- <body onLoad=“welcome()”>
Document Object Model All elements of Web page are accessible via the DOM. Document Object Model : A Web page is modelled as a hierarchy of objects Every HTML element is an object : paragraphs, images, tables, frames, lists, etc The DOM contains arrays for various elements i.e. forms, tables, form elements, etc Each element is accessed via a unique pathname within the DOM. Use the dot operator to traverse the document hierarchy (Similarities with UNIX and MSDOS)
DOM (2) Root of the hierarchy : Document Document.forms[0].elements[0].value Names of elements can also be used for the same purpose The DOM of a Web page is made available to scripts which can process it
What are the DOM paths for each elements in the following slide?
Hierarchy of objects of the previous slide
What is going on here? <form name="myForm"> <input type="text" name="input" value="bla bla bla" size="20"> <input type="button" value="Write" onClick="document.myForm.input.value= 'Yo!'; "></form>
The location-object Besides the window- and document-objects there is another important object: the location-object. This object represents the address of the loaded HTML-document. So if you loaded the page http://www.xyz.com/page.html then location.href is equal to this address. What is more important is that you can assign new values to location.href. This button for example loads a new page into the actual window: <form> <input type=button value="Yahoo" onClick="location.href=’http://www.yahoo.com’; "> </form>
Two important built-in functions parseInt : Takes a string as a parameter and returns it in integer format Example: num=parseInt(document.forms[0].text1.value); parseFloat : Takes a string as a parameter and returns a floating point representation of it num=parseFloat(document.forms[0].text1.value); IMPORTANCE : javascript makes the assumption that everything the user entered in a form is a string. Your program must transform strings into numbers if necessary
Basic javascript windows alert (“string”); confirm (“string”); (return true or false) prompt (“question”, “initial value”);
Self Review Examples Read and practice with the following javascript examples
Example: Events <html><script language="javascript"><!-- function a(num) { if (num==0) alert ("Event: onLoad"); else if (num==1) alert ("Event: onUnLoad"); else if (num==2 || num==4) alert ("Event: onChange"); else if (num==3) alert("Event: onSelect"); else if (num==5) alert("Event: onFocus"); else if (num==6) alert("Event: onClick"); else if (num==7) alert("Event: onSubmit"); } --></script> <body onLoad="a(0)" onUnLoad="a(1)"> <form onSubmit="a(7)"> <input type="text" onChange="a(2)" onSelect="a(3)"> <select onChange="a(4)"><option>Male</option><option>Female</option></select> <input type="button" onFocus="a(5)" onClick="a(6)"><input type="submit" value="Submit"> </form></body></html>
Mouse Events Example <html><script language="javascript"> <!-- function a(index) { document.images[index].src="ball2.gif";} function b(index) { document.images[index].src="ball1.gif";} --></script> <body> <img border="0" src="ball1.gif" width="78" height="66" onMouseOut="b(0)" onMouseOver="a(0)"> <img border="0" src="ball1.gif" width="78" height="66" onMouseUp="b(1)" onMouseDown="a(1)"> </body></html>
Example Write a simple Javascript function to verify the username and password typed by the user Assume there is only 1 valid combination : Username = Admin and Password = xyz If ok then print a thank you message else reset the form & alert the user of the error
<html> <head> <script language=“javascript” src=“test.js”></script> </head> <body> <form> <input type=“text” name=“username” maxlength=“5”> <input type=“password” name=“pass” maxlength=“3”> <input type=“submit” value=“Login” onClick=“verify()”> </form> </body> </html>
function verify() { var user=“admin”; var passcode=“xyz”; var username=document.forms[0].elements[0].value; var password=document.forms[0].elements[1].value; if (username == user) { if (password == passcode) { document.write(“<h1>Successful login</h1>”); } else { alert(“Sorry. Wrong Password”); document.forms[0].reset(); } else { alert(“Sorry. Wrong Username”);
Example The following example show how to extract data from various types of form elements.
<html><body> <p> </p> <form method="POST" action="" name="myForm"> <p>Name: <input type="text" name="T1" size="20"></p> <p>Interests: <textarea rows="2" name="S1" cols="20"></textarea></p> <p>Do you like? <input type="checkbox" name="C1" value="Newspapers">Newspapers <input type="checkbox" name="C2" value="Magazines"> Magazines</p> <p>Sex: <input type="radio" value="M" checked name="R1">Male <input type="radio" name="R1" value="F"> Female</p> <p>Country: <select size="1" name="D1"> <option value="Bahrain">Bahrain</option> <option value="Kuwait">Kuwait</option> <option value="Emirates">Emirates</option> <option value="Qatar">Qatar</option> <option value="other">Other</option> </select></p> <p><input type="button" value="Button" name="B1" onClick="extract()"></p></form>
<script language="JavaScript"><!-- function extract() {var str=""; alert("Name : "+ document.myForm.T1.value + "\nInerests :"+ document.myForm.elements[1].value); if (document.myForm.C1.checked) str=document.forms[0].C1.value; if (document.myForm.C2.checked) str+=", " +document.forms[0].C2.value; alert("I like : "+ str); if (document.forms[0].R1[0].checked) alert("Sex :"+ document.forms[0].R1[0].value); else alert("Sex:"+document.forms[0].R1[1].value); alert ("Country :"+ document.myForm.D1.value); alert("Number of elements is " +document.forms[0].elements.length); str="R1 Radio buttons value are "; for (var i=0; i<document.forms[0].R1.length;++i) str+= document.forms[0].R1[i].value + ", "; str+=“ and Combo box options are: "; for (var i=0; i<document.forms[0].D1.length;++i) str+= document.forms[0].D1[i].value + ", "; alert (str); }--> </script> </body></html>