javascript тренировка для начинающих
Минипроекты JavaScript для новичков
Учебник JavaScript
Практика
Работа с DOM
Практика
Некоторые продвинутые вещи
Рекомендованное ES6
Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.
Регулярки
Разное
Работа с канвасом
Практика
Контекст
Drag-and-Drop
Практика по ООП
Ваша задача: посмотрите, попробуйте повторить.
Практика
Promise ES6
Библиотека jQuery
Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.
Перед решением задач изучите теорию к данному уроку.
ВНИМАНИЕ Вместо задач этого урока вышел отдельный спец курс:
http://theory.phphtml.net/courses/javascript/practice/1/c.html
http://theory.phphtml.net/courses/javascript/practice/1/h.html
Меняйте число в адресе, будете попадать на следующий урок, всего 13 уроков (дз есть не везде).
ПЕРЕД этими уроками посмотрите урок на анонимные функции (он ниже по учебнику).
Задачи для решения
Реализуйте калькулятор. Должны быть кнопки цифр и операций. По нажатию на кнопку ‘=’ должен посчитаться результат. Совет: используйте фунцию eval.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Реализуйте игру крестики-нолики. Играет два человека, на одном поле по очереди.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Реализуйте тест, в котором показывается один вопрос, 5 чекбоксов для ответа (может быть несколько правильных ответов). Под чекбоксами ссылка ‘следующий вопрос’. По нажатию на эту ссылку вместо текущего вопроса показывается следующий. Когда вопросы заканчиваются, в последнем вопросе будет стоять ссылка не ‘следующий вопрос’, а ‘показать результат’.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Решите предыдущую задачу, но при условии, что баннер появлятся не по прокрутке, а через N секунд после захода пользователя на страницу.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Реализуйте квадратный календарик (как в винде).
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Реализуйте органайзер. Он представляет собой календарик, нажимая на даты которого можно увидеть список задач, запланированных на этот день.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Реализуйте аккордион (погуглите, что это).
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Дана таблица. В верхнем ряду th. Сделайте так, чтобы по нажатию на определенный th ряды таблицы сортировались по значениям этого столбца.
Образец того, что должно получится, он же ответ в исходном коде:
Вы можете открыть этот пример в отдельной вкладке браузера.
Где JavaScript джуну получать тестовые задания для практики?
JavaScript джуну, как и любому начинающему программисту, необходимо оттачивать навыки. Мы составили подборку ресурсов с уймой тестовых заданий.
Есть проблема: новички могут сколь угодно штудировать теорию, но с практикой постоянно какая-то беда. Зачастую просто негде брать задания. В ВУЗе или на курсах преподаватели засыпают домашками, но вот с самостоятельным поиском все не так просто. Приходится либо искать уже решенные или, напротив, нерешаемые задачки на Stack Overflow, либо придумывать самому.
Наша подборка поможет в этом плане JavaScript джуну, ведь здесь мы собрали ресурсы с готовыми задачами для практики.
Проверяем начальные знания React, Redux, React-Router + разбор
Автор обеспечил подробный разбор первого ТЗ.
Усложнение задачи с добавлением Redux Async Actions
Второе задание из этой серии. Его цель состоит в том, чтобы определить уровень знаний Redux/React/React-Router. Работа с асинхронными запросами, взаимодействие клиента и сервера.
Расписан внешний вид приложения, бэкэнд и другие моменты.
Задачи на основы языка JavaScript
Базис? Да. Но нужно ведь существующему или будущему JavaScript джуну как-то начинать свой путь в веб-разработке. Есть как элементарные задачи, так и посложнее. Отличная возможность «набить руку». К заданиям также прилагаются решения, так что если не хотите сразу уже увидеть результат, не спешите опускать взгляд ниже условия.
Задачи по JavaScript
Данный ресурс также ориентирован на новичков. Те, кто предпочитает скучному текстовому формату визуальный ряд, попали по адресу. Все очень удобно и предоставлено в формате видео. Если хотите параллельно с основным обучением получать другие задания и оттачивать свои навыки, этот сайт подойдет как нельзя лучше.
Middle JavaScript Developer
А вот это будет посложнее, поскольку рассчитано на Middle. Тем не менее, можете испытать свои силы. На сайте вакансии от компании CSSSR приведено 3 небольших кейса, сделав которые, можете смело называть себя продвинутым джуном или мидлом. В качестве инструментов для работы используются CodePen, JSFiddle и Plunker.
«Тут собираем годные задачи»
Простые задачи на яваскрипт
Еще одна неплохая находка на GitHub. Здесь можно не только попрактиковаться, но и узнать кое-что интересное. В начале материала предоставлена ссылка на современный учебник Javascript, который поможет новичку разобраться во всех нюансах и заодно подготовиться к приведенным задачам.
Тесты
Без них тоже не обошлось, ведь это альфа и омега любого собеседования. Часто тесты построены таким образом, что для ответа нужно написать хоть небольшую, но программку. Так что по сути это все те же задачи, но с меньшим количеством требований и условий.
Сборная солянка
Хорошие ответы можно найти под этим вопросом. Не забывайте, что мы уже успели собрать немало ресурсов для практики в таких статьях, как 27 сайтов с задачками для оттачивания навыков программирования, а также Спортивное программирование и 5 ресурсов для решения задач. Если до сих пор туда не заглянули, самое время ознакомиться 🙂
Надеемся, наша подборка оказалась вам полезной. Если у вас есть на примете сайты, которые не были затронуты в статье, но заслуживают внимания, пожалуйста, укажите их в комментариях.
Вас также могут заинтересовать другие материалы по теме:
Задачи на отработку циклов и функций JavaScript
Учебник JavaScript
Практика
Работа с DOM
Практика
Некоторые продвинутые вещи
Рекомендованное ES6
Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.
Регулярки
Разное
Работа с канвасом
Практика
Контекст
Drag-and-Drop
Практика по ООП
Ваша задача: посмотрите, попробуйте повторить.
Практика
Promise ES6
Библиотека jQuery
Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.
Перед решением задач изучите теорию к данному уроку.
Задачи для решения
Отработка циклов
В следующих задачах вы должны вспомнить работу с циклами JavaScript.
Выведите с помощью цикла столбец чисел от 1 до 100.
Выведите с помощью цикла столбец чисел от 100 до 1.
Выведите с помощью цикла столбец четных чисел от 1 до 100.
Заполните массив 10-ю иксами с помощью цикла.
Заполните массив числами от 1 до 10 с помощью цикла.
Заполните массив 10-ю случайными числами (дробями) от 0 до 1 с помощью цикла. Дроби округляйте до двух знаков в дробной части.
Заполните массив 10-ю случайными числами от 1 до 10 с помощью цикла.
Дан массив с числами. С помощью цикла выведите только те элементы массива, которые больше нуля и меньше 10-ти.
Дан массив с числами. С помощью цикла найдите сумму элементов этого массива.
Дан массив с числами. С помощью цикла найдите сумму квадратов элементов этого массива.
Дан массив с числами. Найдите среднее арифметическое его элементов (сумма элементов, делить на количество).
JavaScript для начинающих: дружественное введение и упражнения
«Детские шаги, и много практики».
Это самый распространенный ответ, который я слышу, как я могу выучить JavaScript? вопрос.
Потому что давайте посмотрим правде в глаза:
Для начинающих JS возвышающаяся экосистема, которая является JavaScript, может быть довольно пугающей.
Это введение для начинающих JS будет включать в себя:
Давайте сделаем эти первые шаги ребенка.
1. Во-первых, что такое JavaScript?
Если говорить немного грубо:
Эти три языка позволяют веб-разработчикам создавать яркие онлайн-впечатления.
JavaScript, однако, более … сложный зверь, чем первые два. Видите ли, он позволяет вам делать кучу вещей на сайте:
Разработчики часто используют JavaScript для извлечения данных с других сайтов и отображения их самостоятельно.
Однако эти варианты использования представляют только верхушку айсберга JS. Веб-разработчики также используют его для:
Абсолютным новичкам пока не нужно беспокоиться об этом! Мы расскажем об этом в следующем промежуточном посте. 👍
2. Разрушение экосистемы JavaScript
2.1. За JavaScript стоит «соглашение»: оно называется ECMAScript
Всякий раз, когда выходит новая версия JavaScript, вы неизбежно услышите о ECMAScript.
Давайте воспользуемся простой аналогией, чтобы разобраться в этом. Аналогия: строительство дома 🏠
Широко принятым (и торговым знаком) методом написания планов домов на светло-голубом листе бумаги размером 50 на 50 см. является JavaScript.
2.2. Современный JavaScript работает как на браузерах, так и на серверах
Что интересно и сбивает с толку современный JavaScript, так это то, что он может работать как на внешнем интерфейсе, так и на внутреннем.
Другими словами, вы можете запускать код JavaScript в своем браузере, но также и на своих серверах!
Посмотрим, чем они отличаются.
JS на стороне клиента: волшебство браузера!
Все браузеры имеют механизмы JavaScript, которые интерпретируют и запускают код JS.
У JavaScript есть доступ к DOM (объектной модели документа), то есть структуре элементов HTML на вашей странице.
Именно при доступе к DOM JavaScript манипулирует HTML-элементами и создает анимацию, переходы, визуальные подсказки и т. Д.
В разделе 4 мы покажем вам конкретные примеры использования JS в браузере!
JS на стороне сервера: узел & npm 
Он поставляется с множеством API (вот введение API!), Которые взаимодействуют с компьютерными ресурсами: файловой системой, сетевым вводом-выводом и т. Д.
Смотрите, эти возможности не доступны в браузере. Зачем? Главным образом по соображениям безопасности: вы не хотели бы, чтобы на веб-страницах выполнялся код, который читает локальные файлы на вашем компьютере … это неприятно!
Используя Node.js, разработчики создают широкий спектр бэкэнд-программ JS, от простых инструментов разработчика до полноценных рабочих веб-серверов.
Чтобы создать эти программы, разработчики могут выбирать из множества строительных блоков, доступных через npm.
Проще говоря, он позволяет вам устанавливать любую из этих программ Node прямо с вашего компьютера. Это позволяет разработчикам публиковать и загружать фрагменты кода JavaScript, от простых функций до зрелых фреймворков.
Проверьте этот пост, если вы хотите глубже изучить Node.js.
GitHub репо с ресурсами для начинающих JS
Я хотел бы продолжить о том, что заявления, объявления, переменные, объекты / функции и выражения.
Но я не достаточно камикадзе, чтобы попытаться воспроизвести всю документацию JavaScript в одном посте.
Героические люди из Mozilla Developer Network (MDN) уже проделали большую работу по ознакомлению новичков JS с техническими особенностями языка. Так что, если первое предложение этого раздела звучит как бред, не бойтесь. Эти два руководства по JavaScript помогут вам быстро освоить механику и синтаксис JS:
Если вы пришли из бэкэнд-программирования, вы быстро освоите их.
Если нет, вам повезло: наша команда недавно опубликовала обширный список ключевых ресурсов для начала работы с JavaScript. Он собрал более 200 звезд на GitHub, и мы рады поделиться с вами:
Теперь, прежде чем вы начнете кликать и сёрфить, подождите. Я предлагаю сначала пойти по этому простому пути новичка:
1 Поймите некоторую основу Udacity, Codecademy или freeCodeCamp (или в упражнениях ниже!) 2 Взгляните на JavaScript: понимание странных частей 3 Ознакомьтесь с серией книг YDKJS(You don’t know JS)!
Быстрые подсказки для начинающих JS
Заключительные мысли
Помните: изучение нового языка программирования требует времени и практики. Это будет нелегко, но это даст вам возможность создавать потрясающие впечатления в Интернете. Будь то для себя, своих друзей, компании или некоторых клиентов!
JavaScript действительно является основой Интернета, поэтому я обещаю, что его изучение поможет вашей карьере в будущем. Скаутская честь
Что дальше, спросите вы?
Медленно, но верно, найдите время, чтобы просмотреть некоторые отобранные ресурсы в репозитории GitHub, о котором говорилось выше.
Как только вы почувствуете себя немного увереннее в своих знаниях по JS, я бы посоветовал пройти курс JavaScript 30 от Wes Bos.
Задачи на основы языка JavaScript
Учебник JavaScript
Практика
Работа с DOM
Практика
Некоторые продвинутые вещи
Рекомендованное ES6
Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.
Регулярки
Разное
Работа с канвасом
Практика
Контекст
Drag-and-Drop
Практика по ООП
Ваша задача: посмотрите, попробуйте повторить.
Практика
Promise ES6
Библиотека jQuery
Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.
Перед решением задач изучите теорию к данному уроку.
Примеры решения задач
Задача
Задача. Создайте переменную str и присвойте ей значение ‘abcde’. Обращаясь к отдельным символам этой строки выведите на экран символ ‘a’, символ ‘b’, символ ‘e’.
Задача
Задача. Напишите скрипт, который считает количество секунд в часе.
Если нам нужно получить количество секунд в сутках, то умножим еще и на 24 (так как в сутках 24 часа):
Задача
Решение: заменим все подходящие места на сокращенную форму записи. К примеру, вместо num = num + 12 можно написать num += 12, а вместо num = num + 1 будет num++. Результат переделки будет выглядеть так:
Задачи для решения
Работа с переменными
Создайте переменную num и присвойте ей значение 3. Выведите значение этой переменной на экран с помощью метода alert.
Создайте переменные a=10 и b=2. Выведите на экран их сумму, разность, произведение и частное (результат деления).
Создайте переменные c=15 и d=2. Просуммируйте их, а результат присвойте переменной result. Выведите на экран значение переменной result.
Создайте переменные a=10, b=2 и c=5. Выведите на экран их сумму.
Создайте переменные a=17 и b=10. Отнимите от a переменную b и результат присвойте переменной c. Затем создайте переменную d, присвойте ей значение 7. Сложите переменные c и d, а результат запишите в переменную result. Выведите на экран значение переменной result.
Работа со строками
Создайте переменную str и присвойте ей значение ‘Привет, Мир!’. Выведите значение этой переменной на экран.
Создайте переменные str1=’Привет, ‘ и str2=’Мир!’. С помощью этих переменных и операции сложения строк выведите на экран фразу ‘Привет, Мир!’.
Создайте переменную name и присвойте ей ваше имя. Выведите на экран фразу ‘Привет, %Имя%!’.
Создайте переменную age и присвойте ей ваш возраст. Выведите на экран ‘Мне %Возраст% лет!’.
Функция prompt
Спросите имя пользователя с помощью методы prompt. Выведите с помощью alert сообщение ‘Ваше имя %имя%’.
Спросите у пользователя число. Выведите с помощью alert квадрат этого числа.
Обращение к символам строки
Создайте переменную str и присвойте ей значение ‘abcde’. Обращаясь к отдельным символам этой строки выведите на экран символ ‘a’, символ ‘c’, символ ‘e’.
Создайте переменную num и присвойте ей значение ‘12345’. Найдите произведение (умножение) цифр этого числа.
Практика
Напишите скрипт, который считает количество секунд в часе, в сутках, в месяце.
Создайте переменную, присвойте ей число. Возведите это число в квадрат. Выведите его на экран.
Работа с присваиванием и декрементами
Переделайте этот код так, чтобы в нем использовались операции ++ и —. Количество строк кода при этом не должно измениться.