Подробное руководство по JavaScript
Учебник по JavaScript, с понятными и подробными материалами, содержащими множество примеров и решения различных реальных практических задач.
JavaScript – единственный язык программирования, встроенный в браузер. Он позволяет придать веб-страницам динамичность и интерактивность.
Обязательным условием для изучения JavaScript является знание двух других веб-технологий: HTML и CSS. В отличие от JavaScript, HTML и CSS – это языки для описания структуры и стилей веб-страниц.
Часть 1: Основы JavaScript
- Знакомство с JavaScript
- Знакомство с JavaScript. Подключение к странице
- Выражения, переменные и типы данных
- Операторы
- Логические и побитовые операторы
- Работа с числами
- Инструкции и их отличие от выражений
- Условные инструкции
- Циклы
- Функции и классический способ их создания
- Функциональные выражения и стрелочные функции
- Область видимости и контекст
- Локальные и глобальные переменные
- Замыкание
- Основы создания объектов и работы с ними
- Создание объектов с помощью конструктора
- Прототипы и наследование
- Всё о ES6 классах
- Практика по ES6 классам
- Анимация на JavaScript с помощью Canvas и ES6 классов
- Массивы
- Сортировка массива с помощью функции
- Ассоциативные массивы
- Работа с массивами
Часть 2: Асинхронный JavaScript
- Асинхронность в JavaScript. setTimeout и setInterval
- Изучение промисов с примерами
- Написание асинхронного кода с помощью async/await
Часть 3: JavaScript в браузере
- Объектная модель браузера (BOM)
- Объектная модель браузера
- Объект window: открытие и закрытие окон
- Размеры окна и позиция прокрутки
- Перемещение окна и прокрутка страницы
- alert , prompt и confirm — диалоговые окна в JavaScript
- Объект window: фреймы
- Методы btoa и atob
- Объект Location — URL документа
- Объект Navigator – информация о браузере
- Объект History — история просмотра страниц
- Объект Screen – информация об экране
- Объект Document — содержимое окна браузера
- Что такое DOM и зачем он нужен?
- Узлы и элементы DOM-дерева
- Структура и обход документа
- Методы для выбора HTML-элементов на странице
- Получение и установка контента элементам
- Работа с атрибутами и свойствами элементов
- Управление классами и стилями элементов
- Создание, вставка и удаление элементов
- Размеры и скроллинг элементов
- Введение в события. Обработчик событий
- Всплытие и погружение событий
- Свойства и методы объекта события
- Отмена стандартных действий браузера
- Создание кастомных событий
- Браузерные события и примеры их использования
- Обработка событий CSS-переходов
- Cookies
- LocalStorage и SessionStorage
Часть 4: Общение с сервером, AJAX
- Формат передачи данных JSON и методы для работы с ним
- Сбор данных с HTML-формы с помощью FormData
- Что такое AJAX? Создание асинхронных запросов
- Fetch API
- Назначение и применение AJAX при создании сайтов
Часть 5: Создание интерактивных компонентов интерфейса
- Todo List
- Вертикальный аккордеон
- Всплывающие сообщения
- Кнопка «Показать ещё»
- Модальное окно
- Пользовательский (кастомный) Select
- Слайдер с несколькими активными элементами
- Слайдер с одним активным элементом
- Табы (вкладки)
- Таймер обратного отсчёта
- в которых используется серверный php-код
- Звездный рейтинг для оценки материалов на сайте
- Простой чат-бот
- Социальные кнопки
- Форма обратной связи
Часть 6: Примеры скриптов для решения различных задач на сайте
- Кнопка для прокрутки страницы вверх
- Ленивая подсветка синтаксиса кода с помощью highlight.js
- Оглавление для статей на сайте
- Подключение рекламы AdSense и РСЯ к сайту
- Прелоадер для сайта
- Использование FileReader для чтения файлов
Часть 7: Редакторы кода и IDE
Часть 8: Использование сторонних библиотек в веб-разработке
- JS плагины для создания маски input
- Копирование данных в буфер с помощью Clipboard.js
Часть 9: Библиотека jQuery
- Что такое jQuery? Загрузка и подключение к сайту
- С чего начинается написание кода на jQuery?
- Выбор, фильтрация и перемещение по элементам
- Выбор элементов
- Фильтры для выбора элементов
- Работа с выборкой
- Навигация по элементам
- Фильтрация элементов набора
- Цепочка методов
- Атрибуты элементов
- Добавление и удаление классов
- Работа с HTML, текстом и атрибутом value
- Добавление и удаление DOM-свойств (disabled, checked, selected и т.д.)
- Получение и установка CSS-свойств элементам
- Ширина и высота элементов (в планах)
- Позиционирование элементов
- data-атрибуты и внутреннее хранилище jQuery
- Создание, добавление и удаление элементов
- Управление видимостью (базовые эффекты)
- Создание анимации (в планах)
- Сокращённые AJAX методы
- События AJAX (в планах)
- Получение данных формы
- Перебор массива, объекта и элементов
Популярное
- 1. Слайдер для сайта на чистом CSS и JavaScript 369K
- 2. Модальное окно Bootstrap для сайта 369K
- 3. Bootstrap 3 — Navbar (горизонтальное меню) 368K
- 4. Маска ввода для HTML элемента input 355K
- 5. CSS медиа-запросы (media queries) 337K
- 6. Форма обратной связи для сайта с отправкой на почту 327K
- 7. Bootstrap — Carousel (карусель) 298K
Введение в JavaScript
Давайте посмотрим, что такого особенного в JavaScript, чего можно достичь с его помощью и какие другие технологии хорошо с ним работают.
Что такое JavaScript?
Изначально JavaScript был создан, чтобы «сделать веб-страницы живыми».
Программы на этом языке называются скриптами. Они могут встраиваться в HTML и выполняться автоматически при загрузке веб-страницы.
Скрипты распространяются и выполняются, как простой текст. Им не нужна специальная подготовка или компиляция для запуска.
Это отличает JavaScript от другого языка – Java.
Почему JavaScript?
Когда JavaScript создавался, у него было другое имя – «LiveScript». Однако, язык Java был очень популярен в то время, и было решено, что позиционирование JavaScript как «младшего брата» Java будет полезно.
Со временем JavaScript стал полностью независимым языком со своей собственной спецификацией, называющейся ECMAScript, и сейчас не имеет никакого отношения к Java.
Сегодня JavaScript может выполняться не только в браузере, но и на сервере или на любом другом устройстве, которое имеет специальную программу, называющуюся «движком» JavaScript.
У браузера есть собственный движок, который иногда называют «виртуальная машина JavaScript».
Разные движки имеют разные «кодовые имена». Например:
- V8 – в Chrome, Opera и Edge.
- SpiderMonkey – в Firefox.
- …Ещё есть «Chakra» для IE, «JavaScriptCore», «Nitro» и «SquirrelFish» для Safari и т.д.
Эти названия полезно знать, так как они часто используются в статьях для разработчиков. Мы тоже будем их использовать. Например, если «функциональность X поддерживается V8», тогда «Х», скорее всего, работает в Chrome, Opera и Edge.
Как работают движки?
Движки сложны. Но основы понять легко.
- Движок (встроенный, если это браузер) читает («парсит») текст скрипта.
- Затем он преобразует («компилирует») скрипт в машинный язык.
- После этого машинный код запускается и работает достаточно быстро.
Движок применяет оптимизации на каждом этапе. Он даже просматривает скомпилированный скрипт во время его работы, анализируя проходящие через него данные, и применяет оптимизации к машинному коду, полагаясь на полученные знания. В результате скрипты работают очень быстро.
Что может JavaScript в браузере?
Современный JavaScript – это «безопасный» язык программирования. Он не предоставляет низкоуровневый доступ к памяти или процессору, потому что изначально был создан для браузеров, не требующих этого.
Возможности JavaScript сильно зависят от окружения, в котором он работает. Например, Node.JS поддерживает функции чтения/записи произвольных файлов, выполнения сетевых запросов и т.д.
В браузере для JavaScript доступно всё, что связано с манипулированием веб-страницами, взаимодействием с пользователем и веб-сервером.
Например, в браузере JavaScript может:
- Добавлять новый HTML-код на страницу, изменять существующее содержимое, модифицировать стили.
- Реагировать на действия пользователя, щелчки мыши, перемещения указателя, нажатия клавиш.
- Отправлять сетевые запросы на удалённые сервера, скачивать и загружать файлы (технологии AJAX и COMET).
- Получать и устанавливать куки, задавать вопросы посетителю, показывать сообщения.
- Запоминать данные на стороне клиента («local storage»).
Чего НЕ может JavaScript в браузере?
Возможности JavaScript в браузере ограничены ради безопасности пользователя. Цель заключается в предотвращении доступа недобросовестной веб-страницы к личной информации или нанесения ущерба данным пользователя.
Примеры таких ограничений включают в себя:
- JavaScript на веб-странице не может читать/записывать произвольные файлы на жёстком диске, копировать их или запускать программы. Он не имеет прямого доступа к системным функциям ОС. Современные браузеры позволяют ему работать с файлами, но с ограниченным доступом, и предоставляют его, только если пользователь выполняет определённые действия, такие как «перетаскивание» файла в окно браузера или его выбор с помощью тега . Существуют способы взаимодействия с камерой/микрофоном и другими устройствами, но они требуют явного разрешения пользователя. Таким образом, страница с поддержкой JavaScript не может незаметно включить веб-камеру, наблюдать за происходящим и отправлять информацию в ФСБ.
- Различные окна/вкладки не знают друг о друге. Иногда одно окно, используя JavaScript, открывает другое окно. Но даже в этом случае JavaScript с одной страницы не имеет доступа к другой, если они пришли с разных сайтов (с другого домена, протокола или порта). Это называется «Политика одинакового источника» (Same Origin Policy). Чтобы обойти это ограничение, обе страницы должны согласиться с этим и содержать JavaScript-код, который специальным образом обменивается данными. Это ограничение необходимо, опять же, для безопасности пользователя. Страница https://anysite.com , которую открыл пользователь, не должна иметь доступ к другой вкладке браузера с URL https://gmail.com и воровать информацию оттуда.
- JavaScript может легко взаимодействовать с сервером, с которого пришла текущая страница. Но его способность получать данные с других сайтов/доменов ограничена. Хотя это возможно в принципе, для чего требуется явное согласие (выраженное в заголовках HTTP) с удалённой стороной. Опять же, это ограничение безопасности.
Подобные ограничения не действуют, если JavaScript используется вне браузера, например — на сервере. Современные браузеры предоставляют плагины/расширения, с помощью которых можно запрашивать дополнительные разрешения.
Что делает JavaScript особенным?
Как минимум, три сильные стороны JavaScript:
- Полная интеграция с HTML/CSS.
- Простые вещи делаются просто.
- Поддерживается всеми основными браузерами и включён по умолчанию.
JavaScript – это единственная браузерная технология, сочетающая в себе все эти три вещи.
Вот что делает JavaScript особенным. Вот почему это самый распространённый инструмент для создания интерфейсов в браузере.
Хотя, конечно, JavaScript позволяет делать приложения не только в браузерах, но и на сервере, на мобильных устройствах и т.п.
Языки «над» JavaScript
Синтаксис JavaScript подходит не под все нужды. Разные люди хотят иметь разные возможности.
Это естественно, потому что проекты разные и требования к ним тоже разные.
Так, в последнее время появилось много новых языков, которые транспилируются (конвертируются) в JavaScript, прежде чем запустятся в браузере.
Современные инструменты делают транспиляцию очень быстрой и прозрачной, фактически позволяя разработчикам писать код на другом языке, автоматически преобразуя его в JavaScript «под капотом».
Примеры таких языков:
- CoffeeScript добавляет «синтаксический сахар» для JavaScript. Он вводит более короткий синтаксис, который позволяет писать чистый и лаконичный код. Обычно такое нравится Ruby-программистам.
- TypeScript концентрируется на добавлении «строгой типизации» для упрощения разработки и поддержки больших и сложных систем. Разработан Microsoft.
- Flow тоже добавляет типизацию, но иначе. Разработан Facebook.
- Dart стоит особняком, потому что имеет собственный движок, работающий вне браузера (например, в мобильных приложениях). Первоначально был предложен Google, как замена JavaScript, но на данный момент необходима его транспиляция для запуска так же, как для вышеперечисленных языков.
- Brython транспилирует Python в JavaScript, что позволяет писать приложения на чистом Python без JavaScript.
Есть и другие. Но даже если мы используем один из этих языков, мы должны знать JavaScript, чтобы действительно понимать, что мы делаем.
Итого
- JavaScript изначально создавался только для браузера, но сейчас используется на многих других платформах.
- Сегодня JavaScript занимает уникальную позицию в качестве самого распространённого языка для браузера, обладающего полной интеграцией с HTML/CSS.
- Многие языки могут быть «транспилированы» в JavaScript для предоставления дополнительных функций. Рекомендуется хотя бы кратко рассмотреть их после освоения JavaScript.
Как работает JavaScript [Объясняю визуально]
JavaScript — один из самых любимых и в то же время ненавистных языков в мире. Его любят, потому что он мощный. Вы можете создать полнофункциональное приложение, просто изучив JavaScript и ничего более. А также его ненавидят, потому что иногда он ведет себя совершенно неожиданным образом. И это может расстроить или даже заставить вас возненавидеть его.
В этой статье я подробно объясню, как JavaScript выполняет код в браузере, и мы изучим это с помощью гифок. Прочитав эту статью, вы станете на шаг ближе к статусу рок-звезды разработки.
Контекст выполнения
«Все в JavaScript происходит внутри контекста выполнения (Execution Context)»
Было бы круто, чтобы вы запомнили эту фразу, потому что она очень важна. Скажем, что этот контекст выполнения является большим контейнером, вызываемым, когда браузер хочет запустить какой-то код JavaScript.
В этом контейнере есть два компонента: 1. Компонент памяти. 2. Компонент кода.
Компонент памяти также известен как переменная среды. В этом компоненте памяти переменные и функции хранятся в виде пар ключ-значение.
Компонент кода — это место в контейнере, где код выполняется по одной строке за раз. У этого компонента кода тоже есть необычное название, а именно «Поток выполнения» (Thread of Execution).
JavaScript — это синхронный однопоточный язык. Все потому, что он может выполнять только одну команду за раз и в определенном порядке.
Выполнение кода
Возьмем простой пример:
var a = 2; var b = 4; var sum = a + b; console.log(sum);В этом простом примере мы инициализируем две переменные, a и b, и сохраняем 2 и 4 соответственно. Затем мы складываем значение a и b и сохраняем его в переменной суммы.
Посмотрим, как JavaScript выполнит код в браузере.
Браузер создает глобальный контекст выполнения с двумя компонентами, а именно с памятью и компонентами кода.
Браузер выполнит код JavaScript в два этапа.
- Фаза выделения памяти
- Этап выполнения кода
На этапе выделения памяти JavaScript сканирует весь код и выделяет память для всех переменных и функций в коде. Для переменных JavaScript будет хранить undefined на этапе выделения памяти, а для функций он сохранит весь код функции, который мы рассмотрим в следующем примере.
Теперь, на 2-м этапе, то есть при выполнении кода, он начинает проходить весь код построчно. Когда он встречает var a = 2, он присваивает значение 2 переменной ‘a’. До сих пор значение «а» не было определено.
То же самое и с переменной b. Он присваивает 4 переменной «b». Затем он вычисляет и сохраняет значение суммы в памяти, равное 6. Теперь, на последнем шаге, он выводит значение суммы в консоль, а затем уничтожает глобальный контекст выполнения по мере завершения нашего кода.
Как вызываются функции в контексте выполнения?
Функции в JavaScript, если сравнивать их с другими языками программирования, работают по-другому.
Возьмем простой пример:
var n = 2; function square(num) < var ans = num * num; return ans; >var square2 = square(n); var square4 = square(4);В приведенном выше примере есть функция, которая принимает в качестве аргумента число и возвращает его квадрат.
JavaScript создаст глобальный контекст выполнения и выделит память для всех переменных и функций на первом этапе, когда мы запустим код, как показано ниже.
Что касается функций, он сохранит всю функцию в памяти.
А вот и самое интересное: когда JavaScript запускает функции, он создает контекст выполнения внутри глобального контекста выполнения.
Когда он встречает var a = 2, он присваивает значение 2 переменной ‘n’. Строка номер 2 — это функция, и поскольку функции была выделена память ранее, все сразу перейдет к строке номер 6.
Переменная square2 вызовет функцию square, а javascript создаст новый контекст выполнения.
Этот новый контекст выполнения для функции square выделит память всем переменным, присутствующим в функции на этапе выделения памяти.
После выделения памяти всем переменным внутри функции код будет выполняться построчно. Будет получено значение num, равное 2 для первой переменной, а затем вычислено ans. После вычисления ans возвратится значение, которое будет присвоено square2.
Как только функция вернет значение, она уничтожит свой контекст выполнения по завершении работы.
Теперь он будет следовать аналогичной процедуре для строки номер 7 или переменной square4, как показано ниже.
Как только весь код будет выполнен, глобальный контекст выполнения также будет уничтожен, и именно так JavaScript будет выполнять код.
Стек вызовов
Когда функция вызывается в JavaScript, JS создает контекст выполнения. Контекст выполнения будет усложняться, поскольку мы добавляем функции внутрь функции.
JavaScript управляет созданием и удалением контекста выполнения кода с помощью стека вызовов. Стек — это упорядоченный набор элементов, в котором добавление новых элементов и удаление существующих элементов всегда происходит «с одной стороны». Первый элемент, добавленный в стек, будет удален оттуда последним. Этот принцип называется FILO.
Стек вызовов — это механизм, позволяющий отслеживать свое место в скрипте, вызывающем несколько функций.
function a() < function insideA() < return true; >insideA(); > a();Мы создаем функцию «a», которая вызывает другую функцию «insideA», которая возвращает значение true. Я знаю, что код бессмысленный и ничего не делает, но он поможет нам понять, как JavaScript обрабатывает коллбеки (функции обратного вызова).
JavaScript создаст глобальный контекст выполнения. Глобальный контекст выполнения выделит память для функции ‘a’ и вызовет ‘function a’ на этапе выполнения кода. Контекст выполнения создается для функции a, которая размещается над глобальным контекстом выполнения в стеке вызовов.
Функция a назначит память и вызовет функцию insideA. Контекст выполнения создается для функции insideA и помещается над стеком вызовов ‘function a’. Теперь эта функция insideA вернет true и будет удалена из стека вызовов. Поскольку внутри ‘function a’ нет кода, контекст выполнения будет удален из стека вызовов.
Наконец, глобальный контекст выполнения также удаляется из стека вызовов.
- js
- как работает javascript
При подготовке материала использовались источники:
https://itchief.ru/javascript/
https://learn.javascript.ru/intro
https://habr.com/ru/articles/579628/