Presentation is loading. Please wait.

Presentation is loading. Please wait.

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:

Similar presentations


Presentation on theme: "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:"— Presentation transcript:

1 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: –”main” - global variables and start-code –functions

2 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];

3 Functions Function-name is case-sensitive Retun-type depends on return-value function functionsname (parameter1, parameter2) { // TO-DO }

4 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 p2 "); }

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

6 Objects (classes) You can add additional methods to an existing prototype ("Class") Person.prototype.changeName = function (name) { this.name = name; }

7 Output og input Output text with HTML tags document.writeln(”my text "); Output in alert window alert(”my text”); Input in prompt window var s = prompt(”input text",”start-value");

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

9 JavaScript in external files JavaScript might be placed in a external fil (myscripts.js ) and included in the document as if it was inserted inline in the document. 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

10 Output creation of document objects document.write(' '); 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

11 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”

12 The document and form object Adding a new control object to a form var nyText = document.createElement(” ”); 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.

13 events You can add various events to control objects on the screen: example. onclick=”clickFunktion()” or onmouseover=”mouseoverFunction()"

14 popup window object Adding a new popup control object to the document var pw=window.createPopup(); pw.document.write("Text "); …….. 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.

15 new window object Creation 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(" New dokument "); newDoc.write(' '); newDoc.write(" "); 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).

16 Debug with chrome


Download ppt "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:"

Similar presentations


Ads by Google