JavaScript Exercise 1

Arrays

• var myCars=new Array();

regular array (add an optional integer argument to control array's size)

• myCars[0]="Saab";

• myCars[1]="Volvo";

• myCars[2]="BMW";

• var myCars=new Array("Saab","Volvo","BMW"); // condensed array

• var myCars=["Saab","Volvo","BMW"]; // literal array

JavaScript Objects

function hotel(id,name,image,desc){

this.id = id;

this.name = name;

this.image = image;

this.description = desc;

}

var hotels = [];

var hotel1 = new hotel(1,’HTL1’,’test url’,’Holiday’);

hotels[0] = hotel1;

var hotel2 = new hotel(2,’HTL2’,’test url 2’,’Beach’);

hotels[1] = hotel2;

What is JSON?

• JSON stands for JavaScript Object Notation

• JSON is lightweight text-data interchange format

• JSON is language independent *

• JSON is "self-describing" and easy to understand

Formal Object

function hotel(id,name,image,desc){

this.id = id;

this.name = name;

this.image = image;

this.description = desc;

}

var hotel1 = new hotel(1,’HTL1’,’test url’,’Holiday’);

From JSON

var hotel1 = {“id”:1,”name”:”HTL1”,”image”:”test url”,”description”:”Holiday”};

We can defile a list of hotels like below

[{“id”:1,”name”:”HTL1”,”image”:”test url”,”description”:”Holiday”},

{“id”:2,”name”:”HTL2”,”image”:”test url 2”,”description”:”Beach”},

{“id”:3,”name”:”HTL3”,”image”:”test url3”,”description”:”Hill”}]

eval()

• The eval() function evaluates or executes an argument.

• If the argument is an expression, eval() evaluates the expression.

• If the argument is one or more JavaScript statements, eval() executes the statements.

var strStatment = “alert(12345)”; // This is just a string

eval(strStatment); // Will alert 12345

var strArray = “[\”Ranga\”,\”Jagath\”,\”Dineth\”]”; // This is just a string. Not a array

var names = eval(strArray); // Will return a array

AJAX

• Asynchronous JavaScript and XML

• AJAX is the art of exchanging data with a server,

• and update parts of a web page - without reloading the whole page

XMLHttpRequest Object

• All modern browsers support the XMLHttpRequest object (IE5 and IE6 uses an ActiveXObject).

• The XMLHttpRequest object is used to exchange data with a server behind the scenes.

Creating XMLHTTPRequest

var xmlhttp;

if (window.XMLHttpRequest){

//for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();

} else {

//for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

Send the Request

xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

Exercise

Read and display an external data source with ajax.

Data source

hotels.txt

Contains

[{"id":1,"name":"Galadari","image":"hotel.jpg","description":"Hotel Galadari"},

{"id":2,"name":"Taj Samudra","image":"hotel.jpg","description":"A hotel of taj group"},

{"id":3,"name":"Mount Beach","image":"hotel.jpg","description":"Beach hotel"},

{"id":4,"name":"Hilton","image":"hotel.jpg","description":"Hotel hilton"},

{"id":5,"name":"Gall Face","image":"hotel.jpg","description":"Beach hotel"},

{"id":6,"name":"Light House","image":"hotel.jpg","description":"Beach hotel"},

{"id":7,"name":"See View","image":"hotel.jpg","description":"Beach hotel"},

{"id":8,"name":"Amaya Lake","image":"hotel.jpg","description":"Hotel of amaya group"},

{"id":9,"name":"Kandalama","image":"hotel.jpg","description":"Nature"},

{"id":10,"name":"Up Hill","image":"hotel.jpg","description":"Nature"}]

Code In the HTML