Introduction to JavaSctipt Introduction to JavaScript by Sabyasachi Ghosh http://neilghosh.com
A Programming Language <ul><li>A client side scripting langugage </li></ul><ul><li>Downloaded as is from server  </li></ul...
How Does it look like <html> <body> <h1>My First Web Page</h1> <script type=&quot;text/javascript&quot;> document.write(&q...
Printing and Variables <ul><li>document.write(&quot;Hello World ! &quot;); var x; var x= 10; var name = “Neil”; = is used ...
Conditional and Looping <ul><li>Similar to C and and JAVA </li></ul><ul><li>If(condition){..} else{..} </li></ul><ul><li>s...
Pop-Ups <ul><li>alert(&quot;I am an alert box!&quot;); </li></ul><ul><li>var r=confirm(&quot;Press a button&quot;); </li><...
Functions and Events <ul><li>Defination </li></ul><ul><ul><li>function add(x,y){  return  x +y ; } </li></ul></ul><ul><li>...
JavaScript Objects <ul><li>String </li></ul><ul><ul><li>length(),toUpperCase() </li></ul></ul><ul><li>Date </li></ul><ul><...
Advanced JavaScript <ul><li>Browser Detection (name,version) </li></ul><ul><li>Can get/set cookie </li></ul><ul><li>Platfo...
AJAX <ul><li>AJAX = Asynchronous JavaScript and XML. </li></ul><ul><li>Not a new programming language, uses existing stand...
How does it work
Existing standards <ul><li>XMLHttpRequest object (to exchange data asynchronously with a server) </li></ul><ul><li>JavaScr...
Example <ul><li><html><head><script type=&quot;text/javascript&quot;> function loadXMLDoc(){ var xmlhttp; if (window.XMLHt...
Request <ul><li>Methods </li></ul><ul><li>open(method,url,async) </li></ul><ul><ul><li>Method – post, get </li></ul></ul><...
Response <ul><li>responseText </li></ul><ul><ul><li>Gets the response data as string </li></ul></ul><ul><li>responseXML </...
readyState <ul><li>onreadystatechange </li></ul><ul><li>readyState 0: request not initialized 1: server connection establi...
AJAX Advanced <ul><li>Using server side scripts </li></ul><ul><ul><li>PHP, ASP, JSP </li></ul></ul><ul><li>Using databse  ...
Thank You ! <ul><li>Thank You ! </li></ul>
Upcoming SlideShare
Loading in...5
×

Introduction to javaScript

1,591
-1

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,591
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction to javaScript

  1. 1. Introduction to JavaSctipt Introduction to JavaScript by Sabyasachi Ghosh http://neilghosh.com
  2. 2. A Programming Language <ul><li>A client side scripting langugage </li></ul><ul><li>Downloaded as is from server </li></ul><ul><li>Can be generated using server side scripting </li></ul><ul><li>Nothing to do with Java </li></ul><ul><li>No Compilation required </li></ul><ul><li>Most of the browsers support it </li></ul><ul><li>Its free ! </li></ul>
  3. 3. How Does it look like <html> <body> <h1>My First Web Page</h1> <script type=&quot;text/javascript&quot;> document.write(&quot;<p>&quot; + Date() + &quot;</p>&quot;); </script> </body> </html>
  4. 4. Printing and Variables <ul><li>document.write(&quot;Hello World ! &quot;); var x; var x= 10; var name = “Neil”; = is used to assign values. </li></ul><ul><li>+ is used to add/concat values. </li></ul>
  5. 5. Conditional and Looping <ul><li>Similar to C and and JAVA </li></ul><ul><li>If(condition){..} else{..} </li></ul><ul><li>switch .. case .. </li></ul><ul><li>for(i=1;i<10;i++){..} </li></ul><ul><li>while(i<10){} </li></ul><ul><li>for(i in X){ .. X[i] .. } /where var X = {x:10,y:20} </li></ul>
  6. 6. Pop-Ups <ul><li>alert(&quot;I am an alert box!&quot;); </li></ul><ul><li>var r=confirm(&quot;Press a button&quot;); </li></ul><ul><li>var name=prompt(&quot;Please enter your name&quot;,&quot;Harry Potter&quot;); </li></ul>
  7. 7. Functions and Events <ul><li>Defination </li></ul><ul><ul><li>function add(x,y){ return x +y ; } </li></ul></ul><ul><li>Call var z= (x,y); <input type=&quot;button&quot; value=&quot;Click me!&quot; onclick=&quot;myFunc()&quot; /> </li></ul><ul><li>Similarly onLoad,onUnload,onFocus, onBlur, onChange,onSubmit,onMouseOver </li></ul>
  8. 8. JavaScript Objects <ul><li>String </li></ul><ul><ul><li>length(),toUpperCase() </li></ul></ul><ul><li>Date </li></ul><ul><ul><li>var today = new Date() , setDate </li></ul></ul><ul><li>Array </li></ul><ul><ul><li>var myCars=new Array(); myCars[0] </li></ul></ul><ul><li>Boolean </li></ul><ul><li>Custom </li></ul><ul><ul><li>var person={fname:&quot;John&quot;,lname:&quot;Doe&quot;,age:25}; </li></ul></ul>
  9. 9. Advanced JavaScript <ul><li>Browser Detection (name,version) </li></ul><ul><li>Can get/set cookie </li></ul><ul><li>Platform Detection (OS , UA) </li></ul><ul><li>Client side form Validations </li></ul><ul><li>setTimeout(“statements”,millseconds) </li></ul>
  10. 10. AJAX <ul><li>AJAX = Asynchronous JavaScript and XML. </li></ul><ul><li>Not a new programming language, uses existing standards </li></ul><ul><li>Can exchange data and partical update without page refersh </li></ul>
  11. 11. How does it work
  12. 12. Existing standards <ul><li>XMLHttpRequest object (to exchange data asynchronously with a server) </li></ul><ul><li>JavaScript/DOM (to display/interact with the information) </li></ul><ul><li>CSS (to style the data) </li></ul><ul><li>XML (often used as the format for transferring data) </li></ul>
  13. 13. Example <ul><li><html><head><script type=&quot;text/javascript&quot;> function loadXMLDoc(){ var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById(&quot;myDiv&quot;).innerHTML=xmlhttp.responseText; } } xmlhttp.open(&quot;GET&quot;,&quot;ajax_info.txt&quot;,true); xmlhttp.send(); </li></ul><ul><li>}</script></head><body> </li></ul><ul><li><div id=&quot;myDiv&quot;><h2>Let AJAX change this text</h2></div> </li></ul><ul><li><button type=&quot;button&quot; onclick=&quot;loadXMLDoc()&quot;>Change Content</button> </li></ul><ul><li></body></html> </li></ul>
  14. 14. Request <ul><li>Methods </li></ul><ul><li>open(method,url,async) </li></ul><ul><ul><li>Method – post, get </li></ul></ul><ul><li>send(string) </li></ul><ul><li>setRequestHeader(&quot;Content-type&quot;,&quot;application/x-www-form-urlencoded&quot;); </li></ul>
  15. 15. Response <ul><li>responseText </li></ul><ul><ul><li>Gets the response data as string </li></ul></ul><ul><li>responseXML </li></ul><ul><ul><li>Gets the response data as XML </li></ul></ul>
  16. 16. readyState <ul><li>onreadystatechange </li></ul><ul><li>readyState 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready </li></ul><ul><li>status </li></ul><ul><ul><li>200 : OK </li></ul></ul><ul><ul><li>404 : page not found </li></ul></ul>
  17. 17. AJAX Advanced <ul><li>Using server side scripts </li></ul><ul><ul><li>PHP, ASP, JSP </li></ul></ul><ul><li>Using databse </li></ul><ul><ul><li>Databse connection from Server scripts </li></ul></ul><ul><li>Using XML </li></ul><ul><ul><li>DOM parsing </li></ul></ul>
  18. 18. Thank You ! <ul><li>Thank You ! </li></ul>

×