1. Short
intro
to
ECMAScript
Jussi
Pohjolainen
Tampere
University
of
Applied
Sciences

2. RECAP

3. 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)

4. 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

5. 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!");
}

6. Math
Object
• All
properBes
and
methods
are
“staBc”,
just
like
in
Java
– abs
– acos
– atan
– …
– sin
– Sqrt
• var
value
=
Math.sqrt(4);

7. 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());

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

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

10. 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");
}

11. Statements
• Same
than
in
other
languages
– If
– Switch/case
– While
– Do/while
– For
– Break
– ConBnue
– Return
– Try/throw/catch

12. ABOUT
ECMASCRIPT
5

13. 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/
files/ECMA-­‐ST/Ecma-­‐262.pdf

14. Recap:
object
types
• NaBve
(Core
Javascript)
– ECMAScript
standard:
Array,
Date..
• Host
– The
host
environment,
for
example
browser:
window,
DOM
objects

15. 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!

16. 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
specificaBon
page
235

17. 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

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

19. Other
Main
Changes
• NaBve
JSON
object
added
– For
parsing/stringifying
JSON
• Changes
to
Array
object,
nine
new
methods
– indexOf,
lastIndexOf,
every,
some,
forEach,
map,
filter,
reduce,
reduceRight
• Changes
to
Object
– Can
define
gehers
and
sehers
– Objects
can
be
sealed
(no
new
properBes
can
be
added)
and
frozen
(values
cannot
be
changed)

20. 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;

21. 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);

22. 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

23. 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)
}
);

24. 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

25. 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));

26. ProperBes
and
Descriptors
• It’s
possible
to
define
properBes
for
object
– Property
descriptor
• Value
• Get
and
Set
methods
• Writable
• Enumerable
• Configurable

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

28. 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)

29. EcmaScript
5
-­‐
Overview
• Strict
Mode
• JSON
parsing
now
standard
• New
Array
methods
• New
Object
methods