Основы JavaScript

2.

Что такое JavaScript?
2
Изначально JavaScript был создан, чтобы «сделать
веб-страницы живыми».
Программы на этом языке называются скриптами.

3.

Движки JavaScript
V8 – в Chrome и Opera,
SpiderMonkey – в Firefox,
«Trident» и «Chakra» для разных версий IE,
«ChakraCore» для Microsoft Edge, «Nitro» и
«SquirrelFish» для Safari и т.д.
2

Как работают движки?
1. Движок (встроенный, если это браузер) читает
текст скрипта.
2. Затем он компилирует скрипт в машинный
язык.
3. После этого машинный код запускается и
работает достаточно быстро.
2

5.

Что может JavaScript в браузере?
2
1. Добавлять новый HTML-код на страницу, изменять
существующее содержимое, модифицировать стили.
2. Реагировать на действия пользователя, щелчки мыши,
перемещения указателя, нажатия клавиш.
3. Отправлять сетевые запросы на удалённые сервера, скачивать
и загружать файлы (технологии AJAX и COMET).
4. Получать и устанавливать куки, задавать вопросы посетителю,
показывать сообщения.
5. Запоминать данные на стороне клиента («local storage»).

6.

2
Чего НЕ может JavaScript в браузере?
1. JavaScript на веб-странице не может читать/записывать
произвольные файлы на жёстком диске, копировать их или
запускать программы.
2. Различные окна/вкладки не знают друг о друге.
3. JavaScript может легко взаимодействовать с сервером, с
которого пришла текущая страница. Но его способность
получать данные с других сайтов/доменов ограничена.

7.

2
Почему JavaScript?
1. Полная интеграция с HTML/CSS.
2. Простые вещи делаются просто.
3. Поддерживается всеми основными браузерами и включён по
умолчанию.

8.

Спецификации JavaScript
Спецификация ECMA-262
Спецификация DOM
Спецификация CSSOM
Спецификация HTML
4

9.

Справочники
MDN (Mozilla) JavaScript Reference
MSDN
Таблицы совместимости
http://caniuse.com
https://kangax.github.io/compat-table
4

10.

Подключение JavaScript
1) встраивание в HTML документ с помощью тега <script>
4

11.

Подключение JavaScript
4
2) подключить JavaScript файла с помощью атрибута src
3) подключить JavaScript файла по URL адресу
!!! Если атрибут src установлен, содержимое тега script будет
игнорироваться.

12.

Структура кода
- Точка с запятой
В большинстве случаев точку с запятой можно не ставить, если есть переход на новую
строку.
В большинстве случаев новая строка подразумевает точку с запятой. Но «в
большинстве случаев» не значит «всегда»!
3

13.

5
Но есть ситуации, где JavaScript «забывает» вставить точку с запятой
там, где она нужна.
Рекомендуется ставить точку с запятой между инструкциями, даже
если они отделены переносами строк.

14.

3
Структура кода
- Комментарий
Однострочные комментарии начинаются с двойной косой черты //.
Многострочные комментарии начинаются косой чертой со звёздочкой /* и
заканчиваются звёздочкой с косой чертой */.
Горячие клавиши
Ctrl+/ - односторочный
Ctrl+Shift+/ - многострочный

15.

Переменные
Переменная – это «именованное хранилище» для данных.
Для создания переменной используйте ключевое слово - let.
! var вместо let
Ключевое слово var – почти то же самое, что и let. Оно
объявляет переменную, но немного по-другому, «устаревшим»
способом.
Var, let или const?
6

16.

Именование переменных
6
Ограничения:
- имя переменной должно содержать только буквы,
цифры или символы $ и _.
- первый символ не должен быть цифрой.
!!! Регистр имеет значение
apple и AppLE – это две разные переменные
!!! Нелатинские буквы разрешены, но не рекомендуются
Можно использовать любой язык, включая кириллицу или даже
иероглифы, например:

17.

Именование переменных
!!! Зарезервированные имена
Полный список на сайте MDN web docs
!!! Создание переменной без использования use strict
Это плохая практика, которая приводит к ошибке в строгом
режиме:
6

18.

Константы
Для объявления константы используйте const
Названия таких констант пишутся с использованием заглавных
букв и подчёркивания.
6

19.

6
Название переменной должно иметь ясный и понятный смысл,
говорить о том, какие данные в ней хранятся.
• Используйте легко читаемые имена, такие как userName или shoppingCart.
• Избегайте использования аббревиатур или коротких имён, таких как a, b, c, за
исключением тех случаев, когда вы точно знаете, что так нужно.
• Делайте имена максимально описательными и лаконичными. Примеры плохих
имён: data и value. Такие имена ничего не говорят. Их можно использовать
только в том случае, если из контекста кода очевидно, какие данные хранит
переменная.

20.

Стили именование переменных
- camelCase
слова не отделяются пробелами, каждое последующее слово начинается с
заглавной буквы.
- snake_case
вместо пробелов слова разделяются нижним подчеркиванием, каждое
последующее слово начинается с прописной буквы
6

21.

English Русский Правила