Файловый архив студентов. Файловый архив студентов.
1263 вуза, 4625 предмета.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Харьковский национальный университет радиоэлектроники
Предмет:
Программирование на Java
Файл:
Java_Промышленное программирование1.doc
Скачиваний:
173
Добавлен:
13.04.2015
Размер:
5.58 Mб
Скачать
☆
►Содержание►

Динамическое назначение событий

Кроме объявления событий в HTML, JavaScript позволяет назначать события во время выполнения скрипта:

<a href="sample.html" id="lnk1">click me</a>

<script type="text/javascript">

document.getElementById("lnk1").

onclick = function(){alert('Links clicked')};

</script>

Ключевое слово this

Зачастую обработчику события необходимо передать элемент, который это событие вызвал. Пример приведен ниже:

<a href="sample.html" onclick="showInfo(this);">

click me</a>

< type="text/javascript">

function showInfo(_obj) {

alert(_obj.innerHTML);

//при нажатии на ссылку выводится на экран «click me»

}

</script>

По умолчанию после нажатия на ссылку происходит переход на другую страницу, однако это действие можно отменить, если обработчик события вернет значение false. Например:

<a href="sample.html"

onclick="return showInfo(this);">click me</a>

<script type="text/javascript">

function showInfo(_obj) {

return confirm("Do you want go to another page?");

//при нажатии на ссылку будет выведен стандартный диалог с кнопками OK и Cancel; если будет нажата Cancel, то браузер не перейдет по адресу, на который указывает ссылка

}

</script>

Примеры на JavaScript:

<!-- пример # 11: открытие документа в новом окне -->

<html>

<head>

<script type="text/javascript">

function openStaticWin() {

window.open("test.html", "_blank",

"height=200,width=400,status=yes,toolbar=no,menubar=no,

location=no");

}

function openDynamicWin() {

var newWin = window.open();

newWin.document.open();

newWin.document.write("<html><head></head><body>"

+ new Date() + "</body></html>");

newWin.document.close();

}

</script>

</head>

<body>

<a href="#" onclick="openStaticWin();

return false;">open existing html</a>

<br>

<a href="#" onclick="openDynamicWin();

return false;">open dynamic html</a>

</body>

</html>

Первая функция открывает в новом окне существующий документ, вторая задает HTML-код нового документа динамически.

Следующий пример:

<!-- пример # 12: создание динамического меню после загрузки страницы -->

<html><head>

<style>

.menuContainer {

border: 1px solid #123456;

}

.menuContainer .menuItem {

float: left;

margin: 2px;

padding: 10px;

}

.menuContainer .menuOver {

background-color: #808080;

}

.menuContainer .menuOver a {

color: #800000;

font-weight: bold;

}

.menuContainer .clear {

clear: left;

}

</style>

<script type="text/javascript">

function processMenu() {

var allDiv = document.getElementsByTagName("DIV");

for (var i = 0; i < allDiv.length; i++) {

if (allDiv[i].className == "menuContainer")

processMenuItem(allDiv[i]);

}

}

function processMenuItem(_obj) {

var allChilds = _obj.childNodes;

for (var i = 0; i < allChilds.length; i++) {

if (allChilds[i].className == "menuItem") {

allChilds[i].onmouseover = function() {

this.className += " menuOver";

}

allChilds[i].onmouseout = function() {

this.className =

this.className.replace(" menuOver","");

}

}

}

}

</script>

</head>

<body onload="processMenu();">

<div class="menuContainer">

<div class="menuItem"><a href="#">first</a></div>

<div class="menuItem"><a href="#">second</a></div>

<div class="menuItem"><a href="#">third</a></div>

<div class="menuItem"><a href="#">fourth</a></div>

<div class="clear"></div>

</div>

</body></html>

<!-- пример # 13: валидация формы -->

<script type="text/javascript">

function submitForm(_form) {debugger;

markErrorField(false);

var errMess = "";

if (!_form.elements["login"].value) {

errMess += "Your Login is empty.\n";

markErrorField(_form.elements["login"]);

}

if (!_form.elements["mail"].value) {

errMess += "Your Email is empty\n";

markErrorField(_form.elements["mail"]);

}

if (!_form.elements["pass"].value) {

errMess += "Your Password is empty.\n";

markErrorField(_form.elements["pass"]);

} else if (!_form.elements["confpass"].value) {

errMess +=

"Your Password confirmation is empty.\n";

markErrorField(_form.elements["confpass"]);

} else if

(_form.elements["pass"].value !=

_form.elements["confpass"].value) {

errMess +=

"Your Password confirmation does not equal to your Password.\n";

markErrorField(_form.elements["pass"]);

markErrorField(_form.elements["confpass"]);

}

if (errMess) {

alert(errMess + "");

return false;

}

}

function markErrorField(_element) {

var allLabels =

document.getElementsByTagName("LABEL");

if (_element) {

for (var i = 0; i < allLabels.length; i++) {

if (allLabels[i].htmlFor == _element.id)

allLabels[i].style.color = "red"; }

} else {

for (var i = 0; i < allLabels.length; i++) {

allLabels[i].style.color = "black";

}

}

}

</script>

<form onsubmit="return submitForm(this);">

<table>

<tr>

<td><label for="login">Your Login</label></td>

<td><input type="text" name="login" id="login" /></td>

</tr>

<tr>

<td><label for="mail">Your Email</label></td>

<td><input type="text" name="mail" id="mail" /></td>

</tr>

<tr>

<td><label for="pass">Your Password</label></td>

<td><input type="password" name="pass" id="pass" /></td>

</tr>

<tr>

<td><label for="confpass">

Confirm Your Password</label></td>

<td><input type="password" name="confpass"

id="confpass" /></td>

</tr>

<tr>

<td colspan="2"><input type="submit"

name="Register" /></td>

</tr>

</table>

</form>

Соседние файлы в предмете Программирование на Java
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности