JavaScript I VP R 1. Copyright 2006 Haim Levkowitz. Outline

Size: px

Start display at page:

Darlene Dina Davis
5 years ago
Views:

1 JavaScript I VP R 1 Outline Goals and Objectives Introduction JavaScript and Java Embedding JavaScript in XHTML Variables Statements Expressions and Operators Control Structures Code Execution Input and Output I VP R 2 1

2 Goals Understand JavaScript Basics Syntax code execution order debugging and testing inclusion in XHTML and Web pages reasons for using JavaScript in Web pages I VP R 3 Objectives Why use JavaScript? Why not? JavaScript Syntax Embedding JavaScript in XHTML Variables Statements Operators Control Structures Input/Output I VP R 4 2

3 Introduction XHTML limited dynamics JavaScript used in web pages for: Dynamics mouse clicks pop up windows animations Client-side execution validating input processing requests I VP R 5 Executed on client-side Avoids Client/Server communication and traffic Simple, interpretive Requires only web browser But I VP R 6 3

4 But Lots of security problems, vulnerabilities JavaScript bugs Browser bugs Foreign code If possible, better without than with (IMHO) I VP R 7 History Originally: Netscape, as LiveScript 1995: joint venture of Netscape and Sun renamed JavaScript Now standardized by European Computer Manufacturers Association ECMA-262 also ISO We call collections of JavaScript code scripts not programs I VP R 8 4

5 JavaScript and Java only related through syntax JavaScript dynamically typed support for objects very different I VP R 9 JavaScript and Java Java JavaScript Class-based object model Prototype-based model Special declarations No special declarations Explicit variable types Implicit variable types JavaScript very free form language Compared to Java offers tools to much wider, less-sophisticated audience I VP R 10 5

6 JavaScript can be used to replace some of what typically done with Applets except graphics CGI no file operations or networking I VP R 11 User interactions through forms easy Document Object Model (DOM) possible to support dynamic HTML documents with JavaScript Event-Driven Computation User interactions with HTML documents in JavaScript use event-driven model of computation User interactions with form elements can be used to trigger execution of scripts I VP R 12 6

7 Object Orientation and JavaScript NOT object-oriented programming language Does not support class-based inheritance Cannot support polymorphism Has prototype-based inheritance much different I VP R 13 JavaScript Objects collections of properties like members of classes in Java and C++ has primitives for simple types root object is Object objects derived from Object All JavaScript objects accessed through references I VP R 14 7

8 Embedding JavaScript in HTML <script> tag used to embed JavaScript code in HTML code can be used anywhere inside code usually embedded right before or after <head> tag closes Nesting prohibited generates errors I VP R 15 Directly <script type = text/javascript"> -- JavaScript script </script> I VP R 16 8

9 Indirectly as file specified in src attribute of <script> <script type = text/javascript src = "myscript.js"> </script> I VP R 17 Syntax Identifier form begin with letter or underscore followed by any number of letters, underscores, digits Case sensitive 25 reserved words plus future reserved words Comments: both // and /* */ I VP R 18 9

10 Reserve words I VP R 19 hide scripts from browsers wo JavaScript interpreters put in special comments  Semicolons can be problem somewhat optional Problem: When end of line can be end of statement JavaScript puts semicolon I VP R 20 10

11 JavaScript is dynamically typed any variable can be used for anything primitive value reference to any object interpreter determines type of particular occurrence of variable I VP R 21 Variables can be declared Implicitly explicitly var sum = 0, today = "Monday", flag = false; I VP R 22 11

12 Variables Data types Implicit converted automatically first use of variable declares its type Types can be numbers (integer or real) logical (Boolean) String Examples: 3, 40, -10.5, true, false, string, 9abc I VP R 23 Scope Code block where variable available Global variable available everywhere easy to manage bad habit Local variable available only inside block where specified I VP R 24 12

13 Constants const keyword Read-only variable Cannot change values be re declared Example: const x=35 I VP R 25 Literals Fixed values (not variables) hard-coded Nesting needs extra care Change quotes from to If not confusion Examples: 3.5, false, Hello I VP R 26 13

14 Data Type Conversion Automatic Possible confusion Examples: answer=true, answer=35 I VP R 27 Escaping and Special Characters \ : escaping character define special character sequences I VP R 28 14

15 Primitives, Operations, & Expressions All primitive values have one of five primitive types Number, String, Boolean have wrapper objects Number, String, Boolean Undefined, Null I VP R 29 In cases of Number and String primitive values and objects coerced back and forth primitive values can be treated essentially as if they were objects I VP R 30 15

16 Numeric literals just like Java All numeric values stored in doubleprecision floating point String literals delimited by either ' or " Can include escape sequences (e.g., \t) All String literals are primitive values I VP R 31 Boolean values true and false only Null value is null only Undefined value is undefined I VP R 32 16

Numeric operators ++, --, +, -, *, /, % All operations in double precision Same precedence and associativity as Java I VP R 33 Math Object provides floor, round, max, min, trig functions, etc. e.g., Math.

17 Numeric operators ++, --, +, -, *, /, % All operations in double precision Same precedence and associativity as Java I VP R 33 Math Object provides floor, round, max, min, trig functions, etc. e.g., Math.cos(x) Number Object MAX_VALUE, MIN_VALUE, NaN, POSITIVE_INFINITY, NEGATIVE_INFINITY, PI e.g., Number.MAX_VALUE arithmetic operation that creates overflow returns NaN NaN is not == to any number not even itself Test for it with isnan(x) Number object has method, tostring I VP R 34 17

18 I VP R 35 The typeof operator Returns "number", "string", or "boolean" for primitives returns "object" for objects and null I VP R 36 18

19 Assignment statements Like C++ and Java I VP R 37 The Date Object Create one with Date constructor (no params) Local time methods of Date : tolocalestring returns string of date getdate returns day of month getmonth returns month of year (0 11) getday returns day of week (0 6) getfullyear returns year gettime returns number of msec s since January 1, 1970 gethours returns hour (0 23) getminutes returns minutes (0 59) getmilliseconds returns millisecond (0 999) I VP R 38 19

20 Screen Output & Keyboard Input JavaScript model for HTML document Document object browser display window Window object two properties document: refer to Document object window: refer to Window object I VP R 39 Methods Document object has method write dynamically creates content parameter is string often concatenated from parts Some are variables, e.g., document.write("answer: " + result + "<br />"); parameter sent to browser can be anything that can appear in HTML doc <br /> but not \n I VP R 40 20

$Window object has three methods for creating dialog boxes alert confirm prompt I VP R 41 alert alert( The sum is: 42 \n");$

21 Window object has three methods for creating dialog boxes alert confirm prompt I VP R 41 alert alert( The sum is: 42 \n"); Parameter is plain text, not HTML Opens dialog box displays parameter string OK button waits for user to press OK button I VP R 42 21

depending on button pressed I VP R 43 prompt prompt("what is your name?

22 confirm confirm("do you want to continue this download?"); Opens dialog box displays Parameter two buttons OK Cancel waits for button press Returns Boolean value depending on button pressed I VP R 43 prompt prompt("what is your name?", ""); Opens dialog box displays string parameter text box Two buttons OK Cancel waits for OK second parameter for default response if user presses OK without typing response in text box I VP R 44 22

23 roots.html I VP R 45 Control Statements Similar to C, C++, Java Compound statements delimited by braces But are not blocks I VP R 46 23

24 Control expressions three kinds Primitive values Relational Expressions Compound Expressions I VP R 47 Primitive values String true unless empty or "0" Number true unless zero I VP R 48 24

25 Relational Expressions The usual six: ==,!=, <, >, <=, >= Operands coerced if necessary If one is string and one is number attempts to convert string to number If one is Boolean and other not Boolean operand coerced to number (1 or 0) I VP R 49 The unusual two: ===,!== Same as ==,!= but no coercions operands must be identical Comparisons of references to objects not useful addresses compared, not values I VP R 50 25

26 Relational Expressions I VP R 51 Operator Precedence and Associativity I VP R 52 26

27 Compound Expressions The usual operators: &&,,! Boolean object has method tostring can be printed (true or false) I VP R 53 Selection Statements The usual if-then-else clauses can be either single statements compound statements I VP R 54 27

28 Switch statements can be either Statement sequences compound statements control expression can be Number String Boolean Different cases can have values of different types I VP R 55 switch (expression) { case value_1: // value_1 statements case value_2: // value_2 statements [default: // default statements] } I VP R 56 28

29 borders2.html I VP R 57 Loop statements while (control_expression) statement or cmpnd for (init; control; increment) statement or cmpnd init can have declarations, but scope of such variables is whole script do statement or compound while (control_expression) Example I VP R 58 29

30 Example: date.html I VP R 59 Object Creation and Modification Objects can be created with new most basic object one that uses Object constructor as in var myobject = new Object(); new object has no properties blank object Properties can be added to object any time I VP R 60 30

31 var myairplane = new Object(); myairplane.make = "Cessna"; myairplane.model = "Centurian"; I VP R 61 Objects can be nested property could be another object created with new Properties can be accessed by dot notation, or in array notation, as in var property1 = myairplane["model"]; delete myairplane.model; I VP R 62 31

32 Another Loop Statement for (identifier in object) statement or compound for (var prop in myairplane) document.write(myairplane[prop] + "<br />"); I VP R 63 Arrays Objects with some special functionality Array elements can be primitive values references to other objects Length is dynamic length property stores length I VP R 64 32

33 Array objects can be created in two ways with new, or by assigning array literal I VP R 65 var mylist = new Array(24, "bread", true); var mylist2 = [24, "bread", true]; var mylist3 = new Array(24); I VP R 66 33

34 length of array - highest subscript to which element has been assigned + 1 mylist[122] = "bitsy"; // length is 123 I VP R 67 length property is writeable ==> can set to make array any desirable length E.g., mylist.length = 150; I VP R 68 34

35 insert_names.html I VP R 69 Array methods join e.g., var liststr = list.join(", "); I VP R 70 35

36 Array methods, cont. - reverse - sort - e.g., -names.sort(); - Coerces elements to strings - puts them in alphabetical order - concat e.g., newlist = list.concat(47, 26); I VP R 71 Array methods, cont. slice listpart = list.slice(2, 5); listpart2 = list.slice(2); I VP R 72 36

37 Array methods, cont. tostring Coerce elements to strings if necessary concatenate them together separated by commas exactly like join(", ") I VP R 73 Array methods, cont. - push, pop, unshift, and shift I VP R 74 37

38 nested_arrays.html I VP R 75 Functions function function_name([formal_parameters]) { -- body } I VP R 76 38

39 Functions (continued) Return value is parameter of return If there is no return or if end of function reached ==> undefined returned If return has no parameter ==> undefined returned I VP R 77 Functions (continued) Functions are objects ==> variables that reference them can be treated as other object references I VP R 78 39

40 Functions (continued) If fun is the name of a function ref_fun = fun;... ref_fun(); /* A call to fun */ I VP R 79 Functions (continued) place all function definitions in head of HTML document All variables that are declared outside functions either implicitly or explicitly ==> are global Variables explicitly declared in a function ==> are local I VP R 80 40

41 Functions (continued) Parameters passed by value, but when reference variable passed ==> semantics are pass-by-reference I VP R 81 Functions (continued) No checking of parameters type number excess parameters actual ignored formal set to undefined I VP R 82 41

42 Functions (continued) All parameters sent through property array Arguments has length property I VP R 83 Functions (continued) parameters.html and output I VP R 84 42

43 Functions (continued) no clean way to send primitive by reference One dirty way put value in array and send array s name I VP R 85 function by10(a) { a[0] *= 10; }... var listx = new Array(1);... listx[0] = x; by10(listx); x = listx[0]; I VP R 86 43

44 Functions (continued) To sort something other than strings into alphabetical order write function that performs comparison send it to sort method comparison function must return Negative number, zero, or positive number indicate whether order ok, equal, or not I VP R 87 function num_order(a, b) {return a - b;} Now, can sort array named num_list with: num_list.sort(num_order); I VP R 88 44

45 Example medians.html & output I VP R 89 Constructors Used to initialize objects actually create the properties I VP R 90 45

46 function plane(newmake, newmodel, newyear){ this.make = newmake; this.model = newmodel; this.year = newyear; } myplane = new plane("cessna", "Centurnian", "1970"); I VP R 91 I VP R 92 46

47 Can also have method properties function displayplane() { document.write("make: ", this.make, "<br />"); document.write("model: ", this.model, "<br />"); document.write("year: ", this.year, "<br />"); } I VP R 93 Now add this to the constructor: this.display = displayplane; I VP R 94 47

48 Pattern matching two ways 1. Use RegExp objects 2. Use methods on String objects I VP R 95 Simple patterns Two categories of characters in patterns: a. normal characters match themselves b. metacharacters can have special meanings in patterns do not match themselves I VP R 96 48

49 metacharacter \ ( ) [ ] { } ^ $ * +?. metacharacter treated as normal character if backslashed = escaped period = special metacharacter matches any character except newline I VP R 97 search(pattern) Returns position in object string of pattern relative to zero -1 if fails var str = "Gluckenheimer"; var position = str.search(/n/); /* position is now 6 */ I VP R 98 49

50 Character classes sequence of characters in brackets ==> defines set of characters any one of which matches [abcd] Dashes to specify spans of characters in class [a-z] Caret at left end of class definition means opposite [^0-9] I VP R 99 I VP R

51 Character class abbreviations Abbr. Equiv. Pattern Matches \d [0-9] a digit \D [^0-9] not a digit \w [A-Za-z_0-9] a word character \W [^A-Za-z_0-9] not a word character \s [ \r\t\n\f] a whitespace character \S [^ \r\t\n\f] not a whitespace character Variables in patterns are interpolated I VP R 101 Quantifiers Quantifiers in braces Quantifier {n} {m,} {m, n} Meaning exactly n repetitions at least m repetitions at least m but not more than n repetitions I VP R

52 Other quantifiers abbreviations for most commonly used quantifiers * = zero or more repetitions e.g., \d* ==> zero or more digits + = one or more repetitions e.g., \d+ ==> one or more digits? = zero or one e.g., \d? ==> zero or one digit I VP R 103 Anchors pattern can be forced to match only at left end: with ^ End: with $ e.g., /^Lee/ matches "Lee Ann" but not "Mary Lee Ann" /Lee Ann$/ matches "Mary Lee Ann but not "Mary Lee Ann is nice" I VP R

53 anchor operators (^ and $) do not match characters in string match positions at beginning or end I VP R 105 Pattern modifiers The i modifier tells matcher to ignore case of letters /oak/i matches "OAK" and "Oak" and The x modifier tells matcher to ignore whitespace in pattern allows comments in patterns I VP R

54 Other Pattern Matching Methods of String replace(pattern, string) Finds substring that matches pattern replaces it with string g modifier can be used var str = "Some rabbits are rabid"; str.replace(/rab/g, "tim"); str is now "Some timbits are timid" $1 and $2 both set to "rab" I VP R 107 match(pattern) most general pattern-matching method Returns array of results of pattern-matching operation With g modifier returns array of substrings that matched Without g modifier first element of returned array has matched substring other elements have values of $1, I VP R

55 var str = "My 3 kings beat your 2 aces"; var matches = str.match(/[ab]/g); matches is set to ["b", "a", "a"] I VP R 109 split(parameter) "," and /,/ both work I VP R

56 forms_check.html I VP R 111 Debugging IE6 Mozilla I VP R

Mozilla / Firefox / Netscape 7 Select Tasks, Tools, and JavaScript Console small window appears to display script errors

57 IE6 Select Internet Options from the Tools menu Choose Advanced tab Uncheck Disable script debugging box Check Display a notification about every script error box Now, script error ==> small window opened with explanation of error I VP R 113 Mozilla / Firefox / Netscape 7 Select Tasks, Tools, and JavaScript Console small window appears to display script errors Remember to Clear console after using error message avoids confusion Select Tools, Web Development, JavaScript Console I VP R

58 Summary JavaScript : make web page dynamic JavaScript and Java fundamentally different JavaScript code embedded in X/HTML code written and tested like X/HTML code I VP R 115 variables statements to build code block operators control structures to control code execution Arrays Functions Pattern matching Input / output I VP R

4.1 Overview of JavaScript

4.1 Overview of JavaScript - Originally developed by Netscape by Brendan Eich, as LiveScript - Became a joint venture of Netscape and Sun in 1995, renamed JavaScript - Now standardized by the European