ITED
bootcamp

Основы JavaScript

Проектирование web-сайтов

План лекции

  • Что такое JavaScript и зачем он нужен
  • История языка и стандарт ECMAScript
  • Где выполняется JavaScript
  • Подключение скриптов и консоль
  • Синтаксис: инструкции, комментарии
  • Переменные и типы данных
  • Операторы и строгий режим
2 / 36
Проектирование web-сайтов

Что такое JavaScript

  • Язык программирования для веб-страниц
  • Делает страницу интерактивной
  • Выполняется в браузере у пользователя
Браузер с открытой страницей и панелью разработчика

Рис.: браузер с открытой страницей и панелью разработчика.

3 / 36
Проектирование web-сайтов

История: создание языка

  • 1995 год — компания Netscape, браузер Navigator
  • Автор идеи — Брендан Айк (Brendan Eich)
  • Язык написан за очень короткий срок
  • Изначально назывался Mocha, затем LiveScript, потом JavaScript
Брендан Айк (Brendan Eich)

Рис.: Брендан Айк (Brendan Eich).

4 / 36
Проектирование web-сайтов
Java и JavaScript — разные языки

Рис.: Java — это не JavaScript.

Почему имя JavaScript

  • В 1990-х был популярен язык Java
  • Маркетинг: ассоциация с Java
  • JavaScript и Java — разные языки
5 / 36
Проектирование web-сайтов

Стандарт ECMAScript

  • ECMA International — организация по стандартам
  • Спецификация ECMA-262 описывает язык
  • JavaScript — реализация этого стандарта
  • Версии: ES5 (2009), ES6/ES2015 и далее по годам
6 / 36
Проектирование web-сайтов

Где выполняется JavaScript

  • В браузере: Chrome, Firefox, Safari, Edge — интерактивность страниц
  • Node.js — серверы, API, инструменты сборки (Webpack, Vite), скрипты
  • Огромная экосистема npm — библиотеки на любой случай
  • Один язык, разные окружения: веб, бэкенд, десктоп (Electron), мобильные (React Native)
7 / 36
Проектирование web-сайтов

Триада веб-страницы

  • HTML — структура и содержимое
  • CSS — оформление и вёрстка
  • JavaScript — поведение и интерактивность
8 / 36
Проектирование web-сайтов

Подключение скрипта

  • Тег <script> в HTML
  • Внешний файл: <script src="script.js"></script>
  • Встроенный код между <script> и </script>
9 / 36
Проектирование web-сайтов

Консоль разработчика

  • F12 или правый клик — «Просмотреть код»
  • Вкладка Console — выполнение кода и сообщения
  • Удобно для проверки выражений и отладки
10 / 36
Проектирование web-сайтов

Синтаксис: инструкции

  • Инструкции отделяются точкой с запятой или переводом строки
  • Рекомендуется ставить точку с запятой в конце
  • Регистр букв важен: name и Name — разные переменные
11 / 36
Проектирование web-сайтов

Комментарии

  • Однострочный: // текст до конца строки
  • Многострочный: /* текст на несколько строк */
  • Комментарии игнорируются при выполнении
12 / 36
Проектирование web-сайтов

Переменные: let и const

  • let — переменная, значение можно менять
  • const — константа, переприсвоить нельзя
  • Объявление: let x; или const y = 10;
13 / 36
Проектирование web-сайтов

Имена переменных

  • Буквы, цифры, _ и $; цифра не в начале
  • Стиль camelCase: имяПеременной
  • Осмысленные имена упрощают чтение кода
14 / 36
Проектирование web-сайтов

Типы данных: обзор

  • number — числа
  • string — строки
  • boolean — истина/ложь
  • undefined, null — отсутствие значения
  • symbol — уникальный идентификатор
  • bigint — целые числа произвольной длины
  • object — объекты, массивы, функции (typeof function → "function", но это объект)
15 / 36
Проектирование web-сайтов

Оператор typeof

  • typeof x — возвращает строку с именем типа
  • Примеры: "number", "string", "boolean", "undefined"
  • Полезно при отладке и проверке данных
16 / 36
Проектирование web-сайтов

Тип number

  • Целые и дробные числа в одном типе
  • Примеры: 42, -3, 3.14, 0.5
  • Арифметика: +, -, *, /, остаток %
17 / 36
Проектирование web-сайтов

NaN и Infinity

  • NaN — «не число», результат некорректной операции
  • Infinity и -Infinity — бесконечность
  • Проверка: isNaN(x), isFinite(x)
18 / 36
Проектирование web-сайтов

Тип string

  • Текст в кавычках: "двойные" или 'одинарные'
  • Обратные кавычки `шаблон ${выражение}` — шаблонные строки
  • Длина строки: строка.length
19 / 36
Проектирование web-сайтов

Конкатенация строк

  • Сложение строк через +: "Привет" + " " + "мир"
  • Строка + число — число приводится к строке
  • В шаблонных строках — подстановка через ${}
20 / 36
Проектирование web-сайтов

Тип boolean

  • Два значения: true и false
  • Результат сравнений и логических выражений
  • Используется в условиях (тема следующих лекций)
21 / 36
Проектирование web-сайтов

undefined и null

  • undefined — переменная объявлена, но значение не задано
  • null — «пусто» или «нет значения» по смыслу
  • Оба означают отсутствие значения, но по-разному
22 / 36
Проектирование web-сайтов

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

  • >, <, >=, <= — больше, меньше
  • == и != — равенство с приведением типов
  • === и !== — строгое равенство (тип не меняется)
23 / 36
Проектирование web-сайтов

Строгое равенство ===

  • Сравнивает и значение, и тип
  • 5 === "5" даёт false; 5 == "5" даёт true
  • Рекомендуется использовать === и !==
24 / 36
Проектирование web-сайтов

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

  • && — логическое «и» (оба истинны)
  • || — логическое «или» (хотя бы один истинен)
  • ! — отрицание (не)
25 / 36
Проектирование web-сайтов

Приоритет операций

  • Умножение и деление выполняются раньше сложения и вычитания
  • Скобки () задают порядок явно
  • При сомнениях — скобки улучшают читаемость
26 / 36
Проектирование web-сайтов

Строгий режим "use strict"

  • Директива в начале файла или функции
  • Запрещает часть неаккуратных конструкций
  • Помогает избежать типичных ошибок
27 / 36
Проектирование web-сайтов

Преобразование типов

  • Строка в число: Number("42"), parseInt("42")
  • Число в строку: String(5) или 5 + ""
  • В логическом контексте: ложь — 0, "", null, undefined, false
28 / 36
Проектирование web-сайтов

Резюме: типы данных

  • number, string, boolean — основные примитивы
  • undefined, null — отсутствие значения
  • bigint — целые числа произвольной длины
  • symbol — уникальный идентификатор
  • object — объекты, массивы, функции
  • typeof проверяет тип; === сравнивает строго
29 / 36
Проектирование web-сайтов

Характеристики языка

  • Динамическая типизация — тип у значения, не у переменной
  • Интерпретируемый — код выполняется по шагам (JIT в современных движках)
  • Однопоточность и цикл событий (event loop) — асинхронность без блокировок
  • Функции первого класса — функции как значения, замыкания
  • Прототипная модель ООП — объекты и наследование через прототипы
  • Подходит для веба, сервера (Node.js), скриптов и сборки
30 / 36
Проектирование web-сайтов

Инструменты для работы

  • Редактор кода: VS Code, Sublime и др.
  • Консоль браузера — быстрая проверка
  • Документация: MDN (developer.mozilla.org)
31 / 36
Проектирование web-сайтов

Что дальше

  • Функции — повторное использование кода
  • Массивы и объекты — структуры данных
  • Циклы — перебор и повторение
32 / 36
Проектирование web-сайтов

Кратко: символ и BigInt

  • Symbol — уникальный идентификатор, не равен ни одному другому. Свой «рандомный» строковый ключ может случайно совпасть с ключом из библиотеки или другого кода; Symbol гарантирует уникальность на уровне движка и не конфликтует со строками. Кейсы: ключи «приватных» свойств объектов, константы для типов, уникальные метки в библиотеках.
  • BigInt — целые числа произвольной длины (суффикс n: 123n). Кейсы: криптография, точная арифметика с большими числами, идентификаторы, финансы без потери точности.
  • Оба типа используются в специфичных задачах; в обычной вёрстке встречаются редко.
33 / 36
Проектирование web-сайтов

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

  • console.log("текст") — вывод в консоль браузера
  • console.log(x) — вывод значения переменной
  • Несколько аргументов: console.log("x =", x)
34 / 36
Проектирование web-сайтов

Рекомендации начинающим

  • Пишите "use strict" в начале скрипта
  • Используйте const по умолчанию, let при изменении
  • Проверяйте код в консоли по шагам
35 / 36
Проектирование web-сайтов

Вопросы и ответы

36 / 36