JS | Mapa mental Mindomo

Символьные строки

por Андрей Дергачев

5G технологии

por Егор Панченко

Векторная Алгебра

por Денис Заводнов

Общие сведения о языке программирования Паскаль

por Ирина Шустова

JavaScript

14. Разное

13. Модули

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

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

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

9. Классы

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

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

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

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

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

2. Основы JS

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

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

16. Function Expression

15. Функции

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

13. Циклы while, for

for

while

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

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

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

?

if

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

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

let x = 1;

x = -x;

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

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

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

let apples = "2";

let oranges = "3";

// оба операнда предварительно преобразованы в числа

alert( +apples + +oranges ); // 5

// более длинный вариант

// alert( Number(apples) + Number(oranges) ); // 5

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

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

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

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

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

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

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

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

let value = true;

alert(typeof value); // boolean

value = String(value); // теперь value это строка "true"

alert(typeof value); // string

___________________

let str = "123";

alert(typeof str); // string

let num = Number(str); // становится числом 123

alert(typeof num); // number

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

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

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

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

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

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

confirm

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

let isBoss = confirm("Ты здесь главный?");

alert( isBoss ); // true, если нажата OK

result = confirm(question);

prompt

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

let age = prompt('Сколько тебе лет?', 100);

alert(`Тебе ${age} лет!`); // Тебе 100 лет!

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

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

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

alert

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

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

// Не будет ошибкой

let message = "hello";

message = 123456;

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

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

typeof

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

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)

symbol

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

object

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

"undefined"

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

let age;

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

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

"null"

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

let age = null;

boolean

true/false

let isGreater = 4 > 1;

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

String

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

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

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

let name = "Иван";

// Вставим переменную

alert( `Привет, ${name}!` ); // Привет, Иван!

// Вставим выражение

alert( `результат: ${1 + 2}` ); // результат: 3

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

number

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

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

// символ "n" в конце означает, что это BigInt

const bigInt = 1234567890123456789012345678901234567890n;

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

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

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

NaN

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

Возвращает NaN

-Infinity

Infinity

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

Возвращает Infinity

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

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

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

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

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

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

const

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

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

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

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

const COLOR_RED = "#F00";

const COLOR_GREEN = "#0F0";

const COLOR_BLUE = "#00F";

const COLOR_ORANGE = "#FF7F00";

// ...когда нам нужно выбрать цвет

let color = COLOR_ORANGE;

alert(color); // #FF7F00

COLOR_ORANGE гораздо легче запомнить, чем "#FF7F00".

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

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

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

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

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

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

let $ = 1; // объявили переменную с именем "$"

let _ = 2; // а теперь переменную с именем "_"

alert($ + _); // 3

эти имена являются допустимыми

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

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

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

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

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

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

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

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

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

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

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

"use strict";

// этот код работает в современном режиме

...

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

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

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

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

(function() {

'use strict';

// ...ваш код...

})()

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

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

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

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

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

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

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

Инструкции

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

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

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

alert('Привет')

alert('Мир')

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

alert(3 +

+ 2);

в ответе будет 6

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

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

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

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

<!DOCTYPE HTML>
<html>

<body>

  <p>Перед скриптом...</p>

  <script>
    alert( 'Привет, мир!' );
  </script>

  <p>...После скрипта.</p>

</body>

</html>

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

Если для тега

alert(1); // содержимое игнорируется, так как есть атрибут src

</script>

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

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

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

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

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

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

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

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

1. Введение

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

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

Brython

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

Dart

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

Flow

от Facebook

TypeScript

от Microsoft

CoffeeScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

local storage

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

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

COMET

AJAX

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

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

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

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

NodeJS

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

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

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

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

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

У firefox - SpiderMonkey

У хрома - V8

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

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

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

JS