Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply



Published on

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

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

Published in: Education, Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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
  • 4. Sample JavaScript<html><body><p id="demo"></p><script type="text/javascript"><!--document.getElementById("demo").innerHTML=Date();//--></script></body></html> IITB - JSP
  • 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. 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
  • 8. JavaScript Events onLoad and onUnload onFocus, onBlur and onChange OnSubmit onMouseOver, onmousedown, onmouseout Onerror Onkeydown, onkeyup onselect IITB - JSP
  • 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. 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. 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. 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. Document Object document.anchors/forms/images.length document.anchors[0].innerHTML document.title, document.URL document.getElementById("myHeader").innerHTML"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. 2D AnimationJavaScript library -> jsDraw2D.js (Free Source) 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 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. 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. 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. IITB - JSP