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

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Javascript

Similar to Javascript (20)

Recently uploaded

Recently uploaded (20)

Javascript