Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript Basics

4,361 views

Published on

Basic concepts and feature of javascripts. Working with arrays, functions and OOP. Presentation prepared for summer Academy @BinaryStudio

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Javascript Basics

  1. 1. JavaScript
  2. 2. 1995, Brendan Eich, Netscape ECMAScript
  3. 3. Usage Browsers Server Desktop
  4. 4.  interpreted JS Features:
  5. 5. runtime interpreters Futhark, InScript, JScript, KJS, Linear B, QtScript, Rhino, YAJI, Duktape just-in-time interpreters ~2008 Carakan, Chakra, SpiderMonkey, SquirrelFish, Tamarin, V8, JavaScriptCore, Nashorn
  6. 6. ie9 Chakra
  7. 7. google’s V8 no intermediate byte codes, no interpreter property access point.x # ebx = the point object cmp [ebx,<hidden class offset>],<cached hidden class> jne <inline cache miss> mov eax,[ebx, <cached x offset>]
  8. 8.  interpreted  loose typed JS Features:
  9. 9. Number String Boolean Object Array Function Classes Date Regexp Error Null Undefined variable types
  10. 10. variable declaration naming rules:  a-z, A-Z, _, $  num6ers (4ever)  case sensitive (type / Type)  non-reserved words
  11. 11. ES5
  12. 12. ES6
  13. 13. variable declaration naming rules:  a-z, A-Z, _, $  num6ers (4ever)  case sensitive (type / Type)  non-reserved words var a; var a = 5; a = 5; a; ReferenceError: a is not defined ways of declaration: let a; let a = 5;
  14. 14.  interpreted  loose typed  closures JS Features:
  15. 15. closures function parent(){ var width = 5; var keyword = 'ages'; console.log(width); console.log(keyword); console.log(age); child(); function child(){ var width = 20, age = 5; console.log(width); console.log(keyword); console.log(age); } console.log(age); console.log(width); } 5 ages ReferenceError: age is not defined 20 ages 5 5 ReferenceError: age is not defined
  16. 16. closures function parent(){ var width = 5; var keyword = 'ages'; console.log(width); console.log(keyword); console.log(age); if (true){ var width = 20, age = 5; console.log(width); console.log(keyword); console.log(age); } console.log(age); console.log(width); } 5 ages ReferenceError: age is not defined 20 ages 5 5 5
  17. 17. closures function parent(){ var width = 5; var keyword = 'ages'; console.log(width); console.log(keyword); console.log(age); if (true){ let width = 20, age = 5; console.log(width); console.log(keyword); console.log(age); } console.log(age); console.log(width); } 5 ages ReferenceError: age is not defined 20 ages 5 20 ReferenceError: age is not defined ES6
  18. 18.  interpreted  loose typed  closures  multi-paradigmal JS Features:  imperative  functional  object-oriented
  19. 19. Arrays var a = new Array(); a = []; console.log(a.length); var b = new Array(3,4,5,6); b = [3,4,5,6]; console.log(b[2]); a[3] = 'wat'; console.log(a.length); console.log(a); read & write same} same} element accessing element modifying 5 4 0 [undefined × 3, "wat"]
  20. 20. Arrays modifying var ar = [3,5]; adding el to array adding several els to array form string splitted with char reversing order of els adding new els to array removing last element [3,5, 10]; [3,5, 10, -5, 20, -2]; [3,5, 10, -5, 20]; 3 + 5 + 10 + -5 + 20 [20, -5, 10, 5, 3]; [20, -5, 10, 5, 3, -3, -5]; ar.push(10); ar.push(-5, 20, -2); ar.pop(); var str = ar.join(' + '); ar.reverse(); var secAr = [-3, -5]; ar = ar.concat(secAr); assigning el to undefined [20, -5, 10, 5, undefined, -3, -5]delete ar[4]
  21. 21. Arrays modifying var ar = [3, 5, -10, 6, 20, -10]; returns ar from pos 1 returns 4 els from pos 2 adds els to the start returns ar from pos 2 from the end [5, -10, 6, 20, -10]; [-10, 6, 20, -10]; [20, -10]; [4, -5, 7, 5, ‘newbie’, ‘new one’, 20, -10]; ar.slice(1); ar.slice(2,4); ar.slice(-2); ar.splice(2,1); ar.splice(1,2, 'new one'); ar.splice(1,0, 'newbie'); ar.shift(); ar.unshift(5); ar.unshift(4, -5, 7); ar.unshift(); does nothing [4, -5, 7, 5, ‘newbie’, ‘new one’, 20, -10]; adds el to the start [5, ‘newbie’, ‘new one’, 20, -10]; removes el from the start [‘newbie’, ‘new one’, 20, -10]; removes el from pos 2 removes 2 els from pos 1, adds el adds el to pos 1 [3, 5, 6, 20, -10]; [3, ‘new one’, 20, -10]; [3, ‘newbie’, ‘new one’, 20, -10];
  22. 22. Arrays traversing var ar = [-2, 4, 7]; Iterates through array 0 6 9 a should be earlier for (var i = 0; i < ar.length; i++){ console.log(ar[i] + 2); } ar.sort(function(a, b){ if (a > b){ return -1; } else if (a === 0) { return 0; } else { return 1; } }); ar.sort(function(a, b){ return b - a; }); do nothing b should be earlier same result [7, 4, -2] [7, 4, -2]
  23. 23. var ar = [10, 20, -5]; ar.forEach(function(el, idx, array){ console.log(el, idx); }); ar.filter(function(el){ if (el > 0) return true; }); ar.map(function(el){ return el * 2; }); ar.reduce(function(a, b){ return a + b; }); ar.reduceRight(function(a, b){ return a + 0.5 * b; }); Arrays traversing Iterates through array 0 6 9 returns filtered array [10, 20] performs action on every el [20, 40, -10] forms one value by performing action to els from the left 25 forms one value by performing action to els from the right 10 ES5
  24. 24. Functions  first-class  are actually objects  can represent constructors for OOP  can be passed as a parameter  can take context  variadic
  25. 25. Functions function countToNumber(first, last){ var countOnce = function (options){ return options.interim + options.number + options.divider; } var result = ''; if (arguments.length === 1) last = 10; while (typeof first === 'number' && typeof last === 'number' && first <= last){ var params = { number: first, divider: '-', interim: result }; result = countOnce(params); first++; } return result; } console.log(countToNumber(1, 5)); function declaration function expression nested function passing hash as an argument variadic function use 1-2-3-4-5- declaration & call
  26. 26. (function (str, callback){ if (typeof str === 'string'){ str = str.replace(/pain/g, 'fun'); callback(str); } })(str, logFirstWord); var str = 'invoking function is pain'; function logFirstWord(param){ if (typeof param === 'string'){ var words = param.split(' '); console.log(words[words.length - 1]); } else { throw new Error('Parameter is not a string'); } } Functions immediately-invoked passing function as an argument calling function as a constructor fun Immediately-invoked
  27. 27. Classes  absent  we’ll still call them classes though they’re objects  access modifiers are absent  we can emulate them  inheritance is prototype-based  composition over inheritance from the box
  28. 28. Classes function Programmer(options){ this.languages = ['python', 'js']; this.yearsXP = 1; this.learnLanguage = function(name){ if (typeof name === 'string'){ this.languages.push(name); } } } var stewie = new Programmer(); stewie.learnLanguage('ruby'); console.log(stewie.languages); var hamid = new Programmer(); hamid.learnLanguage('c#'); console.log(hamid.languages); function-constructor this points to the object's context defining method by passing function as a property creating instance of a Programmer class ["python", "js", "ruby"] ["python", "js", “c#"] creating / instantiating
  29. 29. Classesfunction Programmer(options){ var languages = ['python', 'js']; this.yearsXP = 1; this.learnLanguage = function(name){ if (typeof name === 'string'){ languages.push(name); logNewLanguage(name); } } function logNewLanguage(language){ console.log(language); } } Programmer.prototype.gainXP = function(years){ if (typeof years === 'number'){ this.yearsXP += years; } } var suzy = new Programmer(); suzy.learnLanguage('php'); suzy.logNewLanguage('php'); private property private method logs ‘php’ TypeError: Object #<Programmer> has no method 'logNewLanguage‘ defining method using prototype using prototype privileged method
  30. 30. Classes emulating private members Programmer = function (options){ var languages = ['python', 'js']; this.yearsXP = 1; this.projects = []; this.projects['Academy'] = { monthsEstimated: 2, codeLinesEstimated: 10000 }; } Programmer.prototype.justCode = function(projectName) { if (typeof projectName !== 'undefined' && typeof this.projects[projectName] !== 'undefined') var percents = 30; var linesScaffolded = scaffold.call(this, projectName, percents); var linesCoded = codeWithHands.apply(this, [projectName, linesScaffolded]); console.log('scaffolded ' + linesScaffolded, ' coded ' + linesCoded); }; function scaffold(projectName, percents){ if (this.projects[projectName].codeLinesEstimated > 0 && percents > 0 && percents < 100){ return Math.ceil(this.projects[projectName].codeLinesEstimated / 100) * percents; } } function codeWithHands(projectName, linesScaffolded){ return this.projects[projectName].codeLinesEstimated - linesScaffolded; } var lee = new Programmer(); lee.justCode('Academy'); public method private method private method parameters as usual parameters within array context passing} logs ‘scaffolded 3000 coded 7000’
  31. 31. Classes inheritance function Man(){ this.inheritedProperty = 5; } Man.prototype.setName = function(name) { if (typeof name === 'string'){ this.name = name; } }; Man.prototype.introduce = function() { console.log("Hi, my name is " + this.name); }; var kelly = new Man(); kelly.setName('Kelly'); kelly.introduce(); function Programmer(){ this.selfProperty = 5; } Programmer.prototype = new Man(); var joe = new Programmer(); joe.setName('Joe'); joe.introduce(); constructor constructor inheriting prototype members of super Hi, my name is Kelly Hi, my name is Joe Programmer name: "Joe" selfProperty: 5 __proto__: Man inheritedProperty: 5 __proto__: Man constructor: function Man(){ introduce: function () { setName: function (name) { __proto__: Object __defineGetter__: function __defineSetter__: function ....
  32. 32. Thanks https://github.com/msemenistyi/js-basics/ @msemenistyi nikita.s_binary nikita.semenistyi@binary-studio.com

×