Top Banner
JavaScript By: Daniel Henneberger
41

By: Daniel Henneberger. Introduction Data Types Flow Control Inheritance/Built-in Functions User defined types, Generics Arrays Function.

Dec 15, 2015

Download

Documents

Shakira Bradby
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

JavaScript

By: Daniel Henneberger

Page 2: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

ECMAScript v5.1

By: Daniel Henneberger

Page 3: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Introduction Data Types Flow Control Inheritance/Built-in Functions User defined types, Generics Arrays Function methods Quirks Comparison

Page 4: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Prototype-based scripting language Interpreted?

Chrome V8 attempts to compile Java’s Rhino attempts to compile to byte code Mozilla attempts JIT

Garbage Collection – Up to implementer Loosely-typed, First-class functions, dynamic Java-like syntax Two Subsets

Default Language (will be abandon later) Strict Language

Free The word JavaScript must be licensed by Oracle Mozilla has ‘Inventor rights’

Brief

Page 5: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Developed for client-side processing on web

browsers Now capable of other tasks

Web Servers (node.js) Desktop Widgets Inside Applications

Applications

Page 6: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Originally Called LiveScript 1995- Created for Netscape Navigator by Brendan

Eich 1995- Renamed JavaScript

Most likely a marking ploy 1996- Microsoft created Jscript 1998- Formalized to ECMAScript 1998- ISO/IEC 16262 1998- ECMAScript v2 1999- ECMAScript v3

History of JavaScript

Page 7: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

1999-2009 – ECMAScript v4 (Abandoned) 2008- Google’s V8 Engine 2009- Node.js created 2009- ECMAScript v5 2010- Test262 created 2011-  ISO/IEC 16262:2011 2011- ECMAScript v5.1

History of JavaScript

Page 8: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

2013 – Java 8’s JavaScript Engine (Nashorn) 201? ECMAScript v6

Only strict mode Incompatible syntax Classes Getters/Setters Tamper proof objects Block Scoping

Future of JavaScript

Page 9: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Adobe, Mozilla, Microsoft Later came IBM, Google, Apple, Opera, Dojo,

and Company 100.

ECMAScript Committee

Page 10: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Codename Browser Test262 Fail Percent

Jscript Microsoft Internet Explo. 9 5.2%

SpiderMonkey Firefox 1.5%

Futhark Opera 0.1%

V8 Chrome 0.1%

Implementations

Test262 really important

Page 11: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

End of line semicolons optional

Automatically inserted by compiler Excess whitespace and comments are

discarded during lexical analysis Strings can be defined by ' or "

Multiline Strings possible with \

Grammar

Page 12: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Introduction Data Types Flow Control Inheritance/Built-in Functions User defined types, Generics Arrays Function methods Quirks Comparison

Page 13: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

var - has functional scoping const null undefined

let has block scoping (ECMAScript v6) let and const to replace var

Usable Types

Page 14: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Undefined - primitive value used when a variable has not been

assigned a value Null - no value Boolean – true/false Number - double-precision 64-bit

NaN, Positive Infinity, Negative Infinity IEEE 754

String - UTF-16 Object

runtime system performs automatic type conversion as needed 1+true=2, null + false = 0, null != false, null == undefined

Type coercion – new Boolean(true);

Internal Types

Page 15: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Introduction Data Types Flow Control Inheritance/Built-in Functions User defined types, Generics Arrays Function methods Quirks Comparison

Page 16: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Flow Control - Sequencing

function test(){ for(var i = 0; i<10; i++){ //doSomething; } return i;}result is 10

Page 17: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

if(Expression) Statement else Statement if(Expression) Statement

SwitchStatement: switch (Expression) CaseBlock CaseBlock:

{CaseClause} {CaseClause DefaultClause CaseClause}

CaseClause: case Expression : StatementList Default Clause: default : StatementList

with(Expression) Statement

LogicalORExpression ? AssignmentExpression : AssignmentExpression

Flow Control – Selection

Page 18: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Simple Assignment: = Compound Assignment: op=

*= /= %= += -= <<= >>= >>>= &= ^= |=

Comma Operator ( , )

Flow Control – Expression Evaluation

Page 19: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

do Statement while ( Expression ); while ( Expression ) Statement for (ExpressionNoIn; Expression ; Expression )

Statement for ( var VarDeclaration; Expression; Expression)

Statement for ( LeftHandSideExpression in Expression ) Statement for ( var VariableDeclarationNoIn in Expression )

Statement

label, break, continue, (throw, return, ‘normal’)

Flow Control – Iteration

Page 20: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

function Identifier ( ParameterList ) { FunctionBody } function ( ParameterList ) { FunctionBody }

function square(y){ this.rslt = y*y;}var x = new square(5);x.rslt;

var square = new Function("a", "b", "return a*b")

Flow Control – Procedural Abstraction

var x = function(y) {   return y * y;};x(5);function square(y){ return y*y;}square(5);var Math = { square: function(y){ return y*y }}Math.square(5);

Page 21: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Object Properties

Flow Control – Procedural Abstraction

Object.defineProperty(o, "a", {value : 37, writable : true, enumerable : true, configurable : true, get : function(){

return bValue; },set : function(newValue){

bValue = newValue; }

});

Page 22: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

No optimization for Tail Call Recursion No concurrency

setTimeout(func, delay, [params]) setInterval() new Worker(“something.js”)

Flow Control – Recursion/Concurrency

Page 23: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

try / catch try / finally try / catch / finally try {Code} catch ( Identifier ) {Code}

finally {Code}

throw Error, EvalError, RangeError, ReferenceError,

SyntaxError, TypeError and URIError

Flow Control – Exception Handling

Page 24: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Global - variables that are not declared but

are referenced are automatically global Eval

Strict Mode- cannot return variables Creates a new binding

Function function x(){t = 5}; x(); console.log(t) //5 function x(){var t = 5}; x(); console.log(t)

//undef

Execution Context

Page 25: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Introduction Data Types Flow Control Inheritance/Built-in Functions User defined types, Generics Arrays Function methods Quirks Comparison

Page 26: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

function Person(){}function Ninja(){}Ninja.prototype = new Person();(new Ninja()) instanceof Person

var o = new Object();o.[[Prototype]] = Foo.prototype;o.Foo();

Prototype Based Inheritance

Page 27: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Number

parseInt() parseFloat() parseInt() isNaN() ifFinite()

eval() Library

Math JSON Date RegExp

Special Characters decodeURI encodeURI

Built-in Functions

Page 28: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Introduction Data Types Flow Control Inheritance/Built-in Functions User defined types, Generics Arrays Function methods Quirks Comparison

Page 29: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

user defined typesgenerics

NONE!

Page 30: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Introduction Data Types Flow Control Inheritance/Built-in Functions User defined types, Generics Arrays Function methods Quirks Comparison

Page 31: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

new Array([item1, item2, …]) new Array(len) Keys can be integers or strings Can be treated as: Arrays, Queues, Stacks,

Priority Queues, Set No bounds

arr[arr.length] = I;

Arrays

Page 32: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

push pop reverse sort sort(function) shift slice splice unshift indexOf every lastIndexOf some(function) forEach(function) map(function) filter(function) reduce(function) reduceRight(function)

Array Operations

Page 33: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

x = 42;         // creates the property x on the global objectvar y = 43;     // declares a new variable, ymyobj = {};myobj.h = 4;    // creates property h on myobjmyobj.k = 5;    // creates property k on myobj delete x;       // returns true  (x is a property of the global object and can be deleted)delete y;       // returns false (delete doesn't affect variable names)delete Math.PI; // returns false (delete doesn't affect certain predefined properties)delete myobj.h; // returns true  (user-defined properties can be deleted) with(myobj) {     delete k;   // returns true  (equivalent to delete myobj.k)}  delete myobj;   // returns true 

delete

Page 34: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Introduction Data Types Flow Control Inheritance/Built-in Functions User defined types, Generics Arrays Function methods Quirks Comparison

Page 35: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

bind() is powerful

x.bind(this); call() – allows calling inner functions with

current bindings toString()

Built-in Function Functions

Page 36: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Introduction Data Types Flow Control Inheritance/Built-in Functions User defined types, Generics Arrays Function methods Quirks Comparison

Page 37: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Floating point arithmetic IEEE 754

0.1 + 0.2 !== 0.3 A bad choice

All implementations see to behave differently Code not portable

Accidental scoping Global variables

var a = 0 || "4"; a = "4“

Scope hoisting eval()

Quirks

Page 38: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

Introduction Data Types Flow Control Inheritance/Built-in Functions User defined types, Generics Arrays Function methods Quirks Comparison

Page 39: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

JavaScript Java C Go

Type Loosely Typed

Strongly Typed

Strongly Typed

Strongly Typed

Inheritance

Prototypal Classical Classical Automatic

Multiple Inheritance

No No No Yes

Generics No Yes No No

Pointers No Yes No Yes

Closures Yes No No Yes

Exceptions Yes Yes No Built-in

Threads No Yes Yes Yes

Garbage Collection

Yes Yes No Yes

Semi-Colon Optional

Yes No No Yes

Like JavaScript

100% 30% 30% 40%

Page 40: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

“Java and Javascript are similar like Car and Carpet are

similar.” Greg Hewgill

Page 41: By: Daniel Henneberger.  Introduction  Data Types  Flow Control  Inheritance/Built-in Functions  User defined types, Generics  Arrays  Function.

www.ecma-international.org

/publications/files/ECMA-ST/Ecma-262.pdf

References