Upcoming SlideShare
Loading in...5




basic javascript,

basic javascript,



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

  • 13-05-2013Rajavel DRajavel DJavaScriptSummer Internship – 2013(Indian Institute of Technology Bombay)
  • JavaScript JavaScript is a lightweight scripting language Embedded directly into HTML pages JavaScript is an interpreted language (meansthat scripts execute without preliminarycompilation)Rajavel D JavaScript IITB-CSE-Internship 2013
  • What can a JavaScript do? Client side data validation React to event on html element Read and write the html element Put dynamic content on html pages Creates the client side persistent (cookies, session )Rajavel D JavaScript IITB-CSE-Internship 2013
  • Sample JavaScript<html><body><p id="demo"></p><script type="text/javascript">document.getElementById("demo").innerHTML=Date();</script></body></html>Rajavel D JavaScript IITB-CSE-Internship 2013
  • 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>Rajavel D JavaScript IITB-CSE-Internship 2013
  • Using an External JavaScript<head><script type="text/javascript" src=“myjavascript.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 writtenRajavel D JavaScript IITB-CSE-Internship 2013
  • Comments and Popup Boxes 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","");Rajavel D JavaScript IITB-CSE-Internship 2013
  • JavaScript Events onLoad and onUnload onFocus, onBlur and onChange OnSubmit onMouseOver, onmousedown, onmouseout Onerror Onkeydown, onkeyup onselectRajavel D JavaScript IITB-CSE-Internship 2013
  • Required Fields Validationfunction validateForm(){var x=document.getElementById("txt").valueif (x==null || x==""){alert("First name must be filled out");return false;}}Rajavel D JavaScript IITB-CSE-Internship 2013
  • 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;}}Rajavel D JavaScript IITB-CSE-Internship 2013
  • 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>Rajavel D JavaScript IITB-CSE-Internship 2013
  • JavaScript Cookies A cookie is a variable that is stored on thevisitors computer With JavaScript, you can both create andretrieve cookie values.Rajavel D JavaScript IITB-CSE-Internship 2013
  • Create and Store a Cookiefunction setCookie(c_name,value,exdays){var exdate=new Date();exdate.setDate(exdate.getDate() + exdays);var c_value=escape(value) + ((exdays==null) ? "" : ";expires="+exdate.toUTCString());document.cookie=c_name + "=" + c_value;}Rajavel D JavaScript IITB-CSE-Internship 2013
  • Get a Cookiefunction getCookie(c_name){var i,x,y,Mycookies=document.cookie.split(";");for (i=0;i<Mycookies.length;i++){x=Mycookies[i].substr(0,Mycookies[i].indexOf("="));y=Mycookies[i].substr(Mycookies[i].indexOf("=")+1);if (x==c_name)return unescape(y);} }Rajavel D JavaScript IITB-CSE-Internship 2013
  • Check Cookiefunction checkCookie(){var username=getCookie("username");if (username!=null && username!="")alert("Welcome again " + username);else{ username=prompt("Please enter your name:","");if (username!=null && username!="")setCookie("username",username,365);}}Rajavel D JavaScript IITB-CSE-Internship 2013
  • 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 --> asciiRajavel D JavaScript IITB-CSE-Internship 2013
  • CSS on JavaScript Changing the dynamic style Examples : doc.getElementById(“mydiv”).style.Background=“#fdf” doc.getElementById("mydiv").style.fontSize= “20px"; document.getElementById("mydiv").style.color= "#fff"; doc.getElementById(“div").style.display="block/none";Rajavel D JavaScript IITB-CSE-Internship 2013
  • Rajavel D JavaScript IITB-CSE-Internship 2013Any Doubts ???
  • References D JavaScript IITB-CSE-Internship 2013