itmo_conspects

Лекция 6. Основы JavaScript

JavaScript - это

• скриптовый
• объектно-ориентированный
• динамически типизированный
• со сборкой мусора

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

Когда язык создавался в 1995 году для добавления интерактивности веб-страницам, у него было множество других названий. Остановились на JavaScript, так как в 90-ых был очень популярен язык Java

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

JavaScript - язык интерпретируемый, поэтому для его исполнения нужен интерпретатор. В браузерах на движке Chromium используется интерпретатор V8, в Mozilla Firefox - интерпретатор SpiderMonkey, в Safari - JavaScriptCore

Интерпретаторы в большинстве современных браузеров поддерживают JIT-компиляцию (преобразования языка в машинные инструкции) и язык WebAssembly, который представляет низкоуровневый бинарный формат байткода, предназначенный для быстрого исполнения в браузере

Для добавления скрипта в HTML-страницу используется тег <script>:

<script>
    window.alert("Boo");
</script>

<!-- или -->

<script src="./script.js"></script>

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

Переменные в JavaScript объявляются с помощью ключевых слов:

• var, тогда имеет функциональную область видимости
• let, тогда переменная доступна только внутри блока
• const, тогда запрещается переназначение переменной

В JavaScript всего существует 8 типов:

• Число number. В JavaScript все числа - 64-битные числа с плавающей точкой по стандарту IEEE 754, поэтому появляются такие приколы:

    > console.log(0.1 + 0.2);
  
    0.30000000000000004
  

  Чтобы избежать этого, можно хранить мантиссу и при чтении умножать на экспоненту, либо округлять

  Так как number - число с плавающей точкой, то существуют NaN, Infinity и -Infinity

• Строки string представляют собой последовательность 16-битных значений в Unicode. Строки являются иммутабельными, поэтому при конкатенации строк a + b создается новая. Строки объявляются в одинарных или двойных кавычках

• Логический тип boolean, принимающий два значения true и false

• Пустое значение null (при этом typeof null выдает "object")

• Неопределенное значение undefined

  Отличие undefined от null в том, что undefined предполагает, что значение не существует вообще, а null указывает на явное намеренное отсутствие значения

• Символьное значение symbol

  Символьное значение Symbol() используется как примитивный тип для создания уникальных идентификаторов, в том числе для создания скрытых полей

• Целые числа произвольной длины bigint

  Целые числа указываются с постфиксом n, например, 123456789n

• Объект object

  Объекты представляют из себя неупорядоченные коллекции типа “ключ-значение”:

    var user = {
        name: "Jeffrey",
        age: 67,
        account_ids: {
            bank: 137921,
            facebook: 2472374
        }
    }
  

  Доступ к значениям осуществляется через квадратные скобки user['name'] или через точку user.name

  Все сложные структуры (массивы, функции и так далее) реализованы с помощью объектов

  Массивы же объявляются с помощью [] и имеют индексацию с 0:

    var arr = [];
    arr = ["Apple", "Orange", "Pear"];
      
    console.log(arr[1]); // "Orange"
  

---

Для управления потоком исполнения используют следующие структуры:

• Оператор if:

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

  Для создания условий JavaScript имеет привычные операторы <, ==, !=, >, >=, <=, !, && и ||, но также и ===, !==, которые сравнивают и тип, и значение. Таким образом, "1" == 1 истинно, но "1" === 1 ложно

• Оператор switch:

    switch (переменная) {
        case значение1:
            // код выполняется, если переменная == значение1
            break;
        case значение2:
        case значение3:
            // код выполняется, если переменная == значение2
            // или переменная == значение3
            break;
        default:
            // код выполняется, если условия выше не подошли
    }
  

• Оператор for:

    for (начало; условие; шаг) {
        // код выполняется, пока условие истинно
    }
  

  Прерывание цикла осуществляется с помощью break, а переход на следующую итерацию с помощью continue

  Для прохода по объекту существует другой синтаксис:

    for (const key in person) {
        console.log(`${key}: ${person[key]}`); 
    }
  

  А для прохода по массиву такой:

    for (const number of numbers) {
        console.log(number);
    }
  

• Оператор while:

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

• Оператор try:

    try {
        // код с потенциальными ошибками
    }
    catch (err) {
        // обработка ошибки
        // выполняется в случае ошибке в try
    }
    finally {
        // выполняется в любом случае
    }
  

---

Взаимодействие с пользователем осуществляется с помощью API:

• console.log(сообщение) выводит сообщение в консоль отладки
• window.alert(сообщение) создает диалоговое окно с сообщение с кнопкой “Ок”
• window.confirm(сообщение) создает диалоговое окно с сообщение с кнопками “Ок” и “Отмена”, возвращает булевое значение в зависимости от того, какая кнопка нажата
• window.prompt(сообщение, пример_ввода) создает диалоговое окно с сообщение с кнопками “Ок” и “Отмена” и полем ввода текста, возвращает содержимое поле или null

---

Функцию в JavaScript можно объявить несколькими способами:

• Объявление функции:

    function sum(a, b) {
        return a + b;
    }
  

  Так предпочтительнее всего объявлять функцию, так как она становится доступной для вызова в коде перед ней

• Функциональное выражение:

    const sum = function(a, b) {
        return a + b;
    };
  

• Именованное выражение:

    const factorial = function fact(n) {
        if (n <= 1) return 1;
        return n * fact(n - 1);
    };
  

• Стрелочная функция:

    const sum = (a, b) => a + b;
  

  Полезно для анонимных функций

---

JavaScript предлагает набор встроенных объектов:

• Array предназначен для работы с массивами
• Date предназначен для работы с датой и временем
• String предназначен для работы со строками
• Math предназначен для выполнения математических функций, например: Math.pow(x, y) возводит x в степень y, Math.sqrt(x) находит квадратный корень, а Math.sin(x) находит синус
• RegExp предназначен для работы с регулярными выражениями

Помимо этого браузер предлагает свои объекты:

• window предназначен для работы с окном браузера
• document предназначен для работы с html-документами
• history предназначен для работы с историей
• console предназначен для отладки программного кода

This site is open source. Improve this page.