form
advertisement
Учебный курс
Введение
в JavaScript и CGI
Лекция 1
Введение в JavaScript
кандидат технических наук
Павел Брониславович Храмцов
paul@kiae.su
1
Объекты документа
Графический объект
Массив графических
ссылок
Мобильный код
2
Объекты
Свойства
<a href=kuku.htm>kuku</a>
document.links[0].href="kuku1.htm";
Методы
id=window.open("","example","width=400,height=150");
События
<input type=button value="Don't click here"
onClick="window.alert('We repeate again: DON\'T
CLICK HERE');">
3
Пример 1
Вид если нажать на «help»
Вид если нажать на «top»
4
Методы
function hello()
{
id=window.open("","example","width=400,height=150");
id.focus(); id.document.open();
id.document.write("<h1>Hello JavaScript</h1>");
id.document.write("<hr><form>");
id.document.write("<input type=button value='Закрыть
окно' ");
id.document.write("onClick='window.opener.focus();
window.close();'>");
id.document.close();
}
5
Пример 2
6
События
<input type=button value="Don't click here"
onClick="window.alert('We repeate again: DON\'T
CLICK HERE');">
7
Размещение кода JavaScript
на HTML странице
Гипертекстовая ссылка (схема URL)
Обработчик события (handler)
Подстановка (Entity)
Элемент разметки Script
8
Схема URL
<a href="javascript:JavaScript_код">...</a>
<a href="javascript:alert('Attention!!!');">
<font color=red>Внимание!!!</font></a>
при нажатии на гипертекстовую ссылку Внимание!!! можно
получить окно предупреждения:
9
Схема URL
<form name=f method=post
action="javascript:window.document.f.i.value='Нажали кнопку
Click';void(0);">
<table border=0>
<tr>
<td><input name=i>
<td><input type=submit value=Click>
<td><input type=reset value=Reset>
</table>
</form>
10
Пример 3
До нажатия на кнопку Click
После нажатия на кнопку Click
11
Обработчик событий
<form><input type=button value=Кнопка
onClick="window.alert('Yahoo!!!');"></form>
12
Обработчик событий
<form>
<select name=s1 onChange="
window.alert(
document.s.s1.options[document.s.s1.selectedIndex].text);">
<option>Привет
<option>Пошел вон
</form>
13
Подстановки
<script>
function l()
{
str = window.location.href;
return(str.length);
}
</script>
<form><input value="&{window.location};"
size="&{l();};"></form>
14
Вставка (контейнер SCRIPT)
<html>
<head>
<script language=JavaScript>
<!-- Это комментарий
...JavaScript-код...
// -->
</script>
<body>
... Тело документа ...
</body>
</html>
15
Вставка (контейнер SCRIPT)
<html><head>
<script>
function time_scroll()
{
d = new Date();
window.status =
d.getHousrs()+":"+d.getMinutes()+":"+d.getSconds();
setTimeout('time_scroll();';500);
}
</script></head>
<body onLoad=time_scroll()><center>
<h1>Часы в строке статуса</h1>
<form>
<input type=button value="Закрыть окно" onClick=window.close()>
</form>
</center></body></html>
16
Вставка (контейнер SCRIPT)
<input type=button value="Изменить поле статуса в окне
примера" onClick="id.defaultStatus='Привет';id.focus();">
17
