CICS 515 a Internet Programming Week 3. Mike Feeley

Size: px

Start display at page:

Download "CICS 515 a Internet Programming Week 3. Mike Feeley"

Elisabeth Marshall
5 years ago
Views:

1 CICS 515 a Internet Programming Week 3 Mike Feeley

2 JavaScript

3 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> in separate file blah.html: <head> <script language="javascript" src="blah.js"></script> </head> blah.js: document.write ("Hello from separate file JavaScript.<br>");

4 JavaScript language constructs variables, objects and arrays functions conditionals loops exceptions Document Object Model (DOM) events

5 Variables in JavaScript dynamically typed type determined at runtime when value assigned any variable can store any value (of any type) types primitive types - Number, String, Boolean, Undefined, Null (wrapper classes have same name) - stored by value, like Java object references declaration no static types, so declare with var scope and lifetime 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

6 Dynamically typed objects fundamentally, an object is a collection of named properties referenced by a variable no class declaration --- classes are static types, Javascript has dynamic types creating an object new creates a new object reference add properties to object by assigning them values astudent = new Object (); astudent.sid = 10; astudent.name = 'First Student'; or using an initializer astudent = { sid: 10, name: 'First Student' ; you can add new properties to any object at any time document.mynewproperty = 48;

7 First-class functions one type of object property is a function first-class means that functions are also data members they can be assigned or re-assigned at runtime and/or passed as arguments to functions etc. declaring a function assign a function implementation to an object property name assigned or re-assigned dynamically, at runtime astudent.getsid = function () { return this.sid; ; writing a function use this. prefix to refer to object s properties (unlike Java, this. is required) invoking a function on an object invocation is just like Java ansid = astudent.getsid ();

8 Shared object properties terminology in Java an object is an instance of a class in JavaScript an object is an instance of constructor function and a shared prototype common constructor function name of function becomes name of the shared properties (like the class) function Student (ansid, aname) { this.sid = ansid; this.name = aname; this.getsid = function () { return this.sid; create a new instance by applying new to function name astudent = new Student (10,"First Student"); creates a copy of each property in every instance astudent = new Object(); astudent.student(10, First Student );

9 common prototype property of constructor function assigned to object implicitly when it is created so, every object created by a particular constructor shares the same prototype object function A () { A.prototype.x=1; prototype delegation when JavaScript looks for a property when accessed look in object, if not found look in prototype updating a delegated property, creates a local copy in object based on prototype s value 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); what are values of a0.x, a1.x and a2.x?

10 Method declaration using prototypes share method among objects created same constructor function Student (ansid, aname) { this.sid = ansid; this.name = aname; Student.prototype.getSID = function () { return this.sid; ; use static initializer to create multiple prototype properties function Student (ansid, aname) { this.sid = ansid; this.name = aname; Student.prototype = { getsid: function () { return this.sid;, getname: function () { return this.name;

Delegation using prototypes delegation is key feature object-oriented inheritance in Java, subclass delegates to its superclass in JavaScript, object delegates to its prototype setting up the objects

11 Delegation using prototypes delegation is key feature object-oriented inheritance in Java, subclass delegates to its superclass in JavaScript, object delegates to its prototype setting up the objects for delegation 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 (); calling delegate s constructor function Student (ansid, aname) { this.prototypector = Person; this.prototypector (aname); this.sid = ansid;

or better... function Person (aname) { this.personctor = Person; this.name = aname ""; Person.prototype.show = function () { alert (this.name); ; function Student (aname, ansid) { this.

12 or better... 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 ();

13 Access-level modifiers in JavaScript key to modular design is encapsulation hiding some details of the implementation of an abstraction behind a public interface access-level modifiers are langauge features that implement encapsulation in Java: public, private, protected and package in JavaScript, support for access levels is poor public - any property assigned to an object or its prototype directly is public private - local variables created in object s constructor - visible to functions assigned to object, but not to is prototype s functions function Student (ansid, aname) { var refcount = 1; this.addreference = function () { refcount++; this.remreference = function () { refcount--; this.isreferenced = function () { refcount>0;

14 Inheritance and access limits don t combine well why doesn t this work? 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; ; one copy per call to RefObjectPrototype() not one per instance prototype instance properties must be be public function RefObjectPrototype () { this.refcount = 100; this.addreference = function () { this.refcount++; ; this.remreference = function () { this.refcount--; ; this.isreferenced = function () { return this.refcount; ;

15 Arrays in JavaScript declaring and initializing 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"; getting (and setting) length c1[3] = "black"; // c1.length == 4 c1.length = 10; sorting, converting to a string 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"] stacks and queues c1.push ("new"); var x = c1.pop (); c1.shift ("new"); var x = x1.unshift ();

16 Loops and conditionals in JavaScript mainly like Java iterative with for (;;) { logical with while () { and do { while () exiting current iteration with continue and entire look with break conditionals with if () { { and switch () { iterating over collection for (variable in object) {... object[variable]... for (acolour in c1) { document.write (c1[acolour]); does not work with DOM NodeLists (more shortly) var coll = document.getelementsbyname ('x'); for (var item in coll) {... regular for loops always work var coll = document.getelementsbyname ('x'); for (var i=0; i<coll.length; i++) {...

17 exceptions throw e statement control is transferred to enclosing catch clause, if any any object (or value) can be used as e, the exception try { catch (e) { statement handles any exception thrown in try block e is bound to the object that was thrown unlike Java (or PHP), catch does not match an exception type <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>

18 JavaScript Document Object Model (DOM) defines a object/event framework for elements of HTML page objects give JavaScript access to HTML objects events give HTML access to JavaScript functions the main standard objects are window - browser window and all of its content navigator - browser navigation document - document in a browser window

19 The window object in Javascript top-level object in JavaScript window. often left out when accessing window properties (e.g., alert) some useful elements of the window object open location focus moveto back close alert prompt resizeto setresizable screenx, screeny frames[] open a new window for URL change the document displayed in window set input focus to window change window position on client screen move to previous page close the window display an alert pop-up prompt the user for input change the size of the window determine whether window can be resized get window s position on client screen get an array of the frames within the window

20 <html> <body> <script type="text/javascript"> function openwindows () { var wina = window.open (" "A", "width=400,height=400"); var winb = window.open (" "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> notice also how to call JavaScript from a hyperlink

21 The navigator object in JavaScript some useful elements of the navigator object useragent identity of the browser platform operating system 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>

22 The document object in JavaScript collections anchors[] forms[] images[] links[] all the anchor objects all the form objects all the image objects all the area and link objects some properties body domain referrer URL body object IP domain name of document URL of document that loaded current document URL of current document some methods 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

23 Element objects in Javascript each type of element has a set of properties here are some that are common to most elements classname title style name of element s CSS class advisory title style object innerhtml the HTML inside of the element (e.g., td or a) id name form unique id not-necessarily-unique name containing form (for inputs only)

24 Finding an element s object <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> by reference from another object HTML documnet is a tree of objects rooted at the document object by ID document.forms[0].elements[0].style.bordercolor='blue'; unique among all elements in document document.getelementbyid('formone_one').style.bordercolor='red'; or with some JavsScript syntaxic sugar document.forms[0].formone_one.style.bordercolor='purple';

25 by Name need not be unique, access all elements with name var ones = document.getelementsbyname ('one'); for (var i=0; i<ones.length; i++) ones[i].style.bordercolor='orange'; access first with that name, or if name is unique document.getelementsbyname('one')[0].style.bordercolor='yellow'; or access first with syntatic sugar document.forms[0].one.style.bordercolor='green'; as this in HTML DOM event handler (more shortly) <input id='formone_one' name='one' type='text' size='20' onclick='this.style.bordercolor="grey"'>

26 The style and classname members used to change the display format of an element document.getelementbyid ( box100 ).style.color = blue ; document.getelementbyid ( box100 ).classname = moodybox ; generally using classname is better for same reason that CSS formatting is better than HTML-embedded formatting what were those reasons again? some of the properties of the style object color backgroundcolor font fontweight fontsize wordwrap textdecoration posleft visibility

27 <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>

28 <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>

29 DOM prototype objects like other objects, DOM objects have prototypes too naming convention HTML + name-of-element + Element.prototype e.g., HTMLInputElement.prototype use this to add a property to all objects of some type e.g., add new method to Input DOM object HTMLInputElement.prototype.newMethod = function (arg) {... ;

30 Events HTML elements can define JavaScript event handlers here are some events than can have handlers onsubmit onclick when form is submitted when element is clicked on onmouseover when mouse pointer enters element onmouseout onkeydown onkeyup onload onchange onfocus onblur 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

31 For example set select box when name changes... <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";

32 or disable name input until select box is checked <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";

CICS 515 b Internet Programming Week 2. Mike Feeley

CICS 515 b Internet Programming Week 2 Mike Feeley 1 Software infrastructure stuff MySQL and PHP store files in public_html run on remote.mss.icics.ubc.ca access as http://ws.mss.icics.ubc.ca/~username/...