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

JavaScript Intro

JavaScript

JavaScript was formalized in the ECMAScript language standard and is primarily used in the form of client-side JavaScript, implemented as part of a Web browser in order to provide enhanced user interfaces and dynamic websites. This enables programmatic access to computational objects within a host environment

History

• JavaScript was originally developed by Brendan Eich of Netscape

• under the name Mocha,

• which was later renamed to LiveScript,

• and finally to JavaScript.

• LiveScript was the official name for the language when it first shipped in beta releases of Netscape Navigator 2.0 in September 1995, but it was renamed JavaScript in a joint announcement with Sun Microsystems on December 4, 1995, when it was deployed in the Netscape browser version 2.0B3.

What is JavaScript?

JavaScript is a

prototype-based scripting language

that is dynamic,

weakly typed

and has first-class functions.

It is a multi-paradigm language,

supporting object-oriented,

imperative,

and functional programming styles.

first-class functions

it treats functions as first-class objects. Specifically, this means that the language supports passing functions as arguments to other functions, returning them as the values from other functions, and assigning them to variables or storing them in data structures

function doOperation(params){

//do something

}

var doOperation = function(params){

//do something

}

Prototype-based

is a style of object-oriented programming in which classes are not present, And behavior reuse (known as inheritance in class-based languages) is performed via a process of cloning existing objects that serve as prototypes. This model can also be known as classless, prototype-oriented or instance-based programming. Delegation is the language feature that supports prototype-based programming.

function employee(name,jobtitle,born){

this.name=name;

this.jobtitle=jobtitle;

this.born=born;

}

Using above constructor we can use classes like

var fred=new employee(“Ranga",“SE",1988);

Can easily add new attributes to newly created object

employee.prototype.salary=null;

fred.salary=200000;

document.write(fred.salary);.

Dynamic

high-level programming languages that execute at runtime many common behaviors that other languages might perform during compilation

weakly typed

var x = false;

alert(x);

x = "test String";

alert(x);

x = 5;

alert(x);

multi-paradigm language

Paradigms differ in the concepts and abstractions used to represent the elements of a program (such as objects, functions, variables, constraints, etc.) and the steps that compose a computation (assignment, evaluation, continuations, data flows, etc.).

supporting object-oriented

(OOP) is a programming paradigm using "objects" – data structures consisting of data fields and methods together with their interactions – to design applications and computer programs. Programming techniques may include features such as data abstraction, encapsulation, messaging, modularity, polymorphism, and inheritance. Many modern programming languages now support OOP, at least as an option.

Imperative

is a programming paradigm that describes computation in terms of statements that change a program state. In much the same way that imperative mood in natural languages expresses commands to take action, imperative programs define sequences of commands for the computer to perform.

functional programming styles

is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids state and mutable data. It emphasizes the application of functions, in contrast to the imperative programming style, which emphasizes changes in state.