JavaScript

Мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией языка ECMAScript

(стандарт ECMA-262)

wikipedia

- В браузере

- На сервере

- Создание мобильных приложений

- Создание десктопных приложений

Применение

Syntax

Инструкции

let x, y, z;  // Declare 3 variables
x = 5;    // Assign the value 5 to x
y = 6;    // Assign the value 6 to y
z = x + y;  // Assign the sum of x and y to z

Разделяются ;

Выражения

- Переменные

- Литералы (строки, числа)

- Зарезервированные слова

Операторы

- Унарные

- Бинарные

- Тернарные

Variables

- var

- let

- const

X

let y = 5; 
const c = 6;

Variables starts with:

- Буквы

- _

- $

Variables

Don't use reserved words

Variable names case sensitive

let myVar = 5;

let myvar = 6;

Literals

let num = 5;

let str = 'string';
let str2 = "string";
let str3 = `string`;

null 
undefined

true
false

Reserved words

break, case, class, catch, const, continue, debugger, default, delete, do, 
else, export, extends, finally, for, function, if, import, in, instanceof, 
let, new, return, super, switch, this, throw, try, typeof, var, void, while, with, yield,
enum, await, implements, package, protected, static, interface, private, public,
abstract, boolean, byte, char, double, final, float, goto, int, long, 
native, short, synchronized, transient, volatile, false, true, null, undefined

Types

- Primitives

- Objects

Primitives

- Numbers

- Strings

- Boolean

- Null

- Undefined

- Symbols

Objects

- Objects

- Arrays

- RegExp

- Functions

- Set/Map

- Generators/Iterators

- Promises

Numbers

- Float

- from to

-2^{53}

-2^{53}

2^{53}

2^{53}

Numbers

- Decimal format

- Hexadecimal format

- Octal format

- Binary format

let x = 4 
let y = 4.56
12343.543e23;  .89E-34;

let x = 0x4 
let y = 0X44

let x = 0o4 
let y = 01234

let x = 0b1010111;

Numbers - operators

- Unary operators

- Binary operators

-10;    10++;
+10;    10--;
++10;    --10;

4 - 10;    100 / 10;
4 + 10;    2 * 10;
10 % 3;

- Relational operators

4 > 10;     4 < 10;
2 >= 10;    100 <= 10;
10 != 3;    10 !== 3;
10 == 3;    10 === 3;

Numbers - Math

 Math.sqrt(25);
  Math.pow(25,3);
  Math.PI;
  Math.E;
  Math.acosh(3)
  Math.hypot(3, 4)
  Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2)

Numbers - Number Object

  let x = new Number(4);
  x.toFixed(2);
  (3).toFixed(2);
  2 .toFixed(2);
  Number.EPSILON
  Number.isInteger(Infinity)
  Number.isNaN("NaN")

Strings

- 'RED'

- "RED"

-`RED`

"abcde".includes("cd")
"abc".repeat(3)

let x = 7;
"this number "+x 
`this number ${x}`

Bool

- True

- False

Bool - False

- Undefined

- Null

- 0

- NaN

- ""

- []

Bool - AND (&&)

	TRUE	FALSE
TRUE	TRUE	FALSE
FALSE	FALSE	FALSE

Bool - OR (||)

	TRUE	FALSE
TRUE	TRUE	TRUE
FALSE	TRUE	FALSE

Type conversion

Something + String = String

Something * Something = Number

!!Something = Bool

+"3" = Number

Constructors

Conditional Constructions

if (x > 5) {

}

if (x > 5) {

}  else {

}

if (x > 5) {

} else if (x > 50) {

} else {

}

let x= true ? 1 : 0;

switch(data){
    case data:
        // ... some code
        break;
    case data1:
    case data2:
break;
    default:
        // some code
}

Loops

for (var i = 0; i < 9; i++) {
   console.log(i);
   // ещё какие-то выражения
}

var i = 0;
do {
   i += 1;
   console.log(i);
} while (i < 5);

var n = 0;
var x = 0;

while (n < 3) {
  n++;
  x += n;
}

var obj = {a:1, b:2, c:3};
    
for (var prop in obj) {
  console.log("obj." + prop);
}

let iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}

Functions

function name(){
    // some code
}

let x = function(){
    return 4
}

let x = ()=>{
    return 3
}

let x = (a = 1, b )=>{
    console.log(arguments);
    return 3
}

let x = ( ) => {
    let red = 56
    return ()=>(red)
}

function name ( ) {
    let red = 56
    name(); 
}

Generators

function* idMaker() {
  var index = 0;
  while (index < 3)
    yield index++;
}

var gen = idMaker();

console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value);

Objects

Object

Ключ - значение

const x = new Object();

const y = {}

const z = {
    a: "hello world"
    f: function(a, b){
        return a+b
    }
}

Object

Доступ к элементам

const z = {
    a: "hello world"
    f: function(a, b){
        return a+b
    }
}

z.a // "hello world"

z["f"](2,1) // 3

z.b = "some text"

Functions

Именованные

function getCurrentDate(){

    const today = new Date();
    const dd = String(today.getDate()).padStart(2, '0');
    const mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
    const yyyy = today.getFullYear();
    
    today = dd + '/' + mm + '/' + yyyy;
    
    return today
}

Functions

Анонимные

const getCurrentDate = function (){

    const today = new Date();
    const dd = String(today.getDate()).padStart(2, '0');
    const mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
    const yyyy = today.getFullYear();
    
    today = dd + '/' + mm + '/' + yyyy;
    
    return today
}

const getCurrentDate = () => {

    const today = new Date();
    const dd = String(today.getDate()).padStart(2, '0');
    const mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
    const yyyy = today.getFullYear();
    
    today = dd + '/' + mm + '/' + yyyy;
    
    return today
}

Prototype

const bike = {
    name: "Some Name", 
    age: 1,
    wheels: 2,
}

const honda = {
    name: "honda", 
    age: 2,
    wheels: 2,
}
const suzuki = {
    name: "suzuki", 
    age: 5,
    wheels: 2,
}
const ural = {
    name: "ural", 
    age: 20,
    wheels: 2,
}
const izh = {
    name: "izh", 
    age: 14,
    wheels: 2,
}

const createBike = (name, age)=>{
    return {
        name,
        age,
        wheels: 2,
    }
}

const honda = createBike("honda", 2)
const suzuki = createBike("suzuki", 2)
const ural = createBike("ural", 2)
const izh = createBike("izh", 2)

X

Prototype

const createBike = (name, age)=>{
    return {
        name,
        age,
        wheels: 2,
    }
}

const honda = createBike("honda", 2)
const suzuki = createBike("suzuki", 2)
const ural = createBike("ural", 2)
const izh = createBike("izh", 2)

const createBike = (name, age)=>{
    return {
        name,
        age,
        wheels: 2,
        beep:function(){
            console.log("Beeeeep");
        }
    }
}

const honda = createBike("honda", 2)
const suzuki = createBike("suzuki", 2)
const ural = createBike("ural", 2)
const izh = createBike("izh", 2)

Prototype

function Bike(name, age){
    this.name = name;
    this.age = age; 
}

Bike.prototype = {
    wheels: 2,
    beep:function(){
        console.log("Beeeeep");
    }
}

const honda = new Bike("honda", 2)
const suzuki = new Bike("suzuki", 2)
const ural = new Bike("ural", 2)
const izh = new Bike("izh", 2)

Prototype

function Bike(name, age){
    this.name = name;
    this.age = age; 
}

Bike.prototype = {
    wheels: 2,
    beep:function(){
        console.log("Beeeeep");
    }
}

const honda = new Bike("honda", 2)
const suzuki = new Bike("suzuki", 22)

honda.beep() // works
honda.beep2() // error "undefined is not a function"

Bike.prototype.beep2 = function(){
    console.log("Beeeep2");
}
honda.beep2() // works
suzuki.beep2() // works

Prototype

Number

String

Boolean

Array

Symbol

RegExp

Date

Object

Prototype

function Bike(name, age){
    this.name = name;
    this.age = age; 
}

Bike.prototype = {
    wheels: 2,
    beep:function(){
        console.log("Beeeeep");
    }
}

const honda = new Bike("honda", 2)

honda.beep() // works
honda.beep2() // error "undefined is not a function"

honda.__proto__ // ref to Object

Prototype

Расширять возможности объектов

Экономим память

Организуем наследование

Class

В JS нет ОПП

Синтаксический сахар

Прототипы

Class

function Bike(name, age){
    this.name = name;
    this.age = age; 
}

Bike.prototype = {
    wheels: 2,
    beep:function(){
        console.log("Beeeeep");
    }
}

class Bike {
    constructor(name, age){
        this.name = name;
        this.age = age; 
    }

    beep(){
       console.log("Beeeeep");
    }

    get wheels() {
        return 2
    }
}

Class

class Bike {
    constructor(name, age){
        this.name = name;
        this.age = age; 
    }

    beep(){
       console.log("Beeeeep");
    }

    get wheels() {
        return this._wheels || 2
    }

    set wheels(num) {
        this._wheels = num
    }
}

function Bike(name, age){
    this.name = name;
    this.age = age; 
}

Bike.prototype = {
    wheels: 2,
    beep:function(){
        console.log("Beeeeep");
    }
}

Class

class Bike {
    constructor(name, age){
        this.name = name;
        this.age = age; 
    }

    beep(){
       console.log("Beeeeep");
    }

    get wheels() {
        return this._wheels || 2
    }

    set wheels(num) {
        this._wheels = num
    }
}

class Chopper extends Bike {
    constructor(name, age){
        super(name, age)
     
    }
    
    beep(){
        super.beep();
        console.log("I'm chopper")
    }

}