Javascript
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,203
On Slideshare
1,203
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
67
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 13-05-2013Rajavel DRajavel DJavaScriptSummer Internship – 2013(Indian Institute of Technology Bombay)
  • 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. 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. 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. 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. 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. 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. JavaScript Events onLoad and onUnload onFocus, onBlur and onChange OnSubmit onMouseOver, onmousedown, onmouseout Onerror Onkeydown, onkeyup onselectRajavel D JavaScript IITB-CSE-Internship 2013
  • 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. 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. 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. 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. 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. 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. 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. 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 --> asciiRajavel D JavaScript IITB-CSE-Internship 2013
  • 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. Rajavel D JavaScript IITB-CSE-Internship 2013Any Doubts ???
  • 19. References www.w3schools.com/js/ www.tutorialspoint.com/javascript/Rajavel D JavaScript IITB-CSE-Internship 2013