Javascript

JavaScript

Summer Internship – 2012

(Indian Institute of Technology Bombay)

Rajavel D

(Clicker Software)

JavaScript

IITB - JSP

JavaScript is a scripting language

Lightweight programming language

Embedded directly into HTML pages

JavaScript is an interpreted language (meansthat scripts execute without preliminarycompilation)

What can a JavaScript do?

IITB - JSP

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

Sample JavaScript

IITB - JSP

<html>

<body>

<p id="demo"></p>

<script type="text/javascript">



</script>

</body>

</html>

JavaScript in <head>

IITB - JSP

<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

IITB - JSP

<head>

<script type="text/javascript" src="xxx.js"></script>

</head>

JavaScript Statements

The semicolon is optional

Using semicolons makes it possible to write multiple statementson one line.

Each statement is executed by the browser in the sequencethey 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","");

JavaScript Events

IITB - JSP

onLoad and onUnload

onFocus, onBlur and onChange

OnSubmit

onMouseOver, onmousedown, onmouseout

Onerror

Onkeydown, onkeyup

onselect

Required Fields Validation

IITB - JSP

function validateForm()

{

var x=document.getElementById("txt").value

if (x==null || x=="")

{

alert("First name must be filled out");

return false;

}

}

E-mail Validation

IITB - JSP

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

IITB - JSP

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

IITB - JSP

A cookie is a variable that is stored on the visitor's computer

With JavaScript, you can both create and retrieve cookie values.

Document Object

IITB - JSP

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

2D Animation

IITB - JSP

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



2D Animation

IITB - JSP

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

Draw Two Circle

IITB - JSP


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>

Animation

IITB - JSP

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

}

References

IITB - JSP

www.w3schools.com/js/

http://jsdraw2d.jsfiction.com/

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

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

http://www.w3schools.com/js/

http://www.w3schools.com/js/

Education

Javascript