Зачем учить JavaScript и где он пригодится
Аспирант Нетологии Максим Пименов рассказывает про JavaScript — невероятно популярный язык программирования, который учит сайты реагировать на поведение посетителей.
JavaScript — это лучший друг HTML и CSS. HTML задает разметку сайта, CSS отвечает за внешний вид, а JavaScript все это оживляет. С помощью кода на JavaScript программист определяет, как страница отреагирует на действия пользователя.
Сейчас JavaScript — единственный язык программирования для браузеров. Он работает под Windows, macOS, Linux и на мобильных платформах, то есть везде. Если не знаешь JavaScript, делать в программировании интерактивных сайтов нечего.
В 2009 году появился Node. js, который вывел JavaScript за пределы браузеров. Теперь его можно запустить хоть на стиральной машине. О том, что такое Node. js и зачем он нужен, мы уже писали, поэтому не буду рассказывать о нем подробно.
Без JavaScript делать в программировании интерактивных сайтов нечего
Frontend-разработчик с нуля
Как работает JavaScript
Любое действие пользователя на странице порождает событие. Программирование на JavaScript — это обработка событий. Вот как выглядит обычный сценарий:
Пользователь что-то сделал на странице
↓
В браузере сработало событие
↓
Запустился JavaScript-код, который назначен на событие
↓
JavaScript изменил что-то на странице.
Программист пишет обработчик только для тех событий, на которые стоит реагировать:
Пользователь кликнул мышью
↓
Сработало событие onclick
↓
Запустилась функция changePhoto
↓
В галерее сменилось фото
Пользователь нажал клавишу
↓
Сработало событие onkeydown
↓
Программист не назначил обработчик события
↓
Ничего не произошло
JavaScript — это, прежде всего, реакция на события
Чем хорош JavaScript
JavaScript полностью интегрирован с HTML, он способен как угодно менять веб-страницу. В ответ на событие программист может:
Это только то, что сразу пришло в голову. JavaScript может намного больше, в пределах своей страницы он Бог.
JavaScript — подходящий язык для изучения программирования. Он достаточно прост, но содержит все фундаментальные вещи: алгоритмы, объектно-ориентированную модель, структуры данных. Если традиционные языки для обучения — Pascal и Basic — несут мало практической пользы, то JavaScript — рабочая лошадка.
Начинать с JavaScript хорошо и потому, что синтаксически он похож на великий и ужасный язык С. Изучив JavaScript, получишь базовое представление обо всех «сиобразных» языках: С++, C#, Java, PHP. Они задают тренд в своих областях и весьма популярны, поэтому для новичка важно познакомиться с синтаксисом С.
Программа на JavaScript — это простой текст. Писать на JavaScript можно в любом текстовом редакторе.
В пределах своей страницы JavaScript — Бог
Ограничения
Классический JavaScript — это язык программирования для интернета, он бессилен за пределами браузера. С помощью JavaScript нельзя запустить программу на компьютере или записать файл в нужную папку.
Из-за правил безопасности браузеры ограничивают мощь JavaScript и за пределами «родной» страницы. Управлять вкладками можно при определенных условиях или же вовсе нельзя. Например, JavaScript может закрыть только ту вкладку, которую создал сам.
Год-два назад появились платформы Node.js и React Native, с ними на JavaScript пишут не только для браузера, но и для компьютеров со смартфонами. Это модные и трендовые технологии, но глобально JavaScript — язык программирования для интернета.
На JavaScript пишут для интернета и браузеров
Конкуренты
Сейчас в веб-программировании нет ничего, что способно пошатнуть позиции JavaScript. Язык настолько удачен, что нет причин изобретать что-то другое.
С чистым JavaScript конкурируют только надстройки над ним: CoffeeScript, TypeScript, Dart. Код надстроек порой компактнее, его легче читать и отлавливать ошибки, но перед выполнением он все равно преобразуется в JavaScript.
Главная сила JavaScript — вечная молодость. Он вышел 21 год назад, но не устарел, а развивался и развивается вслед за HTML.
Серьезных конкурентов у JavaScript нет
Что изучать до JavaScript
Можно приступать к JavaScript, вообще не имея представления о программировании. JavaScript — удачный выбор для первого языка, особенно если связываешь будущее с веб-разработкой. При этом любые знания в сфере программирования будет плюсом.
Если есть опыт HTML и CSS, совсем хорошо. Создание сайта логично начать со статичных страниц на HTML и CSS, а потом оживить их при помощи JavaScript. Плюс HTML и CSS дают базовое понимание того, как устроен интернет и работают сайты.
JavaScript — подходящий первый язык, если связываешь будущее с веб-разработкой
Куда развиваться JavaScript-программисту
Изучив основы JavaScript, можно копать так глубоко, как хочется.
Хорошо освоить библиотеки и фреймворки для JavaScript — наборы готовых классов с функциями. Некоторые из них настолько мощные, что полностью меняют сценарии программирования. Для JavaScript самые популярные фреймворки и библиотеки — React, jQuery и Angular2.
Кроме фреймворков полезно изучить надстройки над JavaScript: CoffeeScript, TypeScript и Dart. Одни надстройки сделают ваш код чище и компактнее, другие — строже.
Наконец, можно взяться за серверное программирование и Node.js. Это трендовая технология, которую используют BMW, Amazon, Apple и другие серьезные компании. Так вы расширите область своих знаний JavaScript за пределы управления веб-страницей.
Для JavaScript-программиста нет потолка развития
Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии
9 прекрасных проектов, которые можно создать на ванильном JavaScript
Хочешь проверить свои знания по фронтенду?
Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!
Перевод статьи «9 Awesome Projects You Can Build With Vanilla JavaScript».
Скажем откровенно: не важно, сколько книг по программированию вы прочли, сколько видео просмотрели и сколько подкастов прослушали — если вы хотите стать лучшим разработчиком, вам нужно непрерывно практиковаться.
В мире фронтенда существует множество фреймворков, например, React, Angular, Vue — и это лишь небольшая толика. Каждый из них прекрасен, без них фронтенд-разработка не достигла бы современных высот. Но все эти фреймворки, несмотря на существующие между ними различия, имеют и нечто общее: все они основаны на JavaScript. Да, старый добрый JS!
Не сомнений, что сегодня в web правит JavaScript. И каждый фронтенд-разработчик, не важно, опытный он или только начинающий свою карьеру, обязательно должен знать основы JavaScript, HTML и CSS.
Фреймворки приходят и уходят, а JavaScript остается!
Поэтому я решил составить небольшой список из девяти прекрасных проектов, которыми вы можете заняться, чтобы освежить свои навыки, узнать что-нибудь новое о JS и сохранить релевантный уровень знаний в 2020 году и дальше. Все эти проекты можно создать на чистом JavaScript (плюс HTML и CSS в разных пропорциях). Вы можете добавить их в свое портфолио, показывать рекрутерам или потенциальным работодателям, а также забросить в свой аккаунт на GitHub в качестве «справочников» для будущих работ.
Сразу проясню: цель этих проектов не в том, чтобы обучить вас всем премудростям JavaScript. Для этого есть специальные прекрасные курсы, раскрывающие все темы от А до Я. Здесь речь идет о создании каких-то вещей. О том, чтобы приложить руки к чему-то практическому. О выработке мышечной памяти.
Примечание редакции. Все видео в статье — на английском языке. Если знаете этот язык хоть немного, просмотр подобных туториалов в том числе поможет вам расширить свой словарный запас. Но если вы пока не можете уследить за объяснениями на английском, можно просто воспользоваться списком идей.
Если вы прям сейчас хотите попробовать свои силы в JavaScript, попробуйте пройти тест в 20 вопросов по результатам которого вы сможете понять, стоит ли вам изучать этот язык самому или же пойти на курсы по программированию. Вопросы довольно сложные для новичка. Но проходной балл доступный.
ПРОЙТИ ТЕСТ
1. Приложение для медитации
Это приложение, предлагающее эмбиент-звуки для медитации. Пользователи могут выбирать различные таймеры и звуки.
В прилагаемом туториале используется ванильный JavaScript, как раз то, что нам нужно. Кроме того, вы научитесь манипуляциям со звуком и видео при помощи JS.
Голос инструктора четкий, а инструкции просты для понимания.
2. Виртуальная клавиатура
Это проект по созданию виртуальной клавиатуры с нуля. Используются ванильный JS, HTML и CSS. Приложение предназначено в т.ч. для использования в браузере; оно должно быть отзывчивым и пригодным для управления касаниями.
Мне нравится оригинальность этого проекта. Раньше мне не доводилось создавать виртуальную клавиатуру, так что создание ее лишь на JavaScript, HTML и CSS было для меня отличным опытом.
Что касается видео, то голос инструктора четкий, да и объясняет он довольно хорошо.
3. Корзина покупок eCommerce
Здесь мы создаем корзину покупок, которая может использоваться в онлайн-магазинах и на сайтах электронной коммерции. В работе применяются все те же ванильный JS, HTML и CSS. Для хранения информации о продуктах инструктор использует Contentful — headless CMS. Научиться работать с headless CMS вообще и с Contentful в частности не является основной целью проекта, но это хороший сервис, так что вы не пожалеете, увидев его в действии.
Запись туториала очень длинная. С одной стороны, это впечатляет, но с другой — довольно утомительно. Голос инструктора четкий и понятный. Иногда немного сложно уследить за мыслью, но это можно объяснить сложностью проекта.
4. Приложение для прогноза погоды
При создании этого приложения, помимо обычного набора технологий, используется Dark Sky API — для сбора информации о погоде. Так что это отличная возможность научиться взаимодействовать с APIs.
Такое приложение может хорошо подойти для портфолио. Если вы взялись за первый проект нашего списка, то инструктор вам уже знаком, и я лишь отмечу, что это видео тоже отличается прекрасным качеством. Похоже, он в самом деле умеет учить, причем делает это понятно и не скучно.
5. Issue-трекер
В этом проекте нужно создать issue-трекер, который может использоваться для отслеживания проблем (например, с программными продуктами) на любом сайте. Он также может стать хорошим пополнением для вашего портфолио.
У инструктора есть ясное понимание того, что он хочет создать. Голос четкий и понятный, а проект годится и для начинающих.
6. PIN Pad
Это проект по созданию клавиатуры для ввода PIN-кода в браузере (с функционалом проверки PIN-кода на корректность). В этом туториале инструктор применят исключительно ванильный JS, HTML и CSS.
Я считаю, что это очень креативный учебный проект для показа, на что способен ванильный JavaScript. Инструктор проделал хорошую работу: все объясняется очень четко, за мыслью легко уследить.
7. Целевая веб-страница (лендинг)
Брэд покажет вам, как создать интерактивный лендинг, показывающий время и имя пользователя. Для хранения имени приложение использует локальное хранилище.
Брэд известен качеством своих туториалов. Именно этот — довольно короткий, и я бы сказал, что он простоват. Но зато в нем используются исключительно JavaScript, HTML и CSS.
8. Игра «Камень, ножницы, бумага»
Создание игр может быть интересным способом изучить что-нибудь. JavaScript предлагает широкие возможности по созданию браузерных игр. В этом учебном проекте вы создадите классическую игру «камень, ножницы, бумага».
Инструктор провел отличную работу по созданию туториала. Видео вышло увлекательным.
9. Игра «крестики-нолики»
Это проект по созданию игры в крестики-нолики. Задача интересная, но вместе с тем и сложная, потому что здесь используются основы ИИ и алгоритмы. Но помимо этого все создается на старых добрых JS, HTML и CSS.
Проект имеет хороший размер и понятную структуру. Работать над ним интересно. Голос инструктора четкий, за мыслью уследить легко. Объяснения очень хорошие, так что с созданием игры все должны справиться.
Вот и все. Я уверен, что вам уже не терпится взяться за эти отличные туториалы. Но я хотел бы еще кое-что сказать. Просмотр видео и параллельное написание кода это хороший способ изучать что-то новое и набивать руку. Но вы получите куда больше пользы от создания проектов, если внесете в них что-нибудь свое. Вы ведь вполне можете их улучшить, изменить, скомбинировать. Можно сделать и еще лучше: построить собственный проект, по ходу дела документируя свою работу. Так вы и сами многому научитесь, и другим поможете.
15 идей проектов на JavaScript для начинающих
Хочешь проверить свои знания по JS?
Подпишись на наш канал с тестами по JS в Telegram!
Самый быстрый способ стать хорошим веб-разработчиком — практиковаться. А работа над большим количеством разнообразных проектов — лучший вид практики.
Дело в том, что каждый отдельный проект представляет собой уникальную проблему и ее решение. Поэтому чем больше проектов вы создадите, тем больше знаний и опыта наберетесь.
В этот список идей я включил несколько своих любимых проектов для начинающих. Собственно, я сам все это строил, когда приступал к изучению JavaScript. Надеюсь, вам эти проекты принесут такую же пользу, как и мне.
Если, работая над проектом, вам случится застрять — не волнуйтесь: я включил в статью ссылки на соответствующие видеоуроки. В этих видео вы сможете просмотреть решение шаг за шагом.
Но все-таки сначала попытайтесь найти решение самостоятельно, без подсказок. Этот шаг очень важен в становлении разработчика. В программировании нет возможности как-то срезать путь и сразу стать хорошим специалистом. Не будете работать самостоятельно — ваши навыки не улучшатся, сколько бы видео вы ни просмотрели.
Если чувствуете, что информации навалилось слишком много, сделайте перерыв и отдохните. В отдыхе и перезагрузке нуждаются все, даже самые крутые специалисты. Помните, что даже тому разработчику, чьи видео вы смотрите на YouTube, потребовалось долго тренироваться, прежде чем он стал мастером в какой-то теме.
Я также добавлю во все разделы ссылки на готовые проекты. Все они хостятся бесплатно на GitHub Pages. Пройдя по ссылке, вы сможете посмотреть, как должен выглядеть проект, который вам предлагается сделать.
Закончив свой первый проект, вы тоже сможете разместить его на GitHub Pages. Это очень легко сделать, просто следуйте этой инструкции.
Наконец, со времени создания видеоуроков я вносил в проекты некоторые изменения, так что проект в последней версии может слегка отличаться от того, что вы увидите в видео. Последние версии проектов можно найти на GitHub.
1. Hex-цвета
Сделайте веб немножко красивее при помощи простого приложения. Это приложение меняет цвет фона и выводит на экран hex-коды использованных цветов.
Темы JavaScript, которые вы изучите:
Работая над этим проектом, я научился использовать onclick для привязки функции к кнопке. В данном случае функция генерирует рандомный hex-код и делает этот цвет фоновым.
Изучение этой темы было очень полезным, потому что буквально любое современное веб-приложение использует кнопки. Подозреваю, что изученную технику я буду применять снова и снова.
2. Случайные цитаты
Если вам не хватает мотивации, то вот хороший проект. Создайте простой генератор цитат, заряженный большим количеством мотивирующих высказываний.
Посмотреть в действии — Random Quotes.
Темы JavaScript, которые вы изучите:
Этот проект можно создать разными способами. Но мне было интересно узнать, как это решить с применением объекта — структуры данных, которой незаслуженно нечасто пользуются.
Работая над этим проектом, я также изучил простой алгоритм, отвечающий за генерацию случайной цитаты при клике на кнопку.
3. Карусель изображений
Хотите иметь приложение, которое будет показывать красивые картинки? Прекрасно, займитесь проектом № 3. Создайте приложение, которое позволит вам перемещаться по изображением, нажимая на кнопку. Такая штука называется каруселью изображений или слайдером.
Посмотреть, как это выглядит — Image Carousel.
Темы JavaScript, которые вы изучите:
Мне было интересно научиться создавать такого рода вещи. Сперва мы используем CSS, чтобы блокировать все изображения. Затем с помощью JavaScript меняем CSS-стили, высвобождая по картинке за раз.
До работы над этим проектом я не был уверен, возможно ли с помощью JS менять стили CSS напрямую, но оказалось, что возможно.
4. Электронные часы
Подумываете купить электронные часы? Лучше сделайте собственные!
Темы JavaScript, которые вы изучите:
Работая над этим проектом, я узнал, что при помощи JavaScript можно создать встроенный объект и получать из него время, используя встроенные функции. Это прекрасно, потому что позволяет не пользоваться дополнительными библиотеками.
Я также научился создавать функцию setTimeout. Она используется для постоянного вызова другой функции. В этом проекте она была необходима: обеспечивала правильное обновление времени.
5. Калькулятор
Список проектов для начинающих был бы неполным без калькулятора.
Попробовать в действии можно по ссылке — Calculator.
Темы JavaScript, которые вы изучите:
Я просто поверить не мог, насколько просто было создать такое приложение. Я-то думал, что придется каждое выражение прописывать вручную, создавая сложные функции. Но оказалось, что в JavaScript есть функция eval. которая все это делает за нас.
Мне очень понравилось работать над этим проектом. Я даже стили поменял, чтобы добавить что-то от себя.
6. Список покупок
Проголодались? Пора отправиться за покупками. И список не забудьте.
Готовое приложение для составления списка покупок можно посмотреть по ссылке — Grocery List.
Темы JavaScript, которые вы изучите:
Это приложение выглядит очень круто. А еще это первая программа в нашем списке, в которой используются слушатели событий.
Мы используем слушатель для добавления нового пункта в список покупок, когда пользователь нажимает на кнопку «Добавить», а также для вычеркивания элемента из списка при нажатии на него.
Мне было интересно узнать, как пишется функция, отвечающая за удаление всех элементов внутри div. В данном случае она удаляет все элементы из списка покупок.
7. Калькулятор чаевых
Больше не нужно переглядываться с друзьями, решая, кто заплатит чаевые: их можно разбросать на всех.
Попробовать в действии — Tip Calculator.
Темы JavaScript, которые вы изучите:
Создать функцию, которая будет высчитывать, сколько чаевых должен заплатить каждый, было довольно просто. Пожалуй, сложнее всего было использовать CSS для создания такого дизайна. Внешний вид приложения вроде бы простой, но воспроизвести его без туториала сложно.
8. Список задач
Давайте уделим какой-то день созданию «to-do»-приложения. (Без него тоже ни один список идей проектов для начинающих не обходится).
Попробовать в действии можно здесь — To-do List.
Темы JavaScript, которые вы изучите:
Решение для этого приложения было очень похожим на решение для списка покупок. Я постоянно заглядывал в тот код, когда писал этот. Но кое-что и отличалось: функция для смены цвета фона для каждого элемента в списке. Я подумал, что это будет отличным дополнением к проекту, поскольку делает его гораздо симпатичнее.
В целом, можно сказать, что это был проект-ревью, но все равно хорошая практика.
9. Флеш-карточки (с локальным хранилищем)
Это приложение позволяет создавать флеш-карточки. Написав его, вы сможете избавиться от старых картонных.
Посмотреть в действии — Flashcards.
Темы JavaScript, которые вы изучите:
Прежде всего, это приложение прекрасно выглядит. Кроме того, оно полезное: можно сэкономить на покупке бумажных карточек.
Это первый проект в нашем списке, где используется flexbox, так что мне, например, поначалу было сложно. Но когда я вник в эту тему, оказалось, что пользоваться flexbox довольно просто, а проект благодаря ему становится куда более динамичным.
В частности, мне особенно понравились опции align-item, flex-wrap и justify-content, поскольку благодаря им мои карточки стали отзывчивыми.
10. Клейкие заметки
Напишите приложение для создания клейких заметок. Да, бумажные можно выбросить.
Попробовать в деле — Sticky Notes.
Темы JavaScript, которые вы изучите:
Код этого проекта очень похож на код проекта с флеш-карточками, но это не беда, потому что наша цель — практиковаться. Конечно, если бы у меня не было того проекта, мне пришлось бы сверяться с видео, чтобы убедиться, что я правильно все делаю.
Но приложения в любом случае не совершенно одинаковые, так что над отличающимися частями пришлось хорошенько подумать.
Вообще, этот проект хорош еще и тем, что в нем комбинируются все навыки, приобретенные в предыдущих проектах.
11. Секундомер
Пощупать можно здесь — Timer.
Темы JavaScript, которые вы изучите:
Неожиданно оказалось, что создать простой секундомер куда сложнее, чем я рассчитывал. Можно подумать, что достаточно будет использовать функцию setInterval из проекта с электронными часами. Но оказалось, что этот подход попросту не работает в данном случае.
Для этого проекта мы создаем переменные, содержащие различную информации о времени. Например, когда был старт, когда стоп, насколько отсчет времени останавливался. Без этих переменных и вычислений с ними наш секундомер попросту не сможет показывать, сколько времени прошло.
12. Математика для детей
Классное приложение для обучения детей простым арифметическим операциям.
Посмотреть можно здесь — Math 4 kids.
Темы JavaScript, которые вы изучите:
На этом проекте я научился переключаться с одной веб-страницы на другую и проигрывать звуковой файл. Оказалось, что обе задачи довольно простые.
Труднее всего было разобраться, как рандомным образом размещать правильный ответ в разных боксах, чтобы каждый раз ответ оказывался в другом месте.
Я старался прийти к решению самостоятельно, но в конечном итоге посмотрел решение в туториале.
13. Unsplash API (генератор картинок)
Вам нужны картинки для вашего нового сайта? Давайте построим генератор картинок.
Посмотреть, как это работает, — Image Generator.
Темы JavaScript, которые вы изучите:
Работая над этим проектом, я научился делать API-запросы при помощи fetch.
Кстати, до этого я даже не подозревал о существовании Unsplash API. Мне было любопытно узнать, что многие солидные компании интегрируют этот API в свои сайты.
Также круто иметь под рукой генератор картинок — на случай, если возникнет желание сменить обои на рабочем столе.
14. Пишущая машинка
Это приложение выбирает случайную цитату из API и выводит ее на экран с эффектом набора на пишущей машинке.
Посмотреть, как это работает, можно по ссылке — Typewriter.
Темы JavaScript, которые вы изучите:
Научиться создавать скрипт для эффекта пишущей машинки было круто. Я видел такой эффект в видеоиграх. Теперь я могу использовать его при создании собственных.
Мне было интересно узнать, что для создания крутых анимаций не всегда нужен CSS. В этом проекте для создания эффекта пишущей машинки используется встроенная функция JavaScript.
15. Квадратные карточки (шаблон)
Стильный способ представить данные.
Посмотреть можно здесь — Square Cards.
Темы JavaScript, которые вы изучите:
Работая над этим проектом, я научился открывать YouTube-видео и статьи на сайтах напрямую из JavaScript. Это стало отличным дополнением к моему набору навыков веб-разработчика.
Перевод статьи «15 Beginner JavaScript Projects to Improve Your Front-End Skills!».
