short intro to ecmascript
TRANSCRIPT
Short intro to ECMAScript
Jussi Pohjolainen Tampere University of Applied Sciences
RECAP
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
ABOUT ECMASCRIPT 5
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
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 specificaBon 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, 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)
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 define properBes for object – Property descriptor • Value • Get and Set methods • Writable • Enumerable • Configurable
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