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

Javascript

on

  • 1,559 views

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

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

Statistics

Views

Total Views
1,559
Views on SlideShare
1,559
Embed Views
0

Actions

Likes
2
Downloads
25
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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