1. 1 Overview JavaScript (Recommended Reading : Programming the World Wide Web, 4 th Edition, Robert W. Sebesta, Chapters 4, 5 – available at Steely Library)

2. Brief History  Originally developed by Netscape: Named LiveScript  In 1995, Netscape & Sun Microsystems joined forces: For marketing purposes, renamed it JavaScript BUT IT IS NOT JAVA!  Microsoft countered with VBScript and JScript  European standards group ECMA (European Computer Manufacturers Association) created a standard specification for JavaScript in the late ‘90s; approved by the ISO (International Standards Organization) ECMAScript → the official name of the standard language Several versions exist Supported by Firefox, Internet Explorer etc. 2

3. Purpose  A general-purpose programming language  Could be used for: Client-side programming – a collection of objects supporting browser control and user interaction Server-side programming – a collection of objects that make the language useful on web servers, ex. for communication with a DBMS General programming  In fact, used most often for client-side scripting: Adds programming capability to Web pages Validate forms Modify pages on the fly Read/write cookies Does not support however file operations, db access, networking 3

4. Implementation  JS is an interpreted language Not compiled into machine or byte code Source code is read when it is to be run, interpreted and executed  Interpreters are part of the browser Browsers implement different features Browsers may implement the same feature differently Variations are greatest among older versions of browsers  JS vs. Java JS has a different object model from Java:  based on object-prototypes, not on classes;  objects are dynamic, their properties & methods can change during execution JavaScript is not strongly typed:  vars need not be declared & are dynamically typed (=assigned values of different types) 4

5.  JS code is embedded in XHTML using the tag  JS code can be directly embedded in XHTML document = placed in-line up to closing tag <!-- … Javascript here … //--> 5 XHTML/JavaScript – Script Tag

6. – or –  JS code can be indirectly embedded in XHTML document = URL of a JS code file can be added as a src= attribute Still need the closing tag  Also need type=“text/javascript” attribute 6

7.  Two locations for JavaScript code, different purposes: Script that executes only when requested (function definitions) or that runs in response to an event (e.g. button push) can be put in the head section – the interpreter only notes the existence of these scripts, does not interpret them while processing the head Scripts that are to be interpreted just once, as they are found, when page is loaded and interpreted, can be put in the body section  Various strategies must be used to ‘protect’ the JavaScript from the browser For example, comparisons present a problem since are used to mark tags in XHTML JavaScript code can be enclosed in XHTML comments JavaScript code can be enclosed in a CDATA section 7 Location of JavaScript Code

8. Hiding In-line JavaScript(1)  If JS code contains recognizable XHTML tags (ex. in output of JS code), need to hide it from XHTML processors (like validators) Use XHTML character data section → its content not parsed as XHTML To hide this from JS interpreter, use JS comments: // or /*]]*/ The JS comment symbols do not bother the XML parser The JS comment symbols protect the CDATA markers from the JS parser Note the JS comments are: // for line comments, /* */ for multiline comments 8

9. Hiding In-line JavaScript(2)  A second technique is to use XHTML comments Start in-line script with a comment <!-- or //<!-- ○  script is hidden from browsers that do not recognize the tag and from XHTML validators End script with a new line containing a JS comment followed by an XHTML comment // -- > (same explanation as before for the JS comment //)  Code looks like: //<!--... JS goes here …. // a-- ?! // --> 9

10. Hiding In-line JavaScript(3)  Indirect reference to a JS file is the preferred approach.  What if no JS? Can use tag to provide alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support client-side scripting. All XHTML up to is processed and displayed in this case. Could be warning message, link to a static page, etc. … Your browser does not support JavaScript! 10

11. JavaScript Language  JS is an object-based language, not an object- oriented language Has objects (that encapsulate both data and processing) and references, like Java No general class definitions Does not have true, class-based, inheritance; polymorphism; and subtyping Has prototype-based inheritance: its objects serve both as objects and models of objects (http://en.wikipedia.org/wiki/Prototype-based_languages)http://en.wikipedia.org/wiki/Prototype-based_languages Has limited set of built-in objects; ex. objects that model documents and document elements Can create “objects” on-the-fly 11

12.  Define names just like in Java Best practice - start with a letter, not special character Use CamelCase notation = write compound words in which the words are joined without spaces and are capitalized within the compound 12 JavaScript Variable Names

13. Can’t use reserved words – a larger set than Java ○ See http://javascript.about.com/library/blreserved.h tm http://javascript.about.com/library/blreserved.h tm ○ JavaScript names are case sensitive 13

14.  Don’t have to be explicitly declared as in Java Can just start using the variable in the code, to assign it a value – will be implicitly declared by the JS interpreter But probably not a good idea and a source of subtle bugs: ○ JS can’t distinguish a typo from a new variable name… All variables implicitly declared have global scope (=are global): can be accessed anywhere in the same file  Use keyword var to explicitly declare a variable Variables explicitly declared outside functions are global Variables explicitly declared inside functions are local to the function and hide global variables with same name This assures no scope clashes: if outer block declares variable foo, an inner block that wants its own foo will use the value from the outer block if foo is not declared with var 14 JavaScript Variables

15.  Note var doesn’t specify a type: var stop_flag = true, pi=3.14; Variables can “change type” as program progresses, depending upon the value currently assigned to them → dynamically typed language A variable can have a value of any primitive type, or it can be a reference to any object primitive and object storage Programmer has to keep track of variable type if it matters 15 JavaScript Variable Types

16.  5 basic (primitive) types string numeric/number boolean undefined null  Note that these aren’t keywords to declare type as in Java!  JS also includes predefined wrapper objects Number, String, and Boolean; each contains only a property that stores a value of the corresponding primitive type each provides useful methods to use with values of corresponding primitive type JS converts automatically between primitive types and corresponding wrapper objects → methods of String object can be directly used on a variable storing a primitive string value 16 JavaScript Variable Types

17. Other JS Primitive Types  null A single value, null: keyword, indicates no value, can be assigned! A variable that is used but not declared nor assigned a value has a null value Using a null value usually causes a runtime error Ex. if foo has not been declared: var value = foo + 2;  undefined A single value, undefined; however undefined is not a keyword Is the value of a variable declared but not initialized Remains undefined until a value is assigned 17

18. Other JS Primitive Types  Can find the current data type of a variable via typeof operator (evaluates to “number”, “string” or “boolean” for primitive operand, “object” for object or null operand, “undefined” for variable that has not been assigned a value) var i = 3; var typeString = typeof i; // note no ( ) are necessary, although can be used  typeString will contain “number” 18

19.  Declared with the const keyword const RETIREMENT_AGE = 65; const SCHOOL = “NKU”;  Should be initialized when declared  Can’t be changed 19 JS Constants

20.  All number values are represented internally as double- precision floating-point values  Whole numbers will display as integers  Can use exponent notation like Java: 1.23e45  Arithmetic operations that result in an error (ex. /0) or produce a value not representable as a number return value “not a number”, displayed as NaN; use isNaN(…) function to check  Conversions: parseInt(…) and parseFloat(…) functions turn strings into numbers ○ They convert string up to 1 st non-valid character Other implicit conversions (called coercions) ○ boolean to number gives 1 (true) or 0 (false) ○ null to number gives 0 ○ undefined gives NaN (not a number) 20 Number Type

21.  String literals = sequences of 0+ characters between pairs of either single or double quotes No difference between ’ and ”, but end quote must match start quote  Can include escaped characters as in Java E.g. \n, \”, \\, etc.  + sign is string concatenation operator (as in Java) if either side is a string  Conversions: toString() method of Number object turns numbers into strings Other implicit conversions ○ JS attempts to convert to a string the non-string operator in a string concatenation operation; ex. “August” + 1977 21 String Type

22.  Belong to String object, but JS automatically converts primitive string values to wrapper objects → can be used through string primitive values directly  charAt( ): “George”.charAt(2) returns ‘o’ Given integer argument, returns one character (as string) Note character positions in strings begin at index 0  indexOf( ): “George”.indexOf(‘r’) returns 3 Given one search string, returns its index or -1  substring( ): “George”.substring(2, 4) returns ‘org’ Given start and end indexes, returns string  toLowerCase( ): “George”.toLowerCase() returns ‘george’  toUpperCase( ) Convert entire string .length: “abcd”.length is 4 22 String Methods and Property

23. Name in Upper Case  http://www.nku.edu/~frank/csc301/Exam ples/formvalidation2.html http://www.nku.edu/~frank/csc301/Exam ples/formvalidation2.html 23

24.  Two values: true and false These are reserved words Note – not “true” or “false” (strings)  Conversions When boolean converted to string, get “true” or “false” Empty string is considered false, all others true Number 0 is considered false, all others true Undefined, NaN and null are considered false 24 Boolean Type

25.  Assignment statement uses =  Statements don’t require semicolon at end unless 2 statements on one line However best practice is to terminate every line like Java; 25 Operators and Statements

26. The interpreter will insert the semicolon if missing at the end of a line and the statement seems to be complete; Can be a problem: return x; If a statement must be continued to a new line, make sure that the first line does not make a complete statement by itself. 26

27.  Basically the same as Java Same numeric operators, including % Same unary operators (+, -; prefix or postfix ++, --) Same shortcut assignment operators (+=, *=, etc.) Same rules of precedence and associativity Same use of parentheses to create subexpression All numeric operations are done in double-precision floating point  division does NOT truncate integers: var i = 3 / 2; gives 1.5, not 1 as in Java  Operators (other than + operator) can be used with strings to get numeric results i.e. var value = “3” * “4”; gives 12; coercion done by JS interpreter 27 Arithmetic Expressions

28.  Pretty much the same as in Java  if(control_expression) { … }  if(control_expression) {…} else {…}  Use..else if.. like Java  switch Same syntax as Java; control expression and case labels can evaluate to number, string or boolean value; case labels can be of different types Must use break to end execution after a match case  Best practice is to use Java-style indentation  Also has Java-style conditional expression operator ? :  Compound statement = a sequence of statements delimited by braces Not allowed in JS to create variables local to compound statement → such vars are visible either in whole document or function where are declared 28 Conditional Statements

29. JS uses same comparison operators as Java ==, <=, !=, etc. If comparison mixes numbers and strings, strings are converted to numbers i.e. 3.0 == “3.00” evaluates to true In switch, case 3.0 and case “3” are the same In addition, uses === and !== “Strictly equals” (or not) In this case, no type conversion is done / allowed Variables must match in type and value 29 Conditional (Relational) Operators

30.  Same as Java && and || and !  As in Java, if 1 st operand “tells the whole story”, the second isn’t checked = short circuit operators  Best practice is to put parentheses around each logical expression 30 Logical Operators

31.  Basic loop statements same as in Java while(...) {... } do {….} while(…) for(init_expr; continue_expr; update_expr) {….} 31 Iteration

32.  Also has for(variable in collection) {…} statement in is a keyword here variable is a var Collection is a set of values ○ Arrays, for example (covered later) ○ Steps through the collection one item at a time, assigning each value to variable 32

33. Window and Document The Window object represents the browser window in which the document containing the script is being displayed The Document object represents the document being displayed using DOM The Window object is the default object for JavaScript, so properties and methods of the Window object may be used without qualifying with the object name; window & document are properties of the Window object 33 Simple I/O

34. To write to the current page, use write method of document document.write(stringVar);  will write the string on current page and (if proper XHTML) display it The code should be in body section  executed & displayed when loaded The output written should be XHTML code = tags + content 34 demoWrite.html

35.  Three methods of built-in object Window are used to provide dialog box I/O alert(string) ○ Puts up a dialog box containing the string & waits for dismissal ○ String is plain text, not XHTML! confirm(string) ○ Displays dialog box with OK/CANCEL and returns true or false depending on button pressed 35 Simple I/O demoAlert.html

36. Simple I/O prompt(string, defaultAnswerString) ○ Collects a string of input from user, which returns as its value; w/ OK/CANCEL ○ Default is placed in text box In all three cases, browser waits for a user response before JS interpreter continues 36 demoPrompt.html

37.  Create XHTML + JavaScript Output: a table of the numbers from 5 to 10 and their squares and cubes, using tables. Solutions powers.html powers2.html powersA.html 37 Your turn