Пропустить навигацию

Практика 5

Задание

  1. В примере DOM.html реализован список, порядок элементов в котором изменяется при срабатывании события onclick. Создайте дополнительно две кнопки. При нажатии на первую, в список должен добавляться новый элемент, при нажатии на вторую должен удаляться один из элементов списка. (appendChild, removeChild, insertBefore)
  2. Напишите функцию getAttributes(), с помощью которой можно получить атрибуты  href, hreflang, rel, target, и type для ссылки, указанной в примере values_of_a_link.html.
  1. Создайте страницу, которая содержит:
    • таблицу из двух столбцов и семи строк, которая будет содержать следующую информацию: разрешение экрана по горизонтали, разрешение экрана по вертикали, ширину доступной области экрана (availWidth), высоту доступной области экрана (availHeight), информацию о платформе (ОС), информацию о браузере. Пример шапки таблицы:

Свойство Значение
разрешение экрана по горизонтали 1280
... ...
... ...

    • кнопку, нажатие на которую увеличивает ширину этой кнопки на 15 пикселей.
    • произвольный абзац текста и две кнопки, при нажатии на первую стиль текста данного абзаца изменяется на «цвет – синий, размер – 16pt», на вторую «цвет – коричневый, размер – 24pt». (js_style.html)
  1. В примере insertRow.html напишите функцию, которая добавляет строку к имеющейся таблице
  2. Добавьте на веб-страницу day_night.html какое-нибудь содержимое (несколько абзацев текста). Сделайте две радио-кнопки под текстом (одновременно может быть выбрана только одна из них). Эти кнопки должны обеспечивать пользователю возможность настройки яркости экрана (дневной и ночной режим). Когда выбрана кнопка «дневной режим» - цвет текста должен быть чёрным, экран – белым. Когда выбрана кнопка «ночной режим» - цвет текста должен быть белым, экран – чёрным. Количество кнопок и соответствующих режимов может быть больше (на ваше усмотрение) (getElementById, backgroundColor).

 

Исходный код:

файл day_night.html

<!DOCTYPE html>                           
<html>
<head>
<script>

function changeMode(mode){
if(mode == "day"){

}
</script>
</head>
<body style="" id="main">
<p style="margin:4% 9% 4% 9%">
Сделайте две радио-кнопки под текстом (одновременно может быть выбрана только одна из них). Эти кнопки должны обеспечивать пользователю возможность настройки яркости экрана (дневной и ночной режим). Когда выбрана кнопка «дневной режим» - цвет текста должен быть чёрным, экран – белым. Когда выбрана кнопка «ночной режим» - цвет текста должен быть белым, экран – чёрным. Количество кнопок и соответствующих режимов может быть больше (на ваше усмотрение)
</p>
<div style="margin-left:10%;">
<input type="radio" value="day" name="mode" id="day" checked 
onclick="return changeMode(this.value)">
Day
<input type="radio" value="night" name="mode" id="night"
onclick="return changeMode(this.value)">
Night
</div>
</body>
</html>

файл DOM.html

<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>
<title>jtjjtj</title>
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">

	<p>Щелкните на элемент, чтобы поднять его в списке.</p>
	<ol>
	<li onclick="move(this)">Мясо</li>
	<li onclick="move(this)">Молоко</li>
	<li onclick="move(this)">Яйца</li>
	<li onclick="move(this)">Рыба</li>
	<li onclick="move(this)">Соки</li>
	<li onclick="move(this)">Воды</li>
	</ol>
	<script>
	    function move(o){
	        var parent = o.parentNode;
	        parent.removeChild(o);
        parent.insertBefore(o, parent.firstChild);
    }
</script>

</body>

</html>

файл insertRow.html

<!DOCTYPE html>
<html><head>
<meta charset=utf-8 />
<title>Lesson 8 Task 5</title>
</head><body>
<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="Insert row"> 
  </body></html>

файл js_style.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>DOM paragraph style</title>
</head> 
<body>
<p id ='text'>JavaScript is a powerful, complicated, and often misunderstood computer language. It enables the rapid development of applications in which users can enter data and view results easily.</p> 
<div>
<button id="jsstyle"
onclick="js_style()">Style</button>
</div>
</body>
</html>

файл values_of_a_link.html


<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Lesson 8 Task 3</title>
</head>
<body>
<p><a id="example" type="text/html" hreflang="en-us" rel="nofollow" target="_self" href="http://www.example.com/">Example.com</a></p>
<button onclick="getAttributes()">Click here to get the attribute's value</button>  

 </body>
</html>