jsbasics-slide

JavaScript by Examples
part 1 - 3
1. Language basics
2. Functions
3. Inheritance, Module
Péter Borkuti
2013

I. part
Language basics
Péter Borkuti
2013

Preview I.
background
History (IT, Netscape)
JS History
Reputation, what is JS?
Start learning (Node, Rhino, Firebug, HTML)

Preview II.
JS Types
Math library
Syntax: if, ===, switch
Objects
Objects inheritance
Arrays
Array-like objects

Preview III. Functions
anatomy
Parameters, arguments
variables: globals, locals, hiding, scope
Hoisting, function expression
immediate invoke
return

Preview IV. Functions
objects and functions
constructor
invocation
closure and this
Function as parameter (callback sync/async) + AJAX
Closures + closures and HTML
nested functions
Method chaining (cascade)

Preview V. Functions
augmenting built-ins, inheritance
module pattern
can JS oop?
bonus ??
questions
homework

Background
Douglas Crockford David Flanagan
developer.mozilla.org/en-US/docs/JavaScript

History - pre-JS years
James Gosling

Sun, Java, James Gosling
1990, Sun, alternative to C++/C
modify and extend C++ - “C++ ++ --”
1992, new language Oak - embedded for PDA, set-top-boxes
1994, new platform: Internet, new name: Java
browser: WebRunner->HotJava

Netscape, Brendan Eich

History -pre-JS - Browsers
NCSA Mosaic, 1993
Marc Andreessen, Eric Bina
Netscape 1.0, 1994 (No JS, No Java)
Brendan Eich, Mocha/LiveScript/JavaScript
Netscape 2.0, 1995, Java, JavaScript support
Microsoft JScript, 1996

Goals of Netscape Corp.
Beat Microsoft
C++ - Java
VB - own script language
Browser as “The Platform”

Goals of JavaScript I.
“look like Java” programming language
“doing Scheme” in Netscape
dynamic web

Goals of JavaScript II.
HTML needed a "scripting language", [...] that was easy to use by
amateurs and novices, where the code could be written directly in
source form as part of the Web page markup. We aimed to provide
a "glue language" for the Web designers [...] who were building
Web content from components such as images, plugins, and Java
applets. We saw Java as the "component language" used by
higher-priced programmers, where the glue programmers [...]
would assemble components and automate their interactions
using JS. (Brendan Eich, CW interview)

History of JavaScript
1994-95 Mocha/LiveScript/JavaScript 1.0
1996 MS JScript
1996 Netscape went to ECMA
1997 ECMAScript v1 (JavaScript 1.3)
1999 ECMAScript v3 (JavaScript 1.5)
2009 ECMAScript v5 (JavaScript 1.8?)
2011 ECMAScript v5.1

Reputation of JS
Java !== JavaScript, Java !> JavaScript
DOM is a mess
JavaScript is not easy
JavaScript is not like the programming language you know
Scripting language

What JavaScript is I.
THE language of the web
Powerful language
loose typing but not untyped
object literal notation
dynamic objects
prototypal inheritance

What JavaScript is II.
C syntax
Java Date, Math packages, Boolean/String/... wrapper objects
functions are first-class objects/citizens
closures
global objects
Smalltalk/Lisp/Scheme

Start Learning! HTML
<!DOCTYPE html>
<head><meta charset="UTF-8"/>
<title>example 0</title></head>
<html>
<body>
</body>
</html>
<script>
console.log("Hello Js");
</script>

Placing JS in HTML
HTML:
<script src="example01.js">
</script>
example01.js:
console.log("Hello js");

More js in one HTML
HTML:
<body>
</script>
</script>
</body>

JS Types
Boolean
String
Number
Null
Undefined
Object

Syntax and types
1
11.5
parseInt('8')=8
parseInt('08')=0
Infinity
-Infinity
NaN
true
true

Syntax and types - Numbers
No Integer type
64-bit floating point (double) IEEE 754
Beware of bit-operations
Number(“42”)
+”42”
parseInt(“8”,10)
Infinity,-Infinity,NaN

Syntax and types - Strings
new String(“Hello”)
Concatenation : +
“ or ', no difference
UTF-16 (surrogate pairs!)
.length counts 16-bit values
Dynamic type conversion

Syntax and types - Boolean
false,false,false,false,false,false,false
bad:true
!!{}

Syntax and types – Boolean op

false
Hello
true
Hello

500
1
TypeError: mx is undefined

Syntax and types
Boolean : true, false
Falsy values: 0,””,null,NaN, undefined, false
Truthy values: everything else (objects also)
&&,|| may give any value, short circuit
! : always boolean, !!: convert to boolean
New Boolean() : avoid it
Loose/weak typeing

Syntax – Math lib
Free-form language
; optional (see later: ASI)
Math lib from Java

Syntax – == vs ===
"1" == 1
'1' !== 1
NaN !== NaN

Syntax == vs ===
== : type coercion (implicit/automatic conv.)
AVOID it!
=== strict equality/identity op.
NaN !== NaN

Syntax - switch
With Strings also
Checking with '==='
Expressions may be in 'case'
Break
Slow

Object – access fields
true
true
Hello
Hello
obj[field1]=[object Object]
obj[field3]=true

Object – checking fields
true
true
true
true
false
false
false

Object – inheritation
Object { name="Joe", age=10}
Object { name="Joe", age=10}
Object { name="Susan", age=10}
Object { name="Susan", age=10}

Object – inheritation
Object { name="Jack", age=10}
Object { name="Lucy", age=10}
Object { name="Jack", age=10}
Object { hair="blonde", name="Jack", age=
10}

Objects
Object literal powerful, nice
Object vars - reference
Inheritance with linking
Inherited fields can be hidden
HasOwnProperty, in, typeof, undefined
Object.getPrototypeOf(o) //ES 5

Object.create
ECMAScript 5
ECMAScript 3 : ( from YUI)

Syntax – Arrays
create: []
any value/objects, dynamic
length writeable
undefined elements
arrays are objects

II. part
Basic JS: Functions
Péter Borkuti
2013

JS Functions
powerful structure
subroutine, function, module, class

JS functions - preview I
anatomy
Parameters, arguments
variables: globals, locals, hiding, scope
hoisting
immediate invoke
return

JS functions - preview II
nested functions
Closures + closures and HTML (Optional)
objects and functions, constructors
invocation
closure and this, callbacks, AJAX, cascade
Augmenting built-ins, inheritance
module (Crockford's steps)

JS functions - preview III
is JS OOP? (theory, optional)
Homework
Bonus (optional)
forthcoming (in preparation)
1) YUI
2) AlloyUI
3) AlloyUI and Liferay

Functions - definition
example_functions.html

Functions - definition
function name(params) {}
any num. of params, arguments
I say Hello
I say 1
I say undefined
I say Hello

Functions - object param
Object { a= 1 , b= 2 }
Object { a= 1 , b= 2 }
100
Object { a= 10 , b= 2 }
Object { a= 10 , b= 20 , c= 30 }

Functions - arguments I
arguments[0]:Hello
arguments[1]:1
arguments[2]:true
arguments[3]:[object Object]

variables - function scope
undefined
0
1
2
3

function statement - hoisting I

function expression - hoisting II

function expression - hoisting II
TypeError: say2 is not a function
I say2 Hello - after

immediately invoking
console.log("f5_1::"+f5_1.toString());
f5_1::function () {
return Math.random();
}
console.log("f5_21::"+f5_21.toString());
f5_21::0.7356408222533187

immediately invoking
parameter

closures - Ia
I am in c0_31 Hello
function c0_31() {
console.log("I am in c0_31 " + s);
}

closures - Ib
I am in c0_4 return Hello
function () {
console.log("I am in c0_4 return " + s);
}

closures - Ic
Hello
elloH
lloHe
loHel
oHell
Hello

closures - III
c05("Counter1", 100, 110, 50)
Counter1 = 100
Counter1 = 101
Counter1 = 102
Counter1 = 103
...
Counter1 = 109

closures - III
write a stop() function, which stops the counting
How to use it?
remark: setTimeout, setInterval returns with a handler. With it you can stop the
timer with clearTimeout, clearInterval

closures - III
var stopc06 = c06("counter2",100,200,500);
..........
stopc06()

closures
function together with it's parent environment (function parameters, local
variables and inner functions)
not values! Living, common references
the environment is living after the parent function exits
see example_closure0?.html

constructor
When is GLOBAL impacted?
Let's see in FF!
example_function.html

constructor and
public, private, privileged I

constructor and
public, private, privileged II
●private and privileged methods can be added only
in constructor
●public can be added at any time to prototype

constructor
new
return optional
() optional
this.constructor
do not use function expression form:
var C = function () {}
identity of an object ( “class” )

constructor
function A() {};
var a = new A;
a instanceof A // true
typeof a //"object"
a.constructor //A()
a.valueOf() //A { }

invocations of functions
function
F()
method
o.F()
constructor
new F
indirect
F.apply, F.call

invocations of functions
function
F() this:global, in strict mode: undefined
method
o.F() this: o
constructor
new F this: new object
indirect
F.apply, F.call this: given

method invocation
this: Object { f1=h1() }

method invocation
this: [ 0, 1, h1()]

indirect invocation
F.apply(object,[params_array]);
F.call(object, param1, param2,...);
In ECMAScript3/5
Object === undefined, null global object→
primitive value wrapper object→
In ECMAScript5 strict mode: retains value

Function as parameter
“callback”
1) Synchronous
2) Asynchronous

Synchronous callback
How can we multiply the elements in an array?

callback examples
Array methods
1) forEach
2) map
3) filter
4) parseInt (!)
5) AJAX

callback examples
map, array array→
every element will be the return value of callback
Square array: [1,2,3] [1,4,9]→
Math.sqrt array : [9,16,25] [3,4,5]→
ParseInt array : [“2”,”3”,”4”] [2,3,4]→

callback examples
Filter array array→
if callback returns false, skip the element
Create an array : skip the first, keep the second element, and so on
[1, 2, 3, 4] [2, 4]→

AJAX
Asynchronous JavaScript and XML
wikipedia.org/wiki/Ajax_(programming)
1) a group of interrelated web development techniques used on the client-
side to create asynchronous web applications
2) Could be synchronous
3) use of XML is not required (JSON is often used instead)

AJAX
When “using” AJAX
1) JavaScript modify HTML/CSS
JavaScript and DOM
2) sends/receives data without reloading page
JavaScript + XMLHttpRequest object
3) Do this in the background so browser is always responsive
short, fast callbacks

III. part
Basic JS: Finishing Functions
Inheritance, Module
Péter Borkuti
2013

Method chaining – warming up
Write field names and values with printField01

Write field names and values with printField02
In ONE LINE!

Method chaining
Write field names and values with printField

Method chaining
Clever thing
If your function does not return anything, take into accout return with “this”

Augmenting built-in objects
Dangerous

Augmenting built-in Array obj
Dangerous I

Dangerous II
Google maps API insertAt()
How can you decide, that a built-in object is intact?
How can you decide, that a JS function is the built-in one or a framework creates
it?

Dangerous III
console.log(a.sayHello.toString());
function () {
console.log("Hello" + this);
}
console.log(a.join.toString());
function join() {
[native code]
}

Dangerous III
console.log(a.join.toString());
function join() {
[native code]
}
Unfortunately, not in the standard.
ES5 shims

Inheritance
Infinity number of patterns
Some of imitates “classical” (class based) inheritance, some not
We will see some patterns
Let's create some “rules” to decide if a pattern is adequate or not
example_inheritance.html

Inheritance test case
A object/class is inherited from Object.prototype
A has an own property, “a”
B's parent is A
B has an own property “b”

Inheritance Rules
Firebug logs the “class” of the object
example: A { }, instead of Object {}
(a.valueOf())
Obj b instanceof A and B
A.isPrototypeOf(b)
Obj b's own property only b, 'a' must be inherited

Constructor based inheritance I

Constructor based inheritance II

inheritance with Object.create
Object.create(prototype-object, props);
Props: propname : property-descriptor
{ a : { value : 1,
writable: true,
enumerable: true,
configurable: true}
}

Property descriptor
https://developer.mozilla.org/en-
US/docs/Enumerability_and_ownership_of_properties
Writable : value can be changed, def. false
Enumerable : for .. in, def. false
Configurable : may delete, property descriptor may be changed, def: false
https://developer.mozilla.org/en-
US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty

inheritance with Object.create

Module pattern
Crockford's Module pattern in six steps
example_module.html

Module pattern I
Create namespace

Module pattern II
Create an empty module

Module pattern III
Create private vars

Module pattern IV
Create private funcs

JS functions - oop?
wikipedia: Object-oriented_programming
Encapsulation
Dynamic dispatch
Subtype polimorphism
Inheritance
Open recursion
example_isjsoop.html

JS functions - oop? I.
encapsulation
bundling data with the methods operating on that data
DATA + METHOD

JS functions - oop? II.
encapsulation
bundling data with the methods operating on that data

JS functions - oop? III.
dynamic dispatch
x.foo() but which foo()?
x : object, type known only runtime. call x.foo()
Decide at runtime which implementation of foo() to invoke, based on the
runtime type of object x
single dispatch, because decision based on a single type, the type of x. (ex.
Java)
multiple dispatch: x.foo(y) decision based on both x and y

JS functions - oop? III.
Dynamic
spatch

JS functions - oop? IV.
Subtype polymorphism
function f(supertype/subtype)
program elements written to operate on objects of the supertype can also
operate on objects of the subtype

JS functions - oop? IV.
Subtype
polymorphism

JS functions - oop? V.
Inheritance
1) a way to establish Is-a relationship between objects
2) JS: differential inheritance
We saw many examples before

JS functions - oop? VI.
Open recursion
1) a special variable that allows a method body to invoke another method of the
same object
2) object -> runtime, so we can reach even subclass methods/fields from a
superclass with this variable
supertype subtype

JS functions - oop? VI.
Open
recursion

Bonus
YUI oop (oopyui-oop.html)
DOM basics (DOMBasicsindex.html)
Sprites (see animation.html)
Background scrolling (see map.html)
WebGL
(http://alteredqualia.com/three/examples/webgl_terrain_dynamic.html)

Homework - Games
TiliToli
Memory
MathTeacher
WordCard
MineSweeper
Snake
Chess
Tetris
Tennis
Artillery duel
Amoba
Hunters and rabbit
Battle
Sudoku
...

Requisites for source I
minimal impact on global object (only 1 global object)
using at least one module pattern
using at least one callback
“use strict”
own code
JSHint/JSLint

Requisites for source II
using at least 1 function-value return
jslint with default options (tabs, globals (document) allowed)
frameworks are forbidden
browser specific things are forbidden
use ECMAScript 5 (“use strict”)
at least 100 non-empty, non-comment program-rows

Plus points
unit tests
doc-comments
code coverage test
AJAX
server with nodejs
using at least one inheritance-pattern

jsbasics-slide

More Related Content

What's hot (20)

Similar to jsbasics-slide (20)

jsbasics-slide

Editor's Notes