Upload
rajavel-evergreen
View
1.432
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Simple javascript slides which is taken at iitb 2012 interns...
Citation preview
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">
<!--
document.getElementById("demo").innerHTML=Date();
//-->
</script>
</body>
</html>
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>
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
<script type="text/javascript">
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
<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>
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/