Java Script

What is JavaScript JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language (a scripting language is a lightweight programming language) A JavaScript consists of lines of executable computer code A JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license

How javascript helps? Javascript gives designer a programming tool It can put dynamic text into HTML page Can respond to events – mouse over, click, page load etc Can read, write and manipulate HTML elements Can help validate use input Can detect version of browser

First Javascript <html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html> Script Tag Indicates browser that it’s script that needs to be executed Type attributes indicates what type of script is this? This is standard command to write stuff on webpage

Place for Javascript Java script can put either in ‘head’ section of html page or in ‘body’ section of html page. If put in body section – the script will be executed automatically when the page is loaded If it is put in head section – then script has to be called explicitly. By putting script in head you ensure that script is loaded first even before any part page uses it

Example <html> <head> <script type=text/javascript> </script> </head> <body> </body> </html> <html> <head> </head> <body> <script type=text/javascript> </script> </body> </html> Javascript in Head Javascript in body

Javascript in separate file Javascript can be present in separate file as well. You only need to refer it in your html. You would refer it in body if you want it to get executed on page load. You would refer it in head if you want to execute it on an event. Files containing javascript has .js extention

Example <html> <head> <script src= myjscript.js > </script> </head> <body> </body> </html> <html> <head> </head> <body> <script src=myjscript.js > </script> </body> </html> Javascript in Head Javascript in body

Javascript Quick Stuff Variable Need not put data type for variables. Variables are interpreted based on the values assigned. var x = 10; var city = “Bangalore” Variables names are case sensitive

if(condition) { } if(condition) { } else { }

String Operations Var x = "It is lot of pressure" Var y = "at Bredge" Var z = x+y => "It is lot of pressure at Bredge"

Loops For Loop: for(x=0; x <= 10; x++) { } While Loop: while(condition { } Do-while Loop: do { } while(condition) For-In for(variable in object) { }

For – In example <html> <body> <script type="text/javascript"> var xvar mycars = new Array() mycars[0] = "Saab" mycars[1] = "Volvo" mycars[2] = "BMW " for (x in mycars) { document.write(mycars[x] + "<br />") } </script> </body> </html>

Javascript popup boxes With javascript we can create popup boxes Three types of popup boxes Alert Box Confirm Box Prompt Box

Example -AlertBox <html> <head> <script type="text/javascript"> function disp_alert() { alert("I am an alert box!!") } </script> </head> <body> <input type="button" onclick="disp_alert()" value="Display alert box" /> </body> </html>

Example Confirm Box <html> <head> <script type="text/javascript"> function disp_confirm() { var r=confirm("Press a button") if (r==true) { document.write("You pressed OK!") } else { document.write("You pressed Cancel!") } } </script> </head> <body> <input type="button" onclick="disp_confirm()" value="Display a confirm box" /> </body> </html>

Prompt Box <html> <head> <script type="text/javascript"> function disp_prompt() { var name=prompt("Please enter your name","Harry Potter") if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?") } } </script> </head> <body> <input type="button" onclick="disp_prompt()" value="Display a prompt box" /> </body> </html>

Functions in JavaScript Functions are written in head section Functions do not have return type However function can return values Functions can take of arguments function functionname ( var1,var2,...,varX ) { some code } Functions are called upon document events such as onclick, mouseover and so on.

Function Example <html> <head> <script type="text/javascript"> function product(a,b) { return a*b } </script> </head> <body> <script type="text/javascript"> document.write(product(4,3)) </script> </body> </html>

Javascript events Every element of web page such as <body>,<table>,<form>,<input> and so on have events associated with them. When these events occur, a javascript piece of code or javascript function can be invoked Some of the important events are Mouse click Webpage loading or image loading Mouse over Submitting a page

Example - Events <html> <head> <script type=text/javascript> function f1(msg) { alert(msg); } </script> </head> <body> <b>This example also shows bit layouting. You lay out components using table with border=0</b> <table> <tr> <td>Name</td> <td><input type='text' value="click me" onclick="f1('you clicked on Name')"></input></td> </tr> <tr> <td>Age</td> <td><input type=text value="double click here" ondblclick="f1('you double clicked on Age')"> </input></td> </tr> <tr> <td>Salary</td> <td><input type=text value="type somethig here" onchange="f1('you typed some data in Salary')"> </input></td> </tr> </table> </body> </html>

onerror event Onerror event is fired when there is a script error Since script are not compiled, it will difficult catch typo and other mistakes. Handling onerror will help identify the error. However this event is fired when the erroneous script is executed To handle this error we need provide a function which handles it. Onerror event provides three information – error message, url of the page where error is caused, line number where error is present. The handling function should take three parameters

Onerror Example <html> <head> <script type="text/javascript"> onerror=handleErr var txt="" function handleErr(msg,url,l) { txt="There was an error on this page.\n\n" txt+="Error: " + msg + "\n" txt+="URL: " + url + "\n" txt+="Line: " + l + "\n\n" txt+="Click OK to continue.\n\n" alert(txt) return true } function message() { alert("Welcome guest!") } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html>

Accessing Elements of Page Most often javascript need to access your elemets to validate information to Modify an attribute of an element to Dynamically put the values to add additional elements Element could be any html element such as <body>, <table>,<input>, <form> etc.

Accessing Elements of Page All the elements in a html document are stores like tree with <html></html> being root node Every element can be uniquely identified by giving unit id <intpu type=text id= " nameField " > All the attribute values can obtained using document object var ele = document.getElementById( " nameField " ) Attribute values of element can be accessed using ‘element’ variable ele.value()

Accessing Elements - Example <html> <head> <script type=text/javascript> function infoRead() { ele1 = document.getElementById("name"); ele2 = document.getElementById("Age"); ele3 = document.getElementById("Salary"); alert("You have entered\n"+ "Name - "+ele1.value + "\nAge - " + ele2.value + "\nSalary - "+ele3.value ) } </script> </head> <body> <b>This example also shows bit layouting. You lay out components using table with border=0</b> <table> <tr> <td>Name</td> <td><input type='text' id="name"></input></td> </tr> <tr> <td>Age</td> <td><input type=text id="Age"> </input></td> </tr> <tr> <td>Salary</td> <td><input type=text id="Salary"> </input></td> </tr> </table> <input type=submit onclick="infoRead()" value="Sumit"/> </body> </html>

Javascript Objects javascript is a object oriented language You can create your own objects Every object has property and methods javascript also provide predefined objects String object Date Object Array Object Math Object

Javascript DOM Objects HTML DOM – HTML D ocument O bject M odel It defines standard set of objects for HTML and standard way to access them All HTML elements, their attributes and containing test can be manipulated using DOM

Java Script

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Java Script (20)

Recently uploaded (20)

Java Script