This document provides an overview of JavaScript, including that it is a scripting language embedded directly into HTML pages, and is interpreted rather than compiled. It describes how JavaScript can dynamically update HTML, react to events, validate form data, and more. It also provides examples of using JavaScript to display the date, validation functions, and 2D animation libraries.
1. JavaScript
Summer Internship – 2012
(Indian Institute of Technology Bombay)
Rajavel D
(Clicker Software)
2. 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
3. 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
6. 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
7. 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
9. 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
10. 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
12. 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
14. 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
15. 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
16. Draw Two Circle
<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>
IITB - JSP
17. 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