short intro to ecmascript
TRANSCRIPT
![Page 1: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/1.jpg)
Short intro to ECMAScript
Jussi Pohjolainen Tampere University of Applied Sciences
![Page 2: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/2.jpg)
RECAP
![Page 3: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/3.jpg)
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)
![Page 4: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/4.jpg)
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
![Page 5: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/5.jpg)
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!"); }
![Page 6: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/6.jpg)
Math Object
• All properBes and methods are “staBc”, just like in Java – abs – acos – atan – … – sin – Sqrt
• var value = Math.sqrt(4);
![Page 7: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/7.jpg)
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());
![Page 8: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/8.jpg)
True or false? var myArray1 = [false, null, undefined, "", 0, NaN]; // EcmaScript 5 feature! // Iterate the array myArray1.forEach(function(entry) { if(entry) { print(entry); } });
![Page 9: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/9.jpg)
True or false? var myArray1 = ["false", "0", "undefined", "NaN"]; // EcmaScript 5 feature! // Iterate the array myArray1.forEach(function(entry) { if(entry) { print(entry); } });
![Page 10: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/10.jpg)
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");
}
![Page 11: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/11.jpg)
Statements
• Same than in other languages – If – Switch/case – While – Do/while – For – Break – ConBnue – Return – Try/throw/catch
![Page 12: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/12.jpg)
ABOUT ECMASCRIPT 5
![Page 13: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/13.jpg)
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
![Page 14: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/14.jpg)
Recap: object types
• NaBve (Core Javascript) – ECMAScript standard: Array, Date..
• Host – The host environment, for example browser: window, DOM objects
![Page 15: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/15.jpg)
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!
![Page 16: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/16.jpg)
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
![Page 17: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/17.jpg)
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
![Page 18: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/18.jpg)
Global and local // GLOBAL, everything is strict: “use strict”; //.. strict program // LOCAL, function is strict function foo() { “use strict”; //.. strict function }
![Page 19: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/19.jpg)
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)
![Page 20: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/20.jpg)
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;
![Page 21: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/21.jpg)
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);
![Page 22: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/22.jpg)
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
![Page 23: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/23.jpg)
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) } );
![Page 24: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/24.jpg)
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
![Page 25: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/25.jpg)
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));
![Page 26: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/26.jpg)
ProperBes and Descriptors
• It’s possible to define properBes for object – Property descriptor • Value • Get and Set methods • Writable • Enumerable • Configurable
![Page 27: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/27.jpg)
Example var obj = {}; Object.defineProperty( obj, "name", { value: ”something", get: someFunction, set: someOtherFunction, writable: false, enumerable: true, configurable: true }); print( obj.name )
![Page 28: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/28.jpg)
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)
![Page 29: Short intro to ECMAScript](https://reader033.vdocuments.mx/reader033/viewer/2022052505/554f5b69b4c905524c8b5505/html5/thumbnails/29.jpg)
EcmaScript 5 -‐ Overview
• Strict Mode • JSON parsing now standard • New Array methods • New Object methods