Lecture 8: JavaScript

Size: px

Start display at page:

Download "Lecture 8: JavaScript"

Andrew Warner
5 years ago
Views:

1 Lecture 8: JavaScript JavaScript introduction Examples Languages syntax and semantics Delegation vs. inheritance CS 242, Fall 2011, Lecture 8 1

2 What is JavaScript? JavaScript is a scripting language heavily used for client-side scripting Basic properties: Java-like syntax Dynamically-typed (like other scripting languages) Convenient for writing small programs Extensive libraries for basic operations on lists and strings, as well as networking, GUI programming, XML, etc. Efficient execution very difficult (see browser wars ) Use delegation instead of inheritance (a.k.a. prototypebased rather than class-based ) CS 242, Fall 2011, Lecture 8 2

3 Client-side scripting Web pages want to do as much work as possible on the client: Minimize network traffic Maximize responsiveness Distribute CPU load PHP most popular for server-side scripting, JS for client-side AJAX employs JS to updated parts of web page, by having JS scripts directly modify page s underlying DOM object. CS 242, Fall 2011, Lecture 8 3

4 JS example 1 JS output replaces text in page (as in PHP): <html> <body> <h1>my First Web Page</h1> <script type="text/javascript"> document.write("<p>" + new Date() + "</p>"); </script> </body> </html> Note: including text directly in web pages in this way is not recommended. (Examples from w3schools.) CS 242, Fall 2011, Lecture 8 4

5 JS example 1 output CS 242, Fall 2011, Lecture 8 5

6 JS example 2 User-input using built-in prompt function: Clicking Show prompt box button brings up Please enter your name dialog. Document is replaced by Hello name! How are you? <html> <head> <script type="text/javascript"> function show_prompt() { name=prompt("please enter your name","harry Potter"); if (name!=null && name!="") { document.write("hello " + name + "! How are you today?"); } } </script> </head> <body> <input type="button" onclick="show_prompt()" value="show prompt box" /> </body> </html> CS 242, Fall 2011, Lecture 8 6

7 Example 3 Insert date using DOM operations: <html> <head> <script type="text/javascript"> function insertdate() { document.getelementbyid( date ).innerhtml = new Date(); } </script> </head> <body> <h2>insert date into DOM</h2> <p><b>date:</b><span id="date"></span></p> <button onclick="insertdate()"> Get date</button> </body> </html> CS 242, Fall 2011, Lecture 8 7

8 Example 3 result CS 242, Fall 2011, Lecture 8 8

9 JavaScript and AJAX Need to know a few more built-in function (and a couple of JavaScript language features). When an event occurs that makes you want to change something in the web page (e.g. user clicks button), do the following: Create an XMLHttpRequest() object, say httpreq. Define a function handleresponse and attach it to httpreq: httpreq.onreadystatechange = handleresponse; Use open method to supply parameters: httpreq.open("get", url,... Send to server: httpreq.send() CS 242, Fall 2011, Lecture 8 9

10 JavaScript and AJAX (cont.) When event returns, httpreq will be updated with some new attributes: httpreq.readstate should be 4 httpreq.status should be 200 httreq.responsetext is actual text returned (often in XML, but not always) and handleresponse is called. It can insert responsetext into web page as in previous example. CS 242, Fall 2011, Lecture 8 10

11 The JavaScript language Java-like syntax Dynamically-typed Interpreted (i.e. no compilation required) Heterogeneous lists; dictionaries Numerous libraries Functions as values Delegation instead of inheritance CS 242, Fall 2011, Lecture 8 11

12 Dynamic typing Types of variables not checked until they are actually used. E.g. x = 3; x = "3"; legal. E.g. if x = 3; x(4); appears in a function, error won t occur until function is called Also true of other scripting languages, like Perl, Python, Ruby. Can find type of a value at run-time, using typeof Dynamic type-checking has two big disadvantages: No compile-time error messages Makes efficient implementation very hard But it makes some things a lot easier... CS 242, Fall 2011, Lecture 8 12

13 Heterogeneous lists Called arrays in JS, but can grow and shrink dynamically Heterogeneous means you can do this: So what? x = [0, "3", new Date()]; document.getelementbyid( date ).innerhtml = x[2] Makes it much more convenient to represent complex data, because it can be done without defining a new class E.g. trees... CS 242, Fall 2011, Lecture 8 13

14 Representing trees as lists Suppose we want trees of arbitrary degree, with a label at each node. Can represent tree as array of the form [label, tree1,..., treen]. function isleaf(t) { return t.length == 1; } function getlabel(t) { return t[0]; } function getchild(t, n) { return t[n+1]; } function maketree(lab, trees) { return [lab].concat(trees); } t = ["CEO", ["CIO", ["VPSecurity"], ["VPOps"]], ["CTO", ["VPDev"], ["VPRsch"]]]; getlabel(getchild(t, 1)) // returns "CTO" CS 242, Fall 2011, Lecture 8 14

15 Functions as values Functions can be assigned: f = isleaf; f(t); // returns false and passed as arguments: function applytwice(f, x) { return f(f(x)); } function incr(x) { return x+1; } applytwice(incr, 3); // returns 5 and defined anonymously : applytwice(function(x) { return x+1; }, 3); // returns 5 In Java, can pass objects, but not functions. CS 242, Fall 2011, Lecture 8 15

16 Delegation vs. inheritance N.B. the term delegation is heavily overloaded: When a method m in a class C is implemented by calling m on an object contained in a C object: class C { // This example is in Java, not JS D ad; void m(){ ad.m(); } // "delegate" m to D } The method whereby event handlers are associated with events in JS is called event delegation. The JS feature whereby an object is created as a child of another object and can use the methods of the parent. In this lecture, we are using delegation in the third sense. A better term is prototype-based semantics. CS 242, Fall 2011, Lecture 8 16

17 What objects look like In ordinary (class-based) o-o languages like Java: An object is an array containing a value for each field (whether inherited or defined in the class itself). An object also has a pointer to a list of all its methods (whether inherited or defined in the class itself). The values in the first array can be assigned to. The values in the array of functions cannot be changed. Any reference obj.field is obtained from the first array. Any reference obj.method(...) is obtained from the second array. CS 242, Fall 2011, Lecture 8 17

18 What objects look like (cont.) In prototype-based languages like JS: An object is a dictionary containing values for some names, some of which may be ordinary values and some functions. An object also has a pointer to another object, its parent or prototype. Any reference obj.field or obj.method(...) is obtained from the dictionary. If it is undefined in the object, it is obtained from the parent (and then from its parent, and so on). Any field in the object can be changed at any time. CS 242, Fall 2011, Lecture 8 18

19 Creating objects in JavaScript Objects of existing classes are created as in other o-o languages: new C(args). Objects are just dictionaries, and can be created from scratch : foo = { name: "foo", one: 1, two: 2, addonetwo: function() { return this.one+this.two; } } foo.name; // evaluate to "foo" foo.addonetwo(); // returns 3 CS 242, Fall 2011, Lecture 8 19

20 Creating objects in JavaScript (cont.) Objects can be created as children of other objects: bar = Object.create(foo); bar.two = 3; bar.addonetwo(); // returns 4 foo.addonetwo(); // still returns 3 CS 242, Fall 2011, Lecture 8 20

21 Classes in JavaScript JS does not have classes per se. But you get the same effect by defining functions that return objects. function Foo() { return { name: "foo", one: 1, two: 2, addonetwo: function() { return this.one+this.two; } }; } foo = Foo(); A more normal way to do this is... CS 242, Fall 2011, Lecture 8 21

22 Classes in JavaScript (cont.) define a function as follows, and use new: function Foo() { this.name = "foo"; this.one = 1; this.two = 2; this.addonetwo = function () { return this.one+this.two; } }; foo = new Foo(); CS 242, Fall 2011, Lecture 8 22

23 Does delegation matter? Delegation is more general than inheritance it is as if the inheritance hierarchy could change dynamically. Here is a simple example, disabling sorting selectively: L = [3,2,1]; M = [3,2,1]; N = [3,2,1]; P = [3,2,1]; L.sort(); M.sort = function() { return; }; M.sort(); N.sort(); Array.prototype.sort = function() { return; } P.sort(); // L = [1,2,3]; M = [3,2,1]; N = [1,2,3]; P = [3,2,1]; CS 242, Fall 2011, Lecture 8 23

What is Java Script? Writing to The HTML Document. What Can JavaScript do? CMPT 165: Java Script

What is Java Script? Writing to The HTML Document. What Can JavaScript do? CMPT 165: Java Script What is Java Script? CMPT 165: Java Script Tamara Smyth, tamaras@cs.sfu.ca School of Computing Science, Simon Fraser University November 7, 2011 JavaScript was designed to add interactivity to HTML pages