JavaScript and AJAX

JavaScript and AJAX
by Frane Bandov

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

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

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;
}

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); }


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;


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


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


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


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>

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

AJAX
Asynchronous JavaScript And XML


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;
}
}

...


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>


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;
}

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


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");


Demo


Questions?


Thank You.


JavaScript and AJAX

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to JavaScript and AJAX (20)

JavaScript and AJAX