Javascript

JavaScript

Summer Internship – 2012
(Indian Institute of Technology Bombay)

Rajavel D
(Clicker Software)

JavaScript
 JavaScript is a scripting language

 Lightweight programming language

 Embedded directly into HTML pages

 JavaScript is an interpreted language (means
that scripts execute without preliminary
compilation)

IITB - JSP

What can a JavaScript do?
 JavaScript gives HTML designers a
programming tool
 JavaScript can put dynamic text into an HTML
page
 JavaScript can react to events
 JavaScript can read and write HTML elements
 JavaScript can be used to validate data
 JavaScript can be used to create cookies

IITB - JSP

Sample JavaScript
<html>
<body>
<p id="demo"></p>
<script type="text/javascript">

</script>
</body>
</html>

IITB - JSP

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>

IITB - JSP

Using an External JavaScript
<head>
<script type="text/javascript" src="xxx.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

IITB - JSP

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","");

IITB - JSP

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

IITB - JSP

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

IITB - JSP

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;
}
} IITB - JSP

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

IITB - JSP

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.

IITB - JSP

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

IITB - JSP

2D Animation
JavaScript library -> jsDraw2D.js (Free Source)
http://code.google.com/
Create jsGraphics object :
var gr = new jsGraphics(document.getElementById("div_id"))

Create jsColor object
var col = new jsColor("red");

Create jsPen object
var pen = new jsPen(col,1);

IITB - JSP

2D Animation
Draw a Line between 2 points
var pt1 = new jsPoint(20,30);
var pt2 = new jsPoint(120,230);
gr.drawLine(pen,pt1,pt2);

Draw filled circle with pt1 as center point and radius 30.
gr.fillCircle(col,pt1,30);

You can also code with inline object instantiation like below
gr.drawLine(pen,new jsPoint(40,10),new jsPoint(70,150));

IITB - JSP

Draw Two Circle
var graph = new jsGraphics(document.getElementById("container"));
var color1 = new jsColor("RED");
var color2 = new jsColor("#ADADAD");
var point1 = new jsPoint(50,50);
var point2 = new jsPoint(-40,50);
graph.fillCircle(color1,point1,40);
graph.fillCircle(color2,point2,30);
</script>

IITB - JSP

Animation
var p = -3
function moveCircle(){
if(p<=150){ p = p+1;}
else{ clearTimeout(t); }
var graph = new jsGraphics(document.getElementById("container"));
:
var point1 = new jsPoint(50,50); var point2 = new jsPoint(p,50);
graph.fillCircle(color1,point1,40); graph.fillCircle(color2,point2,30);
t=setTimeout("timedCount()",50);
}

IITB - JSP

References

www.w3schools.com/js/

http://jsdraw2d.jsfiction.com/

http://www.schillmania.com/content/projects/javascript-animation-1/

http://berniesumption.com/software/animator/

IITB - JSP

Javascript

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Javascript

Similar to Javascript (20)

Recently uploaded

Recently uploaded (20)

Javascript