0
JavaScript and AJAX     by Frane Bandov
JavaScript ≠ Java ●   Developed in 1995/96 by Netscape ●   No technological relation to Java      ●    Originally named Li...
JavaScript History                                source: WikipediaVersion      Release    Description                    ...
Syntax 1/2if (condition) {                                  while (condition) {   instructions;                           ...
Syntax 2/2function a (p1, p2, p2) {                       function CompleteClass (parameter)  instructions;               ...
JavaScript is 100% dynamicvar my_object;my_object.new_attr = 1; // create new attributes and methods on runtime// ormy_obj...
Handling Exceptions// kind of similar to Javatry {   // do stuff...} catch(exception) {   // ATENTION! JavaScript is untyp...
Predefined Objects ●   Object: general class, from which all objects are derived ●   Function: class for functions ●   Arr...
Other Helpful Stuff     window.alert("Hello World");     var confirmed = window.confirm("Confirm please");     var answer ...
DOM – Document Object Model                 <html>                 <header>...</header>                 <body>            ...
DOM – more practical (but dirty)   <html><header>...</header>   <body>   <h1 id="my_header">A title</h1>   <input type="bu...
AJAX     Asynchronous JavaScript And XML11/06/09        Frane Bandov: JavaScript and AJAX for Java Developers   12
Plain AJAX 1/2   <script type="text/javascript">   var xmlHttp = null;   try {      xmlHttp = new XMLHttpRequest(); // Moz...
Plain AJAX 2/2   ...   if (xmlHttp) {      xmlHttp.open(GET, example.xml, true);      xmlHttp.onreadystatechange = functio...
Practical AJAX     e.g. in Prototype     var myAjax = new Ajax.Request(       "/server_date.php",       { method: get, onC...
AJAX Frameworks ●   Prototype: prototypejs.org ●   jQuery: jquery.com ●   MooTools: mootools.net ●   and many more... ●   ...
AJAX Frameworks     Enhancing JavaScript           i.e. document.getElementById("element_id")                 → $("element...
Demo11/06/09   Frane Bandov: JavaScript and AJAX for Java Developers   18
Questions?11/06/09   Frane Bandov: JavaScript and AJAX for Java Developers   19
Thank You.11/06/09   Frane Bandov: JavaScript and AJAX for Java Developers   20
Upcoming SlideShare
Loading in...5
×

JavaScript and AJAX

1,658

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,658
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
40
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "JavaScript and AJAX"

  1. 1. JavaScript and AJAX by Frane Bandov
  2. 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 DOM11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 2
  3. 3. JavaScript History source: WikipediaVersion Release Description Netscape Firefox Internet Opera Safari Chrome date Exporer1.0 03.1996 2.0 3.01.1 08.1996 3.01.2 06.1997 4.0-4.051.3 10.1998 ECMA-262 1st edition / 4.06- ECMA-262 2nd edition 4.7x1.4 Server1.5 11.2000 ECMA-262 3rd edition 6.0 1.0 5, 6, 7, 8 6-91.6 11.2005 1.5 + Array extras + Array 1.5 3.0, & String generics + E4X 3.11.7 10.2006 1.6 + Pythonic generators 2.0 2.2, 1.0 + Iterators + let 4.01.8 06.2008 1.7 + Generator 3.0 expressions + Expression closures1.8.1 1.8 + geringfügige 3.5 Updates1.9 1.8.1 + ECMAScript 5 4.0 11/06/09 Compliance Bandov: JavaScript and AJAX for Java Developers Frane 3
  4. 4. Syntax 1/2if (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. 5. Syntax 2/2function 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 somethingfunction MyClass(x){ }; this.attribute1 = x;} this.public_method = function () { // do something publicvar object1 = new MyClass(10); };window.alert(object1.attribute1); }11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 5
  6. 6. JavaScript is 100% dynamicvar my_object;my_object.new_attr = 1; // create new attributes and methods on runtime// ormy_object["other_new_attr"] = 2;// and remove them on runtimedelete 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. 7. Handling Exceptions// kind of similar to Javatry { // 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 exceptions11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 7
  8. 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 expressions11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 8
  9. 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.htm11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 9
  10. 10. 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
  11. 11. DOM – more practical (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.htm11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 11
  12. 12. AJAX Asynchronous JavaScript And XML11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 12
  13. 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. 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. 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. 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.fx11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 16
  17. 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. 18. Demo11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 18
  19. 19. Questions?11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 19
  20. 20. Thank You.11/06/09 Frane Bandov: JavaScript and AJAX for Java Developers 20
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×