Санкт-Петербургский государственный университет телекоммуникаций
имени профессора Бонч-Бруевича
Отчет к лабораторной работе №2 «JavaScript»
по предмету «Интернет-технологии»
Выполнил: студент группы
ИСТ-82 Тимошенко С.В.
Преподаватель: Айвазян В.Б.
Санкт-Петербург
2012
Задание 1 <html>
<head>
<title>Задание 1</title>
</head>
<body onload="window.open('1.1.html')">
<button onclick="window.open('1.1.html')">Щелкните для открытия новой страницы</button>
<br/><br/><br/>
<button ondblclick="window.open('1.1.html')">Щелкните дважды для открытия новой страницы</button>
</body>
</html>
Задание 2 <html>
<head>
<title>Задание 2</title>
</head>
<body>
<button onclick="start()">Войти в систему</button>
</body>
<script type="text/javascript">
function start() {
alert("Вход в систему");
do {
var username = prompt("Введите имя пользователя");
} while (!confirm("Вы ввели: " + username + ". Верно?"));
If (!confirm("Продолжить работу с системой?")) {
return;
}
If (!confirm("Вы согласны на обработку персональных данных системой?")) {
return;
}
alert("Успешный вход в систему");
}
</script>
</html>
Задание 3 <html>
<head>
<title>Задание 3</title>
</head>
<body>
<marquee id="ad" direction="left" loop="right" width="100%">Рекламная строка</marquee>
<br/><br/>
<button onclick="changeText()">Изменить текст</button>
<br/>
<button onclick="resetText()">Вернуть исходный текст</button>
<br/>
<button onclick="changeColor()">Изменить цвет</button>
</body>
<script type="text/javascript">
function changeText() {
window.ad.innerHTML = "Совершенно другая рекламная строка";
}
function resetText() {
window.ad.innerHTML = "Рекламная строка";
}
function changeColor() {
window.ad.style.color = "Blue";
}
</script>
</html>
Задание 4 <html>
<head>
<title>Задание 4</title>
</head>
<body>
<p id="text">
Какой-то текст
</p>
<button onclick="changeText()">Изменить текст</button>
<button onclick="removeText()">Удалить текст</button>
<button onclick="resetText()">Вернуть исходный текст</button>
</body>
<script type="text/javascript">
function changeText() {
window.text.innerText = "Какой-то совершенно другой текст";
}
function removeText() {
window.text.innerText = '';
}
function resetText() {
window.text.innerText = "Какой-то текст";
}
</script>
</html>
Задание 5 <html>
<head>
<title>Задание 5</title>
</head>
<body>
Части тела
<div style="border:2px solid grey;width:320px;padding-left:10px;">
<p onmouseover="showGr()">Грудь</p>
<ul id="Gr_ul">
</ul>
<p onmouseover="showPl()">Плечи</p>
<ul id="Pl_ul">
</ul>
<p onmouseover="showRu()">Руки</p>
<ul id="Ru_ul">
</ul>
<p onmouseover="showSp()">Спина</p>
<ul id="Sp_ul">
</ul>
<p onmouseover="showPr()">Пресс</p>
<ul id="Pr_ul">
</ul>
</div>
</body>
<script type="text/javascript">
function showGr() {
hideAll();
window.Gr_ul.innerHTML = "<li>Мышци груди</li><li>Передние дельты</li>";
}
function showPl() {
hideAll();
window.Pl_ul.innerHTML = "<li>Дельты</li><li>Задние дельты</li><li>Трапеция</li>"
}
function showRu() {
hideAll();
window.Ru_ul.innerHTML = "<li>Бицепс</li><li>Плечевая мышца</li><li>Трицепсы</li>"
}
function showSp() {
hideAll();
window.Sp_ul.innerHTML = "<li>Ротароторная манжета</li><li>Широчайшая мышца спины</li><li>Крестцово-позвоночная мышца</li>"
}
function showPr() {
hideAll();
window.Pr_ul.innerHTML = "<li>Верхние мышци пресса</li><li>Прямая мышца живота</li><li>Косые мышцы живота</li>"
}
function hideAll() {
window.Gr_ul.innerHTML = '';
window.Pl_ul.innerHTML = '';
window.Ru_ul.innerHTML = '';
window.Sp_ul.innerHTML = '';
window.Pr_ul.innerHTML = '';
}
</script>
</html>
Задание 6 <html>
<head>
<title>Задание 6</title>
</head>
<body>
Части тела
<div style="border:2px solid grey;width:320px;padding-left:10px;">
<p onmouseover="showGr()">Грудь</p>
<ul id="Gr_ul">
</ul>
<p onmouseover="showPl()">Плечи</p>
<ul id="Pl_ul">
</ul>
<p onmouseover="showRu()">Руки</p>
<ul id="Ru_ul">
</ul>
<p onmouseover="showSp()">Спина</p>
<ul id="Sp_ul">
</ul>
<p onmouseover="showPr()">Пресс</p>
<ul id="Pr_ul">
</ul>
</div>
</body>
<script type="text/javascript">
function showMg() {
wnd = window.open();
wnd.document.write("Жим лежа.")
}
function showPd() {
wnd = window.open();
wnd.document.write("Тяга к лицу.")
}
function showGr() {
hideAll();
window.Gr_ul.innerHTML = "<li onclick='showMg()'>Мышци груди</li><li onclick='showPd()'>Передние дельты</li>";
}
function showPl() {
hideAll();
window.Pl_ul.innerHTML = "<li>Дельты</li><li>Задние дельты</li><li>Трапеция</li>"
}
function showRu() {
hideAll();
window.Ru_ul.innerHTML = "<li>Бицепс</li><li>Плечевая мышца</li><li>Трицепсы</li>"
}
function showSp() {
hideAll();
window.Sp_ul.innerHTML = "<li>Ротароторная манжета</li><li>Широчайшая мышца спины</li><li>Крестцово-позвоночная мышца</li>"
}
function showPr() {
hideAll();
window.Pr_ul.innerHTML = "<li>Верхние мышци пресса</li><li>Прямая мышца живота</li><li>Косые мышцы живота</li>"
}
function hideAll() {
window.Gr_ul.innerHTML = '';
window.Pl_ul.innerHTML = '';
window.Ru_ul.innerHTML = '';
window.Sp_ul.innerHTML = '';
window.Pr_ul.innerHTML = '';
}
</script>
</html>
Задание 7 <html>
<head>
<title>Задание 7</title>
</head>
<body>
Части тела
<div style="border:2px solid grey;width:320px;padding-left:10px;">
<p onclick="showGr()" onmouseover="self.status='Для раскрытия списка нажмите указателем';return true;" onmouseout="self.status='';return true;" title="Щелкните для раскрытия">Грудь</p>
<ul id="Gr_ul">
</ul>
<p onclick="showPl()" onmouseover="self.status='Для раскрытия списка нажмите указателем';return true;" onmouseout="self.status='';return true;" title="Щелкните для раскрытия">Плечи</p>
<ul id="Pl_ul">
</ul>
<p onclick="showRu()" onmouseover="self.status='Для раскрытия списка нажмите указателем';return true;" onmouseout="self.status='';return true;" title="Щелкните для раскрытия">Руки</p>
<ul id="Ru_ul">
</ul>
<p onclick="showSp()" onmouseover="self.status='Для раскрытия списка нажмите указателем';return true;" onmouseout="self.status='';return true;" title="Щелкните для раскрытия">Спина</p>
<ul id="Sp_ul">
</ul>
<p onclick="showPr()" onmouseover="self.status='Для раскрытия списка нажмите указателем';return true;" onmouseout="self.status='';return true;" title="Щелкните для раскрытия">Пресс</p>
<ul id="Pr_ul">
</ul>
</div>
</body>
<script type="text/javascript">
function showMg() {
wnd = window.open();
wnd.document.write("Жим лежа.")
}
function showPd() {
wnd = window.open();
wnd.document.write("Тяга к лицу.")
}
function showGr() {
hideAll();
window.Gr_ul.innerHTML = "<li onclick='showMg()'>Мышци груди</li><li onclick='showPd()'>Передние дельты</li>";
}
function showPl() {
hideAll();
window.Pl_ul.innerHTML = "<li>Дельты</li><li>Задние дельты</li><li>Трапеция</li>"
}
function showRu() {
hideAll();
window.Ru_ul.innerHTML = "<li>Бицепс</li><li>Плечевая мышца</li><li>Трицепсы</li>"
}
function showSp() {
hideAll();
window.Sp_ul.innerHTML = "<li>Ротароторная манжета</li><li>Широчайшая мышца спины</li><li>Крестцово-позвоночная мышца</li>"
}
function showPr() {
hideAll();
window.Pr_ul.innerHTML = "<li>Верхние мышци пресса</li><li>Прямая мышца живота</li><li>Косые мышцы живота</li>"
}
function hideAll() {
window.Gr_ul.innerHTML = '';
window.Pl_ul.innerHTML = '';
window.Ru_ul.innerHTML = '';
window.Sp_ul.innerHTML = '';
window.Pr_ul.innerHTML = '';
}
</script>
</html>
Задание 8 <html>
<head>
<title>Задание 8</title>
</head>
<body>
Части тела
<div style="border:2px solid grey;width:320px;padding-left:10px;">
<p onmouseover="showGr()">Грудь</p>
<ul id="gr_ul">
</ul>
<p onmouseover="showPl()">Плечи</p>
<ul id="pl_ul">
</ul>
<p onmouseover="showRu()">Руки</p>
<ul id="Ru_ul">
</ul>
<p onmouseover="showSp()">Спина</p>
<ul id="Sp_ul">
</ul>
<p onmouseover="showPr()">Пресс</p>
<ul id="Pr_ul">
</ul>
</div>
</body>
<script type="text/javascript">
function showGr() {
hideAll();
el1 = document.createElement('li');
el1.innerText = "Мышци груди";
window.gr_ul.appendChild(el1);
el2 = document.createElement('li');
el2.innerText = "Передние дельты";
window.gr_ul.appendChild(el2);
}
function showPl() {
hideAll();
el1 = document.createElement('li');
el1.innerText = "Задние дельты";
window.pl_ul.appendChild(el1);
el2 = document.createElement('li');
el2.innerText = "Трапеция";
window.pl_ul.appendChild(el2);
}
function showRu() {
hideAll();
el1 = document.createElement('li');
el1.innerText = "Бицепс";
window.Ru_ul.appendChild(el1);
el2 = document.createElement('li');
el2.innerText = "Плечевая мышца";
window.Ru_ul.appendChild(el2);
el3 = document.createElement('li');
el3.innerText = "Трицепсы";
window.Ru_ul.appendChild(el3);
}
function showSp() {
hideAll();
el1 = document.createElement('li');
el1.innerText = "Ротароторная манжета";
window.Sp_ul.appendChild(el1);
el2 = document.createElement('li');
el2.innerText = "Широчайшая мышца спины";
window.Sp_ul.appendChild(el2);
el3 = document.createElement('li');
el3.innerText = "Крестцово-позвоночная мышца";
window.Sp_ul.appendChild(el3);
}
function showPr() {
hideAll();
el1 = document.createElement('li');
el1.innerText = "Верхние мышци пресса";
window.Pr_ul.appendChild(el1);
el2 = document.createElement('li');
el2.innerText = "Прямая мышца живота";
window.Pr_ul.appendChild(el2);
el3 = document.createElement('li');
el3.innerText = "Косые мышцы живота";
window.Pr_ul.appendChild(el3);
}
function hideAll() {
window.gr_ul.innerHTML = '';
window.pl_ul.innerHTML = '';
window.Ru_ul.innerHTML = '';
window.Sp_ul.innerHTML = '';
window.Pr_ul.innerHTML = '';
}
</script>
</html>
Задание 9 <html>
<head>
<title>Задание 9</title>
</head>
<body>
Фамилия:<input id="surname" type="text">
Имя: <input id="fname" type="text">
Отчество: <input id="middle" type="text">
<br/>
<button onclick="addEntry()">Добавить запись в таблицу</button>
<br/><br/>
<table id="table" width="600" border="2">
<tr>
<td width="33%">Фамилия</td>
<td width="33%">Имя</td>
<td width="33%">Отчество</td>
</tr>
</table>
</body>
<script type="text/javascript">
function addEntry() {
row = window.table.insertRow(1);
cell3=row.insertCell(0);
cell3.innerText=window.middle.value;
cell2=row.insertCell(0);
cell2.innerText=window.fname.value;
cell1=row.insertCell(0);
cell1.innerText=window.surname.value;
}
</script>
</html>
Задание 10 <html>
<head>
<title>Задание 10</title>
</head>
<body>
Фамилия:<input id="surname" type="text">
Имя: <input id="fname" type="text">
Отчество: <input id="middle" type="text">
<br/>
<button onclick="addEntry()">Добавить запись в список</button>
<br/><br/>
<select id="select"></select>
</body>
<script type="text/javascript">
function addEntry() {
//Создаем строку entry в которой обьеденены строки surname, fname и middle
entry = window.surname.value + " " + window.fname.value + " " + window.middle.value;
//Создаем элемент Option - пункт списка
opt = document.createElement('OPTION');
//Задаем значение опции
opt.value = entry;
//Задаем текст опции
opt.text = entry;
//Добавляем опцию на 0-ю позицию списка select
window.select.options.add(opt, 0);
}
</script>
</html>
Задание 11 <html>
<head>
<title>Задание 11</title>
</head>
<script type="text/javascript">
function right() {