Главная » Языки программирования

Практика по языку javascript

Содержание
  1. Практика JavaScript для новичков
  2. 1. Даны 3 инпута и кнопка. По нажатию на кнопку получите числа, стоящие в этих инпутах и запишите их сумму в четвертый инпут.
  3. 2. Даны N инпутов с классом .num и кнопка. По нажатию на кнопку получите числа, стоящие в этих инпутах и запишите их сумму в абзац с .
  4. 3. Дан инпут. В него вводится число. По потери фокуса найдите сумму цифр этого числа.
  5. 4. Дан инпут. В него вводятся числа через запятую. По потери фокуса найдите среднее арифметическое этих чисел (сумма делить на количество).
  6. 5. Дан инпут. В него вводится ФИО через пробел. По потери фокуса запишите фамилию, имя и отчество в отдельные инпуты.
  7. 6. Дан инпут. В него вводится ФИО через пробел. ФИО вводится с маленькой буквы. Сделайте так, чтобы по потери фокуса инпутом, введенные фамилия, имя и отчество автоматически стали записанными с большой буквы (в том же инпуте).
  8. 7. Дан инпут. В него вводится текст. По потери фокуса узнайте количество слов в этом тексте.
  9. 8. Дан инпут. В него вводится текст. По потери фокуса узнайте количество символов в самом длинном слове в этом тексте.
  10. 9. Дан инпут. В него вводится дата в формате 31.12.2016. По потери фокуса в этом же инпуте поставьте эту дату в формате 2016-12-31.
  11. 10. Дан инпут. В него вводится год рождения пользователя. По нажатию на кнопку выведите в абзац ниже сколько пользователю лет.
  12. 11. Дан инпут. В него вводится дата в формате 31.12.2016. По потери фокуса узнайте день недели (словом), который приходится на эту дату.
  13. 12. Дан инпут. В него вводится слово. По нажатию на кнопку проверьте то, что это слово читается с начала и с конца одинаково (например, мадам).
  14. 13. Дан инпут. В него вводится число. Проверьте по вводу, что это число содержит внутри себя цифру 3
  15. 14. Даны N абзацев и кнопка. По нажатию на кнопку запишите в конец каждого абзаца его порядковый номер.
  16. 15. Даны N абзацев с числами. По нажатию на кнопку выведите эти числа в инпут через запятую в порядке возрастания.
  17. 16. Даны ссылки. По загрузке страницы добавьте в конец каждой ссылки ее href в круглых скобках.
  18. 17. Даны ссылки. По загрузке страницы, если ссылка начинается с http://, то добавьте ей в конец стрелку →
  19. 18. Даны N абзацев с числами. По нажатию на любой абзац запишите в него квадрат числа, которое в нем находится.
  20. 19. Даны N абзацев с числами. По нажатию на любой абзац запишите в него квадрат числа, которое в нем находится.
  21. 20. Даны картинки. По первому нажатию на любую картинку увеличьте ее в 2 раза. По второму нажатию — уменьшите обратно.
  22. 21. Даны N картинок размера 30px. По нажатию на картинку под ними эта картинка появляется размером в 50px.
  23. 22. Дан инпут. Реализуйте кнопочки +1, -1, которые будут увеличивать или уменьшать на 1 значение инпута. Сделайте так, чтобы это значение не могло стать меньше нуля.
  24. 23. Дан инпут. В него вводится число. По потери фокуса проверьте, что в нем лежит число от 1 до 100. Если это так — покрасьте инпут в зеленый цвет, а если не так — в красный.
  25. 24. Дан инпут. Выделите любой текст на странице. По окончанию выделения этот текст должен записаться в этот инпут.
  26. 25. Даны абзацы с числами. По нажатию на кнопку найдите абзац, в котором хранится максимальное число, и сделайте его красного цвета.
  27. 26. Дан инпут. Даны абзацы. Пусть в этот инпут записывается суммарное количество нажатий по этим абзацам.
  28. 27. Дан инпут с числом. Сделайте так, чтобы каждую секунду в нем появлялся квадрат того числа, которое в нем записано.
  29. 28. Дан инпут и кнопка. По нажатию на кнопку сгенерируйте случайную строку из 8-ми символов и запишите в инпут.
  30. 29. Модифицируйте предыдущую задачу так, чтобы был еще один инпут, в котором задается длина случайной строки.
  31. 30. Модифицируйте предыдущую задачу так, чтобы был еще один инпут, в котором задаются символы, из которых формируется эта случайна строка. Символы задаются без всяких разделитетей, в одну строку.
  32. 31. Дан абзац. Сделайте так, чтобы каждую секунду он менял свой цвет с красного на зеленый и наоборот.
  33. 32. Дан инпут. В него вводится число. По потери фокуса сделайте так, чтобы в абзаце ниже начал тикать обратный отсчет, начиная с введенного числа. Когда отсчет дойдет до нуля — он должен закончится.
  34. 33. Дан абзац. Дан массив цветов [‘red’, ‘green’, ‘blue’]. Сделайте так, чтобы каждую секунду абзац менял свой цвет на определенное значение их массива: сначала ‘red’, потом ‘green’ и так далее. Как только цвета в массиве закончатся — все начнется сначала. Количество цветов в массиве может быть любым.
  35. 34. Дан абзац. Дан массив строк [‘один’, ‘два’, ‘три’]. Под абзацем ссылка ‘следующая строка’. По заходу на страницу в абзаце должен стоять нулевой элемент этого массива, а по нажатию на ссылку — вставлятся следующий элемент.
  36. 35. Даны инпуты с числами. Произвольное количетсво, пусть три. В первый инпут запишите 1, через секунду во второй инпут запишите 2, еще через секунду в третий инпут 3, потом через секунду в первый инпут запишите 4, во второй 5 и так далее до бесконечности.
  37. 36. Дана ссылка. Дан чекбокс. По нажатию на ссылку меняйте состояние чекбокса с отмеченного на неотмеченное и наоборот.
  38. 37. Даны чекбокс. Дана кнопка. По нажатию на кнопку сделайте все чекбоксы отмеченными.
  39. 38. Спросите у пользователя какой язык (html, css, js, php) он знает с помощью радио кнопочек. Выведите этот язык в абзац.
  40. 39. Спросите у пользователя какие языки (html, css, js, php) он знает с помощью чекбоксов. Выбранные языки должны выводится в абзац ниже через запятую.
  41. 40. Дан чекбокс. Дан инпут. Сделайте так, что если чекбокс отмечен — инпут видимый, если не отмечен — не видимый.
  42. 41. Даны чекбоксы. Под каждым чекбоксом размещен абзац. Сделайте так, что если чекбокс отмечен — соответствующий абзац видимый, а если не отмечен — не видимый.
  43. 42. Дан инпут. Даны li. В инпут пишется номер. Сделайте так, чтобы по вводу числа, li с заданным номером покрасился в красный цвет.
  44. 43. Дан абзац. Даны чекбоксы ‘перечеркнуть’, ‘сделать жирным’, ‘сделать красным’. Если соответствующий чекбокс отмечен — заданное действие происходит с абзацем (становится красным, например). Если чекбоксу снять отметку — действие отменяется.
  45. 44. Дан блок с кнопкой ‘закрыть блок’. По нажатию на эту кнопку блок должен исчезнуть. Кнопка размещается внутри блока и должна исчезнуть вместе с ним. Блоков может быть любое количество, каждый из них закрывает своя кнопка.
  46. 45. В инпут через запятую вводятся страны. По нажатию на кнопку сделайте так, чтобы эти страны записались в ul под инпутом (каждая страна отдельный li).
  47. 46. В инпут вводится страна и нажимается Enter. По нажатию на Enter сделайте так, чтобы введенные страны записывались в абзац под инпутом через запятую. То есть по каждому нажатию Enter в абзац будут добавляться все новые и новые страны.
  48. 47. На странице есть дивы. В них есть текст. Обойдите все дивы и обрежьте тот текст, который в них стоит так, чтобы он стал длиной 10 символов. И добавьте троеточие в конец обрезанного текста
  49. 48. Дана таблица с числами. По нажатию на кнопку найдите ячейку, в которой хранится максимальное число, и сделайте ее фон красным.
  50. 49. Дана таблица с числами. По нажатию на кнопку найдите ячейку, в которой хранится максимальное число, и сделайте ее фон красным.
  51. 50. Дана таблица с числами. По нажатию на кнопку в последний ряд таблицы в каждую ячейку запишите сумму чисел в столбце таблицы, расположенном над определенной ячейкой.
  52. 51. Дана таблица с числами. По нажатию на ячейку она активируется и становится красного цвета. Активировать можно много ячеек. Под таблицей кнопка. По нажатию по этой кнопке в абзац ниже выведите сумма активированных ячеек. Реализуйте кнопку ‘сбросить активированные ячейки’.
  53. 52. Дана таблица. По нажатию на ячейку в ней появляется инпут с содержимым этой ячейки и кнопка сохранить. Можно поредактировать текст в инпуте, сохранить — и текст ячейки поменяется.
  54. 53. Реализуйте раскрывающийся список. По умолчанию есть список стран (ul), по нажатию на страну внутри li со страной появляется список городов.
  55. JavaScript Упражнения
  56. Упражнения
  57. Посмотрите свой счет
  58. Начать упражнения JavaScript
  59. Онлайн сертификация Schoolsw3
  60. ВЫБОР ЦВЕТА
  61. Сообщить об ошибке
  62. Ваше предложение:
  63. Спасибо Вам за то, что помогаете!
Читайте также:  Чат бот vk api python

Практика JavaScript для новичков

1. Даны 3 инпута и кнопка. По нажатию на кнопку получите числа, стоящие в этих инпутах и запишите их сумму в четвертый инпут.

2. Даны N инпутов с классом .num и кнопка. По нажатию на кнопку получите числа, стоящие в этих инпутах и запишите их сумму в абзац с .

3. Дан инпут. В него вводится число. По потери фокуса найдите сумму цифр этого числа.

4. Дан инпут. В него вводятся числа через запятую. По потери фокуса найдите среднее арифметическое этих чисел (сумма делить на количество).

Среднее арефметическое цифр =

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

6. Дан инпут. В него вводится ФИО через пробел. ФИО вводится с маленькой буквы. Сделайте так, чтобы по потери фокуса инпутом, введенные фамилия, имя и отчество автоматически стали записанными с большой буквы (в том же инпуте).

7. Дан инпут. В него вводится текст. По потери фокуса узнайте количество слов в этом тексте.

8. Дан инпут. В него вводится текст. По потери фокуса узнайте количество символов в самом длинном слове в этом тексте.

В самом длинном слове символов =

9. Дан инпут. В него вводится дата в формате 31.12.2016. По потери фокуса в этом же инпуте поставьте эту дату в формате 2016-12-31.

10. Дан инпут. В него вводится год рождения пользователя. По нажатию на кнопку выведите в абзац ниже сколько пользователю лет.

11. Дан инпут. В него вводится дата в формате 31.12.2016. По потери фокуса узнайте день недели (словом), который приходится на эту дату.

12. Дан инпут. В него вводится слово. По нажатию на кнопку проверьте то, что это слово читается с начала и с конца одинаково (например, мадам).

13. Дан инпут. В него вводится число. Проверьте по вводу, что это число содержит внутри себя цифру 3

14. Даны N абзацев и кнопка. По нажатию на кнопку запишите в конец каждого абзаца его порядковый номер.

Добавить порядковый номер

Читайте также:  Javascript строка ввода данных

15. Даны N абзацев с числами. По нажатию на кнопку выведите эти числа в инпут через запятую в порядке возрастания.

16. Даны ссылки. По загрузке страницы добавьте в конец каждой ссылки ее href в круглых скобках.

17. Даны ссылки. По загрузке страницы, если ссылка начинается с http://, то добавьте ей в конец стрелку →

18. Даны N абзацев с числами. По нажатию на любой абзац запишите в него квадрат числа, которое в нем находится.

19. Даны N абзацев с числами. По нажатию на любой абзац запишите в него квадрат числа, которое в нем находится.

20. Даны картинки. По первому нажатию на любую картинку увеличьте ее в 2 раза. По второму нажатию — уменьшите обратно.

21. Даны N картинок размера 30px. По нажатию на картинку под ними эта картинка появляется размером в 50px.

img img img

22. Дан инпут. Реализуйте кнопочки +1, -1, которые будут увеличивать или уменьшать на 1 значение инпута. Сделайте так, чтобы это значение не могло стать меньше нуля.

23. Дан инпут. В него вводится число. По потери фокуса проверьте, что в нем лежит число от 1 до 100. Если это так — покрасьте инпут в зеленый цвет, а если не так — в красный.

24. Дан инпут. Выделите любой текст на странице. По окончанию выделения этот текст должен записаться в этот инпут.

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

26. Дан инпут. Даны абзацы. Пусть в этот инпут записывается суммарное количество нажатий по этим абзацам.

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

28. Дан инпут и кнопка. По нажатию на кнопку сгенерируйте случайную строку из 8-ми символов и запишите в инпут.

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

30. Модифицируйте предыдущую задачу так, чтобы был еще один инпут, в котором задаются символы, из которых формируется эта случайна строка. Символы задаются без всяких разделитетей, в одну строку.

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

Абзац изменяющий цвет каждую секунду

Читайте также:  Css scroll snap carousel

32. Дан инпут. В него вводится число. По потери фокуса сделайте так, чтобы в абзаце ниже начал тикать обратный отсчет, начиная с введенного числа. Когда отсчет дойдет до нуля — он должен закончится.

33. Дан абзац. Дан массив цветов [‘red’, ‘green’, ‘blue’]. Сделайте так, чтобы каждую секунду абзац менял свой цвет на определенное значение их массива: сначала ‘red’, потом ‘green’ и так далее. Как только цвета в массиве закончатся — все начнется сначала. Количество цветов в массиве может быть любым.

Абзац меняющий цвет, цвета берет из массива

34. Дан абзац. Дан массив строк [‘один’, ‘два’, ‘три’]. Под абзацем ссылка ‘следующая строка’. По заходу на страницу в абзаце должен стоять нулевой элемент этого массива, а по нажатию на ссылку — вставлятся следующий элемент.

35. Даны инпуты с числами. Произвольное количетсво, пусть три. В первый инпут запишите 1, через секунду во второй инпут запишите 2, еще через секунду в третий инпут 3, потом через секунду в первый инпут запишите 4, во второй 5 и так далее до бесконечности.

36. Дана ссылка. Дан чекбокс. По нажатию на ссылку меняйте состояние чекбокса с отмеченного на неотмеченное и наоборот.

37. Даны чекбокс. Дана кнопка. По нажатию на кнопку сделайте все чекбоксы отмеченными.

38. Спросите у пользователя какой язык (html, css, js, php) он знает с помощью радио кнопочек. Выведите этот язык в абзац.

Какой язык программирования вы знаете?

39. Спросите у пользователя какие языки (html, css, js, php) он знает с помощью чекбоксов. Выбранные языки должны выводится в абзац ниже через запятую.

Какой язык программирования вы знаете?

40. Дан чекбокс. Дан инпут. Сделайте так, что если чекбокс отмечен — инпут видимый, если не отмечен — не видимый.

Какой язык программирования вы знаете?

41. Даны чекбоксы. Под каждым чекбоксом размещен абзац. Сделайте так, что если чекбокс отмечен — соответствующий абзац видимый, а если не отмечен — не видимый.

Абзац видимый или невидимый

Абзац видимый или невидимый

Абзац видимый или невидимый

Абзац видимый или невидимый

42. Дан инпут. Даны li. В инпут пишется номер. Сделайте так, чтобы по вводу числа, li с заданным номером покрасился в красный цвет.

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

Перечеркнуть Сделать жирным Сделать красным

44. Дан блок с кнопкой ‘закрыть блок’. По нажатию на эту кнопку блок должен исчезнуть. Кнопка размещается внутри блока и должна исчезнуть вместе с ним. Блоков может быть любое количество, каждый из них закрывает своя кнопка.

45. В инпут через запятую вводятся страны. По нажатию на кнопку сделайте так, чтобы эти страны записались в ul под инпутом (каждая страна отдельный li).

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

47. На странице есть дивы. В них есть текст. Обойдите все дивы и обрежьте тот текст, который в них стоит так, чтобы он стал длиной 10 символов. И добавьте троеточие в конец обрезанного текста

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis numquam sequi sunt. Aspernatur officiis pariatur repellat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis numquam sequi sunt. Aspernatur officiis pariatur repellat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis numquam sequi sunt. Aspernatur officiis pariatur repellat.

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

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

50. Дана таблица с числами. По нажатию на кнопку в последний ряд таблицы в каждую ячейку запишите сумму чисел в столбце таблицы, расположенном над определенной ячейкой.

51. Дана таблица с числами. По нажатию на ячейку она активируется и становится красного цвета. Активировать можно много ячеек. Под таблицей кнопка. По нажатию по этой кнопке в абзац ниже выведите сумма активированных ячеек. Реализуйте кнопку ‘сбросить активированные ячейки’.

52. Дана таблица. По нажатию на ячейку в ней появляется инпут с содержимым этой ячейки и кнопка сохранить. Можно поредактировать текст в инпуте, сохранить — и текст ячейки поменяется.

53. Реализуйте раскрывающийся список. По умолчанию есть список стран (ul), по нажатию на страну внутри li со страной появляется список городов.

  • Россия
    • Город 1
    • Город 2
    • Город 3
    • Город 4
    • Город 1
    • Город 2
    • Город 3
    • Город 4

    Источник

    JavaScript Упражнения

    Вы можете проверить свои навыки JavaScript с помощью упражнений Schoolsw3.

    Упражнения

    Мы собрали множество упражнений на JavaScript (с ответами) для каждой главы JavaScript.

    Попробуйте решить упражнение, отредактировав код, или поcмотреть ответ, чтобы увидеть, что вы сделали не так.

    Посмотрите свой счет

    Вы получите 1 балл за каждый правильный ответ. Ваш счет и общий счет всегда будут отображаться.

    Начать упражнения JavaScript

    Если вы не знаете JavaScript, предлагаем вам прочитать Учебник JavaScript с нуля.

    Онлайн сертификация Schoolsw3

    Идеальное решение для профессионалов, которым необходимо совмещать работу, семью и карьеру.

    Уже выдано более 25 000 сертификатов!

    HTML Сертификат документирует ваши знания HTML.

    CSS Сертификат документирует ваши знания современного CSS.

    JavaScript Сертификат документирует ваши знания JavaScript и HTML DOM.

    Python Сертификат документирует ваши знания Python.

    jQuery Сертификат документирует ваши знания jQuery.

    SQL Сертификат документирует ваши знания SQL.

    PHP Сертификат документирует ваши знания PHP и MySQL.

    XML Сертификат документирует ваши знания XML, XML DOM и XSLT.

    Bootstrap Сертификат документирует ваши знания the Bootstrap framework.

    Мы только что запустили
    SchoolsW3 видео

    ВЫБОР ЦВЕТА

    colorpicker

    Сообщить об ошибке

    Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

    Ваше предложение:

    Спасибо Вам за то, что помогаете!

    Ваше сообщение было отправлено в SchoolsW3.

    ТОП Учебники
    ТОП Справочники
    ТОП Примеры
    Получить сертификат

    SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

    Источник

Оцените статью
© 2024 Программирование