Downloaded 42 times
![JavaScript is 100% dynamic var my_object; my_object.new_attr = 1; // create new attributes and methods on runtime // or my_object["other_new_attr"] = 2; // and remove them on runtime delete my_object.other_new_attr; // or even the whole thing... delete my_object; 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 6](https://image.slidesharecdn.com/javascriptandajaxfranebandov-110202111156-phpapp02/75/JavaScript-and-AJAX-6-2048.jpg)
![DOM – Document Object Model <html> <header>...</header> <body> <img src="some_image.png"> <img src="image2.png"> <img src="image3.jpg"> <script> window.alert(document.images[0].height); if(document.images[1].height > document.images[2].height) window.alert("Image2"); else window.alert("Image3"); </script> </body> </html> 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 10](https://image.slidesharecdn.com/javascriptandajaxfranebandov-110202111156-phpapp02/75/JavaScript-and-AJAX-10-2048.jpg)
Uploaded byFrane Bandov
JavaScript and AJAX
- JavaScript was developed in 1995 by Netscape and was originally called LiveScript but was renamed to JavaScript due to Java's popularity. It runs efficiently by manipulating HTML documents via the DOM. - JavaScript has undergone standardization and various versions. It is a dynamically typed language that allows adding and removing attributes and methods from objects at runtime. - AJAX uses JavaScript and XMLHttpRequest to make asynchronous requests to web servers in the background without interfering with the display and behavior of the existing page. This allows for asynchronous data retrieval and updating of parts of a web page.
JavaScript and AJAX
- 1. JavaScript and AJAX by Frane Bandov
- 2. JavaScript ≠ Java ● Developed in 1995/96 by Netscape ● No technological relation to Java ● Originally named LiveScript, but renamed to JavaScript for marketing purposes (Java hype in the mid-90s) ● Standardized as ECMAScript (ECMA-262) in 1998 ● Very small object and instruction set → efficient ● Runs in a sandbox ● Manipulation of HTML documents via DOM 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 2
- 3. JavaScript History source: Wikipedia Version Release Description Netscape Firefox Internet Opera Safari Chrome date Exporer 1.0 03.1996 2.0 3.0 1.1 08.1996 3.0 1.2 06.1997 4.0-4.05 1.3 10.1998 ECMA-262 1st edition / 4.06- ECMA-262 2nd edition 4.7x 1.4 Server 1.5 11.2000 ECMA-262 3rd edition 6.0 1.0 5, 6, 7, 8 6-9 1.6 11.2005 1.5 + Array extras + Array 1.5 3.0, & String generics + E4X 3.1 1.7 10.2006 1.6 + Pythonic generators 2.0 2.2, 1.0 + Iterators + let 4.0 1.8 06.2008 1.7 + Generator 3.0 expressions + Expression closures 1.8.1 1.8 + geringfügige 3.5 Updates 1.9 1.8.1 + ECMAScript 5 4.0 11/06/09 Compliance Bandov: JavaScript and AJAX for Java Developers Frane 3
- 4. Syntax 1/2 if (condition){ while (condition) { instructions; instructions; } else { } instructions; } do { instructions; switch (variable) { } while (condition); case value1 : instructions; break; for (start; end-condition; iterator){ case value2 : instructions; instuctions; break; } default : instructions; } for (var element in object) { instructions; } 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 4
- 5. Syntax 2/2 function a(p1, p2, p2) { function CompleteClass (parameter) instructions; { return value; var private_attribute = "private"; } this.public_attribute = "public"; var b = function (...) {...} var private_method = function () { // do something function MyClass(x){ }; this.attribute1 = x; } this.public_method = function () { // do something public var object1 = new MyClass(10); }; window.alert(object1.attribute1); } 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 5
- 6. JavaScript is 100%dynamic var my_object; my_object.new_attr = 1; // create new attributes and methods on runtime // or my_object["other_new_attr"] = 2; // and remove them on runtime delete my_object.other_new_attr; // or even the whole thing... delete my_object; 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 6
- 7. Handling Exceptions // kindof similar to Java try { // do stuff... } catch(exception) { // ATENTION! JavaScript is untyped and therefore there are no diffrent // exception types like in Java. You have to distinguish the exceptions by hand } finally { // optional }; throw("A sample exception"); // throw exceptions 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 7
- 8. Predefined Objects ● Object: general class, from which all objects are derived ● Function: class for functions ● Array: array-class ● String: string-class ● Boolean: class for boolean values ● Number: class for all kinds of numbers (IEEE 754) ● Math: provides static mathods for mathematical functions ● Date: for date and time operations and values ● RegExp: for regular expressions 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 8
- 9. Other Helpful Stuff window.alert("Hello World"); var confirmed = window.confirm("Confirm please"); var answer = window.prompt("Your answer:", "42"); http://de.selfhtml.org/javascript/objekte/window.htm 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 9
- 10. DOM – DocumentObject Model <html> <header>...</header> <body> <img src="some_image.png"> <img src="image2.png"> <img src="image3.jpg"> <script> window.alert(document.images[0].height); if(document.images[1].height > document.images[2].height) window.alert("Image2"); else window.alert("Image3"); </script> </body> </html> 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 10
- 11. DOM – morepractical (but dirty) <html><header>...</header> <body> <h1 id="my_header">A title</h1> <input type="button" onklick="change_header()"> <script> function change_header() { document.getElementById("my_header").innerHTML = "My new title"; } </script> </body> </html> http://de.selfhtml.org/javascript/objekte/document.htm 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 11
- 12. AJAX Asynchronous JavaScript And XML 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 12
- 13. Plain AJAX 1/2 <script type="text/javascript"> var xmlHttp = null; try { xmlHttp = new XMLHttpRequest(); // Mozilla, Opera, Safari, IE7+ } catch(e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE6 } catch(e) { xmlHttp = null; } } ... 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 13
- 14. Plain AJAX 2/2 ... if (xmlHttp) { xmlHttp.open('GET', 'example.xml', true); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4) { alert(xmlHttp.responseText); } }; xmlHttp.send(null); } </script> 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 14
- 15. Practical AJAX e.g. in 'Prototype' var myAjax = new Ajax.Request( "/server_date.php", { method: 'get', onComplete: show_date } ); function show_date( originalRequest ) { document.getElementById('output').innerHTML = originalRequest.responseText; } 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 15
- 16. AJAX Frameworks ● Prototype: prototypejs.org ● jQuery: jquery.com ● MooTools: mootools.net ● and many more... ● Specially for graphical effects: ● script.aculo.us (needs Prototype) ● Moo.fx 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 16
- 17. AJAX Frameworks Enhancing JavaScript i.e. document.getElementById("element_id") → $("element_id") Example changing color of an element: $("element_id").setStyle({color: '#ff0000'}); // Protoype $("#my_div").css("border","3px solid red"); // jQuery var div_text_color = $("#my_div").css("color"); 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 17
- 18. Demo 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 18
- 19. Questions? 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 19
- 20. Thank You. 11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 20