Intro to Javascript

Introduction to JavaScript
www.bbsydptraining.blogspot.com

JavaScript is the programming language of the Web.
All modern HTML pages are using JavaScript.
JavaScript is easy to learn.
Why Study JavaScript?
JavaScript is one of 3 languages all web
developers MUST learn:
HTML to define the content of web pages
CSS to specify the layout of web pages
JavaScript to program the behavior of web page

JavaScript is the most popular programming
language in the world.
It is the language for HTML, for the Web, for
computers, servers, laptops, tablets, smart
phones, and more.
This page contains some examples of what
JavaScript can do in HTML.

<html>
<body>
<h1>My First JavaScript</h1>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello
JavaScript!";}
</script>
</body>
</html>

JavaScript Can Change HTML Elements
The HTML DOM (the Document Object Model) is
the official W3C standard for accessing HTML
elements.
JavaScript can manipulate the DOM (change
HTML contents).
The following example changes the content
(innerHTML) of an HTML element identified with
id="demo":

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
Common uses of JavaScript include:
Form validation
Page embellishments and special effects
Dynamic content manipulation
Emerging Web 2.0: client functionality implemented at client
- ICFP talk, 2006

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">
function whichButton(event) {
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>
Mouse event causes
page-defined function
to be called
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

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:Workin
g_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 }

Intro to Javascript

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to Intro to Javascript (20)

More from Anjan Banda (9)

Recently uploaded (20)

Intro to Javascript