Short intro to ECMAScript

Short
intro
to
ECMAScript

Jussi
Pohjolainen

Tampere
University
of
Applied
Sciences

Basic
Types

•  JavaScript
is
loosely
typed
language!

•  Basic
types

– Numbers
floaBng
point
number
(64
bit)

– Strings
(16
bit
UNICODE)

– Booleans
(true,
false)

– null
(value
that
isn’t
anything)

– undefined
(undefined
value)

– Objects
(all
the
rest)

About
Numbers

•  Number(value)

–  var i = Number(“12”);
•  parseInt(value[,
radix])

–  var i = parseInt(“12”, 10);
–  Radix?

•  10
=>
decimal
number,
8
=>
octal
number,
16
=>
hexadecimal

•  While
this
parameter
is
opBonal,
always
specify
it
to
eliminate

reader
confusion
and
to
guarantee
predictable
behavior.
Different

implementa9ons
produce
different
results
when
a
radix
is
not

specified.

•  NaN
(Not
a
Number)

–  Result
of
erroneous
operaBons

var integer1 = Number("12");
var integer2 = parseInt("12", 10);
print(integer1 + integer2); 12 + 12 => 24
var a = parseInt("12foobar", 10);
print(a); // 12
var b = parseInt(" 12 ", 10);
print(b); // 12
var c = parseInt("foobar12", 10);
print(c); // NaN
if(c == NaN)
{
print("It's Nan!");
}
if(isNaN(c))
{
print("It's NaN!");
}

Math
Object

•  All
properBes
and
methods
are
“staBc”,
just

like
in
Java

– abs

– acos

– atan

– …

– sin

– Sqrt

•  var
value
=
Math.sqrt(4);

Strings

•  Sequences
of
0
–
n
of
16-‐bit
chars

•  Example

var s1 = 12;
var s2 = ”12";
if(true)
{
print("the same!");
}
print(s1.length);
print("hello" + 12);
print(12 + "hello");
print("hello".toUpperCase());

True
or
false?

var myArray1 = [false, null, undefined, "", 0,
NaN];
// EcmaScript 5 feature!
// Iterate the array
myArray1.forEach(function(entry)
{
if(entry)
{
print(entry);
}
});

True
or
false?

var myArray1 = ["false", "0", "undefined", "NaN"];
// EcmaScript 5 feature!
// Iterate the array
myArray1.forEach(function(entry)
{
if(entry)
{
print(entry);
}
});

True
or
false?

var value = 0;
if(value = 0)
{
print("A");
}
if(value == 0)
{
print("B");
}
if("0" == 0)
{
print("C");
}
if("0" === 0)
{
print("D");
}

Statements

•  Same
than
in
other
languages

–  If

–  Switch/case

–  While

–  Do/while

–  For

–  Break

–  ConBnue

–  Return

–  Try/throw/catch

EcmaScript

•  Ecma
Standard
is
based
on
JavaScript

(Netscape)
and
JScript
(Microsoe)

•  Development
of
the
standard
started
in
1996

•  First
ediBon
1997

•  Support

– hhp://kangax.github.com/es5-‐compat-‐table/

•  Newest
version:
EcmaScript
5.1

– hhp://www.ecma-‐internaBonal.org/publicaBons/
ﬁles/ECMA-‐ST/Ecma-‐262.pdf

Recap:
object
types

•  NaBve
(Core
Javascript)

– ECMAScript
standard:
Array,
Date..

•  Host

– The
host
environment,
for
example
browser:

window,
DOM
objects

EcmaScript

•  Goal

–  Fix
“bad”
parts
of
JS
while
maintaining
compaBble

with
EcmaScript
5

•  Introduces
Strict
mode

–  Removes
features
from
the
language!
Raises
errors

that
were
okay
in
non
strict
mode

–  Backward
compaBble

–  Add
“use
strict”,
in
funcBon
or
global
scope

•  EcmaScript
supports
non-‐strict
mode,
but
it’s

depricated!

Strict
“mode”

•  DetecBon
of
bad/dangerous
programming

pracBces

– with()
statement
prevented

– Assignment
to
non-‐declared
variables
prevented
(i

=
3)

– Eval
is
prohibited

– Lot
of
other
issues..

•  See
ES5
speciﬁcaBon
page
235

Enable
strict
mode

> cat strictmode.js
// This is just a string, backward compatible!
"use strict";
i = 0;
> rhino strictmode.js
js: uncaught JavaScript runtime exception:
ReferenceError: Assignment to undefined "i" in
strict mode

Global
and
local

// GLOBAL, everything is strict:
“use strict”;
//.. strict program
// LOCAL, function is strict
function foo()
{
“use strict”;
//.. strict function
}

Other
Main
Changes

•  NaBve
JSON
object
added

– For
parsing/stringifying
JSON

•  Changes
to
Array
object,
nine
new
methods

– indexOf,
lastIndexOf,
every,
some,
forEach,
map,

ﬁlter,
reduce,
reduceRight

•  Changes
to
Object

– Can
deﬁne
gehers
and
sehers

– Objects
can
be
sealed
(no
new
properBes
can
be

added)
and
frozen
(values
cannot
be
changed)

JSON
and
Weather
Underground

myObject = JSON.parse(httpObj.responseText);
city = myObject.location.city;
now = myObject.forecast.txt_forecast.forecastday[0].fcttext_metric;
icon = myObject.forecast.txt_forecast.forecastday[0].icon_url;

Examples:
Array
Object

var arr = ["apple", "banana", "carrot", "apple"];
print(arr.indexOf("apple")); // 0
print(arr.indexOf("daikon")); // -1
print(arr.lastIndexOf("apple")); // 3
function funkkari (entry)
{
print(entry)
}
arr.forEach(funkkari);

Examples:
Array
Object

// Checks all the values, if one of them does not
// match with given condition, return value is false.
var returnValue = arr.every(function (value, index, array)
{
// Every element must match this => true
return value.length > 1;
}
);
print(returnValue); // true
// Checks all the values, if one of them matches with
// given condition, return value is true.
var returnValue = arr.some(function (value, index, array)
{
// One element must match this => true
return value === "apple";
}
);
print(returnValue); // true

Examples:
Array
Object

// Adds Hello to the end of the array values
var newArray = arr.map(function (value, index, array) {
return value + " Hello";
});
newArray.forEach(function (entry)
{
print(entry)
}
);
// Keep only Apples.
var newArray2 = arr.filter(function (value, index, array) {
return value === "apple";
});
newArray2.forEach(function (entry)
{
print(entry)
}
);

Examples:
Array
Object

var value = [10, 20, 30, 40, 50].reduce(function (accum,
value, index, array) {
return accum + value;
});
print(value); // 150
var value2 = [10, 20, 30, 40, 50].reduceRight(function
(accum, value, index, array) {
return accum - value;
});
print(value2); // -50

Prevent
Extensions

"use strict";
var obj = {};
obj.name = "John";
print(obj.name);
print(Object.isExtensible(obj));
Object.preventExtensions(obj);
// Should be exception in strict mode
obj.url = "http://www.something.com";
print(Object.isExtensible(obj));

ProperBes
and
Descriptors

•  It’s
possible
to
deﬁne
properBes
for
object

– Property
descriptor

•  Value

•  Get
and
Set
methods

•  Writable

•  Enumerable

•  Conﬁgurable

Example

var obj = {};
Object.defineProperty( obj, "name", {
value: ”something",
get: someFunction,
set: someOtherFunction,
writable: false,
enumerable: true,
configurable: true
});
print( obj.name )

Sealing
and
Frozing

•  Sealing
prevents
other
code
from
dele9ng
or

adding
descriptors.

– Object.seal(obj)

– Object.isSealed(obj)

•  Frozing
is
almost
idenBcal
to
sealing,
but

addiBon
of
making
the
properBes
uneditable

– Object.freeze(obj)

– Object.isFrozen(obj)

EcmaScript
5
-‐
Overview

•  Strict
Mode

•  JSON
parsing
now
standard

•  New
Array
methods

•  New
Object
methods

Short intro to ECMAScript

More Related Content

What's hot

Viewers also liked

Similar to Short intro to ECMAScript

More from Jussi Pohjolainen

Recently uploaded

Short intro to ECMAScript