Задачи по javascript

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

Учебник JavaScript

Практика

Работа с DOM

Практика

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

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

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

Регулярки

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

Разное

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

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

Практика

• урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
  Работа с
  AJAX в JavaScript —>
  Работа с
  AJAX + PHP —>

Контекст

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

Drag-and-Drop

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

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

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

Практика

Promise ES6

Библиотека jQuery

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

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

Учебник JavaScript

Практика

Работа с DOM

Практика

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

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

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

Регулярки

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

Разное

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

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

Практика

• урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
  Работа с
  AJAX в JavaScript —>
  Работа с
  AJAX + PHP —>

Контекст

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

Drag-and-Drop

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

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

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

Практика

Promise ES6

Библиотека jQuery

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

Собеседование на должность JavaScript-разработчика: популярные задачи с разбором решений

• Переводы, 16 марта 2019 в 13:28
• Klara Oswald

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

Проблема распространённых задач заключается в том, что они не имеют никакого отношения к реальной работе, особенно когда речь идёт о frontend. На собеседовании не хватает простых вопросов, например о совместимости браузера, вёрстке или событиях DOM.

Специалисты по подбору сотрудников, которые поддерживают такой подход, часто говорят что-то вроде:

— Я бы предпочёл нанять умного человека и научить его Х, чем нанять человека, который знает всё об Х, но ему не хватает творчества, логики и умения рассуждать.

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

Подготовка к собеседованию

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

• Готовьтесь заранее. Определите приоритет в подготовке, изучайте менее знакомые темы и много практикуйтесь. Если у вас нет опыта работы в области компьютерных наук, обязательно ознакомьтесь с некоторыми фундаментальными темами, касающимися алгоритмов и структур данных. Существуют онлайн-платформы, как платные, так и бесплатные, которые предлагают отличные способы отработать свои навыки прохождения собеседований. GeeksforGeeks, Pramp, Interviewing.io и CodeSignal — лишь некоторые из них.
• Тренируйтесь мыслить вслух, когда пытаетесь найти решение. Фактически, раскрыть ваш ход мыслей в обстановке собеседования предпочтительнее, чем тратить всё доступное время на написание кода в полной тишине. Ваши слова дадут интервьюеру шанс помочь, если вы ошибётесь. Это также подчеркнёт ваши навыки общения.
• Осознайте задачу, прежде чем начать её решать. Это важно. Иначе вы потратите время на размышления о неверной задаче. Кроме того, это заставит задуматься над вопросами, которые вы можете задать интервьюеру.
• Практикуйте написание кода вручную. Это поможет, если вам предложат использовать доску, где нет автозаполнения, форматирования и т. д. При подготовке пробуйте записать свой код на листе бумаги или доске вместо того, чтобы держать всё в голове.

Стандартные задачи на JavaScript

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

Палиндром

Палиндром — это слово, предложение или последовательность символов, которая читается слева направо так же, как и справа налево. Например, «racecar» и «Anna» являются палиндромами, а «Table» и «John» — нет.

Формулировка задачи

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

Логическое решение задачи

Эта задача строится на идее перевернуть строку задом наперёд. Если обратная строка совпадает с исходной, то это палиндром, и функция должна вернуть значение true. И наоборот, если обратная строка не совпадает с исходной, функция должна вернуть значение false.

Практическое решение

Вот один из способов решения задачи палиндрома:

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

Ивент перенесён, есть новые даты ( 16 – 17 июня ) , Санкт-Петербург, 10 750–138 000 ₽

Далее переворачиваем исходную строку. Это можно сделать, преобразовав строку в массив с помощью метода .split() (библиотека String), затем перевернув массив методом .reverse() (библиотека Array) и, наконец, преобразовав обратный массив снова в строку с помощью метода .join() (библиотека Array).

Остаётся сравнить перевёрнутую строку с исходной и вернуть результат в виде true или false.

FizzBuzz

Это очень популярная задача на собеседованиях.

Формулировка задачи

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

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

Логическое решение задачи

Один важный момент в FizzBuzz — способ поиска кратных чисел в JavaScript. Это делается с помощью оператора модуля или остатка — %, который возвращает остаток от деления двух чисел. Остаток 0 означает, что первое число кратно второму:

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

Практическое решение

Вот одно из решений, которое вы можете использовать для задачи FizzBuzz:

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

Анаграмма

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

Формулировка задачи

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

Логическое решение задачи

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

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

Затем обратите внимание на пограничные случаи задачи:

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

Практическое решение

Вот как можно подойти к решению этой задачи:

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

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

Найти гласные

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

Формулировка задачи

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

Практическое решение

Вот простое решение задачи с гласными:

На что следует обратить внимание — это использование метода .includes() . Он доступен как для строк, так и для массивов. Вы можете использовать его, чтобы определить, содержит ли массив определённое значение. Метод возвращает true, если массив содержит указанное значение, и false, если нет.

Существует также более краткое решение этой проблемы:

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

Фибоначчи

Эта статья не была бы полной без задачи Фибоначчи — классического вопроса, с которым вы наверняка столкнётесь во время собеседования.

Последовательность Фибоначчи — это порядок чисел, где каждое последующее число является суммой двух предыдущих. Например, первые десять чисел последовательности выглядят так: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Формулировка задачи

Напишите функцию, которая возвращает n-ую запись в последовательности, где n — это число, которое вы передаёте в качестве аргумента функции.

Логическое решение задачи

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

Практическое решение

Вот как может выглядеть решение с помощью цикла:

Массив результатов уже содержит первые два числа в своём ряду, потому что каждая запись в ряду Фибоначчи состоит из суммы двух предыдущих чисел. Изначально у вас нет двух чисел, которые вы можете взять для получения следующего числа, поэтому цикл не может сгенерировать их автоматически. Однако вы знаете, что первые два числа всегда 0 и 1, поэтому вручную инициализируете массив результатов этими двумя числами.

Теперь попробуем рекурсивный подход:

Вы продолжаете вызывать fibonacci() , передавая всё меньшие и меньшие числа в качестве аргументов, пока не достигнете уже известного случая, где переданный аргумент равен 0 или 1.

Заключение

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

Ещё больше IT-задач для собеседований с разбором решений можно найти здесь.

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

Палитра цветов и заготовка кода:

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

Для начала разберем, javaScript – что это такое и зачем он необходим в html?
Javascript — это алгоритмический язык программирования.

Рассмотрим схему взаимодействие браузера с сервером — клиент-серверную схему. Принцип работы строится на схеме запрос-ответ. Мы вбиваем адрес в строке адреса браузера, браузер отсылает запрос на сервер: «необходим такой-то ресурс». Сервер обрабатывает запрос и выдает ответ в виде html-страницы.

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

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

Однако, язык html – декларативный язык, и он не может выполнять алгоритмические конструкции. Поэтому в середине 90-х годов прошлого века возникла идея встроить в html еще один язык, простой, и с его помощью выполнять простые программы без запроса-ответа к серверу. Идея появилась у программистов компании Netscape Communications. Они разработали javaScript — алгоритмический язык программирования и встроили в свой браузер Netscape Navigator. Назывался язык lifeScript (живой сценарий).

В середине 90 была популярна платформа java. Данный язык был настолько новаторским и популярным, что бытовало мнение, что в скором времени все будут программировать на java. Поэтому программисты Netscape переименовали свой lifeScript в javaScript и сделали синтаксис похожим, позаимствовав некоторые основные конструкции. Однако, javaScript и java — это два совершенно разных языка. В дальнейшем поддержку javaScript добавили и в другие браузеры. Стали разрабатывать и принимать стандарты javaScript (ECMA).

Итак, кратко по истории JavaScript:

• Разработан в Netscape Communications как язык сценариев для обозревателей Netscape Navigator, начиная с версии 2.0 (декабрь 1995 ) (на основе языка Java от Sun Microsystems). Язык LifeScript =>JavaScript
• К разработке подключается корпорация Microsoft, чьи обозреватели Internet Explorer поддерживают JavaScript, начиная с версии 3.0. В Internet Explorer JavaScript носит название Jscript
• В июне 1997 г. была принята первая версия стандарта под названием ECMAScript (ECMA-262) – официальное название 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 + » баллов»);

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

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

Задача на циклы и массивы на 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.

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

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

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

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

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

Комментарии ( 0 ):

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

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