Javascript

13-05-2013Rajavel DRajavel D
JavaScript
Summer Internship – 2013
(Indian Institute of Technology Bombay)

JavaScript
 JavaScript is a lightweight scripting language
 Embedded directly into HTML pages
 JavaScript is an interpreted language (means
that scripts execute without preliminary
compilation)
Rajavel D JavaScript IITB-CSE-Internship 2013

What can a JavaScript do?
 Client side data validation
 React to event on html element
 Read and write the html element
 Put dynamic content on html pages
 Creates the client side persistent (cookies, session )

Sample JavaScript
<html>
<body>
<p id="demo"></p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>

JavaScript in <head>
<html> <head>
function displayDate()
{ document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body> <p id="demo"></p>
<button type="button" onclick="displayDate()">Display
Date</button>
</body> </html>

Using an External JavaScript
<head>
<script type="text/javascript" src=“myjavascript.js"></script>
</head>
 JavaScript Statements
 The semicolon is optional
 Using semicolons makes it possible to write multiple statements
on one line.
 Each statement is executed by the browser in the sequence
they are written

Comments and Popup Boxes
 JavaScript Comments
 Single line comments start with //.
 Multi line comments start with /* and end with */.
 JavaScript Popup Boxes
 alert("I am an alert box!");
 var r=confirm("Press a button");
 r = true | false
 var name=prompt("Please enter your name","");

JavaScript Events
 onLoad and onUnload
 onFocus, onBlur and onChange
 OnSubmit
 onMouseOver, onmousedown, onmouseout
 Onerror
 Onkeydown, onkeyup
 onselect

Required Fields Validation
function validateForm()
{
var x=document.getElementById("txt").value
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}

E-mail Validation
function validateForm()
{
var x=document.forms["myForm"]["email"].value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}

JavaScript Advanced
Timing
setTimeout("MsgAfter3sec()",3000);
clearTimeout();
Object
personObj={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}
document.write(personObj.firstname + " is " + personObj.age + " years old.");
</script>

JavaScript Cookies
 A cookie is a variable that is stored on the
visitor's computer
 With JavaScript, you can both create and
retrieve cookie values.

Create and Store a Cookie
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : ";
expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

Get a Cookie
function getCookie(c_name)
{
var i,x,y,Mycookies=document.cookie.split(";");
for (i=0;i<Mycookies.length;i++)
{
x=Mycookies[i].substr(0,Mycookies[i].indexOf("="));
y=Mycookies[i].substr(Mycookies[i].indexOf("=")+1);
if (x==c_name)
return unescape(y);
} }

Check Cookie
function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
alert("Welcome again " + username);
else
{ username=prompt("Please enter your name:","");
if (username!=null && username!="")
setCookie("username",username,365);
}
}

Document Object
 document.anchors/forms/images.length
 document.anchors[0].innerHTML
 document.title, document.URL
 document.getElementById("myHeader").innerHTML
 document.open("text/html","replace");doc.write(“<html>...</html>”);
 document.getElementsByTagName("input");
 document.getElementById("frm1").reset();
 Event Object
 onmousedown="whichButton(event)", //event.button==2 --> right
 onkeyup="whichButton(event)"//event.keyCode --> ascii

CSS on JavaScript
 Changing the dynamic style
 Examples :
 doc.getElementById(“mydiv”).style.Background=“#fdf”
 doc.getElementById("mydiv").style.fontSize= “20px";
 document.getElementById("mydiv").style.color= "#fff";
 doc.getElementById(“div").style.display="block/none";

Any Doubts ???

References
 www.w3schools.com/js/
 www.tutorialspoint.com/javascript/

Javascript

Recommended

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Javascript (20)

Recently uploaded (20)

Javascript