Примеры javascript на практике

Практика 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 абзацев и кнопка. По нажатию на кнопку запишите в конец каждого абзаца его порядковый номер.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 на простом примере галереи

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

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

  var idx = 0; var count = 0; var pictures = ['001.png', '002.png', '002.png', '001.png', '001.png', '001.png', '002.png', '001.png', '002.png', '001.png', '002.png', '001.png', '001.png', '001.png', '002.png', '001.png', '001.png', '002.png', '002.png', '001.png'] window.onload = function() < var next = document.getElementById('next'); var previous = document.getElementById('back') next.onclick = getNextPage; previous.onclick = getPreviousPage; getNumericButtons(); addImagesToPaginator(); window.addEventListener('keyup', handler, false); >function handler(event) < var KEY_CODE = < LEFT:37, RIGHT:39 >; var numericButtons = document.getElementById('numericButtons'); var quantityPagesInPgn = getQuantityPagesOfPaginator()-1; switch (event.keyCode) < case KEY_CODE.LEFT: if (count == 0) < break; >getPreviousPage(); break; default: if (count == quantityPagesInPgn) < break; >getNextPage(); break; > > function addImagesToPaginator() < var numericButtons = document.getElementById('numericButtons'); var imgPath = 'static/img/'; var next = document.getElementById('next'); var previous = document.getElementById('back') var bodyContainer = document.getElementById('bodyContainer'); var quantityImgsOnPage = 8; var img = document.createElement('IMG'); img.className = 'imgContainer'; for (var i=0; i> //activate and deactivate buttons next and back if (idx else if (idx >= pictures.length) < next.disabled = true; numericButtons.lastChild.disabled = true; >> function removeImagesFromPaginator() < var bodyContainer = document.getElementById('bodyContainer'); while (bodyContainer.hasChildNodes()) < bodyContainer.removeChild(bodyContainer.firstChild); >> function getNextPage() < count += 1; console.log('count_next', count) var numericButtons = document.getElementById('numericButtons'); var previous = document.getElementById('back'); var buttonsArray = numericButtons.getElementsByTagName('INPUT'); previous.disabled = false; removeImagesFromPaginator(); addImagesToPaginator(); buttonsArray[count].disabled = true; if (count >0 ) < buttonsArray[count-1].disabled = false; >> function getPreviousPage() < count -= 1; console.log('count_back', count) var bodyContainer = document.getElementById('bodyContainer'); var numericButtons = document.getElementById('numericButtons'); var next = document.getElementById('next'); var buttonsArray = numericButtons.getElementsByTagName('INPUT'); var imagesOnPage = bodyContainer.getElementsByTagName('IMG').length; next.disabled = false; idx = idx-imagesOnPage-8; removeImagesFromPaginator(); addImagesToPaginator(); buttonsArray[count].disabled = true; if (count >= 0 ) < buttonsArray[count+1].disabled = false; >> function getQuantityPagesOfPaginator() < // function returning quantity pages of pagination var count = 8; var quantity = 1; while (true) < count += 8; quantity += 1; if (count >= pictures.length) < return quantity; >> > function getNumericButtons() < var quantityPagesInPgn = getQuantityPagesOfPaginator(); var numericButtons = document.getElementById('numericButtons'); var numericButton = document.createElement('INPUT'); numericButton.type = 'button'; for (var val = 1; val var allNumericButtons = numericButtons.getElementsByTagName('INPUT'); for (var i = 0; i < allNumericButtons.length; i++) < allNumericButtons[i].onclick = getActionForNumericButtons; >> function getActionForNumericButtons() < var buttonsArray = numericButtons.getElementsByTagName('INPUT'); buttonsArray[count].disabled = false; this.disabled = true; count = parseInt(this.value) -1; idx = (parseInt(this.value)*8)-8; removeImagesFromPaginator(); addImagesToPaginator(); var next = document.getElementById('next'); var previous = document.getElementById('back') if (count >0) < previous.disabled = false; >else < previous.disabled = true; >if (count+1 == buttonsArray.length) < next.disabled = true; >else < next.disabled = false; >> 

  Вот, что у меня получилось:

  

  Теперь как и обещал объясню, что это было:

  — Завожу два счетчика, первый-idx следит за изображением в массиве с изображениями, чтобы знать на каком из них мы остановились и с какого изображения начинать генерировать следующую страницу галереии и второй-count для генерации требуемого количества пронумерованных кнопок пагинатора, количеством равным всем страницам галереи, зависящим от общего числа имен файлов изображений в массиве pictures.

  — В window.onload добавляю все, что произойдет при полной загрузке html страницы. Вешаю на кнопки переключения сраниц, функции, которые запустятся по событию – нажатия кнопки.

  — Инициализирую две функции генерации изображений-addImagesToPaginator() на первой странице галереи и кнопок-getNumericButtons() равным общему количеству страниц галереи.

  Теперь пробежимся по сопутствующему функционалу логической цепочки:

  —handler() — функция, отвечает за перелистывание страниц стрелками вперед, назад.

  —addImagesToPaginator() — добавляет изображения на страницу

  —removeImagesFromPaginator() — удаляет все изображения со страницы. Это понадобится когда пользователь обратиться к предыдущей странице, чтобы сгенерировать на текущей странице элементы с предыдущей страницы, контролируются элементы переменной idx, как я уже писал.

  —getNextPage() и getPreviousPage() — запускаются по событию обращения к следующей и предыдущей страницам.
  —getQuantityPagesOfPaginator() — возвращает общее количество страниц галереи, это необходимо для генерации нумерованных кнопок навигации по страницам.

  —getNumericButtons() — генерирует те самые навигационные кнопки пагинатора.

  —getActionForNumericButtons() — контролирует действия нумерованных кнопок.

  Спасибо за внимание, всем удачного рабочего времени.

  Источник