Newcomposers.ru

IT Мир
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Простые задачи javascript

Задачник JavaScript и jQuery от Трепачёва Дмитрия

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Рекомендованное ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

  • Урок №
    Введение, задач нет
  • Урок №
    Работа с регулярными
    выражениями. Глава 1.
  • Урок №
    Работа с регулярными
    выражениями. Глава 2.
  • Урок №
    Работа с регулярными
    выражениями. Глава 3.
  • Урок №
    Работа с регулярными
    выражениям. Глава 4.
  • Урок №
    Отличия
    от PHP версии

Разное

Работа с канвасом

  • Урок №
    Введение, задач нет
  • Урок №
    Основы
    работы с canvas
  • Урок №
    Продвинутая
    работа с canvas

Практика

  • урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)

Контекст

  • Урок №
    Введение, задач нет
  • Урок №
    Продвинутая
    работа с контекстом

Drag-and-Drop

  • Урок №
    Введение, задач нет
  • Урок №
    Основы
    работы с ООП
  • Урок №
    Наследование
    классов в JavaScript
  • Урок №
    Применение
    ООП при работе с DOM
  • Урок №
    Практика
    по ООП в JavaScript
  • Тут скоро будут еще уроки
    по функциональному и прототипному
    стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

Данный раздел сайта содержит задачи по JavaScript+jQuery с начального уровня до продвинутого.

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Рекомендованное ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

  • Урок №
    Введение, задач нет
  • Урок №
    Работа с регулярными
    выражениями. Глава 1.
  • Урок №
    Работа с регулярными
    выражениями. Глава 2.
  • Урок №
    Работа с регулярными
    выражениями. Глава 3.
  • Урок №
    Работа с регулярными
    выражениям. Глава 4.
  • Урок №
    Отличия
    от PHP версии

Разное

Работа с канвасом

  • Урок №
    Введение, задач нет
  • Урок №
    Основы
    работы с canvas
  • Урок №
    Продвинутая
    работа с canvas

Практика

  • урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)

Контекст

  • Урок №
    Введение, задач нет
  • Урок №
    Продвинутая
    работа с контекстом

Drag-and-Drop

  • Урок №
    Введение, задач нет
  • Урок №
    Основы
    работы с ООП
  • Урок №
    Наследование
    классов в JavaScript
  • Урок №
    Применение
    ООП при работе с DOM
  • Урок №
    Практика
    по ООП в JavaScript
  • Тут скоро будут еще уроки
    по функциональному и прототипному
    стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Задачи с решениями на JS

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

Задача на создание примитивного калькулятора на JS

Запросите у пользователя ввести два числа и верните ему сумму этих двух чисел. Для решения используйте функции: prompt и parseInt.

Решение задачи:

В переменные a и b запишутся, введенные пользователем числа в поля ввода модальных окон. Если пользователь введет строку или число с дробной частью, то функция parseInt преобразует их к целым числам. Команда alert выведет результат сложения двух чисел.

let a = prompt(«Введите первое число:»); // ввели число
a = parseInt(a); // преобразовали к целому числу
let b = prompt(«Введите второе число:»); // ввели число
b = parseInt(b); // преобразовали к целому числу
alert(a+b); // вывели результат сложения

Задача на ветвление (if-else) на JS

Реализуйте алгоритм: участнику викторины задается 2 вопроса. За каждый правильный ответ начисляется 1 балл. Подсчитать и вывести количество правильных ответов на экран.

Решение задачи:

Заведем две переменные для исходных данных: для счетчика баллов (point) и ответов от участника (answer). Пока в нашем счетчике лежит 0 баллов, а переменная для ответов — пустая. Функция prompt вызывает окно с вопросом и поле для ввода ответа. Введенный участником ответ попадаете в переменную answer. Программа сравнивает (==) правильный ответ с ответом участника. Если (if) ответ правильный, то программа пойдет по одной ветке: выведет окно с текстом ‘Верно’ и увеличит счетчик на единицу (0 + 1 = 1). В противном случае (else), если ответ неправильный, то программа пойдет по другой ветке и выведет окно с текстом ‘Неверно!’.

Точно так же программа обработает второй вопрос. В итоге в переменной point может оказаться от 0 до 2 баллов, это зависит от количества правильных ответов.

let point = 0;
let answer = «»;
answer = prompt(«Какую птицу называют лесным доктором?»);
if (answer == «дятел») <
alert(«Верно»);
point = point + 1; // сокращенная запись point++
>else <
alert(«Неверно!»);
>

answer = prompt(«Самое глубокое пресноводное озеро в мире?»);
if (answer == «Байкал») <
alert(«Верно»);
point = point + 1; // point++ >else <
alert(«Неверно!»);
>

alert(«Вы набрали: » + point + » баллов»);

Наверняка вы заметили, что в задаче на ветвления для каждого вопроса повторяется один и тот же блок кода. А что если вопросов будет больше, то код программы разрастется до гигантских размеров. Чтобы такого не произошло, в программировании придумали циклы.

Цикл — это набор команд, который может повторно выполняться пока заданное условие верно, возвращает истину.

Читать еще:  Javascrit eval atob

Задача на циклы и массивы на JS

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

Решение задачи:

Мы не будем помещать каждый вопрос в отдельную переменную, а создадим массив из вопросов и присвоим его одной переменной. Ещё создадим пустой массив для ответов.

В круглых скобках цикла for, мы настроим его работу:

  1. создадим переменную счетчик со значением 0.
  2. зададим условие, до каких пор будет работать цикл. Цикл работает, пока значение счетчика меньше длины массива.
  3. задаем шаг для счетчика, при каждом повторе, значение счетчика будет увеличиваться на 1. Когда условие, что i меньше длины массива, перестанет быть правдой, цикл закончит свою работу.

let answers = [];
questions = [
‘Как вас зовут?’,
‘Кто вы по профессии?’,
‘Где вы работаете?’
];

В фигурных скобках (теле цикла), указываются инструкции, которые должны выполнятся, при новом витке цикла. Мы говорим программе: При каждом проходе цикла, запрашивай у пользователя ответ на вопрос, и полученный ответ записывай в переменную answer. Когда вопросы закончатся, то цикл сам остановится и выведет на страницу все ответы. Правильно настроенный цикл, делает всю рутинную работу за программиста.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    5 типовых задач на собеседованиях по JavaScript

    Разбор и решения

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

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

    Главное — тщательная подготовка к вашему собеседованию

    Да, прежде чем начать разбирать задачи, давайте рассмотрим общие советы по подготовке к интервью.

    Главное — готовиться заранее. Проверьте, насколько хорошо вы помните алгоритмы и структуры данных, и подтяните знания в тех областях, которые вам не слишком хорошо знакомы. Есть немало онлайн-платформ, которые помогут подготовиться к прохождению собеседований. Советуем GeeksforGeeks, Pramp, Interviewing.io и CodeSignal.

    Стоит научиться проговаривать решение вслух. Желательно рассказывать соискателям о том, что вы делаете, а не просто писать на доске (или же набирать код в компьютере, тоже молча). Таким образом, если в коде вы допустите ошибку, но ход решения будет в общем правильным, можно увеличить свои шансы на успех.

    Задачу нужно осмыслить, прежде чем приступить к решению. В некоторых случаях можно поверхностно понять задание и затем пойти по неверному пути. Возможно, стоит задать несколько уточняющих вопросов интервьюеру.

    Нужно потренироваться писать код вручную, а не на ПК. Бывает, что на собеседованиях соискателю дают маркер и доску, где нет ни подсказок, ни автоматического форматирования. При поиске решения стоит записать свой код на листе бумаги или прямо на доске. Если держать все в голове, можно забыть что-нибудь важное.

    Шаблонные задачи на JavaScript

    Вероятно, какие-то из этих задач уже вам уже знакомы. Вы либо проходили собеседования, где нужно было решать что-то подобное, либо практиковались на них во время изучения JavaScript. Ну а теперь пришло время решить их еще раз, причем с подробным объяснением процесса.

    Палиндром

    Палиндром — слово, предложение или последовательность символов, которая абсолютно одинаково читается как в привычном направлении, так и в обратном. К примеру, “Anna” — это палиндром, а “table” и “John” — нет.

    Постановка

    Дана строка; нужно написать функцию, которая позволяет вернуть значение true, если строка является палиндромом, и false — если нет. При этом нужно учитывать пробелы и знаки препинания.

    Разбираем задание

    Основная идея здесь — перевернуть строку в обратном направлении. Если «реверсная» строка полностью идентична исходной, значит, мы получили палиндром и функция должна вернуть значение true. Если же нет — false.

    Решение

    Вот код, который позволяет решить палиндром.

    Первый шаг — преобразование символов входной строки в нижний регистр. Это гарантия того, что программа будет сравнивать именно сами символы, а не регистр или еще что-то.

    Читать еще:  Java math pow

    Второй шаг — реверс строки. Это сделать несложно: необходимо преобразовать ее в массив посредством метода .split() (библиотека String). Потом мы переворачиваем массив, используя .reverse() (библиотека Array). Последний этап — преобразование обратного массива в строку при помощи .join() (библиотека Array).

    Теперь все, что нужно, — сравнить «обратную» строку с исходной, вернув результат true или false.

    FizzBuzz

    Одна из самых популярных на собеседованиях задач.

    Постановка

    Требуется написать функцию, выводящую в консоль числа от 1 до n, где n — это целое число, которая функция принимает в качестве параметра, с такими условиями:

    • вывод fizz вместо чисел, кратных 3;
    • вывод buzz вместо чисел, кратных 5;
    • вывод fizzbuzz вместо чисел, кратных как 3, так и 5.

    Пример

    Результат

    Разбираем задание

    Главное здесь — способ поиска кратных чисел с использованием JavaScript. Его можно реализовать при помощи оператора модуля или же остатка — %, который позволяет показать остаток при делении двух чисел. Если остаток 0, это означает, что первое число кратно второму.

    12 % 5 // 2 -> 12 is not a multiple of 5
    12 % 3 // 0 -> 12 is multiple of 3

    Так, если разделить 12 на 5, получаем 2 с остатком 2. Если же разделить 12 на 3, то получаем 4 с остатком 0. В первом случае 12 не кратно 5, во втором — 12 кратно 3.

    Решение

    Оптимальным решением будет следующий код:

    Функция выполняет нужные проверки с использованием условных операторов и выдает результат, необходимый пользователю. В задаче стоит уделить внимание порядку операторов if…else: начинать с двойного условия (&&) и заканчивать случаем, когда кратные числа найти не получилось. В результате мы охватываем все варианты.

    Анаграмма

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

    Постановка

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

    Разбираем задание

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

    finder → f: 1 friend → f: 1
    i: 1 r: 1
    n: 1 i: 1
    d: 1 e: 1
    e: 1 n: 1
    r: 1 d: 1

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

    Есть и другие условия:

    • Нужно убедиться в том, что регистр букв при сравнении не учитывается. Просто преобразуем обе строки в нижний или верхний регистр.
    • Исключаем из сравнения все не-символы. Лучше всего работать с регулярными выражениями.

    Решение

    Обратите внимание на использование Object.keys() в сниппете выше. Этот метод возвращает массив, содержащий имена или ключи в таком же порядке, в каком они встречаются в объекте. В этом случае массив будет таким:

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

    Поиск гласных

    Достаточно простая задача, которая часто попадается на собеседованиях.

    Постановка

    Нужно написать функцию, принимающую строку в качестве аргумента и возвращающую количество гласных, которые содержатся в строке.
    Гласными являются «a», «e», «i», «o», «u».

    Сборник упражнений и задач по JavaScript

    Пару слов о задачнике

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

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

    Чтобы посмотреть результат выполнения исходного кода решения задачи во фрейме кодового блока, используйте кнопку ‘Результат’ .

    Оглавление задачника

    §1.1. Введение в JavaScript

    Напоминаю, на локальном сервере у вас должна быть создана папка ‘test’ , в которой и должны располагаться наши тестируемые файлы: html -страницы, css -таблицы, js -файлы, php -файлы, различные служебные файлы и т.д.

    1. Создайте простейшую веб-страницу, в теле документа которой будет присутствовать только один абзац с произвольным текстом. При помощи внешнего скрипта в заголовке документа выведите сообщение ‘Всем привет от JavaScript!’ . Далее в теле документа перед абзацем используйте встроенный сценарий и выведите сообщение ‘Я — встроенный сценарий JavaScript!’ . Затем после абзаца при помощи второго внешнего скрипта выведите сообщение ‘Я — второй внешний сценарий JavaScript!’ . Показать решение.

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

    Условие задачи №2

    3. Создайте простейшую веб-страницу, в теле документа которой будет присутствовать только один абзац с произвольным текстом. В заголовке документа подключите к страничке внешний скрипт, который будет выводить модальное окно с вопросом «Установить синий цвет шрифта?» . При нажатии на кнопку ‘ОК’ должно выводиться сообщение ‘Извините, краски закончились!’ , а при нажатии на кнопку ‘Cancel’ — ‘Ну, и ладненько!’ . Показать решение.

    4. Создайте простейшую пустую веб-страницу. В теле документа подключите к страничке внешний скрипт, который будет выводить при помощи метода prompt() модальное окно с заголовком «Введите ваш возраст» . По умолчанию в поле ввода должно присутствовать значение по умолчанию ’25’ . При нажатии на кнопку ‘ОК’ должно выводиться сообщение ‘Спасибо, ваш возраст учтен!’ , а при нажатии на кнопку ‘Cancel’ — ‘Ну, и зря!’ . Показать решение.

    Читать еще:  Ошибка 1416 visio

    5. Среди представленных записей укажите литералы: «53» , 53 , ‘Адын кофе’ , a==5 , «a==5» , b . Показать решение.

    6. Перечислите правильно составленные идентификаторы, сопровождая свой выбор пояснениями: f , f2 , d5 , 3d , abc , ABC , $h , h$2 , _h_2 , h_2_ , _$h , 2_h , ruEn , d3.f3 , d3_f3 , d3 f3 , эй_Hey , свободный_дом2 , ухТы. , 3дом_слева , F15 , gggggggggg , d’25’ , s_8 . Показать решение.

    7. Составьте имя переменной в ‘верблюжей’ и ‘змеиной’ нотациях, используя фразу ‘show must go on’ . Показать решение.

    8. Очень внимательно изучите код, представленный ниже. Код не рабочий, т.к. в нем присутствует пара мелких ошибок. Исправьте их, закомментировав часть кода при помощи однострочных или многострочных комментариев (удалять код запрещается. ). Показать решение.

    Условие задачи №8

    9. Объявите переменную fruits . Отдельной инструкцией присвойте ей значение ‘5 яблок’ . Выведите значение переменной сообщением на экран. Показать решение.

    10. Объявите переменную sum . Одной инструкцией объявите две переменных a и b , присвоив им какие-нибудь числа. Присвойте переменной sum сумму переменных a и b . Выведите значение переменной sum на экран. Показать решение.

    Где JavaScript джуну получать тестовые задания для практики?

    JavaScript джуну, как и любому начинающему программисту, необходимо оттачивать навыки. Сайт proglib.io составил подборку ресурсов с уймой тестовых заданий.

    Есть проблема: новички могут сколь угодно штудировать теорию, но с практикой постоянно какая-то беда. Зачастую просто негде брать задания. В ВУЗе или на курсах преподаватели засыпают домашками, но вот с самостоятельным поиском все не так просто. Приходится либо искать уже решенные или, напротив, нерешаемые задачки на Stack Overflow, либо придумывать самому. Наша подборка поможет в этом плане JavaScript джуну, ведь здесь мы собрали ресурсы с готовыми задачами для практики.

    Проверяем начальные знания React, Redux, React-Router + разбор

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

    Автор обеспечил подробный разбор первого ТЗ.

    Усложнение задачи с добавлением Redux Async Actions

    Второе задание из этой серии. Его цель состоит в том, чтобы определить уровень знаний Redux/React/React-Router. Работа с асинхронными запросами, взаимодействие клиента и сервера.

    Расписан внешний вид приложения, бэкэнд и другие моменты.

    Задачи на основы языка JavaScript

    Базис? Да. Но нужно ведь существующему или будущему JavaScript джуну как-то начинать свой путь в веб-разработке. Есть как элементарные задачи, так и посложнее. Отличная возможность «набить руку». К заданиям также прилагаются решения, так что если не хотите сразу уже увидеть результат, не спешите опускать взгляд ниже условия.

    Задачи по JavaScript

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

    Middle JavaScript Developer

    А вот это будет посложнее, поскольку рассчитано на Middle. Тем не менее, можете испытать свои силы. На сайте вакансии от компании CSSSR приведено 3 небольших кейса, сделав которые, можете смело называть себя продвинутым джуном или мидлом. В качестве инструментов для работы используются CodePen, JSFiddle и Plunker.

    «Тут собираем годные задачи»

    Именно так называется тема на одном из форумов. Здесь пользователи делятся не только задачами, но и мнениями по поводу оных. Можно найти и баяны, и что-нибудь новое, пополнив арсенал своих умений. Единственное «но» — оживить беседу уже не получится, так как тема довольно старая, и вряд ли кто-то ответит на возникший вопрос.

    Простые задачи на яваскрипт

    Еще одна неплохая находка на GitHub. Здесь можно не только попрактиковаться, но и узнать кое-что интересное. В начале материала предоставлена ссылка на современный учебник Javascript, который поможет новичку разобраться во всех нюансах и заодно подготовиться к приведенным задачам.

    Тесты

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

    Сборная солянка

    Хорошие ответы можно найти под этим вопросом. Не забывайте, что мы уже успели собрать немало ресурсов для практики в таких статьях, как 27 сайтов с задачками для оттачивания навыков программирования, а также Спортивное программирование и 5 ресурсов для решения задач. Если до сих пор туда не заглянули, самое время ознакомиться 🙂

    Еще один хороший способ откапывать задания — экспериментировать. Например, попробуйте написать приложение погоды или клон Трелло на JavaScript. Наблюдайте за сторонними проектами и старайтесь реализовывать понравившиеся детали: вот лучшая практика.

    Надеемся, наша подборка оказалась вам полезной. Если у вас есть на примете сайты, которые не были затронуты в статье, но заслуживают внимания, пожалуйста, укажите их в комментариях.

    Ссылка на основную публикацию
    Adblock
    detector