Динамическое назначение событий
Кроме объявления событий в 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>
UML
Создаваемое программное обеспечение (ПО) постоянно усложняется. При работе над любыми информационными (распределенными) системами в первую очередь возникает проблема взаимопонимания программиста и заказчика уже на стадии обсуждения структуры системы. До начала кодирования программы предлагаемая концепция предусматривает решение двух предварительных задач: проанализировать поставленную перед разработчиком задачу и разработать проект будущей системы. Программа разбивается на отдельные модули, взаимодействующие между собой с помощью механизмов передачи параметров.
Унифицированный язык моделирования (Universal Model Language) − графический язык визуализации, специфицирования, конструирования и документирования программного обеспечения. С помощью UML можно разработать детальный план создаваемой системы, отображающий системные функции и бизнес-процессы, а также конкретные особенности реализации. А именно:
· классы, написанные на специальных языках программирования;
· схемы БД;
· программные компоненты многократного использования.
Поскольку UML интенсивно изменяется, то здесь не ставится цель дать все детали и аспекты UML. В настоящее время существуют две крайние точки зрения на применение UML и моделирвование как таковое:
1. Необходимо замоделировать всё.
2. Моделирование – пустая трата времени: заказчик, как правило, не оплачивает эту работу, поэтому надо сразу писать код.
Истина, как всегда, где-то рядом. Здравый смысл никто не отменял, поэтому– если есть необходимость что-то замоделировать, это следует сделать, если нет – не следует.
В текущей жизни человек всегда сталкивается с UML. Даже пытаясь набросать чертёж полочки для книг – это уже UML. Таким образом, графические наброски проекта всегда рядом с человеком. Для промышленного программирования, выполняемого большими и зачастую распределёнными интернациональными командами, наибольшая ценность UML – в возможности эффективного взаимодействия и в облегчении понимания. Хорошая диаграмма может помочь донести идею проекта, модуля, особенно если нужно избежать большого количества деталей, которые только усложнят понимание. Диаграммы более наглядно представляют систему или процесс, что облегчит понимание. Особенно важно отметить, что UML широко используется в пределах объектно-ориентированного (ОО) сообщества, хорошо стандартизован и является доминирующей графической нотацией. Так же UML популярен и вне пределов ИТ индустрии, поскольку он нейтрален к технологии, предметной области и т.д.
Не являясь заменой языков программирования, диаграммы – полезный помощник программиста. Хотя многие полагают, что в будущем графические методы будут доминировать на рынке программного обеспечения, следует скептически относиться к этому. С трудом можно себе представить, хотя многие менеджеры мечтают об этом, что будет создан инструмент, в котором, нарисовав всё и нажав «волшебную кнопку», на выходе получишь готовое приложение.
Задача состоит в том, чтобы получить оценку того, в чём диаграммы могут быть полезны и в чём нет.
UML – семейство графических нотаций, базирующихся на единой метамодели, помогающий в описании и проектировании систем программного обеспечения, особенно систем программного обеспечения, использущих объектно-ориентированный стиль. Универсальность UML имеет побочный эффект – разные люди используют UML разными способами. Это ведет к долгим и бесполезным дискуссиям о том, как же он должен использоваться. Чтобы избежать этого, главное – добиться единого понимания использования UML в пределах группы разработчиков, где вы сейчас работаете. В другой группе может быть несколько другое понимание, но главное – чтобы все это понимали одинаково.