Short	
  intro	
  to	
  ECMAScript	
  
Jussi	
  Pohjolainen	
  
Tampere	
  University	
  of	
  Applied	
  Sciences	
  
RECAP	
  
Basic	
  Types	
  
•  JavaScript	
  is	
  loosely	
  typed	
  language!	
  
•  Basic	
  types	
  
– Numbers	
  floaBng	
  p...
About	
  Numbers	
  
•  Number(value)	
  
–  var i = Number(“12”);
•  parseInt(value[,	
  radix])	
  
–  var i = parseInt(...
var integer1 = Number("12");
var integer2 = parseInt("12", 10);
print(integer1 + integer2); 12 + 12 => 24
var a = parseInt...
Math	
  Object	
  
•  All	
  properBes	
  and	
  methods	
  are	
  “staBc”,	
  just	
  
like	
  in	
  Java	
  
– abs	
  
–...
Strings	
  
•  Sequences	
  of	
  0	
  –	
  n	
  of	
  16-­‐bit	
  chars	
  
•  Example	
  
var s1 = 12;
var s2 = ”12";
if...
True	
  or	
  false?	
  
var myArray1 = [false, null, undefined, "", 0,
NaN];
// EcmaScript 5 feature!
// Iterate the arra...
True	
  or	
  false?	
  
var myArray1 = ["false", "0", "undefined", "NaN"];
// EcmaScript 5 feature!
// Iterate the array
...
True	
  or	
  false?	
  
var value = 0;
if(value = 0)
{
print("A");
}
if(value == 0)
{
print("B");
}
if("0" == 0)
{
print(...
Statements	
  
•  Same	
  than	
  in	
  other	
  languages	
  
–  If	
  
–  Switch/case	
  
–  While	
  
–  Do/while	
  
–...
ABOUT	
  ECMASCRIPT	
  5	
  
EcmaScript	
  
•  Ecma	
  Standard	
  is	
  based	
  on	
  JavaScript	
  
(Netscape)	
  and	
  JScript	
  (Microsoe)	
  
•...
Recap:	
  object	
  types	
  
•  NaBve	
  (Core	
  Javascript)	
  
– ECMAScript	
  standard:	
  Array,	
  Date..	
  
•  Ho...
EcmaScript	
  
•  Goal	
  
–  Fix	
  “bad”	
  parts	
  of	
  JS	
  while	
  maintaining	
  compaBble	
  
with	
  EcmaScrip...
Strict	
  “mode”	
  
•  DetecBon	
  of	
  bad/dangerous	
  programming	
  
pracBces	
  
– with()	
  statement	
  prevented...
Enable	
  strict	
  mode	
  
> cat strictmode.js
// This is just a string, backward compatible!
"use strict";
i = 0;
> rhi...
Global	
  and	
  local	
  
// GLOBAL, everything is strict:
“use strict”;
//.. strict program
// LOCAL, function is strict...
Other	
  Main	
  Changes	
  
•  NaBve	
  JSON	
  object	
  added	
  
– For	
  parsing/stringifying	
  JSON	
  
•  Changes	...
JSON	
  and	
  Weather	
  Underground	
  
myObject = JSON.parse(httpObj.responseText);
city = myObject.location.city;
now ...
Examples:	
  Array	
  Object	
  
var arr = ["apple", "banana", "carrot", "apple"];
print(arr.indexOf("apple")); // 0
print...
Examples:	
  Array	
  Object	
  
// Checks all the values, if one of them does not
// match with given condition, return v...
Examples:	
  Array	
  Object	
  
// Adds Hello to the end of the array values
var newArray = arr.map(function (value, inde...
Examples:	
  Array	
  Object	
  
var value = [10, 20, 30, 40, 50].reduce(function (accum,
value, index, array) {
return ac...
Prevent	
  Extensions	
  
"use strict";
var obj = {};
obj.name = "John";
print(obj.name);
print(Object.isExtensible(obj));...
ProperBes	
  and	
  Descriptors	
  
•  It’s	
  possible	
  to	
  define	
  properBes	
  for	
  object	
  
– Property	
  des...
Example	
  
var obj = {};
Object.defineProperty( obj, "name", {
value: ”something",
get: someFunction,
set: someOtherFunct...
Sealing	
  and	
  Frozing	
  
•  Sealing	
  prevents	
  other	
  code	
  from	
  dele9ng	
  or	
  
adding	
  descriptors.	...
EcmaScript	
  5	
  -­‐	
  Overview	
  
•  Strict	
  Mode	
  
•  JSON	
  parsing	
  now	
  standard	
  
•  New	
  Array	
  ...
Upcoming SlideShare
Loading in...5
×

Short intro to ECMAScript

414

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
414
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
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  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. 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. 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  
  12. 12. ABOUT  ECMASCRIPT  5  
  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/ files/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  specificaBon  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,   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. 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  define  properBes  for  object   – Property  descriptor   •  Value   •  Get  and  Set  methods   •  Writable   •  Enumerable   •  Configurable  
  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.

×