Где программировать на javascript

Программирование на JavaScript — основы языка

Изучим основные принципы программирования на JavaScript. Познакомимся с переменными, условиями и циклами. Закрепим знания, написав несколько программ: фитнес-калькулятор, драйвер принтера, симулятор дартс-машины.

Тренажёр обновлён 3 ноября 2023

Теория

Включить режим

Обязательный для прохождения материал, теория, задания и испытания.

3 части , 52 задания , 4 испытания

13 заданий 1 испытание

Часть 1: Основы программирования на JavaScript

Начнём изучать основные принципы программирования на JavaScript. Разберёмся с типами данных, переменными и операциями.

Привет, стажёр!

Вижу ты справляешься, я не сомневался. Хочешь задачки посложней? Тут одними операциями не справиться, придётся использовать особые конструкции: условия и циклы. Ты готов?

15 заданий 1 испытание

Часть 2: Условия

Научимся использовать условия на полную. Разберёмся с логическими операциями и сравнениями. Попробуем комбинировать операторы.

24 задания 2 испытания

Часть 3: Циклы

Создадим драйвер для печати страниц со множеством режимов. В этом нам помогут циклы, с которыми мы познакомимся в этой части.

• Наша группа в VK
• Наш канал на YouTube
• Наша страница в Twitter
• Наш канал в Telegram

Практикум

Профессии

• Фронтенд-разработчик
• JavaScript-разработчик (React)
• JavaScript-разработчик (Vue.js)
• Фулстек-разработчик

• HTML и CSS.
  Профессиональная вёрстка сайтов
• HTML и CSS.
  Адаптивная вёрстка и автоматизация
• JavaScript.
  Профессиональная разработка веб-интерфейсов
• JavaScript.
  Архитектура клиентских приложений
• React.
  Разработка сложных клиентских приложений
• Node.js.
  Профессиональная разработка REST API
• Node.js и Nest.js.
  Микросервисная архитектура
• TypeScript. Теория типов
• Алгоритмы и структуры данных
• Паттерны проектирования
• Webpack
• Vue.js 3. Разработка клиентских приложений
• Git и GitHub
• Анимация для фронтендеров

• Справочник по HTML
• Учебник по Git
• Учебник по PHP

Информация

• Об Академии
• О центре карьеры

Услуги

• Работа наставником
• Для вузов и колледжей
• Для учителей

Остальное

© ООО «Интерактивные обучающие технологии», 2013−2023

Вход

Регистрация

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Восстановление доступа

Забыли пароль или потеряли доступ к профилю? Введите привязанную к профилю эл. почту, мы отправим вам письмо со ссылкой для восстановления.

Забыли привязать эл. почту к профилю? Напишите нам, мы поможем.

Где программировать на javascript

Научитесь программировать интерактивные компоненты при поддержке опытных разработчиков

Объём практики: 80 часов
Начальные требования: первокурсник
Итоговый уровень: стажёр

Подходит ли вам курс

Ваш уровень после курса

На этом курсе:

• рассмотрим алгоритмы и структуры данных,
• обсудим вопросы качества кода, научимся отладке,
• выясним некоторые особенности JavaScript как языка программирования,
• детально разберём алгоритм сортировки,
• перейдем к задачам программирования интерфейсов,
• особое внимание уделим обработке событий,
• научимся создавать, удалять и перемещать элементы в ответ на действия пользователя.

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

Научитесь программировать интерактивные компоненты

Как проходит обучение

С самого начала мы учим вас работать с живым кодом, решать реальные задачи и перенимать опыт сильных разработчиков

Самостоятельно занимаетесь на платформе HTML Academy

В комфортном для себя ритме обучаетесь на наших тренажёрах. Вся теория объясняется простым языком и тут же закрепляется на практике. Вы пишете код 80% своего времени.

Выполняете учебные проекты

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

Общаетесь в учебном чате

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

Разрабатываете личный проект

В заключительной части курса вы приступаете к личному проекту. Личный проект вы делаете с нуля самостоятельно. Если по учебным проектам вас вела автоматическая система, то с личным проектом вам помогают опытные разработчики — наши наставники.

Участвуете в регулярных живых консультациях с разработчиками-наставниками

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

Привет. У меня кнопка не реагирует на щелчок, всё перепробовала. Взглянешь?
Да, конечно.

Получаете глубокое кодревью личного проекта опытным разработчиком

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

Программа курса

1. Раздел 1. Программирование на JavaScript — основы языка Изучим основные принципы программирования на JavaScript. Познакомимся с переменными, условиями и циклами. Закрепим знания, написав несколько программ: фитнес-калькулятор, драйвер принтера, симулятор дартс-машины. ++ += % .
2. Нелинейные программы.
3. Сравнение разных типов данных.
4. Циклы for и while .
5. Комбинация циклов и условий.
6. Три разных фитнесс-калькулятора и программа для вычисления оптимальной длительности прогулки в зависимости от погодных условий.

—>

7. Раздел 2. Базовые структуры данных Разберём базовые структуры данных и алгоритмы их обработки. Научимся работать с массивами, функциями и объектами. Напишем программы для расшифровки сообщений, несколько калькуляторов и конструктор компьютера. return .
8. NaN и undefined .
9. Округление с Math.round и Math.ceil .
10. Приемы рефакторинга.
11. Массив объектов и объект как словарь.
12. Передача данных по ссылке и по значению.
13. Доступ к значениям через скобки.
14. Методы-геттеры.
15. Глобальная и локальная области видимости.
16. Контекст выполнения this .
17. Программа для расшифровки сообщений.
18. Программы для определения результативности игроков и квалификации по правилам чемпионата.
19. Калькуляторы: коммерческие, бухгалтерские расчеты и вычисление стоимости строительства.

—>

20. Раздел 3. Погружение в браузерный JavaScript Углубляемся во взаимодействие с пользователями и оживление интерфейсов. document .
21. DOM — объектная модель документа.
22. Поиск элемента по селектору методом querySelector .
23. Коллекции элементов querySelectorAll .
24. Коллекция children .
25. Создание элементов и размещение их на странице.
26. Доступ к классам, атрибутам и содержимому элементов.
27. Обработка событий с addEventListener .
28. Отмена действия браузера по умолчания с помощью объекта события.
29. Использование анонимных функций для обработки событий.
30. Обработка нажатий клавиш.
31. Замыкания и области видимости переменных.
32. Отладка кода.
33. document.fragment и содержимое шаблонов .
34. Клонирование и удаление элементов.
35. Генератор карточек товара с учетом их состояния.
36. Галерея изображений товаров.
37. Попап.
38. Шаблоны для мессенджера.

—>

39. Раздел 4. Практика: фотоприложение с фильтрами Создадим небольшое приложение с фотофильтрами. Подготовим разметку и стили, необходимые для отрисовки приложения, а затем опишем логику работы на JavaScript. innerHTML для создания элементов из строк.
40. Приемы оптимизации кода.
41. Отладка кода.
42. Механика «перемещения» элемента.
43. Использование внешнего скрипта.

—>

44. Раздел 5. Сборник задач по программированию. Попрактикуемся в решении задач по программированию на JavaScript. Мы собрали 51 задачу разного уровня сложности. Каждая задача содержит подробный разбор и автоматические тесты для проверки решения.

Доступ по подписке

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

от 590 ₽ / месяц

• Обучение на платформе HTML Academy
• Тренажёры, интерактивные демонстрации, автопроверки учебного проекта
• Учебный чат с поддержкой наставников и кураторов
• Доступ к курсу только на время действия подписки

Полный доступ

Серьёзное обучение с постоянным взаимодействием с действующими разработчиками. Первый шаг на пути к настоящему профессионализму.

14 990 10 493 ₽

• Обучение на платформе HTML Academy
• Тренажёры, интерактивные демонстрации, автопроверки учебного проекта
• Учебный чат с поддержкой наставников и кураторов
• Без ограничений по срокам доступа к курсу
• Регулярные живые консультации с опытными разработчиками-наставниками
• Личный проект, выполняемый самостоятельно
• Глубокое кодревью личного проекта от опытного разработчика

Нажимая «Оплатить», вы подтверждаете свое согласие с условиями лицензионного договора.

• Наша группа в VK
• Наш канал на YouTube
• Наша страница в Twitter
• Наш канал в Telegram

Разработка на JavaScript с нуля в 2022 году: дорожная карта

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

Чтобы сделать обучение программированию на JavaScript с нуля простым и понятным, составили для вас дорожную карту:

Роадмап по изучению JavaScript разделён на следующие блоки:

Разберём каждый из блоков более подробно.

Основы JavaScript

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

Синтаксис

JavaScript позаимствовал большую часть синтаксиса из языка Java, но влияние на него оказали и Python, Perl, Awk. Язык JavaScript чувствителен к регистру и использует кодировку символов Unicode.

var, let и const

Для создания переменной в JS часто используется ключевое слово let . Эта директива позволяет объявить локальную переменную, область видимости которой ограничивается блоком кода, в котором она объявлена.

А вот для var не существует блочной области видимости: глобальные переменные var доступны и за пределами блока. Также var допускает повторное объявление, тогда как для let это будет ошибкой. Попробуйте сами:

var siteName = "Tproger"; var siteName; 

И такой вариант:

let siteName; let siteName; //SyntaxError: 'siteName' has already been declared 

А что насчёт const ? Это константа, которая подчиняется области видимости уровня блока согласно тем же правилам, что и переменные let . Но разница в том, что значение const нельзя переназначить. Пример:

const siteName = "Tproger"; siteName = "Типичный программист"; //TypeError: Assignment to constant 

Типы данных

Стандарт ECMAScript определяет восемь типов:

• undefined — неопределённый тип;
• boolean — логический тип;
• number —
  число;
• bigint — число произвольной длины;
• string — строка;
• symbol — символ;
• null — нулевое или пустое значение;
• object — структура для хранения данных и создания других структур с использованием ключевого слова new : new Object , new Map , new Date , etc.

Подробнее о типах данных и структурах данных в JavaScript вы можете почитать здесь.

Циклы

В JavaScript существует несколько видов циклов:

1. for — цикл со счётчиком, использование которого в большинстве случаев подразумевает, что известно количество повторений.
2. while — многократное выполнение инструкций ровно до тех пор, пока истинно условие.
3. do . while — то же, что и while , только здесь условие проверяется после выполнения инструкций, поэтому цикл выполняется минимум один раз.
4. for . in — цикл для перебора перечисляемых свойств объекта.
5. for . of — перебор итерируемых объектов, в которых реализован метод Symbol.iterator ( String , Array , Set , etc.).

При этом, как и в других языках программирования, в JS можно использовать инструкции break и continue .

Функции

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

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

function showMessage()

Выполнение этой функции выглядит так:

showMessage(); 

Продвинутые концепции

Двигаемся дальше. Понимание более сложных концепций JavaScript позволяет писать полноценные программы, лишённые спагетти-кода и разномастных костылей.

Замыкание

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

Рассмотрим на примере:

function outer() < var outerVar; var func = function() < var innerVar . x = innerVar + outerVar >return func > 

Каррирование функций

Данная техника работы с функциями очень полезна для разработки на JavaScript с нуля. Каррирование — это трансформация функций, чтобы те принимали аргументы как func(a)(b)(c) , а не в формате func(a, b, c) .

Чтобы лучше понять, о чём речь, посмотрим на простой пример. Создадим вспомогательную функцию curry(func) , которая выполняет каррирование func с двумя аргументами:

function curry(func) < return function(a) < return function(b) < return func(a, b); >; >; > //После карирования используем: function sum(a, b) < return a + b; >let curriedSum = curry(sum); alert(curriedSum(1)(2)); //Вывод: 3 

Ключевое слово this

Контекст this меняется в зависимости от его использования:

1. Если обратиться к this в глобальной области, мы автоматически обращаемся к объекту window в браузере. В строгом режиме ( «use strict» ), если значение this не установлено в контексте выполнения, оно остаётся undefined .
2. Используя данное ключевое слово внутри объекта, мы ссылаемся на сам объект.
3. this во вложенных объектах может создать путаницу. Помните, что this относится к тому объекту, в методе которого используется.
4. Если функцию-конструктор вызвать с использованием ключевого слова new , то this в ней укажет на новый объект.
5. В стрелочных функциях this привязан к окружению, в котором создана функция. В глобальной же области this будет указывать на глобальный объект.

Прототипы

В JavaScript объекты имеют специальное скрытое свойство [[Prototype]] , которое либо равно null , либо ссылается на другой объект. Этот объект называется прототипом:

Если вы планируете взять отсутствующее свойство из Object , но оно отсутствует, JavaScript автоматически возьмёт это свойство из прототипа. Это прототипное наследование.

Свойство [[Prototype]] является внутренним и скрытым, но есть много способов задать его. Одним из способов задать скрытое свойство [[Prototype]] является использование __proto__ :

let animal = < eats: true >; let rabbit = < jumps: true >; rabbit.__proto__ = animal; //Теперь мы можем найти оба свойства в rabbit: alert(rabbit.eats); //true alert(rabbit.jumps); //true 

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

В плане наследования JavaScript работает лишь с одной сущностью: объектами. Каждый объект имеет внутреннюю ссылку на другой объект, называемый его прототипом. У объекта-прототипа также есть свой собственный прототип и так далее до тех пор, пока цепочка не завершится объектом, у которого свойство [[Prototype]] равно null .

Итераторы и Генераторы

Итераторы и генераторы внедряют концепцию перебора непосредственно в ядро языка и обеспечивают механизм настройки поведения for . of циклов.

Итератором называется объект, который умеет обращаться к элементам некоторой коллекции по одному за один раз, и при может отслеживать своё текущее положение внутри обозначенной последовательности. В JavaScript итератор — это объект, который предоставляет метод next() , возвращающий следующий элемент последовательности со свойством done или value .

function makeIterator(array) < let nextIndex = 0; return < next: function()< return nextIndex < array.length ? : ; > > > 

next() может быть вызван для поочерёдного доступа к парам ключ-значение:

let it = makeIterator(['yo', 'ya']); console.log(it.next().value); // 'yo' console.log(it.next().value); // 'ya' console.log(it.next().done); // true 

Генераторы же позволяют определить алгоритм перебора, написав одну функцию, которая способна поддерживать собственное состояние. Генератор — это специальный тип функции, который работает как фабрика итераторов. Функция становится генератором, если содержит один или более yield операторов и использует function синтаксис.

function* idMaker() < let index = 0; while(true) yield index++; >let it = idMaker(); console.log(it.next().value); // 0 console.log(it.next().value); // 1 console.log(it.next().value); // 2 

Асинхронное программрование

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

Вообще, асинхронное программирование на JavaScript с нуля — это непросто, и одним разделом статьи здесь не обойтись. Чтобы разобраться, изучите основные понятия асинхронного программирования и переходите к введению в асинхронный JavaScript.

Модульная система

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

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

Так появились специальные библиотеки для динамической подгрузки модулей. Система модулей на уровне языка появилась в стандарте JavaScript в 2015 году и постепенно эволюционировала. На данный момент она поддерживается большинством браузеров и Node.js.

Подробнее о модульной системе читайте здесь.

Web API

Для программирования на языке JavaScript понимать Web API не просто желательно, а обязательно. Сталкиваться с интерфейсом прикладного программирования (Application Programming Interfaces) в JS вы будете повсеместно.

1. API браузера — это такие конструкции, которые встроены в браузер и предназначенные для облегчения разработки функциональности.
2. Сторонние API — конструкции, встроенные в сторонние платформы, такие как Twitter, Zendesk, Trello и т. д. С их помощью функциональность этих платформ можно использовать в своих веб-приложениях. Если API в платформе предусмотрен, к нему обязательно прилагается инструкция.

Тема веб API обширна и сложна. Чтобы разобраться в вопросе, рекомендуем к прочтению введение в web APIs, а также советуем посмотреть доступную лекцию:

Инструменты для разработки на JavaScript с нуля

Популярные линтеры и форматтеры для JavaScript:

Также обратите внимание на перечисленные в карте бандлеры: выбирайте инструмент, исходя из его удобства конкретно под ваши нужды.

Что же касается библиотек и фреймворков, советуем ознакомиться с нашими дорожными картами по React и Vue.js.

Выводы

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

Программирование:Создаем виртуал.интеллект на JavaScript

Программирование – это совсем несложно, если тебе это нравится. А как понять, что тебе это по душе? Мы бросаем вызов обычным методам изучения классных и полезных навыков. Предлагаем тебе за 26 страниц окунуться в профессию и сразу создать готовую программу – виртуальный интеллект, с которым можно поболтать в браузере.

Представляешь? К концу книги ты уже сможешь хвастаться своим первым кодом и решить, нравится тебе программировать или нет.

Внимание! Тебе понадобится: