JavaScript

1. Введение

Программы на этом языке называются скриптами

Скрипты встраиваются в HTML и выполняться при загрузке страницы

Скрипты не нуждаются в компиляции

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

У браузера есть собственный движок, который иногда называют "виртуальной машиной JS"

У разных браузеров свои названия движков (которые полезно знать)

У хрома - V8

У firefox - SpiderMonkey

Движок работает так:

1. Читает текст скрипта

2. Компилируем в машинный язык.

3. Запускается машинный код и работает достаточно быстро

Возможности зависят от того, как каком окружении он работает.

В окружении Node.JS он поддерживает функции чтения/записи файлов, выполнения сетевых запросов ит.д.

NodeJS

В браузере ему ДОСПУПНО всё. Манипулировать веб-страницами, взаимодействовать с пользователем и веб-сервисом.

Может добавлять HTML код на страницу, изменить существующее содержимое, менять стили.

Может реагировать на действия пользователя, щелчки мыши, перемещение указателя, нажатие клавиш.

Может отправлять сетевые запросы на удаленные сервера

Может скачивать и загружать файлы (технологии AJAX, COMET)

AJAX

COMET

Получать и устанавливать куки, задавать вопросы посетителю, показывать сообщения.

Запоминать данные на стороне клиента - local storage

local storage

Что он НЕ МОЖЕТ. Возможности JS в браузере ограничены ради безопасности пользователя.

JS на веб-странице не может/читать/записывать файлы на жесткий диск, копировать или запускать программы. Он не умеет доступа к системным функциям ОС

Это возможно, только если пользователь перетаскивает файл в браузер, или выбирает его через <input>

Включить камеру, микрофон можно только с явного разрешения пользователя. Страница с JS не может незаметно включать веб-камеру

JS с одной страницы, не умеет доступа у другой странице, если они пришли с разных сайтов (с другого домена, протокола или порта)

Это называется "политика одинакового источника" (Same Origin Policy). Чтобы обойти это ограничение, обе страницы должны содержать JS код который спец. образом обменивается данными.

Страница http://anysite.com не должна иметь доступ к другой вкладке браузера с другим URL

Но это ограничение не действует, если JS используется вне браузера, например - на сервере. Современные браузеры предоставляют плагины, расширения, с помощью которых можно запрашивать доп. разрешения.

Он "безопасный", т.к. не предоставляет низкоуровневый доступ к памяти или проц.

В последнее время появилось много языков, которые транслируются (конвертируются) в JS, прежде чем запускаться в браузере

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

CoffeeScript

Вводит более короткий синтаксис, код лаконичнее.

TypeScript

от Microsoft

Flow

от Facebook

Dart

Предложен Google. ЯП для создания польз. интерфейсов.

Brython

Транспилирует Python в JS

2. Основы JS

1. Выполнение скрипта

Для серверных сред достаточно выполнить команду типа node my.js

для браузера - использовать тег script в любом месте HTML

r

<!DOCTYPE HTML> <html> <body> <p>Перед скриптом...</p> <script> alert( 'Привет, мир!' ); </script> <p>...После скрипта.</p> </body> </html>

Если JS кода много, то его лучше поместить в отдельный файл

r

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

Можно указать ссылку на скрипт

r

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>

Для подключения нескольких скриптов, используется несколько тегов

r

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

Как правило только простейшие скрипы указываются внутри HTML. Более сложные создаются в отдельном файле.

Польза от отдельных файлов в том, что браузер загрузит скрипт отдельно и сможет хранить его в кеше (web cache)

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

Если для тега <script> установлен атрибут scr='file.js', то содержимое внутри тега будет игнорироваться.

r

<script src="file.js"> alert(1); // содержимое игнорируется, так как есть атрибут src</script>

атрибуты type и language необязательны

2. Структура кода

Инструкции

alert('Привет, мир!') - это инструкция. т.е. команды, которые выполняют действия

Инструкции отделяются знаком ; Инструкций может быть сколько угодно

r

alert('Привет'); alert('Мир');

Обычно все инструкции пишут с новой строчки для удобства. В этом случае не обязательно ставить ; Будет работать и без них.

r

alert('Привет')alert('Мир')

Он интерпретирует это как "неявную" точку с запятой. Но он и понимает "незавершенные выражения", и тогда воспринимает это как 1 строку.

r

alert(3 +1+ 2);в ответе будет 6

Есть ситуации, когда JS все же неправильно понимает разделение. Так что лучше всегда ставить ; Это правило широко распространено среди разработчиков.

//Комментарии

/*многострочный
комментарий*/

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

это Деректива

строчка "use strict" в начале всего кода указывается для того, чтобы устаревший код работал. Это значит что сценарий работает в современном режиме.

r

"use strict";// этот код работает в современном режиме...

Со строчкой "use strict" т.е. в строгом режиме можно находить ошибки быстрее. Избегать в коде устаревших вещей, которые будут приводить к ошибкам.

Его можно использовать как для всего кода, так и для отдельных функций

r

// код здесь обрабатывается в неограниченном режиме function f() { "use strict"; // код здесь обрабатывается в строгом режиме } // код здесь обрабатывается в неограниченном режиме

Обычно его используют для всего файла. Указывается в самом начале файла

Когда входим в строгий режим, то отменить его уже нельзя

В консоли браузера "use strict" по умолчанию выключен

Когда это имеет значение, можно получить неправильные результаты. Нужно просто его дописать через Shift+Enter

В старых браузерах он указывается внутри функции

r

(function() { 'use strict'; // ...ваш код...})()

Строгий режим был введён в ECMAScript 5, и старые браузеры (IE9 и младше) его не поддерживают

Очень желательно добавлять "use strict" в начале скриптов. Позже, когда весь код будет состоять из классов и модулей, директиву можно будет опустить

4. Переменные

объявляем с помощью let (в старых скриптах - var)

Можно объявлять несколько переменных в 1 строке. Но лучше так не делать.

r

let user = 'John', age = 25, message = 'Hello';

Повторное объявление той же переменной является ошибкой

В Scala, Erland значение однажды заданной переменной менять уже нельзя. Это дает преимущества при параллельном вычислении.

Имя переменной не может начинаться с цифры

Имя переменной может содержать только такие символы "$" "_"

r

let $ = 1; // объявили переменную с именем "$"let _ = 2; // а теперь переменную с именем "_"alert($ + _); // 3эти имена являются допустимыми

Если используется несколько слов, то писать верблюжьей нотацией. (myVeryLongName)

Переменные apple и Apple это разные переменные

Нелатинские разрешены, но не рекомендуются

в старых версиях js let и var можно было не указывать. но с 'use strict' это будет приводить к ошибкам

const

const - попытка изменить константу приведет к ошибке. Если уверен, что переменная никогда не будет меняться, создаем константу

const часто используется для труднозапоминаемых значений. пишутся капсом и с _

r

const COLOR_RED = "#F00";const COLOR_GREEN = "#0F0";const COLOR_BLUE = "#00F";const COLOR_ORANGE = "#FF7F00";// ...когда нам нужно выбрать цветlet color = COLOR_ORANGE;alert(color); // #FF7F00COLOR_ORANGE гораздо легче запомнить, чем "#FF7F00".

Есть константы, которые вычисляются во время выполнения сценария, но не изменяются после их первоначального назначения.

r

const pageLoadTime = /* время, потраченное на загрузку веб-страницы */;

Неизменяемые константы писать КАПСОМ

Именование переменных - важный и сложный навык в программировании. Быстрый взгляд на имена переменных может показать, какой код был написан новичком, а какой - опытным разработчиком. В реальном проекте большая часть времени тратится на изменение и расширение существующей кодовой базы, а не написание чего-то нового с нуля.

Пожалуйста, потратьте больше времени на обдумывание правильного имени переменной перед её объявлением.

userName или shoppingCart - хорошие

data и value - плохие. Можно, только если очевидно какие данные хранит переменная

не используй повторно одну и ту же переменную. Дополнительная переменная - это добро, а не зло.

5. Типы данных

есть 8 основных типов данных

number

Тут как целочисленные, так и с плавающей точкой

Кроме обычных чисел, существуют "спец. числовые значения", которые относятся к таким типам данных

Infinity

Математическая бесконечность (Например, это деление на ноль)

Возвращает Infinity

-Infinity

NaN

Вычислительная ошибка. Например, когда строку делам на число

Возвращает NaN

Эти ошибки безопасны - т.е. скрипт не встанет с фатальной ошибкой. В худшем случае получим NaN

number не может содержать число больше (2^53-1) (т. е. 9007199254740991)

Когда число реальное большое (в криптографии, например), используется тип BigInt (число произвольной длинны). Для этого достаточно добавить n в конце числа

r

// символ "n" в конце означает, что это BigIntconst bigInt = 1234567890123456789012345678901234567890n;

String

Есть 3 типа кавычек

"_" и '_' нечем не отличаются

`_` а это функциональные кавычки. Позволяют вставлять какое-то выражение в строку

r

let name = "Иван";// Вставим переменнуюalert( `Привет, ${name}!` ); // Привет, Иван!// Вставим выражениеalert( `результат: ${1 + 2}` ); // результат: 3

В С и Java для одного символа есть тип данных char. В JS один символ это тоже String

boolean

true/false

r

let isGreater = 4 > 1;alert( isGreater ); // true (результатом сравнения будет "да")

"null"

это не тип данных. Он показывает что значение переменной неизвестно "ничего", "пусто"

r

let age = null;

"undefined"

Это тоже не тип данных. Означает "значение не было присвоено".

r

let age;alert(age); // выведет "undefined"

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

object

В отличии от остальных "примитивных", object - особенный. В них хранятся коллекции данных или более сложные структуры

symbol

используется для создания уникальных идентификаторов в объектах.

typeof

возвращает тип аргумента. Обычно используется в проверках. Может работать как в скобках, так и без.
type x;
type(x)

r

typeof undefined // "undefined"typeof 0 // "number"typeof 10n // "bigint"typeof true // "boolean"typeof "foo" // "string"typeof Symbol("id") // "symbol"typeof Math // "object" (1)typeof null // "object" (2)typeof alert // "function" (3)

Переменная в JS может содержать любые данные. Меняя значение переменной, тип данных можно не указывать.

r

// Не будет ошибкойlet message = "hello";message = 123456;

Это называется "динамическая типизация" - переменная не привязана ни к одному типу данных

6. Взаимодействие: alert, prompt, confirm

alert

prompt

принимает 2 аргумента:
result = prompt(title, [default]);

r

let age = prompt('Сколько тебе лет?', 100);alert(`Тебе ${age} лет!`); // Тебе 100 лет!

окно с вводом текста и кнопками Ok, Отмена

[] - означает, что параметр необязательный

Введенный пользователем текст будет присвоен переменной result

confirm

окно с вопросом и ответами ОК и Отмена

r

let isBoss = confirm("Ты здесь главный?");alert( isBoss ); // true, если нажата OK

result = confirm(question);

на все 3 метода есть ограничения

1. Расположение окна определяется браузером

2. Мы не можем изменить внешний вид

7. преобразование типов

Когда нужно явное преобразование

r

let value = true;alert(typeof value); // booleanvalue = String(value); // теперь value это строка "true"alert(typeof value); // string___________________let str = "123";alert(typeof str); // stringlet num = Number(str); // становится числом 123alert(typeof num); // number

Если строка не может быть явно приведена к другому типу, то получаем NaN

Преобразование строки в булиан "0" это true. Пробел это тоже true. Если в строчке ничего, то false

8. Базовые операторы. Математика

r

let x = 1;x = -x;alert( x ); // -1, применили унарный минус

меняем знак на противоположный

% остаток от деления

** возведение в степень

При + если 1 оператор строка, то второй тоже будет преобразован в строку. И это только с +

Если - или /, то стринг всегда будет преобразован в число

r

alert( 6 - '2' ); // 4, '2' приводится к числуalert( '6' / '2' ); // 3, оба операнда приводятся к числам

Чтобы преобразовать строку в число, достаточно поставить перед ним +

r

let apples = "2";let oranges = "3";// оба операнда предварительно преобразованы в числаalert( +apples + +oranges ); // 5// более длинный вариант// alert( Number(apples) + Number(oranges) ); // 5

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

10. Условные ветвления: if, '?'

if

?

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

12. Операторы объединения

13. Циклы while, for

while

for

14. Конструкция switch

15. Функции

16. Function Expression

17. Функции-стрелки, основы

18. Особенности JavaScript

3. Качество кода

4. Объекты (основы)

5. Типы данных

6. Продвинутая работа с функциями

7. Свойства объекта и их конфигурация

8. Прототипы, наследование

9. Классы

10. Обработка ошибок

11. Промисы, async/await

12. Генераторы, продвинутая итерация

13. Модули

14. Разное