Short about JavaScript Running in browser on client Send from server (php, asp, aspx, htm) or start...

Short about JavaScript

Running in browser on client

Send from server (php, asp, aspx, htm) or start on client as som htm/html file.

Template in html-file:

<script type="text/javascript">– ”main” - global variables and start-code– functions

• </script>

Variables

Variable name is case-sensitive

Type depends on assigned value• var integerNumber = 10;• var floatingNumber = 20.4;• var textField = ”This is a text”;• var test = true;• var nullreference = null;• var obj = new object();• var table = new Array(5); tabel[0]=”elm1”;• var associativeTab = new Array(); assTab[”n1”]=”elm n1”;• var fasttab = [”elm1”, ”elm2”, ”elm3”, 4];

Functions

Function-name is case-sensitive

Retun-type depends on return-value

function functionsname (parameter1, parameter2)

{

// TO-DO

}

Objekts (classes)• function Person(name, age) // definition of a ”class”• {• this.name = name;• this.age = age;• this.birthday = function ()• { • this.age++;• }• this.toString = function ()• { • return this.name + ", "+this.age;• }• • }

• function doObjects()• {• p1 = new Person("Bjørk",48);• p2 = new Person("Bjarne",51);• alert("p1<"+p1.toString()+"> p2<"+p2.toString()+">");• }

Objects (classes)Additional attributes and methods can be added to an existing object

p1 = new Person("Bjørk",48);p1.eftername = "Busch";p1.toString = function() { return this.name + ", "+this.eftername + ", "+this.age; }

bil = new Object();bil.regnr = ”TN123456”;bil.kmPrLitter = 15;bil.forbrug = function (km) { return this.kmPrLiter * km; }

Oprettelse, erklæring og initiering på en gang

var circle = { x : 0, y : 0, radius: 2 }

Objects (classes)

You can add additional methods to an existing prototype ("Class")

• Person.prototype.changeName = function (name)• { • this.name = name;• }

Output og input

Output text with HTML tags

• document.writeln(”my text<br/>");

Output in alert window

• alert(”my text”);

Input in prompt window

• var s = prompt(”input text",”start-value");

Errorhandling

try{ // code that might fail }catch(err){ // errorhandling fx. alert("Error description: " + err.description);}

JavaScript in external filesJavaScript might be placed in a external fil (myscripts.js ) and included

in the document as if it was inserted inline in the document.

<script type="text/javascript” src=”myscripts.js”>

</script>

You can get script more than ones and from external sites by using full adress (fx http://website/script/myJs.js)

You often use libraries with script in that way

Inline script can be combined as well

Output creation of document objects

document.write('<FORM NAME="form01" ACTION="nyside" onSubmit="validator()";>');

document.write('<input type="text" id="Text1" onmouseover="doSomething()">');

document.write('<INPUT TYPE="submit" VALUE="Submit"><br/>');

document.write('</FORM>');

This example creates indirectly a Form object that has a collection of two other objects: a Text object and a submit button.

The objects can be uses with this access:document.form01

document.form01.Text1

The last one is missing an ID and are only available only through Collection elements

document.form01.elements

document and form objekt

On the document object you can access the form through a collection:• var form = document.forms[0];• var form = document.forms[”form01”];• var form = document.form01;

On the form object you can access other elements though collection:• var form = document.form01;• var elm = form.elements[0];• var elm = form.elements[”field1”]; // id=”field1”• var elm = form.field1; // id=”field1”

The document and form object

Adding a new control object to a form• var nyText = document.createElement(”<input type=’text’ >”);• textblock.setAttribute("id", ”T1")

textblock.setAttribute("align", "center")

• document.form01.appendChild(nyText);

• Note that you can use both single and double quotes and therefore easy put text attribute into in a string.

events

You can add various events to control objects on the screen:

example.

onclick=”clickFunktion()”

or

onmouseover=”mouseoverFunction()"

popup window object

Adding a new popup control object to the document

• var pw=window.createPopup();• pw.document.write("Text<br/>");• ……..• pw.show(150,150,200,50,this.document.body)

You might add properties and functions to pop objects (pw) as for all other objects, and thus can also be transmitted reference to other objects.

new window objectCreation of a new window object

• var windowURL = "";• var windowID = "MyWin’;• var windowProperty = 'left=20,top=20,width=500,height=500,toolbar=0,resizable=0';

• var newWin = window.open(windowURL,windowID,windowProperty);• var newDoc = newWin.document;• newDoc.write("<html><body>New dokument<br/>");• newDoc.write('<input id=”closeButton" type="button" value=”close" onclick="window.close()" />');• newDoc.write("</body></html>");• newDoc.close();

You can add properties and functions to both the new window object (newWin) as for all other objects, and thus can also be transmitted reference to other objects, and you can change in the new window object's properties such document object (newDoc).

Debug with chrome