Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
9K views

Programming Language-Javascript

CS 242 Autumn 2008 JavaScript John Mitchell Reading: links on last slide Homework 1: Sept 24 - Oct 1 Why talk about JavaScript? Very widely used, and growing Web pages, AJAX, Web 2.0 Increasing number of web-related applications Some interesting and unusual features First-class functions Objects without classes Powerful modification capabilities - interesting - slightly unusual - very unusual Add new method to object, redefine prototype, access caller Many security, correctness issu

Uploaded by

Jeremie
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
9K views

Programming Language-Javascript

CS 242 Autumn 2008 JavaScript John Mitchell Reading: links on last slide Homework 1: Sept 24 - Oct 1 Why talk about JavaScript? Very widely used, and growing Web pages, AJAX, Web 2.0 Increasing number of web-related applications Some interesting and unusual features First-class functions Objects without classes Powerful modification capabilities - interesting - slightly unusual - very unusual Add new method to object, redefine prototype, access caller Many security, correctness issu

Uploaded by

Jeremie
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 35

CS 242 Autumn 2008

JavaScript

John Mitchell

Reading: links on last slide Homework 1: Sept 24 - Oct 1


Why talk about JavaScript?
 Very widely used, and growing
• Web pages, AJAX, Web 2.0
• Increasing number of web-related applications
 Some interesting and unusual features
• First-class functions - interesting
• Objects without classes - slightly unusual
• Powerful modification capabilities - very unusual
– Add new method to object, redefine prototype, access caller …
 Many security, correctness issues
• Not statically typed – type of variable may change …
• Difficult to predict program properties in advance
JavaScript History
 Developed by Brendan Eich at Netscape
• Scripting language for Navigator 2
 Later standardized for browser compatibility
• ECMAScript Edition 3 (aka JavaScript 1.5)
 Related to Java in name only
• Name was part of a marketing deal
 Various implementations available
• Spidermonkey interactive shell interface
• Rhino: http://www.mozilla.org/rhino/
Motivation for JavaScript
 Netscape, 1995
• Netscape > 90% browser market share
• Opportunity to do “HTML scripting language”
• Brendan Eich
I hacked the JS prototype in ~1 week in May
And it showed! Mistakes were frozen early
Rest of year spent embedding in browser - ICFP talk, 2006
 Common uses of JavaScript include:
• Form validation
• Page embellishments and special effects
• Dynamic content manipulation
• Emerging Web 2.0: client functionality implemented at client
Example 1: simple calculation
<html>
…
<p> … </p>
<script>
var num1, num2, sum
num1 = prompt("Enter first number")
num2 = prompt("Enter second number")
sum = parseInt(num1) + parseInt(num2)
alert("Sum = " + sum)
</script>
…
</html>
Example 2: browser events
<script type="text/JavaScript"> Mouse event causes
page-defined function
function whichButton(event) {
to be called
if (event.button==1) {
alert("You clicked the left mouse button!") }
else {
alert("You clicked the right mouse button!")
}}
</script>
…
<body onmousedown="whichButton(event)">
…
</body>

Other events: onLoad, onMouseMove, onKeyPress, onUnLoad


Example 3: page manipulation
 Some possibilities
• createElement(elementName)
• createTextNode(text)
• appendChild(newChild)
• removeChild(node)

 Example: Add a new list item:


var list = document.getElementById(‘list1')
var newitem = document.createElement('li')
var newtext = document.createTextNode(text)
list.appendChild(newitem)
newitem.appendChild(newtext)

This example uses the browser Document Object Model (DOM). For now,
we will focus on JavaScript as a language, not its use in the browser.
Design goals
 Brendan Eich’s 2006 ICFP talk
• Make it easy to copy/paste snippets of code
• Tolerate “minor” errors (missing semicolons)
• Simplified onclick, onmousedown, etc., event
handling, inspired by HyperCard
• Pick a few hard-working, powerful primitives
– First class functions for procedural abstraction
– Objects everywhere, prototype-based
• Leave all else out!
Language basics
 JavaScript is case sensitive
• HTML is not case sensitive; onClick, ONCLICK, … are HTML
 Statements terminated by returns or semi-colons (;)
• x = x+1; same as x = x+1
• Semi-colons can be a good idea, to reduce errors
 “Blocks”
• Group statements using { … }
• Not a separate scope, unlike other languages (see later slide)
 Variables
• Define a variable using the var statement
• Define implicitly by its first use, which must be an assignment
– Implicit definition has global scope, even if it occurs in nested scope?
Useful implementation
 Spidermonkey command-line interpreter
• Read-eval-print loop
– Enter declaration or statement
– Interpreter executes
– Displays value
– Returns to input state
• Example

class web page has link to this implementation


JavaScript blocks
 Use { } for grouping; not a separate scope
js> var x=3;
js> x
3
js> {var x=4; x}
4
js> x
4
 Not blocks in the sense of other languages
• Only function calls and the with statement cause a change
of scope
JavaScript primitive datatypes
 Boolean
• Two values: true and false
 Number
• 64-bit floating point, similar to Java double and Double
• No integer type
• Special values NaN (not a number) and Infinity
 String
• Sequence of zero or more Unicode characters
• No separate character type (just strings of length 1)
• Literal strings using ' or " characters (must match)
 Special values
• null and undefined
• typeof(null) = object; typeof(undefined)=undefined
Objects
 An object is a collection of named properties
• Simple view: hash table or associative array
• Can define by set of name:value pairs
– objBob = {name: “Bob", grade: 'A', level: 3};
• New members can be added at any time
– objBob.fullname = 'Robert';
• Can have methods, can refer to this
 Arrays, functions regarded as objects
• A property of an object may be a function (=method)
• 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”;
More about functions
 Declarations can appear in function body
• Local variables, “inner” functions
 Parameter passing
• Basic types passed by value, objects by reference
 Call can supply any number of arguments
• functionname.length : # of arguments in definition
• functionname.arguments.length : # args in call
 “Anonymous” functions (expressions for functions)
• (function (x,y) {return x+y}) (2,3);
 Closures and Curried functions
• function CurAdd(x){ return function(y){return x+y} };
More explanation on next slide
Function Examples
 Anonymous functions make great callbacks
setTimeout(function() { alert("done"); }, 10000)
 Curried function
function CurriedAdd(x){ return function(y){ return x+y} };
g = CurriedAdd(2);
g(3)
 Variable number of arguments
function sumAll() {
var total=0;
for (var i=0; i< sumAll.arguments.length; i++)
total+=sumAll.arguments[i];
return(total); }
sumAll(3,5,3,5,3,2,6)
Use of anonymous functions
 Anonymous functions very useful for callbacks
setTimeout(function() { alert("done"); }, 10000)
// putting alert("done") in function delays evaluation until call
 Simulate blocks by function definition and call
var u = { a:1, b:2 }
var v = { a:3, b:4 }
(function (x,y) {
var tempA = x.a; var tempB =x.b; //local variables
x.a=y.a; x.b=y.b;
y.a=tempA; y.b=tempB
}) (u,v)
// This works because objects are passed by reference
Detour: lambda calculus
 Expressions
x+y x + 2*y + z
 Functions
x. (x+y) z. (x + 2*y + z)
 Application
(x. (x+y)) (3) = 3+y
(z. (x + 2*y + z))(5) = x + 2*y + 5
Higher-Order Functions
 Given function f, return function f  f
f. x. f (f x)
 How does this work?

(f. x. f (f x)) (y. y+1)

= x. (y. y+1) ((y. y+1) x)

= x. (y. y+1) (x+1)

= x. (x+1)+1

In pure lambda calculus, ame result if step 2 is altered.


Same procedure, Lisp syntax
 Given function f, return function f  f
(lambda (f) (lambda (x) (f (f x))))
 How does this work?
((lambda (f) (lambda (x) (f (f x)))) (lambda (y) (+ y 1))

= (lambda (x) ((lambda (y) (+ y 1))


((lambda (y) (+ y 1)) x))))

= (lambda (x) ((lambda (y) (+ y 1)) (+ x 1))))

= (lambda (x) (+ (+ x 1) 1))


Same procedure, JavaScript syntax

 Given function f, return function f  f


function (f) { return function (x) { return f(f(x)); }; }
 How does this work?
(function (f) { return function (x) { return f(f(x)); }; )
(function (y) { return y +1; })

function (x) { return (function (y) { return y +1; })


((function (y) { return y + 1; }) (x)); }

function (x) { return (function (y) { return y +1; }) (x + 1); }

function (x) { return ((x + 1) + 1); }


Basic object features
 Use a function to construct an object
function car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
 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();
JavaScript functions and this
var x = 5; var y = 5;
function f() {return this.x + y;}
var o1 = {x : 10}
var o2 = {x : 20}
o1.g = f; o2.g = f;
o1.g()
15
o2.g()
25
Both o1.g and o2.g refer to the same function object
Why are the results for o1.g() and o2.g() different ?
More about this
 Property of the activation object for fctn call
• In most cases, this points to the object which has
the function as a property (or method).
• 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 !


Language features in CS242
 Stack memory management
• Parameters, local variables in activation records
 Garbage collection
• Automatic reclamation of inaccessible memory
 Closures
• Function together with environment (global variables)
 Exceptions
• Jump to previously declared location, passing values
 Object features
• Dynamic lookup, Encapsulation, Subtyping, Inheritance
 Concurrency
• Do more than one task at a time (JavaScript is single-threaded)
Stack memory management
 Local variables in activation record of function
function f(x) {
var y = 3;
function g(z) { return y+z;};
return g(x);
}
var x= 1; var y =2;
f(x) + y;
Garbage collection
 Automatic reclamation of unused memory
• Navigator 2: per page memory management
– Reclaim memory when browser changes page
• Navigator 3: reference counting
– Each memory region has associated count
– Count modified when pointers are changed
– Reclaim memory when count reaches zero
• Navigator 4: mark-and-sweep, or equivalent
– Garbage collector marks reachable memory
– Sweep and reclaim unreachable memory

Reference http://www.unix.org.ua/orelly/web/jscript/ch11_07.html
Discuss garbage collection in connection with Lisp
Closures
 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
• Description of technique
– http://www.crockford.com/JavaScript/private.html
– http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide:Working_
with_Closures
• But there are subtleties (look for __parent__)
Exceptions
 Throw an expression of any type
throw "Error2";
throw 42;
throw {toString: function() { return "I'm an object!"; } };
 Catch
try {
} catch (e if e == “FirstException") { // do something
} catch (e if e == “SecondException") { // do something else
} catch (e){ // executed if no match above
}

Reference: http://developer.mozilla.org/en/docs/
Core_JavaScript_1.5_Guide :Exception_Handling_Statements
Object features
 Dynamic lookup
• Method depends on run-time value of object
 Encapsulation
• Object contains private data, public operations
 Subtyping
• Object of one type can be used in place of another
 Inheritance
• Use implementation of one kind of object to implement
another kind of object
Concurrency
 JavaScript itself is single-threaded
• How can we tell if a language provides concurrency?
 AJAX provides a form of concurrency
• Create XMLHttpRequest object, set callback function
• Call request method, which continues asynchronously
• Reply from remote site executes callback function
– Event waits in event queue…
• Closures important for proper execution of callbacks
 Another form of concurrency
• use SetTimeout to do cooperative multi-tasking
– Maybe we will explore this in homework …
JavaScript eval
 Evaluate string as code
• The eval function evaluates a string of JavaScript 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
• Efficiently deserialize a large, complicated JavaScript data
structures received over network via XMLHttpRequest
 What does it cost to have eval in the language?
• Can you do this in C? What would it take to implement?
Unusual features of JavaScript
 Some built-in functions
• Eval, Run-time type checking functions, …
 Regular expressions
• Useful support of pattern matching
 Add, delete methods of an object dynamically
• Seen examples adding methods. Do you like this? Disadvantages?
• myobj.a = 5; myobj.b = 12; delete myobj.a;
 Redefine native functions and objects (incl undefined)
 Iterate over methods of an object
• for (variable in object) { statements }
 With statement (“considered harmful” – why??)
• with (object) { statements }
References
 Brendan Eich, slides from ICFP conference talk
• www.mozilla.org/js/language/ICFP-Keynote.ppt
 Tutorial
• http://www.w3schools.com/js/ (still there?)
 JavaScript 1.5 Guide
• http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_G
uide
 Douglas Crockford site
• http://www.crockford.com/JavaScript/
• http://20bits.com/2007/03/08/the-philosophy-of-JavaScript/

You might also like