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