• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content




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

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



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Javascript Javascript Presentation Transcript

    • JavaScript Summer Internship – 2012(Indian Institute of Technology Bombay) Rajavel D (Clicker Software)
    • 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
    • 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
    • Sample JavaScript<html><body><p id="demo"></p><script type="text/javascript"><!--document.getElementById("demo").innerHTML=Date();//--></script></body></html> IITB - JSP
    • 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
    • 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
    • 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
    • JavaScript Events onLoad and onUnload onFocus, onBlur and onChange OnSubmit onMouseOver, onmousedown, onmouseout Onerror Onkeydown, onkeyup onselect IITB - JSP
    • Required Fields Validationfunction validateForm(){var x=document.getElementById("txt").valueif (x==null || x=="") { alert("First name must be filled out"); return false; }} IITB - JSP
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Referenceswww.w3schools.com/js/http://jsdraw2d.jsfiction.com/http://www.schillmania.com/content/projects/javascript-animation-1/ http://berniesumption.com/software/animator/ IITB - JSP