Published on

basic javascript,

Published in: Technology, Education
  • Be the first to comment

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

No notes for slide


  1. 1. 13-05-2013Rajavel DRajavel DJavaScriptSummer Internship – 2013(Indian Institute of Technology Bombay)
  2. 2. 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
  3. 3. 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
  4. 4. 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
  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>Rajavel D JavaScript IITB-CSE-Internship 2013
  6. 6. 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
  7. 7. 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
  8. 8. JavaScript Events onLoad and onUnload onFocus, onBlur and onChange OnSubmit onMouseOver, onmousedown, onmouseout Onerror Onkeydown, onkeyup onselectRajavel D JavaScript IITB-CSE-Internship 2013
  9. 9. 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
  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;}}Rajavel D JavaScript IITB-CSE-Internship 2013
  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>Rajavel D JavaScript IITB-CSE-Internship 2013
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. Rajavel D JavaScript IITB-CSE-Internship 2013Any Doubts ???
  19. 19. References D JavaScript IITB-CSE-Internship 2013
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.