JavaScript      Summer Internship – 2012(Indian Institute of Technology Bombay)                                       Raja...
JavaScript   JavaScript is a scripting language   Lightweight programming language   Embedded directly into HTML pages...
What can a JavaScript do?   JavaScript gives HTML designers a    programming tool   JavaScript can put dynamic text into...
Sample JavaScript<html><body><p id="demo"></p><script type="text/javascript"><!--document.getElementById("demo").innerHTML...
JavaScript in <head><html> <head><script type="text/javascript">function displayDate(){   document.getElementById("demo")....
Using an External JavaScript<head><script type="text/javascript" src="xxx.js"></script></head>JavaScript Statements   The...
JavaScript Comments   Single line comments start with //.   Multi line comments start with /* and end with */.JavaScript...
JavaScript Events   onLoad and onUnload   onFocus, onBlur and onChange   OnSubmit   onMouseOver, onmousedown, onmouseo...
Required Fields Validationfunction validateForm(){var x=document.getElementById("txt").valueif (x==null || x=="")    {    ...
E-mail Validationfunction validateForm(){var x=document.forms["myForm"]["email"].valuevar atpos=x.indexOf("@");var dotpos=...
JavaScript AdvancedTimingsetTimeout("MsgAfter3sec()",3000);clearTimeout();Object<script type="text/javascript">personObj={...
JavaScript Cookies   A cookie is a variable that is stored on the    visitors computer   With JavaScript, you can both c...
Document Object   document.anchors/forms/images.length   document.anchors[0].innerHTML   document.title, document.URL ...
2D AnimationJavaScript library -> jsDraw2D.js (Free Source)           http://code.google.com/Create jsGraphics object :  v...
2D AnimationDraw a Line between 2 points  var pt1 = new jsPoint(20,30);  var pt2 = new jsPoint(120,230);  gr.drawLine(pen,...
Draw Two Circle<script type="text/javascript">var graph = new jsGraphics(document.getElementById("container"));var color1 ...
Animationvar p = -3function moveCircle(){if(p<=150){ p = p+1;}    else{ clearTimeout(t); }    var graph = new jsGraphics(d...
Referenceswww.w3schools.com/js/http://jsdraw2d.jsfiction.com/http://www.schillmania.com/content/projects/javascript-animat...
Upcoming SlideShare
Loading in …5
×

Javascript

1,933 views

Published on

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

Published in: Education, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,933
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
30
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Javascript

  1. 1. JavaScript Summer Internship – 2012(Indian Institute of Technology Bombay) Rajavel D (Clicker Software)
  2. 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. 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
  4. 4. Sample JavaScript<html><body><p id="demo"></p><script type="text/javascript"><!--document.getElementById("demo").innerHTML=Date();//--></script></body></html> IITB - JSP
  5. 5. JavaScript in <head><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()">DisplayDate</button></body> </html> IITB - JSP
  6. 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. 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
  8. 8. JavaScript Events onLoad and onUnload onFocus, onBlur and onChange OnSubmit onMouseOver, onmousedown, onmouseout Onerror Onkeydown, onkeyup onselect IITB - JSP
  9. 9. Required Fields Validationfunction validateForm(){var x=document.getElementById("txt").valueif (x==null || x=="") { alert("First name must be filled out"); return false; }} IITB - JSP
  10. 10. E-mail Validationfunction validateForm(){var x=document.forms["myForm"]["email"].valuevar 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
  11. 11. JavaScript AdvancedTimingsetTimeout("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> IITB - JSP
  12. 12. JavaScript Cookies A cookie is a variable that is stored on the visitors computer With JavaScript, you can both create and retrieve cookie values. IITB - JSP
  13. 13. 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
  14. 14. 2D AnimationJavaScript 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. 15. 2D AnimationDraw 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. 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. 17. Animationvar p = -3function 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
  18. 18. Referenceswww.w3schools.com/js/http://jsdraw2d.jsfiction.com/http://www.schillmania.com/content/projects/javascript-animation-1/ http://berniesumption.com/software/animator/ IITB - JSP

×