1 of 26

Что такое JavaScript

Мікалай Янкойць

​

​

2 of 26

Повестка дня

  1. Что такое JavaScript и зачем он нужен
  2. Инструменты разработчика
  3. Переменные и выражения
  4. Типы данных
  5. Операторы

​

3 of 26

Что такое JavaScript?

​

  • Язык программирования (один из ~1000)
  • Создан для «оживления» веб-страниц
  • Самый популярный язык веб-приложений
  • Выполняется во всех современных браузерах
  • Может выполняться и вне браузера

​

4 of 26

Что может JavaScript на веб-страницах?

​

  • Создавать, удалять и изменять HTML-теги
  • Динамически изменять стиль элементов страницы
  • Обрабатывать разные действия пользователей
  • Посылать запросы на сервер без перезагрузки страницы
  • Работать с аудио, видео, геолокацией, веб-камерой, анимацией…
  • …

​

5 of 26

Чем уникален JavaScript?

​

  • Полная интеграция с HTML/CSS на уровне спецификаций
  • Поддерживается всеми популярными браузерами (и включён по умолчанию)
  • Легко начать – простые вещи делаются очень просто, не нужны знания о работе с памятью или процессором

​

6 of 26

JavaScript – интерпретируемый язык

​

  • Языки программирования бывают компилируемыми и интерпретируемыми
  • Программы на компилируемых языках (C, C++, Pascal) перед выполнением должны быть преобразованы в машинный код
  • Программы на интерпретируемых языках (JavaScript, Python, PHP) выполняются интерпретатором непосредственно из текста
  • Интерпретаторы JavaScript встроены во все популярные браузеры

​

​

7 of 26

JavaScript – реализация языка ECMAScript

​

  • Стандарт ECMA-262 компании Ecma International
  • Текущая версия – ECMAScript 2019
  • Есть другие реализации (JScript, ActionScript)

​

​

8 of 26

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

IDE:

  • WebStorm
  • Komodo Edit
  • Atom
  • Visual Studio Code
  • Brackets
  • …

​

​

Редакторы:

  • Sublime Text
  • Notepad++

​

9 of 26

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

Вкладки Console / Sources в инструментах разработчика Chrome (F12)

Вкладки Console / Debugger в инструментах разработчика Firefox (F12)

10 of 26

JavaScript на странице: <script>

​

  • Или встроенный скрипт, или отдельный файл
  • Может располагаться и в <head>, и в <body>
  • Атрибуты: src, type, async, defer

11 of 26

Переменные. Выражения. Присваивание значения

12 of 26

Правила именования переменных

  • Только буквы, цифры, знаки _ и $

Можно русские буквы, но не рекомендуется

  • Имя переменной не может начинаться с цифры
  • Регистр букв имеет значение!
  • Имена из нескольких слов обычноПишутТак (camelCase)

иногда_пишут_так, но реже

13 of 26

Типы данных в JavaScript

​

  • Number
  • String
  • Boolean
  • Null
  • Undefined
  • Object
  • BigInt
  • Symbol

​

​

Определение типа – унарный оператор typeof

14 of 26

Number в JavaScript

​

  • Целые и дробные

1; -7; 0.21; -56.218

  • Три формы записи – десятичная, hex, с плавающей точкой

255; 0xFF; 2.55e2

  • Специальные значения:

Infinity

-Infinity

NaN

​

​

15 of 26

Арифметические операторы JavaScript

​

  • +
  • -
  • *
  • /
  • унарный + и унарный -
  • %
  • **
  • инкремент ++ и декремент --

​

16 of 26

Сокращённое присваивание

17 of 26

Тип String. Конкатенация

​

18 of 26

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

​

  • >
  • <
  • >=
  • <=
  • ==
  • !=
  • ===
  • !==

19 of 26

JavaScript – язык с динамической типизацией

​

  • Переменные нужно определять до начала использования, но их типы объявлять не требуется
  • Тип данных определяется прямо во время выполнения программы
  • В разные моменты в одной и той же переменной могут храниться данные разных типов

​

​

​

  • Многие языки программирования (C++, C#, Java) используют противоположный подход – статическую типизацию

20 of 26

JavaScript – язык со слабой типизацией

​

Типы данных преобразуются,

часто – автоматически и неявно

21 of 26

Численное преобразование

Number(val)

Неявное преобразование

  • в математических выражениях
  • при сравнении данных разных типов (кроме === и !==)

22 of 26

Строковое преобразование

String(val)

Неявное преобразование

  • оператор «+», один из аргументов которого – строка
  • необходимость представить результат в виде строки (например, alert(val) )

23 of 26

Логическое преобразование

Boolean(val)

Неявное преобразование

  • при применении логических операторов
  • в логическом контексте (if, while)

24 of 26

Источники полезной информации

​

25 of 26

Внеклассное чтение

https://learn.javascript.ru/external-script

​

https://developer.mozilla.org/ru/docs/Learn/JavaScript/Первые_шаги/Что_пошло_не_так

​

https://learn.javascript.ru/types-conversion

26 of 26

Практика

Определите значения и типы выражений.

​