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