lec_6
.pdf<script>
head1 = document.createElement("h1");
head1.innerText = "создание ЗАГОЛОВКА с помощью метода createElement()";
div1.appendChild(head1);
par = document.createElement("p");
par.innerText = "создание АБЗАЦА с помощью метода createElement()"; div1.appendChild(par);
</script></body>
Динамическое редактирование таблиц
Добавление строк и ячеек к таблице в JavaScript применяются специальные функции:
insertRow(номер_строки)
insertCell(номер_ячейки)
Пример 7
<style> table, td {
border-style: solid; border-width: 2px ; border-collapse:collapse
}
</style>
<body>
<script>
function add(surname,name,middle) { row = table.insertRow(1);
c1 = row.insertCell(0); c1.innerText = surname; c2 = row.insertCell(1); c2.innerText = name; c3 = row.insertCell(2); c3.innerText = middle;
} |
|
|
|
|
|
</script> |
|
|
|
|
|
<forma> |
|
type=text |
value="фамилия?"> |
||
<input id="f" |
|||||
<input id="i" |
type=text |
value="имя?"> |
|||
<input id="o" |
type=text |
value="отчество?"> |
|||
<input id="enter" type=button value="enter" |
|||||
onClick="add(f.value,i.value,o.value)"> |
|
||||
</forma> |
|
|
|
|
|
<table id="table" > |
|
<th>Имя</th> |
<th>Отчество</th> |
||
<tr> |
<th>фамилия</th> |
||||
<tr> |
<td>Иванов</td> |
<td>Иван</td> |
<td>Иванович</td> |
||
<tr> |
<td>Петров</td> |
<td>Петр</td> |
<td>Петрович</td> |
||
</table> |
|
|
|
|
|
</body> |
|
|
|
|
|
Динамическое изменение списков
Пример 8
<body>
<script>
function add_entry(surname,name,middle) {
entry = surname + " " + name + " " + middle; opt = document.createElement("option"); opt.value = entry;
opt.text = entry; selector.options.add(opt,0);
}
</script>
<forma>
<input id="f"type=text value="фамилия?"> <input id="i"type=text value="имя?"> <input id="o"type=text value="отчество?">
<input id="enter" type=button value="enter" onClick="add_entry(f.value,i.value,o.value)">
</forma><br>
<select id="selector"></select> </body>
Пункт списка добавляется в начало списка командой имя_списка. options.add(объект_пункта, индекс).
Использование диалоговых окон
В JavaScript используются три встроенных диалоговых окна Заголовки и набор кнопок в этих окнах постоянны
Текст сообщения задается аргументом функции открытия диалогового окнаalert('сообщение') — диалоговое окно с текстом сообщения и
кнопкой ОК
confirm('сообщение') —диалоговое окно с текстом сообщения и
кнопками:
o ОК — confirm возвращает значение true
oCancel — confirm возвращает значение false
prompt('сообщение','текст по умолчанию') — окно для ввода данных пользователем.
oКнопки ОК и Cancel
oТекстовое поле ввода
prompt возвращает
oОК — значение текстового поля
oCancel — значение false
Пример 9
<body>
<script>
alert("вы вошли в систему электронных платежей!"); if (confirm("хотите ли вы выполнить платеж?"))
{cart = prompt("введите номер кредитной карточки.");
if (confirm("вы ввели номер карточки" + cart + ",пожалуйста, подтвердите."))
alert(cart);
else alert("до свидания , вы покидаете систему электронных платежей!");
}
else alert("до свидания , вы покидаете систему электронных платежей!"); </script>
</body>
Динамическое форматирование элементов Web-документа
Вкоде JavaScript стиль можно изменить двумя способами:
присвоить атрибуту style строку текста с параметрами так же, как в коде HTML
обратиться непосредственно к параметру имя_обекта.style.имя_свойства par1.style.color= “#FE8700”