CICS 515 a Internet Programming Week 3 Mike Feeley 1 JavaScript - - PowerPoint PPT Presentation
CICS 515 a Internet Programming Week 3 Mike Feeley 1 JavaScript 2 JavaScript is not Java client-side scripting language program that runs in browser at client two ways to include it in HTML document embedded blah.html:
<body> <script type="text/javascript"> document.write ("Hello from embedded JavaScript."); </script> </body> <head> <script language="JavaScript" src="blah.js"></script> </head> document.write ("Hello from separate file JavaScript.<br>");
blah.html: blah.html: blah.js:
globals
declared outside of any function lifetime of document
locals
declared with var inside of a function lifetime of function invocation
instance variables assigned this. inside of a method
lifetime of object
class variables
assigned in prototype declaration lifetime of document
aStudent = new Object (); aStudent.sid = 10; aStudent.name = 'First Student'; document.myNewProperty = 48; aStudent = { sid: 10, name: 'First Student' };
aStudent.getSID = function () { return this.sid; }; anSID = aStudent.getSID ();
function Student (anSID, aName) { this.SID = anSID; this.name = aName; this.getSID = function () { return this.sid; } } aStudent = new Student (10,"First Student");
aStudent = new Object(); aStudent.Student(10,”First Student”);
function A () {} A.prototype.x=1; function whenLoaded () { var a0 = new A (); var a1 = new A (); var a2 = new A (); A.prototype.x = 3; a2.x = 2; alert(a0.x+', '+a1.x+', '+a2.x); }
function Student (anSID, aName) { this.SID = anSID; this.name = aName; } Student.prototype.getSID = function () { return this.SID; }; function Student (anSID, aName) { this.SID = anSID; this.name = aName; } Student.prototype = { getSID: function () { return this.SID; }, getName: function () { return this.name; } }
function Person (aName) { this.name = aName || ""; } Person.prototype.show = function () { alert (this.name); }; function Student (anSID) { this.SID = anSID || ""; } Student.prototype = new Person (); Student.prototype.show = function () { alert(this.name+" "+this.SID); }; function Instructor () {} Instructor.prototype = new Person (); function Student (anSID, aName) { this.prototypeCtor = Person; this.prototypeCtor (aName); this.SID = anSID; }
function Person (aName) { this.personCtor = Person; this.name = aName || ""; } Person.prototype.show = function () { alert (this.name); }; function Student (aName, anSID) { this.studentCtor = Student; this.personCtor (aName); this.SID = anSID || ""; } Student.prototype = new Person (); Student.prototype.show = function () { alert(this.name+" "+this.SID); }; function Instructor () {} Instructor.prototype = new Person (); function Person (aName) { this.name = aName || ""; } Person.prototype.show = function () { alert (this.name); }; Person.prototype.personCtor = Person; function Student (aName, anSID) { this.studentCtor = Student; this.prototype.personCtor (aName); this.SID = anSID || ""; } Student.prototype = new Person (); Student.prototype.show = function () { alert(this.name+" "+this.SID); }; function Instructor () {} Instructor.prototype = new Person ();
function Student (anSID, aName) { var refCount = 1; this.addReference = function () { refCount++; } this.remReference = function () { refCount--; } this.isReferenced = function () { refCount>0; } }
function RefObjectPrototype () { var refCount = 100; this.addReference = function () { refCount++; }; this.remReference = function () { refCount--; }; this.isReferenced = function () { return refCount; }; } function Student (anSID, aName) { this.SID = anSID; this.name = aName; } Student.prototype = new RefObjectPrototype (); Student.prototype.getSID = function () { return this.SID; }; Student.prototype.getName = function () { return this.name; }; function RefObjectPrototype () { this.refCount = 100; this.addReference = function () { this.refCount++; }; this.remReference = function () { this.refCount--; }; this.isReferenced = function () { return this.refCount; }; }
var c1 = new Array (3); var c2 = new Array ("red", "green", "blue"); var c3 = ["red", "green", "blue"]; var c4 = { 0: "red", 1: "blue", 2: "green"}; c1[3] = "black"; // c1.length == 4 c1.length = 10; c1.sort (); // c1 == ["blue", "green", "red"] var cs = c1.join(", "); // cs == "blue, green, red" var c5 = c1.concat ("yellow", "orange"); var c5 = c1.slice (2,4); // c5 == ["blue", "yellow"] c1.push ("new"); var x = c1.pop (); c1.shift ("new"); var x = x1.unshift ();
for (aColour in c1) { document.write (c1[aColour]); } var coll = document.getElementsByName ('x'); for (var i=0; i<coll.length; i++) { ... } var coll = document.getElementsByName ('x'); for (var item in coll) { ... }
<html> <body> <script type="text/javascript"> var x = prompt("Enter a number between 0 and 10:","") try { if(x>10) throw "Err1" else if(x<0) throw "Err2" } catch(er) { if(er=="Err1") alert("Error! The value is too high") else if(er == "Err2") alert("Error! The value is too low") } </script> </body> </html>
location change the document displayed in window focus set input focus to window moveTo change window position on client screen back move to previous page close close the window alert display an alert pop-up prompt prompt the user for input resizeTo change the size of the window setResizable determine whether window can be resized screenX, screenY get window’s position on client screen frames[] get an array of the frames within the window
<html> <body> <script type="text/javascript"> function openWindows () { var winA = window.open ("http://www.yahoo.com", "A", "width=400,height=400"); var winB = window.open ("http://www.igoogle.com", "B", "width=400, height=400, toolbar=no, scrollbars=no"); winB.focus (); winA.moveTo (100,100); winB.moveTo (400,400); } </script> <a href="javascript: openWindows()">Open Windows</a><br> </body> </html>
userAgent identity of the browser platform
plugins[] list of installed browser plugins
<html> <body> <script type="text/javascript"> function about () { document.write ("userAgent: "+navigator.userAgent+"<br>"); document.write ("platform: "+navigator.platform+"<br>"); for (var i=0; i<navigator.plugins.length; i++) { document.write ("plugin: "+navigator.plugins[i].name+"<br>"); } } </script> <a href="javascript: about()">About Me</a> </body> </html>
anchors[] all the anchor objects forms[] all the form objects images[] all the image objects links[] all the area and link objects body body object domain IP domain name of document referrer URL of document that loaded current document URL URL of current document getElementById() locate object by its unique id getElementsByName() list of objects with specified name (as NodeList) write() write HTML (or JavaScript) to document writeln() adds a new-line after writing
className name of element’s CSS class title advisory title style style object innerHTML the HTML inside of the element (e.g., td or a) id unique id name not-necessarily-unique name form containing form (for inputs only)
<body onload='whenLoaded()'> <form name='formOne' action=''> <input id='formOne_one' name='one' type='text' size='20'> </form> <form name='formTwo' action=''> <input id='formTwo_one' name='one' type='text' size='20'> </form> </body> document.forms[0].elements[0].style.borderColor='blue'; document.getElementById('formOne_one').style.borderColor='red'; document.forms[0].formOne_one.style.borderColor='purple';
var ones = document.getElementsByName ('one'); for (var i=0; i<ones.length; i++)
document.getElementsByName('one')[0].style.borderColor='yellow'; document.forms[0].one.style.borderColor='green'; <input id='formOne_one' name='one' type='text' size='20'
color backgroundColor font fontWeight fontSize wordWrap textDecoration posLeft visibility
<html> <body> <script type="text/javascript"> function changeColor (anId,aColor) { document.getElementById (anId).style.color=aColor; } </script> <table><tr><td id="td0">Zero</td><td id="td1">One</td></tr></table> <a href="javascript: changeColor('td1','red')">Set Red</a> <a href="javascript: changeColor('td1','black')">Set Black</a> </body> </html>
<html> <head> <style type='text/CSS'> *.highlight { color: red; } *.noHighlight { color: black; } </style> <script type='text/JavaScript'> var HIGHLIGHT_CLASS = 'highlight'; var NO_HIGHLIGHT_CLASS = 'noHighlight'; function setClassName (anID, aClassName) { document.getElementById (anID).className = aClassName; } </script> </head> <body> <table><tr><td id='td0'>Zero</td><td id='td1'>One</td></tr></table> <a href="javascript: setClassName ('td1',HIGHLIGHT_CLASS)">Set Highlight</a> <a href="javascript: setClassName ('td1',NO_HIGHLIGHT_CLASS)">Clear Highlight</a> </body> </html>
when form is submitted
when element is clicked on
when mouse pointer leaves element
when key is press when element has focus
when key is released when element has focus
when page finishes loading
when value of element changes
when element receives input focus
when element looses input focus
<script type="text/javacript"> function checkBox (row) { document.getElementById('checkbox'+row).checked = true; } </script> ... for ($i=0; $i<mysql_numrows($rows); $i++) { $sid = mysql_result ($rows, $i, 'sid'); $name = mysql_result ($rows, $i, 'name'); echo "<tr>\n"; echo "<td><input id='checkbox$i' "; echo "name='selected[]' type='checkbox' value='$i'>\n"; echo "<td>$sid<input type='hidden' name='sid[]' value='$sid'>\n"; echo "<td><input name='name[]' type='text' size='30' value='$name'"; echo "onchange='checkBox($i)'>\n"; echo "</tr>\n"; }
<script type="text/javascript"> function checkBox (row) { var box = document.getElementById('checkbox'+row); var name = document.getElementById('name'+row); name.disabled = !box.checked; } </script> ... echo "<td><input id='checkbox$i' "; echo "name='selected[]' type='checkbox' value='$i'"; echo " onchange='checkBox($i)'>\n"; echo "<td>$sid<input type='hidden' name='sid[]' value='$sid'>\n"; echo "<td><input id='name$i' name='name[]' type='text' size='30'"; echo " value='$name' disabled='true'>\n";