ICE0534 – Web-based Software Development ICE1338 – Programming for WWW Lecture #4 Lecture #4 In-Young Ko iko.AT. icu.ac.kr iko.AT. icu.ac.kr Information and Communications University (ICU) - Summer

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Announcements Check the course schedule for the presentation- topic assignment Check the course schedule for the presentation- topic assignment Your Web server accounts have been created Your Web server accounts have been created Server Address: icu01.icu.ac.kr ( ) Server Address: icu01.icu.ac.kr ( ) User ID: Replace the fist digit of your student ID with ‘s’ (ex :  s ) User ID: Replace the fist digit of your student ID with ‘s’ (ex :  s ) Create ‘public_html’ under your home directory if it doesn’t exist Create ‘public_html’ under your home directory if it doesn’t exist Set the permission of the ‘public_html’ directory to 755 Set the permission of the ‘public_html’ directory to 755 Submit the softcopy of your homework to inyoungko.AT. gmail.com Submit the softcopy of your homework to inyoungko.AT. gmail.com

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Announcements The term-project proposal is due by Thursday, July 14 th The term-project proposal is due by Thursday, July 14 th The Ph.D. lecture proposal is due by Thursday, July 14 th The Ph.D. lecture proposal is due by Thursday, July 14 th Include the title and abstract of the lecture in your proposal Include the title and abstract of the lecture in your proposal

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Project Teams Team #1 Team #1 Janarbek, Sun Peng, Fransisco Rojas Janarbek, Sun Peng, Fransisco Rojas Dongpyo Rhee, Junho Suh Dongpyo Rhee, Junho Suh Team #2 Team #2 Woo-hyuk Jang, Sung-joon Park, Jong-ha Jung Woo-hyuk Jang, Sung-joon Park, Jong-ha Jung Jong-uk Lee, Enkhbold Nyamsuren Jong-uk Lee, Enkhbold Nyamsuren Team #3 Team #3 Young-kyu Park, Eunchae Yoon Young-kyu Park, Eunchae Yoon Ho-gun Park, Hyunho Park, Young-jin Ro Ho-gun Park, Hyunho Park, Young-jin Ro

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Project Teams Team #4 Team #4 Hyung-min Koo, Yu-sik Park, Jong-su Bae Hyung-min Koo, Yu-sik Park, Jong-su Bae Sunghwan Kim, Sungchul Lee Sunghwan Kim, Sungchul Lee Team #5 Team #5 Changsup Keum, Shin-Young Ahn, Mi-Yul Park, Chan- Kyu Park, Ku-Yul Noh Changsup Keum, Shin-Young Ahn, Mi-Yul Park, Chan- Kyu Park, Ku-Yul Noh Team #6: Bang Team #6: Bang Jung-Wook Bang, Hee-Won Lee, Jong-Gul Park, Jong- gun Kim, Jae-Ha Song Jung-Wook Bang, Hee-Won Lee, Jong-Gul Park, Jong- gun Kim, Jae-Ha Song Team #7: Joy Team #7: Joy Changki Kim, Jungho Kim, Sunah Lee, Changsun Song Changki Kim, Jungho Kim, Sunah Lee, Changsun Song

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Last Lecture Cascade Style Sheets (CSS) Cascade Style Sheets (CSS) Concepts and Examples of Web-based Information Integration Concepts and Examples of Web-based Information Integration Web Wrappers Web Wrappers

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University This Lecture Dynamic Web Documents Dynamic Web Documents JavaScript JavaScript Technology Reviews Technology Reviews DHTML [u1: Sungchul Lee] DHTML [u1: Sungchul Lee] VBScript [u2: Sunghwan Kim] VBScript [u2: Sunghwan Kim] Technology Surveys Technology Surveys Languages for dynamic Web documents [g1: Francisco A. Rojas] Languages for dynamic Web documents [g1: Francisco A. Rojas] Web browsers and authoring tools [g2: Jonggun Gim] Web browsers and authoring tools [g2: Jonggun Gim]

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Dynamic Web Documents Weather Alert Stock Watch

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Dynamic Web Documents

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Dynamic Web Web pages that update their content dynamically based on changing information and/or a user’s inputs Web pages that update their content dynamically based on changing information and/or a user’s inputs Client-side Requirements for Dynamic Web Client-side Requirements for Dynamic Web Programming Capability in Web pages Programming Capability in Web pages Regularly pulling new content from the server Regularly pulling new content from the server Updating the content presentation based on new content Updating the content presentation based on new content Interacting with users Interacting with users Server-side Requirements Server-side Requirements Dynamic Content Generation: Creating Web pages on the fly Dynamic Content Generation: Creating Web pages on the fly

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Languages for Dynamic Web Client-side Languages for Programming Capability Client-side Languages for Programming Capability JavaScript JavaScript VBScript VBScript Java Applets & Plug-ins Java Applets & Plug-ins Server-side Languages for Dynamic Content Generation Server-side Languages for Dynamic Content Generation CGI (Common Gateway Interface) – e.g., Perl CGI (Common Gateway Interface) – e.g., Perl JSP (Java Server Pages) JSP (Java Server Pages) ASP (Active Server Pages) ASP (Active Server Pages) PHP (PHP Hypertext Preprocessor) PHP (PHP Hypertext Preprocessor)

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University Dynamic Web Architecture Web Client HTML Forms JavaScript Applets JDBC, Perl/MySQL, PHP/MySQL Web Server CGI Programs (Perl, PHP) Servlets (JSP) JDBC, Perl/MySQL, PHP/MySQL DB Server

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University JavaScript The goal of JavaScript is to provide programming capability at both the client and server ends of a Web connection The goal of JavaScript is to provide programming capability at both the client and server ends of a Web connection Originally developed by Netscape, as LiveScript Originally developed by Netscape, as LiveScript Became a joint venture of Netscape and Sun in 1995, renamed JavaScript Became a joint venture of Netscape and Sun in 1995, renamed JavaScript Now standardized by the European Computer Manufacturers Association as ECMA-262 (also ISO 16262) Now standardized by the European Computer Manufacturers Association as ECMA-262 (also ISO 16262) User interactions with HTML documents in JavaScript use the event-driven model of computation User interactions with HTML documents in JavaScript use the event-driven model of computation

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University <html> ICE1338 ICE1338 <!-- <!-- p { font-size: 12pt; color: blue; background-color: yellow } p { font-size: 12pt; color: blue; background-color: yellow } h2, h3 { font-size: 16pt; color: red; font-style: oblique } h2, h3 { font-size: 16pt; color: red; font-style: oblique } --> --> function displayDate() { function displayDate() { alert("Today's date is: " + alert("Today's date is: " + new Date() + "!!"); new Date() + "!!"); } <br/> Programming for WWW Programming for WWW A Popup Window

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University DHTML (Dynamic HTML) A combination of HTML, CSS, and JavaScript A combination of HTML, CSS, and JavaScript Use the technologies to make Web documents dynamic (animated) and more interactive Use the technologies to make Web documents dynamic (animated) and more interactive DHTML is not a W3C standard, but a marketing term used by Netscape and Microsoft DHTML is not a W3C standard, but a marketing term used by Netscape and Microsoft

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University JavaScript vs. Java Both share similar syntax Both share similar syntax JavaScript is a scripting language, not a programming language JavaScript is a scripting language, not a programming language JavaScript is an interpreter-based language JavaScript is an interpreter-based language JavaScript is dynamically typed JavaScript is dynamically typed JavaScript does not support class-based inheritance JavaScript does not support class-based inheritance JavaScripts are usually embedded in HTML documents JavaScripts are usually embedded in HTML documents

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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:

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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";

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and Communications University DOM Specification e.g., e.g.,

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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 Earthquake Example Earthquake Example

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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;

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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)

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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)

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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>

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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

Summer ICE 0534/ICE1338 – WWW © In-Young Ko, Information and 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: