CS312: Programming Languages
Lecture 21: JavaScript
Thomas Dillig
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 1/25 I Any AJAX application heavily relies on JavaScript
I JavaScript also has interesting language trade-offs
I You can think of JavaScipt as a hybrid language with features from almost everywhere glued together
Why Discuss JavaScript?
I JavaScript is very widely used and growing
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 2/25 I JavaScript also has interesting language trade-offs
I You can think of JavaScipt as a hybrid language with features from almost everywhere glued together
Why Discuss JavaScript?
I JavaScript is very widely used and growing
I Any AJAX application heavily relies on JavaScript
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 2/25 I You can think of JavaScipt as a hybrid language with features from almost everywhere glued together
Why Discuss JavaScript?
I JavaScript is very widely used and growing
I Any AJAX application heavily relies on JavaScript
I JavaScript also has interesting language trade-offs
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 2/25 Why Discuss JavaScript?
I JavaScript is very widely used and growing
I Any AJAX application heavily relies on JavaScript
I JavaScript also has interesting language trade-offs
I You can think of JavaScipt as a hybrid language with features from almost everywhere glued together
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 2/25 I C: Systems programming
I Java: Set-top box
I JavaScript: Web scripting
I Every language modifies some abstract data structure
I In JavaScipt, this is the document object model of an html web page
JavaScript Target
I Every language has a design target:
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 3/25 I Java: Set-top box
I JavaScript: Web scripting
I Every language modifies some abstract data structure
I In JavaScipt, this is the document object model of an html web page
JavaScript Target
I Every language has a design target:
I C: Systems programming
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 3/25 I JavaScript: Web scripting
I Every language modifies some abstract data structure
I In JavaScipt, this is the document object model of an html web page
JavaScript Target
I Every language has a design target:
I C: Systems programming
I Java: Set-top box
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 3/25 I Every language modifies some abstract data structure
I In JavaScipt, this is the document object model of an html web page
JavaScript Target
I Every language has a design target:
I C: Systems programming
I Java: Set-top box
I JavaScript: Web scripting
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 3/25 I In JavaScipt, this is the document object model of an html web page
JavaScript Target
I Every language has a design target:
I C: Systems programming
I Java: Set-top box
I JavaScript: Web scripting
I Every language modifies some abstract data structure
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 3/25 JavaScript Target
I Every language has a design target:
I C: Systems programming
I Java: Set-top box
I JavaScript: Web scripting
I Every language modifies some abstract data structure
I In JavaScipt, this is the document object model of an html web page
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 3/25 I Embedded JavaScript produces HTML to be displayed by the browser
I Shell Scripts compute commands executed by the shell
I Lots of string support
I Simple structure with little/no declarations
I Flexibility preferred over efficiency, safety, common sense
I More specifically, a scripting language is used to write programs that produce inputs to another language processor
I Examples:
I Common characteristics of scripting languages:
What’s a Scripting Language?
I Answer: One language embedded in another
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 4/25 I Embedded JavaScript produces HTML to be displayed by the browser
I Shell Scripts compute commands executed by the shell
I Lots of string support
I Simple structure with little/no declarations
I Flexibility preferred over efficiency, safety, common sense
I Examples:
I Common characteristics of scripting languages:
What’s a Scripting Language?
I Answer: One language embedded in another
I More specifically, a scripting language is used to write programs that produce inputs to another language processor
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 4/25 I Lots of string support
I Simple structure with little/no declarations
I Flexibility preferred over efficiency, safety, common sense
I Embedded JavaScript produces HTML to be displayed by the browser
I Shell Scripts compute commands executed by the shell
I Common characteristics of scripting languages:
What’s a Scripting Language?
I Answer: One language embedded in another
I More specifically, a scripting language is used to write programs that produce inputs to another language processor
I Examples:
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 4/25 I Lots of string support
I Simple structure with little/no declarations
I Flexibility preferred over efficiency, safety, common sense
I Shell Scripts compute commands executed by the shell
I Common characteristics of scripting languages:
What’s a Scripting Language?
I Answer: One language embedded in another
I More specifically, a scripting language is used to write programs that produce inputs to another language processor
I Examples:
I Embedded JavaScript produces HTML to be displayed by the browser
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 4/25 I Lots of string support
I Simple structure with little/no declarations
I Flexibility preferred over efficiency, safety, common sense
I Common characteristics of scripting languages:
What’s a Scripting Language?
I Answer: One language embedded in another
I More specifically, a scripting language is used to write programs that produce inputs to another language processor
I Examples:
I Embedded JavaScript produces HTML to be displayed by the browser
I Shell Scripts compute commands executed by the shell
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 4/25 I Lots of string support
I Simple structure with little/no declarations
I Flexibility preferred over efficiency, safety, common sense
What’s a Scripting Language?
I Answer: One language embedded in another
I More specifically, a scripting language is used to write programs that produce inputs to another language processor
I Examples:
I Embedded JavaScript produces HTML to be displayed by the browser
I Shell Scripts compute commands executed by the shell
I Common characteristics of scripting languages:
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 4/25 I Simple structure with little/no declarations
I Flexibility preferred over efficiency, safety, common sense
What’s a Scripting Language?
I Answer: One language embedded in another
I More specifically, a scripting language is used to write programs that produce inputs to another language processor
I Examples:
I Embedded JavaScript produces HTML to be displayed by the browser
I Shell Scripts compute commands executed by the shell
I Common characteristics of scripting languages:
I Lots of string support
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 4/25 I Flexibility preferred over efficiency, safety, common sense
What’s a Scripting Language?
I Answer: One language embedded in another
I More specifically, a scripting language is used to write programs that produce inputs to another language processor
I Examples:
I Embedded JavaScript produces HTML to be displayed by the browser
I Shell Scripts compute commands executed by the shell
I Common characteristics of scripting languages:
I Lots of string support
I Simple structure with little/no declarations
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 4/25 What’s a Scripting Language?
I Answer: One language embedded in another
I More specifically, a scripting language is used to write programs that produce inputs to another language processor
I Examples:
I Embedded JavaScript produces HTML to be displayed by the browser
I Shell Scripts compute commands executed by the shell
I Common characteristics of scripting languages:
I Lots of string support
I Simple structure with little/no declarations
I Flexibility preferred over efficiency, safety, common sense
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 4/25 I Later standardized for browser compatibility, called ECMAScript
I Renamed to JavaScript in part of marketing deal with Sun - no relation to Java!
I Today: Many implementations available
JavaScript History
I Developed by Brendan Eich at Netscape in 1995 as scripting language for Navigator 2
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 5/25 I Renamed to JavaScript in part of marketing deal with Sun - no relation to Java!
I Today: Many implementations available
JavaScript History
I Developed by Brendan Eich at Netscape in 1995 as scripting language for Navigator 2
I Later standardized for browser compatibility, called ECMAScript
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 5/25 I Today: Many implementations available
JavaScript History
I Developed by Brendan Eich at Netscape in 1995 as scripting language for Navigator 2
I Later standardized for browser compatibility, called ECMAScript
I Renamed to JavaScript in part of marketing deal with Sun - no relation to Java!
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 5/25 JavaScript History
I Developed by Brendan Eich at Netscape in 1995 as scripting language for Navigator 2
I Later standardized for browser compatibility, called ECMAScript
I Renamed to JavaScript in part of marketing deal with Sun - no relation to Java!
I Today: Many implementations available
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 5/25 I Has >90% browser market share
I Opportunity to define the HTML scripting language
I Brendan Eich: “I hacked the JS prototype in 1 week in May, and it showed! Mistakes were frozen early. Rest of the yer spend embedding in browser and cursing my design”
I Initial uses of JavaScript: Form validation, page effects, dynamic content manipulation
I More recently: Web 2.0: Significant functionality implemented on web client
I Examples: Google Docs, Gmail, etc
Motivation for JavaScript
I Netscape, 1995
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 6/25 I Opportunity to define the HTML scripting language
I Brendan Eich: “I hacked the JS prototype in 1 week in May, and it showed! Mistakes were frozen early. Rest of the yer spend embedding in browser and cursing my design”
I Initial uses of JavaScript: Form validation, page effects, dynamic content manipulation
I More recently: Web 2.0: Significant functionality implemented on web client
I Examples: Google Docs, Gmail, etc
Motivation for JavaScript
I Netscape, 1995
I Has >90% browser market share
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 6/25 I Brendan Eich: “I hacked the JS prototype in 1 week in May, and it showed! Mistakes were frozen early. Rest of the yer spend embedding in browser and cursing my design”
I Initial uses of JavaScript: Form validation, page effects, dynamic content manipulation
I More recently: Web 2.0: Significant functionality implemented on web client
I Examples: Google Docs, Gmail, etc
Motivation for JavaScript
I Netscape, 1995
I Has >90% browser market share
I Opportunity to define the HTML scripting language
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 6/25 I Initial uses of JavaScript: Form validation, page effects, dynamic content manipulation
I More recently: Web 2.0: Significant functionality implemented on web client
I Examples: Google Docs, Gmail, etc
Motivation for JavaScript
I Netscape, 1995
I Has >90% browser market share
I Opportunity to define the HTML scripting language
I Brendan Eich: “I hacked the JS prototype in 1 week in May, and it showed! Mistakes were frozen early. Rest of the yer spend embedding in browser and cursing my design”
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 6/25 I More recently: Web 2.0: Significant functionality implemented on web client
I Examples: Google Docs, Gmail, etc
Motivation for JavaScript
I Netscape, 1995
I Has >90% browser market share
I Opportunity to define the HTML scripting language
I Brendan Eich: “I hacked the JS prototype in 1 week in May, and it showed! Mistakes were frozen early. Rest of the yer spend embedding in browser and cursing my design”
I Initial uses of JavaScript: Form validation, page effects, dynamic content manipulation
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 6/25 I Examples: Google Docs, Gmail, etc
Motivation for JavaScript
I Netscape, 1995
I Has >90% browser market share
I Opportunity to define the HTML scripting language
I Brendan Eich: “I hacked the JS prototype in 1 week in May, and it showed! Mistakes were frozen early. Rest of the yer spend embedding in browser and cursing my design”
I Initial uses of JavaScript: Form validation, page effects, dynamic content manipulation
I More recently: Web 2.0: Significant functionality implemented on web client
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 6/25 Motivation for JavaScript
I Netscape, 1995
I Has >90% browser market share
I Opportunity to define the HTML scripting language
I Brendan Eich: “I hacked the JS prototype in 1 week in May, and it showed! Mistakes were frozen early. Rest of the yer spend embedding in browser and cursing my design”
I Initial uses of JavaScript: Form validation, page effects, dynamic content manipulation
I More recently: Web 2.0: Significant functionality implemented on web client
I Examples: Google Docs, Gmail, etc
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 6/25 I Tolerate minor errors (missing semicolon)
I Simplified even handling, e.g., onClick, onMouseDown, . . . inspired by HyperCard
I Full features that make it easy to write and modify code that does something from all other languages
JavaScript Design Goals
I Make it easy to copy/paste code
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 7/25 I Simplified even handling, e.g., onClick, onMouseDown, . . . inspired by HyperCard
I Full features that make it easy to write and modify code that does something from all other languages
JavaScript Design Goals
I Make it easy to copy/paste code
I Tolerate minor errors (missing semicolon)
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 7/25 I Full features that make it easy to write and modify code that does something from all other languages
JavaScript Design Goals
I Make it easy to copy/paste code
I Tolerate minor errors (missing semicolon)
I Simplified even handling, e.g., onClick, onMouseDown, . . . inspired by HyperCard
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 7/25 JavaScript Design Goals
I Make it easy to copy/paste code
I Tolerate minor errors (missing semicolon)
I Simplified even handling, e.g., onClick, onMouseDown, . . . inspired by HyperCard
I Full features that make it easy to write and modify code that does something from all other languages
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 7/25 I We have higher order functions, lambda, etc
I Objects in JavaScript are based on Smalltalk/Self var pt = {x: 10, move:function(dx){this.x+=dx}}
I But lots of “issues”
I Douglas Crockford: “In JavaScript, there is a beautiful, elegant, highly expressive language that is buried under a steaming pile of good intentions and blunders”
JavaScript Design
I Functions based on LISP/Scheme
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 8/25 I Objects in JavaScript are based on Smalltalk/Self var pt = {x: 10, move:function(dx){this.x+=dx}}
I But lots of “issues”
I Douglas Crockford: “In JavaScript, there is a beautiful, elegant, highly expressive language that is buried under a steaming pile of good intentions and blunders”
JavaScript Design
I Functions based on LISP/Scheme
I We have higher order functions, lambda, etc
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 8/25 I But lots of “issues”
I Douglas Crockford: “In JavaScript, there is a beautiful, elegant, highly expressive language that is buried under a steaming pile of good intentions and blunders”
JavaScript Design
I Functions based on LISP/Scheme
I We have higher order functions, lambda, etc
I Objects in JavaScript are based on Smalltalk/Self var pt = {x: 10, move:function(dx){this.x+=dx}}
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 8/25 I Douglas Crockford: “In JavaScript, there is a beautiful, elegant, highly expressive language that is buried under a steaming pile of good intentions and blunders”
JavaScript Design
I Functions based on LISP/Scheme
I We have higher order functions, lambda, etc
I Objects in JavaScript are based on Smalltalk/Self var pt = {x: 10, move:function(dx){this.x+=dx}}
I But lots of “issues”
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 8/25 JavaScript Design
I Functions based on LISP/Scheme
I We have higher order functions, lambda, etc
I Objects in JavaScript are based on Smalltalk/Self var pt = {x: 10, move:function(dx){this.x+=dx}}
I But lots of “issues”
I Douglas Crockford: “In JavaScript, there is a beautiful, elegant, highly expressive language that is buried under a steaming pile of good intentions and blunders”
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 8/25 I But HTML is not case sensitive, so any HTML object in JavaScript is also not
I Example: onClick vs. ONCLICK
I Statements are terminated by returns or semi-colons
I JavaScript has blocks using {} , but no separate scope!
Language Syntax
I JavaScript is case sensitive
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 9/25 I Example: onClick vs. ONCLICK
I Statements are terminated by returns or semi-colons
I JavaScript has blocks using {} , but no separate scope!
Language Syntax
I JavaScript is case sensitive
I But HTML is not case sensitive, so any HTML object in JavaScript is also not
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 9/25 I Statements are terminated by returns or semi-colons
I JavaScript has blocks using {} , but no separate scope!
Language Syntax
I JavaScript is case sensitive
I But HTML is not case sensitive, so any HTML object in JavaScript is also not
I Example: onClick vs. ONCLICK
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 9/25 I JavaScript has blocks using {} , but no separate scope!
Language Syntax
I JavaScript is case sensitive
I But HTML is not case sensitive, so any HTML object in JavaScript is also not
I Example: onClick vs. ONCLICK
I Statements are terminated by returns or semi-colons
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 9/25 Language Syntax
I JavaScript is case sensitive
I But HTML is not case sensitive, so any HTML object in JavaScript is also not
I Example: onClick vs. ONCLICK
I Statements are terminated by returns or semi-colons
I JavaScript has blocks using {} , but no separate scope!
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 9/25 I But no declarations; variables are implicitly defined by their first use, which must be an assignment.
I Note: Implicit definition has global scope, even if it occurs in nested scope { var x = "123" } return x; //will return "123"
Variables
I You define variables using the var statement
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 10/25 I Note: Implicit definition has global scope, even if it occurs in nested scope { var x = "123" } return x; //will return "123"
Variables
I You define variables using the var statement
I But no declarations; variables are implicitly defined by their first use, which must be an assignment.
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 10/25 Variables
I You define variables using the var statement
I But no declarations; variables are implicitly defined by their first use, which must be an assignment.
I Note: Implicit definition has global scope, even if it occurs in nested scope { var x = "123" } return x; //will return "123"
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 10/25 I rhino has the same read-eval-print loop we have already seen in the LISP interpreter
I Play with it!
Stand-alone JavaScript
I You can use the Rhino commend-line interpreter to play with JavaScript without a website
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 11/25 I Play with it!
Stand-alone JavaScript
I You can use the Rhino commend-line interpreter to play with JavaScript without a website
I rhino has the same read-eval-print loop we have already seen in the LISP interpreter
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 11/25 Stand-alone JavaScript
I You can use the Rhino commend-line interpreter to play with JavaScript without a website
I rhino has the same read-eval-print loop we have already seen in the LISP interpreter
I Play with it!
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 11/25 I Main reason it is used: Only kind of program that anyone can run in any browser and expect to function
I This is the main reason JavaScript is popular
JavaScript in the Browser
I Most of the time JavaScript is used in the browser to manipulate a web page
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 12/25 I This is the main reason JavaScript is popular
JavaScript in the Browser
I Most of the time JavaScript is used in the browser to manipulate a web page
I Main reason it is used: Only kind of program that anyone can run in any browser and expect to function
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 12/25 JavaScript in the Browser
I Most of the time JavaScript is used in the browser to manipulate a web page
I Main reason it is used: Only kind of program that anyone can run in any browser and expect to function
I This is the main reason JavaScript is popular
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 12/25 Web Example: Page Manipulation
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 13/25 I 64-bit floating point
I No integer type!
I Special value NaN and Infinity
I Numbers:
I Strings using Unicode characters
I Special values null, undefined
Primitive Data Types
I Boolean: true and false
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 14/25 I 64-bit floating point
I No integer type!
I Special value NaN and Infinity
I Strings using Unicode characters
I Special values null, undefined
Primitive Data Types
I Boolean: true and false
I Numbers:
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 14/25 I No integer type!
I Special value NaN and Infinity
I Strings using Unicode characters
I Special values null, undefined
Primitive Data Types
I Boolean: true and false
I Numbers:
I 64-bit floating point
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 14/25 I Special value NaN and Infinity
I Strings using Unicode characters
I Special values null, undefined
Primitive Data Types
I Boolean: true and false
I Numbers:
I 64-bit floating point
I No integer type!
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 14/25 I Strings using Unicode characters
I Special values null, undefined
Primitive Data Types
I Boolean: true and false
I Numbers:
I 64-bit floating point
I No integer type!
I Special value NaN and Infinity
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 14/25 I Special values null, undefined
Primitive Data Types
I Boolean: true and false
I Numbers:
I 64-bit floating point
I No integer type!
I Special value NaN and Infinity
I Strings using Unicode characters
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 14/25 Primitive Data Types
I Boolean: true and false
I Numbers:
I 64-bit floating point
I No integer type!
I Special value NaN and Infinity
I Strings using Unicode characters
I Special values null, undefined
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 14/25 I Basic types by value
I Objects by reference
I fun.length: number of arguments in definition
I fun.arguments.length: number of arguments in call
I Parameter passing:
I You can supply any number of arguments
I Anonymous (lambda) functions: (function (x,y) {return x+y}) (2,3);
JavaScript Functions
I Declarations can appear in function body, allowing for local variables and inner functions
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 15/25 I fun.length: number of arguments in definition
I fun.arguments.length: number of arguments in call
I Basic types by value
I Objects by reference
I You can supply any number of arguments
I Anonymous (lambda) functions: (function (x,y) {return x+y}) (2,3);
JavaScript Functions
I Declarations can appear in function body, allowing for local variables and inner functions
I Parameter passing:
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 15/25 I fun.length: number of arguments in definition
I fun.arguments.length: number of arguments in call
I Objects by reference
I You can supply any number of arguments
I Anonymous (lambda) functions: (function (x,y) {return x+y}) (2,3);
JavaScript Functions
I Declarations can appear in function body, allowing for local variables and inner functions
I Parameter passing:
I Basic types by value
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 15/25 I fun.length: number of arguments in definition
I fun.arguments.length: number of arguments in call
I You can supply any number of arguments
I Anonymous (lambda) functions: (function (x,y) {return x+y}) (2,3);
JavaScript Functions
I Declarations can appear in function body, allowing for local variables and inner functions
I Parameter passing:
I Basic types by value
I Objects by reference
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 15/25 I fun.length: number of arguments in definition
I fun.arguments.length: number of arguments in call
I Anonymous (lambda) functions: (function (x,y) {return x+y}) (2,3);
JavaScript Functions
I Declarations can appear in function body, allowing for local variables and inner functions
I Parameter passing:
I Basic types by value
I Objects by reference
I You can supply any number of arguments
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 15/25 I fun.arguments.length: number of arguments in call
I Anonymous (lambda) functions: (function (x,y) {return x+y}) (2,3);
JavaScript Functions
I Declarations can appear in function body, allowing for local variables and inner functions
I Parameter passing:
I Basic types by value
I Objects by reference
I You can supply any number of arguments
I fun.length: number of arguments in definition
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 15/25 I Anonymous (lambda) functions: (function (x,y) {return x+y}) (2,3);
JavaScript Functions
I Declarations can appear in function body, allowing for local variables and inner functions
I Parameter passing:
I Basic types by value
I Objects by reference
I You can supply any number of arguments
I fun.length: number of arguments in definition
I fun.arguments.length: number of arguments in call
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 15/25 JavaScript Functions
I Declarations can appear in function body, allowing for local variables and inner functions
I Parameter passing:
I Basic types by value
I Objects by reference
I You can supply any number of arguments
I fun.length: number of arguments in definition
I fun.arguments.length: number of arguments in call
I Anonymous (lambda) functions: (function (x,y) {return x+y}) (2,3);
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 15/25 Function Examples
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 16/25 Use of Anonymous Functions
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 17/25 I Can think of it almost like a hash table or associative array
I Defined by a set of name:value pairs: objDuck = { name:"Quak", gender:"male" }
I New properties can be added at any time: objDuck.species = "mallard"
I Can have methods, can refer to this
Objects
I In JavaScript, an object is nothing but a collection of named properties
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 18/25 I Defined by a set of name:value pairs: objDuck = { name:"Quak", gender:"male" }
I New properties can be added at any time: objDuck.species = "mallard"
I Can have methods, can refer to this
Objects
I In JavaScript, an object is nothing but a collection of named properties
I Can think of it almost like a hash table or associative array
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 18/25 I New properties can be added at any time: objDuck.species = "mallard"
I Can have methods, can refer to this
Objects
I In JavaScript, an object is nothing but a collection of named properties
I Can think of it almost like a hash table or associative array
I Defined by a set of name:value pairs: objDuck = { name:"Quak", gender:"male" }
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 18/25 I Can have methods, can refer to this
Objects
I In JavaScript, an object is nothing but a collection of named properties
I Can think of it almost like a hash table or associative array
I Defined by a set of name:value pairs: objDuck = { name:"Quak", gender:"male" }
I New properties can be added at any time: objDuck.species = "mallard"
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 18/25 Objects
I In JavaScript, an object is nothing but a collection of named properties
I Can think of it almost like a hash table or associative array
I Defined by a set of name:value pairs: objDuck = { name:"Quak", gender:"male" }
I New properties can be added at any time: objDuck.species = "mallard"
I Can have methods, can refer to this
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 18/25 Basic Object Features
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 19/25 I In most cases, this points to the object which has the function as property (or method)
I Example: var o = {x:10, f:function): {return this.x}} o.f()
I This will evaluate to 10
Objects and this
I The this variable is a property of the activation object for a function call
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 20/25 I Example: var o = {x:10, f:function): {return this.x}} o.f()
I This will evaluate to 10
Objects and this
I The this variable is a property of the activation object for a function call
I In most cases, this points to the object which has the function as property (or method)
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 20/25 I This will evaluate to 10
Objects and this
I The this variable is a property of the activation object for a function call
I In most cases, this points to the object which has the function as property (or method)
I Example: var o = {x:10, f:function): {return this.x}} o.f()
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 20/25 Objects and this
I The this variable is a property of the activation object for a function call
I In most cases, this points to the object which has the function as property (or method)
I Example: var o = {x:10, f:function): {return this.x}} o.f()
I This will evaluate to 10
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 20/25 JavaScript Functions and this
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 21/25 Local Variables stored in“Scope Object”
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 22/25 I However, AJAX model allows for some hacked-up asynchronous callback mechanism using XMLHttpRequest
I Widely used, but sad and pathetic hack
I Another form of concurrency: Use SetTimeout for cooperative multitasking
Concurrency
I JavaScript is single-threaded
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 23/25 I Widely used, but sad and pathetic hack
I Another form of concurrency: Use SetTimeout for cooperative multitasking
Concurrency
I JavaScript is single-threaded
I However, AJAX model allows for some hacked-up asynchronous callback mechanism using XMLHttpRequest
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 23/25 I Another form of concurrency: Use SetTimeout for cooperative multitasking
Concurrency
I JavaScript is single-threaded
I However, AJAX model allows for some hacked-up asynchronous callback mechanism using XMLHttpRequest
I Widely used, but sad and pathetic hack
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 23/25 Concurrency
I JavaScript is single-threaded
I However, AJAX model allows for some hacked-up asynchronous callback mechanism using XMLHttpRequest
I Widely used, but sad and pathetic hack
I Another form of concurrency: Use SetTimeout for cooperative multitasking
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 23/25 I Add, delete methods of objects dynamically
I Redefine native functions and objects
I Iterate over methods of an object: for (variable in object) { statement }
Unusual features of JavaScript
I Built-in regular expressions
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 24/25 I Redefine native functions and objects
I Iterate over methods of an object: for (variable in object) { statement }
Unusual features of JavaScript
I Built-in regular expressions
I Add, delete methods of objects dynamically
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 24/25 I Iterate over methods of an object: for (variable in object) { statement }
Unusual features of JavaScript
I Built-in regular expressions
I Add, delete methods of objects dynamically
I Redefine native functions and objects
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 24/25 Unusual features of JavaScript
I Built-in regular expressions
I Add, delete methods of objects dynamically
I Redefine native functions and objects
I Iterate over methods of an object: for (variable in object) { statement }
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 24/25 I The language does everything possible to allow unreadable and buggy code
I Dynamic features make an performant interpreter extremely difficult
I And yet: JavaScript is one of the most widely-used languages!
JavaScript Overall
I JavaScript is in many ways the worst of all features combined in one language
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 25/25 I Dynamic features make an performant interpreter extremely difficult
I And yet: JavaScript is one of the most widely-used languages!
JavaScript Overall
I JavaScript is in many ways the worst of all features combined in one language
I The language does everything possible to allow unreadable and buggy code
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 25/25 I And yet: JavaScript is one of the most widely-used languages!
JavaScript Overall
I JavaScript is in many ways the worst of all features combined in one language
I The language does everything possible to allow unreadable and buggy code
I Dynamic features make an performant interpreter extremely difficult
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 25/25 JavaScript Overall
I JavaScript is in many ways the worst of all features combined in one language
I The language does everything possible to allow unreadable and buggy code
I Dynamic features make an performant interpreter extremely difficult
I And yet: JavaScript is one of the most widely-used languages!
Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 25/25