Your SlideShare is downloading. ×
Short intro to ECMAScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Short intro to ECMAScript

375
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
375
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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