18
JavaScript Summer Internship 2012 (Indian Institute of Technology Bombay) Rajavel D (Clicker Software)

Javascript

Embed Size (px)

DESCRIPTION

Simple javascript slides which is taken at iitb 2012 interns...

Citation preview

Page 1: Javascript

JavaScript

Summer Internship – 2012

(Indian Institute of Technology Bombay)

Rajavel D

(Clicker Software)

Page 2: Javascript

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)

Page 3: Javascript

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

Page 4: Javascript

Sample JavaScript

IITB - JSP

<html>

<body>

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

<script type="text/javascript">

<!--

document.getElementById("demo").innerHTML=Date();

//-->

</script>

</body>

</html>

Page 5: Javascript

JavaScript in <head>

IITB - JSP

<html> <head>

<script type="text/javascript">

function displayDate()

{ document.getElementById("demo").innerHTML=Date(); }

</script>

</head>

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

<button type="button" onclick="displayDate()">Display Date</button>

</body> </html>

Page 6: Javascript

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

Page 7: Javascript

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

Page 8: Javascript

JavaScript Events

IITB - JSP

onLoad and onUnload

onFocus, onBlur and onChange

OnSubmit

onMouseOver, onmousedown, onmouseout

Onerror

Onkeydown, onkeyup

onselect

Page 9: Javascript

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;

}

}

Page 10: Javascript

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;

}

}

Page 11: Javascript

JavaScript Advanced

IITB - JSP

Timing

setTimeout("MsgAfter3sec()",3000);

clearTimeout();

Object

<script type="text/javascript">

personObj={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}

document.write(personObj.firstname + " is " + personObj.age + " years old.");

</script>

Page 12: Javascript

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.

Page 13: Javascript

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

Page 14: Javascript

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

Page 15: Javascript

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

Page 16: Javascript

Draw Two Circle

IITB - JSP

<script type="text/javascript">

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>

Page 17: Javascript

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

}