XP Java Script Source from

XP Basic Tags (2) o Links: … o Images: n an empty tag o Tables n Use an editor! o Forms: later 11

XP More HTML o Learn on your own o You may never code in “raw” HTML o You may need to tweak HTML files created by a tool o You will need to understand HTML to code in Java. Script etc. o You will need to understand HTML to know limitations on how docs on the web can be structured 12

XP Document Object Model (DOM) o An model for describing HTML documents (and XML documents) n A standard (ok, standards) n Independent of browser, language o (ok, mostly) n A common set of properties/methods to access everything in a web document o APIs in Java. Script, for Java, etc. 13

XP DOM o You get anything you want from… o More info: http: //en. wikipedia. org/wiki/Document_O 14 bject_Model

document. write('This is" src="https://present5.com/presentation/6c4440524ccb99122e84058ce9e65d75/image-15.jpg" alt="XP Java. Script Statements Note the symbol for line continuation

document. write('This" src="https://present5.com/presentation/6c4440524ccb99122e84058ce9e65d75/image-16.jpg" alt="XP Java. Script Statements HTML written inside Java. Script

My Page My Page XP Java. Script Statements

My Page My Page Java. Script written An Event

window. prompt('Enter your Another event name: ', '');" src="https://present5.com/presentation/6c4440524ccb99122e84058ce9e65d75/image-18.jpg" alt="XP Example Statements

XP HTML Forms and Java. Script o Java. Script is very good at processing user input in the web browser o HTML elements receive input o Forms and form elements have unique names n Each unique element can be identified n Uses Java. Script Document Object Model (DOM)

Name: Phone: " src="https://present5.com/presentation/6c4440524ccb99122e84058ce9e65d75/image-20.jpg" alt="XP Naming Form Elements in HTML Name: Phone: " /> XP Naming Form Elements in HTML Name: Phone: Email:

XP Forms and Java. Script document. formname. elementname. value Thus: document. addressform. yourname. value document. addressform. phone. value document. addressform. email. value

Enter your name: Enter your name: XP Using Form Data Personalising an alert box

XP Tips o Check your statements are on one line o Check your " and ' quotes match o Take care with capitalisation o Lay it out neatly - use tabs o Remember in the workbook denotes a continuing line o Be patient esentation slides adapted from scom. hud. ac. uk/scomsjw/Web%20 Authoring%20 Module/Lecture%20 Slides/introjs. ppt

XP W 3 C Standards o o o XML, XHTML CSS, XSLT DOM ECMAScript etc 24

XP Java. Script o An example of a “scripting” langauge that is embedded in HTML documents n The browser’s display engine must distinguish from HTML and Script statements o Others like this: n PHP (later in the course) 25

XP History o Java. Script created by Netscape o JScript created by Microsoft o IE and Netscape renderings are slightly different o Standardized by European Computer Manufacturers Association (ECMA) o http: //www. ecma-international. org/publications /standards/Ecma-262. htm 26

XP General Format n n n n . . . page body here: text, forms, tables. . . more Java. Script if needed. . . onload, onclick, etc. commands here 27

XP Characteristics o o o o Case sensitive Object oriented Produces an HTML document Dynamically typed Standard operator precedence Overloaded operators Reserved words 28

XP Characteristics o o o Division with / is not integer division Modulus (%) is not an integer operator 5 / 2 yields 2. 5 5. 1 / 2. 1 yields 2. 4285714284 5 % 2 yields 1 5. 1 % 2. 1 yields 0. 899999995 29

XP Characteristics o o o o " and ' can be used in pairs Scope rules for variables Strings are very common data types Rich set of methods available Arrays have dynamic length Array elements have dynamic type Arrays are passed by reference Array elements are passed by value 30

XP Motivation for Java. Script o Netscape, 1995 n Netscape > 90% browser market share n Opportunity to do “HTML scripting language” n Brendan Eich I hacked the JS prototype in ~1 week in May And it showed! Mistakes were frozen early - ICFP talk, 2006 Rest of year spent embedding in browser o Common uses of Java. Script include: n n Form validation Page embellishments and special effects Dynamic content manipulation Emerging Web 2. 0: client functionality implemented at client

XP Example 1: simple calculation …

…

XP Example 2: browser events Mouse event causes page-defined function to be called … … Other events: on. Load, on. Mouse. Move, on. Key. Press, on. Un. Load

XP Example 3: page manipulation o Some possibilities n n create. Element(element. Name) create. Text. Node(text) append. Child(new. Child) remove. Child(node) o Example: Add a new list item: var list = document. get. Element. By. Id(‘list 1') var newitem = document. create. Element('li') var newtext = document. create. Text. Node(text) list. append. Child(newitem) newitem. append. Child(newtext) This example uses the browser Document Object Model (DOM). For now, we will focus on Java. Script as a language, not its use in the browser.

XP Design goals o Brendan Eich’s 2006 ICFP talk n Make it easy to copy/paste snippets of code n Tolerate “minor” errors (missing semicolons) n Simplified onclick, onmousedown, etc. , event handling, inspired by Hyper. Card n Pick a few hard-working, powerful primitives o First class functions for procedural abstraction o Objects everywhere, prototype-based n Leave all else out!

XP Language basics o Java. Script is case sensitive n HTML is not case sensitive; on. Click, ONCLICK, … are HTML o Statements terminated by returns or semi-colons (; ) n x = x+1; same as x = x+1 n Semi-colons can be a good idea, to reduce errors o “Blocks” n Group statements using { … } n Not a separate scope, unlike other languages (see later slide) o Variables n Define a variable using the var statement n Define implicitly by its first use, which must be an assignment o Implicit definition has global scope, even if it occurs in nested scope?

XP Tutorial Objectives o o o o Understand basic Java. Script syntax Create an embedded and external script Work with variables and data Work with data objects and extract values from dates Work with expressions and operators Create and call a Java. Script function Work with arrays and conditional statements Learn about program loops 37

XP Server-Side Programs o a user must be connected to the Web server to run the server-side script o only the programmer can create or alter the script o the system administrator has to be concerned about users continually accessing the server and potentially overloading the system 38

XP Client-Side Programs o solve many of the problems associated with server-side scripts o can be tested locally without first uploading it to a Web server o are likely to be more responsive to the user o can never completely replace server-side scripts 39

XP Introduction to Java. Script is an interpreted programming or script language from Netscape. o Java. Script is used in Web site development to such things as: § automatically change a formatted date on a Web page § cause a linked-to-page to appear in a popup window § cause text or a graphic image to change during a mouse rollover 40

XP Java vs. Java. Script o Requires the JDK to create the applet o Requires a Java virtual machine to run the applet o Applet files are distinct from the XHTML code o Source code is hidden from the user o Programs must be saved as separate files and compiled before they can be run o Programs run on the server side o Requires a text editor o Required a browser that can interpret Java. Script code o Java. Script can be placed within HTML and XHTML o Source code is made accessible to the user o Programs cannot write content to the hard disk o Programs run on the client side 41

XP ECMAScript o The responsibility for the development of a scripting standard has been transferred to an international body called the European Computer Manufacturers Association (ECMA). o The standard developed by the ECMA is called ECMAScript, though browsers still refer to it as Java. Script. o The latest version is ECMA-262, which is supported by the major browsers. 42

XP Other Client-side Languages o Internet Explorer supports JScript. o JScript is identical to Java. Script, but there are some Java. Script commands not supported in JScript, and vice versa. o Other client-side programming languages are also available to Web page designers, such as the Internet Explorer scripting language, VBScript. 43

Example of Web Site using Java. Script XP 44

XP Writing a Java. Script Program o The Web browser runs a Java. Script program when the Web page is first loaded, or in response to an event. o Java. Script programs can either be placed directly into the HTML file or they can be saved in external files. n placing a program in an external file allows you to hide the program code from the user n source code placed directly in the HTML file can be viewed by anyone 45

XP Writing a Java. Script Program o A Java. Script program can be placed anywhere within the HTML file. o Many programmers favor placing their programs between tags in order to separate the programming code from the Web page content and layout. o Some programmers prefer placing programs within the body of the Web page at the location where the program output is generated and displayed. 46

XP Using the o To access an external script, use: 47

XP Comments o The syntax for a single-line comment is: // comment text o The syntax of a multi-line comment is: /* comment text covering several lines */ 48

XP Hiding Script from Older Browsers o You can hide the script from these browsers using comment tags: o When a Web browser that doesn’t support scripts encounters this code, it ignores the document. write("Today is "+This. Month+"/"+ This. Day+"/"+This. Year+" "); document. write("Only "+Days. Left+ " days until Christmas");

library. js function Xmas. Days(Check. Day) { var XYear=Check. Day. get. Full. Year(); var XDay=new Date("December, 25, 2006"); XDay. set. Full. Year(XYear); var Day. Count=(XDay-Check. Day) /(1000*60*60*24); Day. Count=Math. round(Day. Count); return Day. Count; }

XP Setting Date Values Java. Script functions that allow you to set or change the values of date objects 76

Working with Conditional Statements XP if (condition) { Java. Script Commands } n condition is an expression that is either true or false n if the condition is true, the Java. Script Commands in the command block are executed n if the condition is not true, then no action is taken 77

Comparison, Logical, and Conditional Operators XP To create a condition, you need one of three types of operators: n a comparison operator compares the value of one element with that of another, which creates a Boolean expression that is either true or false n a logical operator connects two or more Boolean expressions n a conditional operator tests whether a specific condition is true and returns one value if the condition is true and a different value if the condition is false 78

An Example of Boolean Expressions XP o x < 100; n if x is less than 100, this expression returns the value true; however, if x is 100 or greater, the expression is false o y == 20; n the y variable must have an exact value of 20 for the expression to be true n comparison operator uses a double equal sign (==) 79

XP Comparison Operators 80

XP A Logical Operator o The logical operator && returns a value of true only if all of the Boolean expressions are true. 81

XP A Conditional Operator tests whether a specific condition is true and returns one value if the condition is true and a different value if the condition is false. n Message = (mail == “Yes”) ? “You have mail”: “No mail”; n tests whether the mail variable is equal to the value “Yes” o if it is, the Message variable has the value “You have mail”; o otherwise, the Message variable has the value “No mail”. 82

XP Using an If. . . Else Statement if (condition) { Java. Script Commands if true } else Java. Script Commands if false } n condition is an expression that is either true or false, and one set of commands is run if the expression is true, and another is run if the expression is false 83

if. . . else Conditional Statement document. write("Today is " + This. Month + "/“+This. Day+"/"+This. Year+" "); if (Days. Left > 0) { document. write("Only "+Days. Left+ " days until Christmas"); } else { document. write("Happy Holidays from Nroth Pole Novelties"); }

XP Using Arrays o An array is an ordered collection of values referenced by a single variable name. o The syntax for creating an array variable is: variable = new Array(size); n variable is the name of the array variable n size is the number of elements in the array (optional) o To populate the array with values, use: variable[i]=value; where i is the ith item of the array. The 1 st item has an index value of 0. 85

XP Using Arrays To create and populate the array in a single statement, use: variable = new Array(values); n values are the array elements enclosed in quotes and separated by commas n var Month. Txt=new Array(“”, “January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”); o January will have an index value of “ 1”. 86

var Today=new Date(); var This. Day=Today. get. Date(); var This. Month=Today. get." src="https://present5.com/presentation/6c4440524ccb99122e84058ce9e65d75/image-87.jpg" alt="

Creating the Month. Text Function in library 2. js function Month. Txt(Month. Number) { var Month=new Array(); Month[0]=""; Month[1]="January"; Month[2]="February"; Month[3]="March"; Month[4]="April"; Month[5]="May"; Month[6]="June"; Month[7]="July"; Month[8]="August"; Month[9]="September"; Month[10]="October"; Month[11]="November"; Month[12]="December"; return Month[Month. Number]; }

Calling the Month. Txt Function use the This. Month variable to call the Month. Txt function and then stores the result in a new variable named “Month. Name” var Month. Name=Month. Txt(This. Month);

XP Working with Program Loops o A program loop is a set of instructions that is executed repeatedly. o There are two types of loops: n loops that repeat a set number of times before quitting n loops that repeat as long as a certain condition is met 90

XP The For Loop o The For loop allows you to create a group of commands to be executed a set number of times through the use of a counter that tracks the number of times the command block has been run. o Set an initial value for the counter, and each time the command block is executed, the counter changes in value. o When the counter reaches a value above or below a certain stopping value, the loop ends. 91

XP The For Loop Continued for (start; condition; update) { Java. Script Commands } n start is the starting value of the counter n condition is a Boolean expression that must be true for the loop to continue n update specifies how the counter changes in value each time the command block is executed 92

Specifying Counter Values in a For Loop

XP The While Loop o The While loop runs a command group as long as a specific condition is met, but it does not employ any counters. o The general syntax of the While loop is: while (condition) { Java. Script Commands } n condition is a Boolean expression that can be either true or false 96

XP Java. Script primitive datatypes o o Boolean n Two values: true and false Number n 64 -bit floating point, similar to Java double and Double n No integer type n Special values Na. N (not a number) and Infinity String n Sequence of zero or more Unicode characters n No separate character type (just strings of length 1) n Literal strings using ' or " characters (must match) Special values n null and undefined n typeof(null) = object; typeof(undefined)=undefined

XP Objects o An object is a collection of named properties n Simple view: hash table or associative array n Can define by set of name: value pairs o obj. Bob = {name: “Bob", grade: 'A', level: 3}; n New members can be added at any time o obj. Bob. fullname = 'Robert'; n Can have methods, can refer to this o Arrays, functions regarded as objects n A property of an object may be a function (=method) n A function defines an object with method called “( )” function max(x, y) { if (x>y) return x; else return y; }; max. description = “return the maximum of two arguments”;

XP More about functions o Declarations can appear in function body n Local variables, “inner” functions o Parameter passing n Basic types passed by value, objects by reference o Call can supply any number of arguments n functionname. length : # of arguments in definition n functionname. arguments. length : # args in call o “Anonymous” functions (expressions for functions) n (function (x, y) {return x+y}) (2, 3); o Closures and Curried functions n function Cur. Add(x){ return function(y){return x+y} }; More explanation on next slide

XP Function Examples o o o Anonymous functions make great callbacks set. Timeout(function() { alert("done"); }, 10000) Curried function Curried. Add(x){ return function(y){ return x+y} }; g = Curried. Add(2); g(3) Variable number of arguments function sum. All() { var total=0; for (var i=0; i< sum. All. arguments. length; i++) total+=sum. All. arguments[i]; return(total); } sum. All(3, 5, 3, 2, 6)

XP Use of anonymous functions u Anonymous functions very useful for callbacks set. Timeout(function() { alert("done"); }, 10000) // putting alert("done") in function delays evaluation until call u Simulate blocks by function definition and call var u = { a: 1, b: 2 } var v = { a: 3, b: 4 } (function (x, y) { var temp. A = x. a; var temp. B =x. b; //local variables x. a=y. a; x. b=y. b; y. a=temp. A; y. b=temp. B }) (u, v) // This works because objects are passed by reference

XP Basic object features o Use a function to construct an object function car(make, model, year) { this. make = make; this. model = model; this. year = year; } o Objects have prototypes, can be changed var c = new car(“Ford”, ”Taurus”, 1988); car. prototype. print = function () { return this. year + “ “ + this. make + “ “ + this. model; } c. print();

XP Java. Script functions and this var x = 5; var y = 5; function f() {return this. x + y; } var o 1 = {x : 10} var o 2 = {x : 20} o 1. g = f; o 2. g = f; o 1. g() 15 o 2. g() 25 Both o 1. g and o 2. g refer to the same function object Why are the results for o 1. g() and o 2. g() different ?

XP More about this o Property of the activation object for fctn call n In most cases, this points to the object which has the function as a property (or method). n Example : var o = {x : 10, f : function(){return this. x}} o. f(); 10 this is resolved dynamically when the method is executed

Special treatment for nested methods var o = { x: 10 f : function() { function g(){ return this. x } ; return g(); } }; o. f() Function g gets the global object as its this property ! XP

XP Language features o Stack memory management n Parameters, local variables in activation records o Garbage collection n Automatic reclamation of inaccessible memory o Closures n Function together with environment (global variables) o Exceptions n Jump to previously declared location, passing values o Object features n Dynamic lookup, Encapsulation, Subtyping, Inheritance o Concurrency n Do more than one task at a time (Java. Script is single-threaded)

XP Stack memory management o Local variables in activation record of function f(x) { var y = 3; function g(z) { return y+z; }; return g(x); } var x= 1; var y =2; f(x) + y;

XP Garbage collection o Automatic reclamation of unused memory n Navigator 2: per page memory management o Reclaim memory when browser changes page n Navigator 3: reference counting o Each memory region has associated count o Count modified when pointers are changed o Reclaim memory when count reaches zero n Navigator 4: mark-and-sweep, or equivalent o Garbage collector marks reachable memory o Sweep and reclaim unreachable memory Reference http: //www. unix. org. ua/orelly/web/jscript/ch 11_07. html Discuss garbage collection in connection with Lisp

XP Closures o o Return a function from function call function f(x) { var y = x; return function (z){y += z; return y; } } var h = f(5); h(3); Can use this idea to define objects with “private” fields n Description of technique o http: //www. crockford. com/Java. Script/private. html o http: //developer. mozilla. org/en/docs/Core_Java. Script_1. 5_Guide: W orking_with_Closures n But there are subtleties (look for __parent__)

XP Exceptions o Throw an expression of any type throw "Error 2"; throw 42; throw {to. String: function() { return "I'm an object!"; } }; o Catch try { } catch (e if e == “First. Exception") { // do something } catch (e if e == “Second. Exception") { // do something else } catch (e){ // executed if no match above } Reference: http: //developer. mozilla. org/en/docs/ Core_Java. Script_1. 5_Guide : Exception_Handling_Statements

XP Object features o Dynamic lookup n Method depends on run-time value of object o Encapsulation n Object contains private data, public operations o Subtyping n Object of one type can be used in place of another o Inheritance n Use implementation of one kind of object to implement another kind of object

XP Concurrency o o o Java. Script itself is single-threaded n How can we tell if a language provides concurrency? AJAX provides a form of concurrency n Create XMLHttp. Request object, set callback function n Call request method, which continues asynchronously n Reply from remote site executes callback function o Event waits in event queue… n Closures important for proper execution of callbacks Another form of concurrency n use Set. Timeout to do cooperative multi-tasking o Maybe we will explore this in homework …

XP Java. Script eval o o Evaluate string as code n The eval function evaluates a string of Java. Script code, in scope of the calling code Examples var code = "var a = 1"; eval(code); // a is now '1‘ var obj = new Object(); obj. eval(code); // obj. a is now 1 Most common use n Efficiently deserialize a large, complicated Java. Script data structures received over network via XMLHttp. Request What does it cost to have eval in the language? n Can you do this in C? What would it take to implement?

XP Unusual features of Java. Script o Some built-in functions n Eval, Run-time type checking functions, … o Regular expressions n Useful support of pattern matching o Add, delete methods of an object dynamically n Seen examples adding methods. Do you like this? Disadvantages? n myobj. a = 5; myobj. b = 12; delete myobj. a; o Redefine native functions and objects (incl undefined) o Iterate over methods of an object n for (variable in object) { statements } o With statement (“considered harmful” – why? ? ) n with (object) { statements }

XP References o o o Brendan Eich, slides from ICFP conference talk n www. mozilla. org/js/language/ICFP-Keynote. ppt Tutorial n http: //www. w 3 schools. com/js/ (still there? ) Java. Script 1. 5 Guide n http: //developer. mozilla. org/en/docs/Core_Java. Script_1. 5_Guide Douglas Crockford site n http: //www. crockford. com/Java. Script/ n http: //20 bits. com/2007/03/08/the-philosophy-of-Java. Script/ W 3 C school o www. w 3 schools. com/Xhtml