JavaScript DOM - упражнения, практика, решение

Последнее обновление 9 февраля 2019 08:35:01 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

JavaScript DOM [13 упражнений с решением]

[ Внизу страницы доступен редактор для написания и выполнения сценариев. ]

1. Вот пример HTML-файла с кнопкой отправки. Теперь измените стиль текста абзаца через код JavaScript. Перейти к редактору
Пример HTML-файла:

 <! DOCTYPE html>
<HTML> 
 <Голова>
<meta charset = utf-8 />
<title> Стиль абзаца JS DOM </ title>
</ HEAD> 
<Тело>
<p id = 'text'> JavaScript-упражнения - w3resource </ p> 
<DIV>
<button id = "jsstyle"
OnClick = "js_style ()"> Стиль </ кнопка>
</ DIV>
</ Body>
</ Html>

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

2. Напишите функцию JavaScript, чтобы получить значения имени и фамилии следующей формы. Перейти к редактору
Пример HTML-файла:

 <! DOCTYPE html>
<HTML> <HEAD>
<meta charset = utf-8 />
<title> Вернуть имя и фамилию из формы - w3resource </ title>
</ HEAD> <тело>
<form id = "form1" onsubmit = "getFormvalue ()">
Имя: <input type = "text" name = "fname" value = "David"> <br>
Фамилия: <input type = "text" name = "lname" value = "Бекхэм"> <br>
<input type = "submit" value = "Submit">
</ Форма>
</ Body>
</ Html>

Нажмите меня, чтобы увидеть решение

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

4. Вот пример HTML-файла с кнопкой отправки. Напишите функцию JavaScript, чтобы получить значения атрибутов href, hreflang, rel, target и type указанной ссылки. Перейти к редактору

 <! DOCTYPE html>
<HTML> <HEAD>
<meta charset = utf-8 />
</ HEAD>
<Тело>
<p> <a id="w3r" type="text/html" hreflang="en-us" rel="nofollow" target="_self" href="/"> w3resource </a> </ p>
<button onclick = "getAttributes ()"> Нажмите здесь, чтобы получить значение атрибутов </ button>
</ Body> </ html>

Нажмите меня, чтобы увидеть решение

5. Напишите функцию JavaScript для добавления строк в таблицу. Перейти к редактору
Пример HTML-файла:

 <! DOCTYPE html>
<HTML> <HEAD> 
 <meta charset = utf-8 />
<title> Вставить строку в таблицу - w3resource </ title>
</ HEAD> <тело>
<table id = "sampleTable" border = "1">
<tr> <td> Row1 cell1 </ td>
<td> Row1 cell2 </ td> </ tr>
<tr> <td> Row2 cell1 </ td>
<td> Row2 cell2 </ td> </ tr>
</ Table> <br>
<input type = "button" onclick = "insert_Row ()" value = "Вставить строку"> 
</ Body> </ html>

Нажмите меня, чтобы увидеть решение

6. Напишите функцию JavaScript, которая принимает строку, столбец (для идентификации конкретной ячейки) и строку для обновления содержимого этой ячейки. Перейти к редактору
Пример HTML-файла:

 <! DOCTYPE html>
<HTML> <HEAD> 
 <meta charset = utf-8 />
<title> Изменить содержимое ячейки </ title>
</ HEAD> <тело>
<table id = "myTable" border = "1">
<tr> <td> Row1 cell1 </ td>
<td> Row1 cell2 </ td> </ tr>
<tr> <td> Row2 cell1 </ td>
<td> Row2 cell2 </ td> </ tr>
<tr> <td> Row3 cell1 </ td>
<td> Row3 cell2 </ td> </ tr>
</ Таблица> <форма>
<input type = "button" onclick = "changeContent ()" value = "Изменить содержимое">
</ Форма> </ тело> </ HTML>

Нажмите меня, чтобы увидеть решение

7. Напишите функцию JavaScript, которая создает таблицу, принимает от пользователя строку, номера столбцов и вводит номер столбца строки в качестве содержимого (например, Row-0 Column-0) ячейки. Перейти к редактору
Пример HTML-файла:

 <! DOCTYPE html>
<HTML>
<Голова>
<meta charset = utf-8 />
<title> Изменить содержимое ячейки </ title>
<style type = "text / css">
body {margin: 30px;}
</ Стиль>  
</ HEAD> <тело>
<table id = "myTable" border = "1">
</ Таблица> <форма>
<input type = "button" onclick = "createTable ()" value = "Создать таблицу">
</ Форма> </ тело> </ HTML>

Нажмите меня, чтобы увидеть решение

8. Напишите программу на JavaScript для удаления элементов из выпадающего списка. Перейти к редактору
Пример HTML-файла:

 <! DOCTYPE html>
<HTML> <HEAD>
<meta charset = utf-8 />
<title> Удалить элементы из выпадающего списка </ title>
</ HEAD> <BODY> <форма>
<select id = "colorSelect">
<Опция> Красный </ вариант>
<Опция> Зеленый </ вариант>
<Опция> белый </ вариант>
<Опция> Черный </ вариант>
</ Выберите>
<input type = "button" onclick = "removecolor ()" value = "Выбрать и удалить"> 
 </ Форма> </ тело> </ HTML>

Нажмите меня, чтобы увидеть решение

9. Напишите программу на JavaScript для подсчета и отображения элементов раскрывающегося списка в окне предупреждения. Перейти к редактору
Пример HTML-файла:

 <! DOCTYPE html>
<HTML> <HEAD>
<meta charset = utf-8 />
<style type = "text / css">
body {margin: 30px;}
</ Стиль>   
<title> Подсчет и отображение элементов раскрывающегося списка - w3resource </ title>
</ HEAD> <BODY> <форма>
Выберите ваш любимый цвет:
<select id = "mySelect">
<Опция> Красный </ вариант>
<Опция> Зеленый </ вариант>
<Опция> Синий </ вариант>
<Опция> белый </ вариант>
</ Выберите>
<input type = "button" onclick = "getOptions ()" value = "Подсчитать и вывести все элементы">
</ Форма> </ тело> </ HTML>

Нажмите меня, чтобы увидеть решение

10. Напишите программу на JavaScript для расчета объема сферы. Перейти к редактору
Пример вывода формы:

«объем

Нажмите меня, чтобы увидеть решение

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

«http://farm4.staticflickr.com/3691/11268502654_f28f05966c_m.jpg», ширина: «240», высота: «160»
«http://farm1.staticflickr.com/33/45336904_1aef569b30_n.jpg», ширина: «320», высота: «195»
«http://farm6.staticflickr.com/5211/5384592886_80a512e2c9.jpg», ширина: «500», высота: «343»

Нажмите меня, чтобы увидеть решение

12. Напишите программу на JavaScript, чтобы выделить жирные слова следующего абзаца, наведя указатель мыши на определенную ссылку. Перейти к редактору
Пример ссылки и текста :
[ При наведении мыши здесь будут выделены жирные слова следующего абзаца ]
Мы только начали этот раздел для пользователей (от начального до среднего), которые хотят работать с различными проблемами JavaScript и писать сценарии онлайн, чтобы проверить свои навыки JavaScript.
Нажмите меня, чтобы увидеть решение

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

Еще не все !

* Чтобы запустить код, наведите курсор мыши на панель результатов и нажмите кнопку «RERUN». *

Демонстрация в реальном времени:

См. Javascript-common-editor Pen от w3resource ( @ w3resource ) в CodePen .