Download presentation
Presentation is loading. Please wait.
Published byLesley Wilson Modified over 9 years ago
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
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.