JavaScript
1995, Brendan Eich, Netscape
ECMAScript
Usage
Browsers Server Desktop
 interpreted
JS Features:
runtime interpreters
Futhark, InScript, JScript, KJS, Linear B, QtScript, Rhino, YAJI, Duktape
just-in-time interpreters
~...
ie9 Chakra
google’s V8
no intermediate byte codes, no interpreter
property access
point.x
# ebx = the point object
cmp [ebx,<hidden c...
 interpreted
 loose typed
JS Features:
Number String Boolean Object
Array Function Classes
Date
Regexp
Error
Null Undefined
variable types
variable declaration
naming rules:
 a-z, A-Z, _, $
 num6ers (4ever)
 case sensitive (type / Type)
 non-reserved words
ES5
ES6
variable declaration
naming rules:
 a-z, A-Z, _, $
 num6ers (4ever)
 case sensitive (type / Type)
 non-reserved words
...
 interpreted
 loose typed
 closures
JS Features:
closures
function parent(){
var width = 5;
var keyword = 'ages';
console.log(width);
console.log(keyword);
console.log(age...
closures
function parent(){
var width = 5;
var keyword = 'ages';
console.log(width);
console.log(keyword);
console.log(age...
closures
function parent(){
var width = 5;
var keyword = 'ages';
console.log(width);
console.log(keyword);
console.log(age...
 interpreted
 loose typed
 closures
 multi-paradigmal
JS Features:
 imperative
 functional
 object-oriented
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...
Arrays
modifying
var ar = [3,5];
adding el to array
adding several els to array
form string splitted with char
reversing o...
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
re...
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++...
var ar = [10, 20, -5];
ar.forEach(function(el, idx, array){
console.log(el, idx);
});
ar.filter(function(el){
if (el > 0) ...
Functions
 first-class
 are actually objects
 can represent constructors for OOP
 can be passed as a parameter
 can t...
Functions
function countToNumber(first, last){
var countOnce = function (options){
return options.interim + options.number...
(function (str, callback){
if (typeof str === 'string'){
str = str.replace(/pain/g, 'fun');
callback(str);
}
})(str, logFi...
Classes
 absent
 we’ll still call them classes though they’re objects
 access modifiers are absent
 we can emulate the...
Classes
function Programmer(options){
this.languages = ['python', 'js'];
this.yearsXP = 1;
this.learnLanguage = function(n...
Classesfunction Programmer(options){
var languages = ['python', 'js'];
this.yearsXP = 1;
this.learnLanguage = function(nam...
Classes
emulating private members
Programmer = function (options){
var languages = ['python', 'js'];
this.yearsXP = 1;
thi...
Classes
inheritance
function Man(){
this.inheritedProperty = 5;
}
Man.prototype.setName = function(name) {
if (typeof name...
Thanks
https://github.com/msemenistyi/js-basics/
@msemenistyi
nikita.s_binary
nikita.semenistyi@binary-studio.com
Javascript Basics
Upcoming SlideShare
Loading in...5
×

Javascript Basics

3,915

Published on

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

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,915
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
37
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

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

×