Programming for WWW (ICE 1338) Lecture #5 Lecture #5 July 7, 2004 In-Young Ko iko.AT. icu.ac.kr Information and Communications University (ICU) iko.AT. icu.ac.kr
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Announcements Submit your homework#1 (a URL or HTML source) Submit your homework#1 (a URL or HTML source) 7 Project teams have been formed 7 Project teams have been formed Project proposal due: Friday July 9 th Project proposal due: Friday July 9 th Please prepare for the presentation of your proposal (5-10 minutes per each team) Please prepare for the presentation of your proposal (5-10 minutes per each team) A sample ‘reference site’ A sample ‘reference site’ /ch23.htm#TheUnofficialJavaScriptResourceCenter /ch23.htm#TheUnofficialJavaScriptResourceCenter /ch23.htm#TheUnofficialJavaScriptResourceCenter /ch23.htm#TheUnofficialJavaScriptResourceCenter
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Homework #2 Due date: July 21st Due date: July 21st Develop a Web wrapper: Wrap any Web site that accepts a query and returns a customized result Develop a Web wrapper: Wrap any Web site that accepts a query and returns a customized result Make a program that accepts a user input, directly connects to the Web site and retrieve results Make a program that accepts a user input, directly connects to the Web site and retrieve results The program must include the query translation and result parsing features The program must include the query translation and result parsing features Submit a report (hard copy) that explains the wrapping mechanism and structure of your Web wrapper program Submit a report (hard copy) that explains the wrapping mechanism and structure of your Web wrapper program
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Review of the Previous Lecture Basic UNIX Commands Basic UNIX Commands More on Web-based Information Integration More on Web-based Information Integration JavaScript (Definition) JavaScript (Definition)
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Contents of Today’s Lecture More on JavaScript (Text Chap. 6 – 8) More on JavaScript (Text Chap. 6 – 8) Document Object Model HTML Document Object Model HTML Data types Data types Operators Operators Pattern matching Pattern matching Event handling Event handling
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University General Syntax of JavaScript Direct embedding of a JavaScript code: Direct embedding of a JavaScript code: -- JavaScript script – -- JavaScript script –</script> Indirect JavaScript specification: Indirect JavaScript specification: Identifier form: begin with a letter or underscore, followed by any number of letters, underscores, and digits Identifier form: begin with a letter or underscore, followed by any number of letters, underscores, and digits Case sensitive Case sensitive Comments: both // and /* … */ Comments: both // and /* … */ Manual: Manual:
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University An Example <html> A switch statement A switch statement <body> <!-- var bordersiz = prompt("Select a table border size \n" + "0 (no border) \n 1 (1 pixel border) \n" + "0 (no border) \n 1 (1 pixel border) \n" + "4 (4 pixel border) \n 8 (8 pixel border) \n"); "4 (4 pixel border) \n 8 (8 pixel border) \n"); switch (bordersize) { case "0": document.write(" "); break; case "0": document.write(" "); break; case "1": document.write(" "); break; case "1": document.write(" "); break; case "4": document.write(" "); break; case "4": document.write(" "); break; case "8": document.write(" "); break; case "8": document.write(" "); break; default: document.write("Error - invalid choice: ", bordersize, " "); default: document.write("Error - invalid choice: ", bordersize, " ");} document.write(" Sample Table "); document.write(" ", " American Conference ", " National Conference ", " ", …); --></script></body></html> AW lecture notes
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Document Object Model HTML “A platform- and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure and style of documents” <html><head> My Document My Document </head><body> Header Header Paragraph Paragraph </body></html> var header = document.getElementsByTagName("H1").item(0); header.firstChild.data = "A dynamic document";
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Document Object Model HTML (cont.) Under development by w3c since the mid-90s Under development by w3c since the mid-90s DOM 0 is supported by all JavaScript browsers DOM 0 is supported by all JavaScript browsers DOM 2 is the latest approved standard DOM 2 is the latest approved standard Nearly completely supported by NS6 Nearly completely supported by NS6 IE6’s support is lacking some important things IE6’s support is lacking some important things The DOM is an abstract model that defines the interface between HTML documents and application programs The DOM is an abstract model that defines the interface between HTML documents and application programs It is an OO model - document elements are objects It is an OO model - document elements are objects A language that supports the DOM must have a binding to the DOM constructs A language that supports the DOM must have a binding to the DOM constructs In the JavaScript binding, HTML elements are represented as objects and element attributes are represented as properties In the JavaScript binding, HTML elements are represented as objects and element attributes are represented as properties e.g., e.g., AW lecture notes
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University DOM Specification e.g., e.g.,
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University DOM Element Access in JavaScript </form> 1.DOM address: document.forms[0].element[0] Problem: A change in the document could invalidate this address Problem: A change in the document could invalidate this address 2.Element names e.g., e.g., document.myForm.pushMe document.myForm.pushMe Requires the element and all of its ancestors (except body) to have name attributes Requires the element and all of its ancestors (except body) to have name attributes Problem: Strict standard does not allow form elements to have names Problem: Strict standard does not allow form elements to have names 3.getElementById Method e.g., e.g., document.getElementById("pushMe") document.getElementById("pushMe") AW lecture notes
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Screen Outputs The model for the browser display window is the Window object The model for the browser display window is the Window object Properties: Properties: window.document window.document window.frames window.frames window.screenLeft window.screenLeft window.screenTop window.screenTop … Methods: Methods: alert: alert: confirm confirm prompt prompt
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Primitive Data Types Primitive Data Types: number, string, boolean, undefined or null Primitive Data Types: number, string, boolean, undefined or null Wrapper classes: Number, String, Boolean Wrapper classes: Number, String, Boolean Boolean values: true (non-zero, non-empty string) and false (otherwise) Boolean values: true (non-zero, non-empty string) and false (otherwise) Null value: null Null value: null Undefined value: undefined, NaN Undefined value: undefined, NaN All numeric values are stored in double- precision floating point All numeric values are stored in double- precision floating point String literals are delimited by either ' or " String literals are delimited by either ' or " Can include escape sequences (e.g., \t) Can include escape sequences (e.g., \t) In the cases of Number and String, primitive values can be treated as if they were objects In the cases of Number and String, primitive values can be treated as if they were objects
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Variables Variables are dynamically typed – any variable can be used for anything (primitive value or reference to any object) Variables are dynamically typed – any variable can be used for anything (primitive value or reference to any object) The interpreter determines the type of a particular occurrence of a variable The interpreter determines the type of a particular occurrence of a variable Variables can be either implicitly or explicitly declared Variables can be either implicitly or explicitly declared e.g.1, sum = 0; today = “Wed”; flag = false; e.g.1, sum = 0; today = “Wed”; flag = false; e.g.2, var sum = 0, today = “Wed", flag; e.g.2, var sum = 0, today = “Wed", flag;
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Operators and Statements Numeric, Boolean, relational and string operators are similar to C-based languages Numeric, Boolean, relational and string operators are similar to C-based languages Length of a string: string.length Length of a string: string.length The typeof operator: The typeof operator: Returns "number", "string", or "boolean" for primitives Returns "number", "string", or "boolean" for primitives Returns "object" for objects and null Returns "object" for objects and null Control statements are similar to Java – if, switch, while, for, do Control statements are similar to Java – if, switch, while, for, do
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Numeric Operations All numeric operations are in double precision All numeric operations are in double precision The Math Object The Math Object Methods: floor, round, max, min, sin, etc. Methods: floor, round, max, min, sin, etc. The Number Object The Number Object Properties: MAX_VALUE, MIN_VALUE, NaN, POSITIVE_INFINITY, NEGATIVE_INFINITY, PI Properties: MAX_VALUE, MIN_VALUE, NaN, POSITIVE_INFINITY, NEGATIVE_INFINITY, PI Methods: toString, valueOf, toFixed(fractNo) Methods: toString, valueOf, toFixed(fractNo) e.g., tofixed(2) returns "0.13“ An operation that creates overflow returns NaN An operation that creates overflow returns NaN NaN is not == to any number, not even itself NaN is not == to any number, not even itself Test for it with isNaN(num) Test for it with isNaN(num)
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Data Type Coercions Type Coercions: Implicit type conversion between data types due to compatibility Type Coercions: Implicit type conversion between data types due to compatibility e.g., 6.23, 5 + “6” + 7 “567”, 5 == “5” true 5 == “5” true Strict relational operators that disallow type coercions: === and !=== Strict relational operators that disallow type coercions: === and !=== Operators (other than +, ===, and !===) coerce strings to numbers – e.g., 5 – “6” + 7 6 Operators (other than +, ===, and !===) coerce strings to numbers – e.g., 5 – “6” + 7 6 Conversions from strings to numbers that do not work return NaN Conversions from strings to numbers that do not work return NaN Conversion functions: parseInt(string) and parseFloat(string) Conversion functions: parseInt(string) and parseFloat(string)
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Object Creation and Modification Basic Object Creation Basic Object Creation var myObj = new Object(); var myObj = new Object(); The new object has no properties – a blank object The new object has no properties – a blank object Properties can be added to an object, any time Properties can be added to an object, any time e.g., myObj.color = “blue”; myObj.flag = false; Properties can be accessed in array notation Properties can be accessed in array notation e.g., var property1 = myObj[“color"]; If you try to access a property that does not exist, you get undefined If you try to access a property that does not exist, you get undefined Properties can be deleted with delete Properties can be deleted with delete e.g., delete myObj.flag; Properties can iterated Properties can iterated e.g., for (var prop in myObj) document.write(myObj[prop] + " "); document.write(myObj[prop] + " "); AW lecture notes
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Arrays Array length is dynamic Array length is dynamic Array objects can be created in two ways, with new, or by assigning an array literal Array objects can be created in two ways, with new, or by assigning an array literal var myList = new Array(24, "bread", true); var myList2 = [24, "bread", true]; var myList3 = new Array(24); The length of an array is the highest subscript to which an element has been assigned, plus 1 The length of an array is the highest subscript to which an element has been assigned, plus 1 myList[122] = "bitsy"; // length is 123 You can set the array length - myList.length = 150; You can set the array length - myList.length = 150; Only assigned elements take space Only assigned elements take space Array methods: join, concat, sort, reverse, … Array methods: join, concat, sort, reverse, … AW lecture notes
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Functions function function_name([formal_parameters]) { -- body – -- body – } If there is no return, or if return has no parameter, undefined is returned If there is no return, or if return has no parameter, undefined is returned Functions are objects, so variables that reference them can be treated as other object references (can be passed as parameters, assigned to variables, and be elements of an array) Functions are objects, so variables that reference them can be treated as other object references (can be passed as parameters, assigned to variables, and be elements of an array) e.g., If fun is the name of a function, ref_fun = fun; /* Now ref_fun is a reference to fun */ ref_fun = fun; /* Now ref_fun is a reference to fun */ ref_fun(); /* A call to fun */ ref_fun(); /* A call to fun */ All function definitions are in the head of the HTML document, and all calls are in the body All function definitions are in the head of the HTML document, and all calls are in the body AW lecture notes
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Functions (cont.) All variables that are either implicitly declared or explicitly declared outside functions are global All variables that are either implicitly declared or explicitly declared outside functions are global Variables explicitly declared in a function are local Variables explicitly declared in a function are local Parameters are passed by value Parameters are passed by value There is no type checking of parameters, nor is the number of parameters checked (excess actual parameters are ignored, excess formal parameters are set to undefined) There is no type checking of parameters, nor is the number of parameters checked (excess actual parameters are ignored, excess formal parameters are set to undefined) All parameters are sent through a property array, arguments, which has the length property All parameters are sent through a property array, arguments, which has the length property
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University A Function Example <html> Parameters Parameters <!-- function params(a, b) { document.write("a = " + a + ", b = " + b + " "); document.write("a = " + a + ", b = " + b + " "); document.write(“Passed ", arguments.length, document.write(“Passed ", arguments.length, " parameter(s) "); " parameter(s) "); document.write("Parameter values are: "); document.write("Parameter values are: "); for (var arg = 0; arg < arguments.length; arg++) for (var arg = 0; arg < arguments.length; arg++) document.write(arguments[arg], " "); document.write(arguments[arg], " "); document.write(" "); document.write(" ");} // --> </script></head><body> params("Mozart"); params("Mozart", "Beethoven"); params("Mozart", "Beethoven", "Tchaikowsky"); </script></body></html> AW lecture notes
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Constructors Used to initialize objects, but actually create the properties Used to initialize objects, but actually create the properties function plane(newMake, newModel, newYear){ function plane(newMake, newModel, newYear){ this.make = newMake; this.make = newMake; this.model = newModel; this.model = newModel; this.year = newYear; this.year = newYear; } a myPlane = new plane("Cessna", "Centurnian", "1970"); Can also have method properties Can also have method properties function displayPlane() { document.write("Make: ", this.make, " "); document.write("Make: ", this.make, " "); document.write("Model: ", this.model, " "); document.write("Model: ", this.model, " "); document.write("Year: ", this.year, " "); document.write("Year: ", this.year, " "); } this.display = displayPlane; this.display = displayPlane; AW lecture notes
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Pattern Matching Patterns are based on those of Perl Patterns are based on those of Perl Pattern-matching operations are methods of the String object Pattern-matching operations are methods of the String object search(pattern): Returns the position in the object string of the pattern; returns -1 if it fails search(pattern): Returns the position in the object string of the pattern; returns -1 if it fails var str = "Gluckenheimer"; var position = str.search(/n/); /* position is now 6 */ replace(pattern, string): Finds a substring that matches the pattern and replaces it with the string replace(pattern, string): Finds a substring that matches the pattern and replaces it with the string var str = "Some rabbits are rabid"; str.replace(/rab/gi, "tim"); str is now "Some timbits are timid" $1 and $2 are both set to "rab“ Regular Expressions: Regular Expressions: AW lecture notes
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University A Pattern Matching Example <html> Zip code tester Zip code tester function tst_zip_code(num) { var ok = num.search(/\d{3}-\d{3}/); var ok = num.search(/\d{3}-\d{3}/); if (ok != 0) if (ok != 0) alert("An invalide zip code: " + num); alert("An invalide zip code: " + num);} // --> </script></head><body><form> </form></body></html>
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Events and Event Handling An event is a notification that something specific has occurred, either with the browser or an action of the browser user An event is a notification that something specific has occurred, either with the browser or an action of the browser user An event handler is a script that is implicitly executed in response to the appearance of an event An event handler is a script that is implicitly executed in response to the appearance of an event The process of connecting an event handler to an event is called registration The process of connecting an event handler to an event is called registration HTML Events: sevents1/jsevents1.html HTML Events: sevents1/jsevents1.html sevents1/jsevents1.html sevents1/jsevents1.html
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Events Mouse EventDescription onmousedownA mouse button has been pressed onmousemoveThe mouse has been moved onmouseoutThe mouse pointer has left an element onmouseoverThe mouse pointer has entered an element onmouseupA mouse button has been released onclickA mouse button has been clicked ondblclick A mouse button has been double-clicked EventDescription onblurAn element loses focus onerrorAn error occurs onfocusAn element gains focus onloadThe document has completely loaded onresetA form reset command is issued onscrollThe document is scrolled onselectThe selection of element has changed onsubmitA form submit command is issued
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Event Handling Event handlers can be specified in two ways: 1.By assigning the event handler script to an event tag attribute e.g., e.g., 2.Event handlers can be specified by assigning them to properties of the JavaScript objects associated with the HTML elements If the event handler is a function, just assign its name to the property If the event handler is a function, just assign its name to the property e.g., document.myForm.elements[0].onclick = myHandler; No way to use parameters No way to use parameters
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University Event Handling (cont.) The focus function puts the element in focus, which puts the cursor in the element The focus function puts the element in focus, which puts the cursor in the element e.g., document.getElementById("phone").focus(); e.g., document.getElementById("phone").focus(); The select function highlights the text in the element The select function highlights the text in the element
July 7, Programming for WWW (Lecture#5) In-Young Ko, Information Communications University JavaScript Reference JavaScript Guide: JavaScript Guide: JavaScript Reference Manual: JavaScript Reference Manual: DOM HTML Specification: DOM HTML Specification: Regular Expressions: Regular Expressions: HTML Events: HTML Events: