JavaScript

наконец-то

История JavaScript

    Основные моменты

    >
  • Был создан в 1995 году Бренданом Эёхом
  • В 1997 году JavaScript был стандартизирован (ECMAScript)
  • Используется для создания логики и асинхронного обмена данными с сервером

Применения

  • Манипуляция DOM (Document Object Model)
  • Обработка событий
  • Динамическое изменение стилей

Характеристика JavaScript

Интерпретируемый

не требует предварительной компиляции (веб-браузер или серверная платформа Node.js)

Динамическая типизация

Типы данных переменных определяются во время выполнения

Объектно-ориентированное программирование

позволяет создавать и использовать объекты, а также реализовывать наследование через прототипы

Асинхронность и событийно-ориентированная модель

поддерживает код, который исполняется без блокировки основного потока выполнения

Характеристика JavaScript

Кроссплатформенный

Поддерживается на всех устройствах (если на них есть браузер)

Расширяемый

Существует множество библиотек и фреймворков

Функции

Function Declaration (Объявление функции)


function greet(name) {
  console.log(`Привет, ${name}!`);
}
greet('Анна'); // Выведет: Привет, Анна!
Обладают поднятием - hoisting (позволяет вызывать функцию до её определения в коде)

Function Expression (Функциональное выражение)


const greet = function(name) {
  console.log(`Привет, ${name}!`);
};
greet('Анна'); // Выведет: Привет, Анна!
Не обладают поднятием

Arrow Function (Стрелочная функция)


const greet = (name) => {
  console.log(`Привет, ${name}!`);
};
greet('Анна'); // Выведет: Привет, Анна!
не имеют собственный контекст (наследуют значение this из окружающего контекста)

Переменные

С блочной видимостью

let

Может быть переопределена


let b = 20;

const

Не может быть переопределена


const b = 20;

С функциональной видимостью

var

Может быть переопределена


var b = 20;

Функциональная видимость

Доступна внутри функции


function exampleFunction() {
    let functionVariable = 'This is a function-scoped variable';
    console.log(functionVariable); // Доступно внутри функции
}

exampleFunction();
console.log(functionVariable); // Ошибка: functionVariable is not defined

Блочная видимость

Доступна внутри блоков (фигурных скобок)


if (true) {
  let blockVariable = 'This is a block-scoped variable';
  console.log(blockVariable); // Доступно внутри блока
}

console.log(blockVariable); // Ошибка: blockVariable is not defined

Типы данных

Python JavaScript
int, float number
str string
bool boolean
list array (массив)
dict object (объект)
None null, undefined
Все сложные структуры являются объектами (object)

Операторы

  • ...все типичные (+, -, *, /)...
  • % - остаток от деления
  • ** - возведение в степень

Особенности

Можно складывать и вычитать всё 

5 + 3; // 8
'Hello' + ' ' + 'world'; // 'Hello world'
5 + '3'; // '53'
true + 1; // 2
false + 1; // 1
[1, 2] + 3; // '1,23'
5 - 3; // 2
'Hello' - 'world'; // NaN
'5' - 3; // 2
5 - '3'; // 2
'Hello' - 3; // NaN
true - 1; // 0
1 - true; // 0
false - 1; // -1

Логические операторы

Python JavaScript
and &&
or ||
not !

Операторы сравнения

  • = = (равенство)
  • ! = (неравенство)
  • > (больше)
  • < (меньше)
  • > = (больше или равно)
  • < = (меньше или равно)

Условные конструкции

Одно событие


if (условие) {
    // код, выполняемый, если условие истинно
}

Два исхода


  if (условие) {
    // код, выполняемый, если условие истинно
  } else {
    // код, выполняемый, если условие ложно
  }

Три и более исхода


if (условие1) {
    // код
} else if (условие2) {
    // код
} else {
    // код
}

Цикл for 


for (let i = 0; i < 5; i++) {
    console.log(i);
}
  • Инициализация: let i = 0; — создание переменной i со значением 0 перед началом цикла
  • Условие: i < 5; — проверка перед каждой итерацией; цикл выполняется, пока i меньше 5
  • Обновление: i++ — увеличение значения i на 1 после каждой итерации

Цикл while 


let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}
Ручной контроль за итератором

Цикл do ... while 


let i = 0;
do {
      console.log(i);
      i++;
} while (i < 5);
Исполниться 1 раз, только потом будет смотреть на условие

Объекты

коллекции пар «ключ-значение», где ключами являются строки (свойства), а значениями — любые данные или функции (методы)

Являются альтернативой словаря из Python, но пишется без кавычек 


const person = {
    name: 'Иван',
    age: 30,
    greet: function() {
        console.log('Привет!');
    }
};

Доступ к значениям

Точечная нотация


console.log(person.name);
person.greet();

Скобочная нотация


console.log(person['age']); // 30

Контекст

this

внутри метода объекта ссылается на сам объект, позволяя обращаться к его свойствам и другим методам 


const person = {
    name: 'Иван',
    age: 30,
    greet: function() {
        console.log(`Привет, меня зовут ${this.name} и мне ${this.age} лет.`);
    }
};

person.greet();

Массивы

упорядоченные коллекции элементов, доступ к которым осуществляется по индексу

Литерал массива


const fruits = ['Яблоко', 'Банан', 'Апельсин'];

Конструктор Array


const fruits = new Array('Яблоко', 'Банан', 'Апельсин');
Все типы данных имеют конструкторы

Вывод данных

console.log(значение_или_переменная);

может принимать несколько аргументов и поддерживает различные типы данных

может принимать несколько аргументов и поддерживает различные типы данных console.log('Имя:', имя, 'Возраст:', возраст);
Выступает аналогом print()

Ввод данных


const readline = require('readline');

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

rl.question('Как вас зовут? ', (ответ) => {
  console.log(`Привет, ${ответ}!`);
  rl.close();
});
  • Неудобно
  • Работает только в Node.js
  • Много кода

Ввод данных (проще)

prompt()


let результат = prompt(сообщение, значениеПоУмолчанию);
  • Работает только в браузере
  • Тормозит рендер страницы

Виды JavaScript

JavaScript в браузере

V8 , SpiderMonkey , Nitro , Chakra

выполняется на стороне клиента и предназначен для взаимодействия с веб-страницей и её элементами

  • Доступ к DOM
  • Ограничения безопасности
  • Асинхронность

Node.js

среда выполнения JavaScript на сервере (без браузера), построенная на движке V8 от Google

  • Доступ к файловой системе и сети
  • Отсутствие DOM
  • Модульная система CommonJS
  • Асинхронная, событийно-ориентированная архитектура

Сообщения

История и эволюция движков JavaScript в браузерах

как движки JavaScript развивались с течением времени

JavaScript Event loop

  • Основы Event Loop
  • Микрозадачи и макрозадачи
  • Реализация Event Loop в браузере

Стандарт ECMAScript

  • Что такое ECMAScript
  • История и эволюция ECMAScript
  • Ключевые особенности ECMAScript
  • Процесс стандартизации

TypeScript

  • Статическая типизация
  • Совместимость с JavaScript
  • Поддержка современных возможностей
  • Инструменты разработки

Самостоятельно

Перебрать все элементы массива и вывести их в консоль

  1. 'Понедельник'
  2. 'Вторник'
  3. 'Среда'
  4. 'Четверг'
  5. 'Пятница'
  6. 'Суббота'
  7. 'Воскресенье'

Вывод в консоли


Дни недели:
Понедельник
Вторник
Среда
Четверг
Пятница
Суббота
Воскресенье

Создайте объект и выведите значение его ключей

Ключ Значение
title Название книги
author Автор

Вывод в консоль


Выведет: Название книги: 1984
Автор книги: George Orwell