Upcoming SlideShare
×

Short intro to ECMAScript

414

Published on

Published in: Technology
0 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

• Be the first to like this

Views
Total Views
414
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
5
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Short intro to ECMAScript"

1. 1. Short  intro  to  ECMAScript   Jussi  Pohjolainen   Tampere  University  of  Applied  Sciences
2. 2. RECAP
3. 3. Basic  Types   •  JavaScript  is  loosely  typed  language!   •  Basic  types   – Numbers  ﬂoaBng  point  number  (64  bit)   – Strings  (16  bit  UNICODE)   – Booleans  (true,  false)   – null  (value  that  isn’t  anything)   – undeﬁned  (undeﬁned  value)   – Objects  (all  the  rest)
4. 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.  Diﬀerent   implementa9ons  produce  diﬀerent  results  when  a  radix  is  not   speciﬁed.   •  NaN  (Not  a  Number)   –  Result  of  erroneous  operaBons
5. 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. 6. Math  Object   •  All  properBes  and  methods  are  “staBc”,  just   like  in  Java   – abs   – acos   – atan   – …   – sin   – Sqrt   •  var  value  =  Math.sqrt(4);
7. 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. 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. 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. 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. 11. Statements   •  Same  than  in  other  languages   –  If   –  Switch/case   –  While   –  Do/while   –  For   –  Break   –  ConBnue   –  Return   –  Try/throw/catch
13. 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/ ﬁles/ECMA-­‐ST/Ecma-­‐262.pdf
14. 14. Recap:  object  types   •  NaBve  (Core  Javascript)   – ECMAScript  standard:  Array,  Date..   •  Host     – The  host  environment,  for  example  browser:   window,  DOM  objects
15. 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. 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  speciﬁcaBon  page  235
17. 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. 18. Global  and  local   // GLOBAL, everything is strict: “use strict”; //.. strict program // LOCAL, function is strict function foo() { “use strict”; //.. strict function }
19. 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,   ﬁ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)
20. 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. 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. 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. 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. 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. 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. 26. ProperBes  and  Descriptors   •  It’s  possible  to  deﬁne  properBes  for  object   – Property  descriptor   •  Value   •  Get  and  Set  methods   •  Writable   •  Enumerable   •  Conﬁgurable
27. 27. Example   var obj = {}; Object.defineProperty( obj, "name", { value: ”something", get: someFunction, set: someOtherFunction, writable: false, enumerable: true, configurable: true }); print( obj.name )
28. 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. 29. EcmaScript  5  -­‐  Overview   •  Strict  Mode   •  JSON  parsing  now  standard   •  New  Array  methods   •  New  Object  methods
1. A particular slide catching your eye?

Clipping is a handy way to collect important slides you want to go back to later.