Upload
lesley-wilson
View
218
Download
4
Embed Size (px)
Citation preview
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