Javascript уроки для начинающих с нуля: Основы JavaScript

Современный учебник JavaScript

Язык JavaScript

Здесь вы можете изучить JavaScript, начиная с нуля и заканчивая продвинутыми концепциями вроде ООП.

Мы сосредоточимся на самом языке, изредка добавляя заметки о средах его исполнения.

Введение

• Введение в JavaScript

• Справочники и спецификации

• Редакторы кода

• Консоль разработчика

Основы JavaScript

• Привет, мир!

• Структура кода

• Строгий режим — «use strict»

• Переменные

• Типы данных

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

• Преобразование типов

• Базовые операторы, математика

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

• Условное ветвление: if, ‘?’

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

• Оператор нулевого слияния (??)

• Циклы while и for

• Конструкция «switch»

• Функции

• Function Expression

• Стрелочные функции, основы

• Особенности JavaScript

• Далее…

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

• Отладка в браузере

• Советы по стилю кода

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

• Ниндзя-код

• Автоматическое тестирование c использованием фреймворка Mocha

• Полифилы

Объекты: основы

• Объекты

• Копирование объектов и ссылки

• Сборка мусора

• Методы объекта, «this»

• Конструктор, оператор «new»

• Опциональная цепочка ‘?. ‘

• Тип данных Symbol

• Преобразование объектов в примитивы

Типы данных

• Методы примитивов

• Числа

• Строки

• Массивы

• Методы массивов

• Перебираемые объекты

• Map и Set

• WeakMap и WeakSet

• Object.keys, values, entries

• Деструктурирующее присваивание

• Дата и время

• Формат JSON, метод toJSON

• Далее…

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

• Рекурсия и стек

• Остаточные параметры и оператор расширения

• Замыкание

• Устаревшее ключевое слово «var»

• Глобальный объект

• Объект функции, NFE

• Синтаксис «new Function»

• Планирование: setTimeout и setInterval

• Декораторы и переадресация вызова, call/apply

• Привязка контекста к функции

• Повторяем стрелочные функции

• Далее…

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

• Флаги и дескрипторы свойств

• Свойства — геттеры и сеттеры

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

• Прототипное наследование

• F. prototype

• Встроенные прототипы

• Методы прототипов, объекты без свойства __proto__

Классы

• Класс: базовый синтаксис

• Наследование классов

• Статические свойства и методы

• Приватные и защищённые методы и свойства

• Расширение встроенных классов

• Проверка класса: «instanceof»

• Примеси

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

• Обработка ошибок, «try..catch»

• Пользовательские ошибки, расширение Error

Промисы, async/await

• Введение: колбэки

• Промисы

• Цепочка промисов

• Промисы: обработка ошибок

• Promise API

• Промисификация

• Микрозадачи

• Async/await

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

• Генераторы

• Асинхронные итераторы и генераторы

Модули

• Модули, введение

• Экспорт и импорт

• Динамические импорты

Разное

• Proxy и Reflect

• Eval: выполнение строки кода

• Каррирование

• Ссылочный тип

• Побитовые операторы

• BigInt

• Intl: интернационализация в JavaScript

Онлайн-курсы

Онлайн-курсы — это не быстро устаревающие видео-записи, а живые вебинары. Ведёт их преподаватель — опытный действующий разработчик. С теорией, практикой, ответами на вопросы, проектом и обратной связью по вашему коду («code review»).

Основы веб-разработки

курс для новичков

JavaScript / DOM / Интерфейсы

курс для программистов

JavaScript / DOM / Интерфейсы

курс

Современная верстка

New

Фреймворки, смежные технологии

курс

Angular

курс

Node.js

курс

React

интенсив

TypeScript

курс

Vue.js

интенсив

RxJs

Браузер: документ, события, интерфейсы

Изучаем работу со страницей – как получать элементы, манипулировать их размерами, динамически создавать интерфейсы и взаимодействовать с посетителем.

Документ

• Браузерное окружение, спецификации

• DOM-дерево

• Навигация по DOM-элементам

• Поиск: getElement*, querySelector*

• Свойства узлов: тип, тег и содержимое

• Атрибуты и свойства

• Изменение документа

• Стили и классы

• Размеры и прокрутка элементов

• Размеры и прокрутка окна

• Координаты

• Далее…

Введение в события

• Введение в браузерные события

• Всплытие и погружение

• Делегирование событий

• Действия браузера по умолчанию

• Генерация пользовательских событий

Интерфейсные события

• Основы событий мыши

• Движение мыши: mouseover/out, mouseenter/leave

• Drag’n’Drop с событиями мыши

• Клавиатура: keydown и keyup

• События указателя

• Прокрутка

Формы, элементы управления

• Свойства и методы формы

• Фокусировка: focus/blur

• События: change, input, cut, copy, paste

• Отправка формы: событие и метод submit

Загрузка документа и ресурсов

• Страница: DOMContentLoaded, load, beforeunload, unload

• Скрипты: async, defer

• Загрузка ресурсов: onload и onerror

Разное

• MutationObserver: наблюдатель за изменениями

• Selection и Range

• Событийный цикл: микрозадачи и макрозадачи

Тематические разделы

Важные темы, читать которые можно в любом порядке.

Фреймы и окна

• Открытие окон и методы window

• Общение между окнами

• Атака типа clickjacking

Бинарные данные и файлы

• ArrayBuffer, бинарные массивы

• TextDecoder и TextEncoder

• Blob

• File и FileReader

Сетевые запросы

• Fetch

• FormData

• Fetch: ход загрузки

• Fetch: прерывание запроса

• Fetch: запросы на другие сайты

• Fetch API

• Объекты URL

• XMLHttpRequest

• Возобновляемая загрузка файлов

• Длинные опросы

• WebSocket

• Server Sent Events

• Далее…

Хранение данных в браузере

• Куки, document.cookie

• LocalStorage, sessionStorage

• IndexedDB

Анимация

• Кривые Безье

• CSS-анимации

• JavaScript-анимации

Веб-компоненты

• С орбитальной высоты

• Пользовательские элементы (Custom Elements)

• Shadow DOM

• Элемент «template»

• Слоты теневого DOM, композиция

• Настройка стилей теневого DOM

• Теневой DOM и события

Регулярные выражения

• Введение: шаблоны и флаги

• Символьные классы

• Юникод: флаг «u» и класс \p{. $, флаг «m»

• Граница слова: \b

• Экранирование, специальные символы

• Наборы и диапазоны […]

• Квантификаторы +, *, ? и {n}

• Жадные и ленивые квантификаторы

• Скобочные группы

• Обратные ссылки в шаблоне: \N и \k<имя>

• Альтернация (или) |

• Опережающие и ретроспективные проверки

• Катастрофический возврат

• Поиск на заданной позиции, флаг «y»

• Методы RegExp и String

• Далее…

CSS для JavaScript-разработчика

• О чём пойдёт речь

• Единицы измерения: px, em, rem и другие

• Все значения свойства display

• Свойство float

• Свойство position

• Центрирование горизонтальное и вертикальное

• Свойства font-size и line-height

• Свойство white-space

• Свойство outline

• Свойство box-sizing

• Свойство margin

• Лишнее место под IMG

• Свойство overflow

• Особенности свойства height в %

• Знаете ли вы селекторы?

• CSS-спрайты

• Правила форматирования CSS

• Далее…

Следите за обновлениями javascript.

ru

Мы не рассылаем рекламу, все только по делу. Вы сами выбираете, что получать:

Подписываясь на рассылку, вы соглашаетесь с пользовательским соглашением.

Бесплатный курс программирования на JavaScript (JS) для начинающих с нуля

Список уроков

Урок 1 JavaScript для начинающих 1 – Введение в язык JavaScript. Урок 1Урок 2Урок 3Урок 4Урок 5Урок 6Урок 7Урок 8Урок 9Урок 10Урок 11Урок 12Урок 13Урок 14Урок 15

Схожие видео

JavaScript

Учебник по JavaScript

❮ Главная Далее ❯

Примеры в каждой главе

С помощью нашего редактора «Попробуйте сами» вы можете редактировать исходный код и просматривать результат.

Пример

Мой первый JavaScript

Попробуй сам »

---

Использование меню

Мы рекомендуем читать это руководство в последовательности, указанной в меню.

Если у вас большой экран, меню всегда будет слева.

Если у вас маленький экран, откройте меню, щелкнув значок меню вверху ☰.

---

Учитесь на примерах

Примеры лучше, чем 1000 слов. Примеры часто легче понять чем текстовые пояснения.

Этот учебник дополняет все пояснения поясняющими примерами «Попробуйте сами».

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

Примеры JavaScript »

---

Зачем изучать JavaScript?

JavaScript является одним из 3 языков всех веб-разработчиков должен Learn:

   1. HTML для определения содержания веб-страниц

   2. CSS для определения макета веб-страниц

   3. JavaScript для программирования поведения веб-страниц

4

4 Speed ​​

В этом уроке вы выбираете скорость обучения.

Все зависит от вас.

Если вам трудно, сделайте перерыв или перечитайте материал.

Всегда убедитесь, что вы понимаете все «Попробуй сам» Примеры.

Единственный способ стать умным программистом — это: Упражняться. Упражняться. Упражняться. Код. Код. Код !

---

Проверьте себя с помощью упражнений

Упражнение:

Создайте переменную с именем carName и присвойте ей значение Volvo .

вар = "";
 

Начать упражнение

---

Часто задаваемые вопросы

• Как получить JavaScript?
• Где я могу скачать JavaScript?
• Является ли JavaScript бесплатным?

Вам не нужно получать или загружать JavaScript.

JavaScript уже запущен в вашем браузере на вашем компьютере, на планшете и на смартфоне.

Использование JavaScript бесплатно для всех.

---

Мое обучение

Отслеживайте свои успехи с помощью бесплатной программы «Мое обучение» здесь, в W3Schools.

Войдите в свою учетную запись и начните зарабатывать баллы!

Это дополнительная функция. Вы можете учиться в W3Schools без использования My Learning.

---

Ссылки на JavaScript

W3Schools поддерживает полную справку по JavaScript, включая все объекты HTML и браузера.

Справочник содержит примеры для всех свойств, методов и событий, а также постоянно обновляется в соответствии с последними веб-стандартами.

Полный справочник по JavaScript »

---

Тест на викторину по JavaScript

Проверьте свои навыки работы с JavaScript в W3Schools!

Начать викторину JavaScript!

Начните свою карьеру

Получите сертификат, пройдя курс

Получите сертификат

w3schoolsCERTIFIED. 2022

❮ Главная Далее ❯

Учебник по современному JavaScript

Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире.

Помогите перевести содержание этого руководства на ваш язык!

КупитьEPUB/PDF

Как это делается сейчас. От основ до продвинутых тем с простыми, но подробными объяснениями.

Последнее обновление 23 октября 2022 г.

КупитьEPUB/PDF

Поделиться:

19166 ★github Discord Chat

Оглавление

Обложка, которая работает как язык программирования и содержит части JavaScript

. браузер. Также есть дополнительные серии тематических статей.

Язык JavaScript

Здесь мы изучаем JavaScript, начиная с нуля и переходя к продвинутым концепциям, таким как ООП.

Здесь мы концентрируемся на самом языке с минимумом примечаний, относящихся к среде.

Введение

• Введение в JavaScript

• Руководства и спецификации

• Редакторы кода

• Консоль разработчика

9009 2

Developer

9009 2

9002!

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

Современный режим, «use strict»

Переменные

Типы данных

Взаимодействие: оповещение, подсказка, подтверждение

Преобразование типов

Основные операторы, математические операции

Сравнение

3

2

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

Нулевой объединяющий оператор ‘??’

Циклы: while и for

Оператор «switch»

Функции

Экспрессии функции

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

JavaScript Specials

Подробнее.

Ninja code

Автоматизированное тестирование с Mocha

Полифилы и транспайлеры

Объекты: основы

• Объекты

• Ссылки на объекты и копирование

• Сбор мусора

• Методы объекта, «

• Constructor, Operator»

• ?

• Тип символа

• Преобразование объекта в примитив

Типы данных

• Методы примитивов

• 900

• Строки

• Массивы

• Методы массива

• ИЕТЕРЫ

• MAP и SET

• . Присвоение деструктуризации

• Дата и время

• Методы JSON, toJSON

• Подробнее…

Расширенная работа с функциями

• Recursion and stack

• Rest parameters and spread syntax

• Variable scope, closure

• The old «var»

• Global object

• Function object, NFE

• Синтаксис «новой функции»

• Планирование: setTimeout и setInterval

• Декораторы и переадресация, вызов/приложение

• Привязка функций

• Arrow functions revisited

• More…

Object properties configuration

• Property flags and descriptors

• Property getters and setters

Prototypes, inheritance

• Prototypal inheritance

• F. prototype

• Нативные прототипы

• Методы прототипа, объекты без __proto__

Классы

• Класс Базовый синтаксис

• Класс наследство

• Статические свойства и методы

• . проверка: «instanceof»

• Mixins

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

• Обработка ошибок, «try…catch»

• Пользовательские ошибки, ошибка расширения

Обещания, Async/waw

• Введение: обратные вызовы

• Обещание

• ОБЪЕКТЫ 9003

• ОБЩЕСТВЕНИЯ 9003

• ОБЩЕСТВЕНИЯ 9003

• ОБЩЕСТВЕНИЯ 9003 9003

• .

• Promisification

• Микрозадачи

• Async/await

Генераторы, расширенная итерация

• Generators

• Async iteration and generators

Modules

• Modules, introduction

• Export and Import

• Dynamic imports

Miscellaneous

• Proxy and Reflect

• Eval: запуск строки кода

• Каррирование

• Тип ссылки

• BigInt

• Unicode, String внутренности

Браузер: документ, события, интерфейсы

Изучение того, как управлять страницей браузера: добавлять элементы, управлять их размером и положением, динамически создавать интерфейсы и взаимодействовать с посетителем.

Документ

• Среда браузера, спецификации

• Дерево DOM

• Обход DOM

• Поиск:0003

• .

• Координаты

• Подробнее…

Знакомство с событиями

• Знакомство с событиями браузера

• Bubbling and Capturing

• Деятельность мероприятия

• Бруузер. /leave

• Drag’n’Drop с событиями мыши

• События указателя

• Клавиатура: нажатие и нажатие

• Прокрутка

Формы, Управление

• Свойства и методы формы

• Фокусировка: фокус/размытие

• События: изменение, вход, вырез, копия, вставка

• . и метод submit

Загрузка документов и ресурсов

• Страница: DOMContentLoaded, load, beforeunload, unload

• Скрипты: асинхронный, отложенный

• Загрузка ресурсов: Onload and Onerror

Разное

• Наблюдатель мутации

• Выбор и диапазон

• СОВЕРИ Пройдены первые две части туториала. Здесь нет четкой иерархии, вы можете читать статьи в том порядке, в котором хотите.

  Рамы и окна

  • Popups and window methods

  • Cross-window communication

  • The clickjacking attack

  Binary data, files

  • ArrayBuffer, binary arrays

  • TextDecoder and TextEncoder

  • Blob

  • File and FileReader

  Сетевые запросы

  • Fetch

  • FormData

  • Fetch: Download progress

  • Fetch: Abort

  • Fetch: Cross-Origin Requests

  • Fetch API

  • URL objects

  • XMLHttpRequest

  • Resumable file upload

  • Длительный опрос

  • WebSocket

  • События, отправленные сервером

  • Подробнее…

  Хранение данных в браузере

  • Cookies, document.