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
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
// kind of 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 – 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. 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.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
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