Javascript

  • 1,036 views
Uploaded on

basic javascript,

basic javascript,

More in: Technology , Education
  • 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,036
On Slideshare
0
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