Въведение в програмирането на Java Script

Цел на упражнението:
Въведение в програмирането на JavaScript, включване и използване на JavaScript код в html документ, използване на предварително дефинирани обекти и реализиране на елементарни действия във формуляр.

За постигане на интерактивност в HTML документите (промяна на стилове и изображения в зависимост от местоположението/състоянието на мишката, зареждане на различна  страница в зависимост от браузера на клиента, предварителна проверка за коректност на данните във формуляр, реализиране на меню/навигация и много други) могат да се използват програми написани на client-side език за програмиране, известни още като скриптови езици.  Програмите написани на такъв език се включват пряко или косвено в HTML документ, пренасят се между сървъра и клиента, и се изпълняват върху клиентския компютър. Наричат се скриптови, защото се изпълняват от интерпретатор вграден в браузера.
1. Включването на скриптов код в htm-документ
Става в <head> – секцията посредством тага <script> със следния формат
<script type=”тип” src=”url”>…</script>
тип може да бъде text/javascript, но например и text/vbscript
url задава файл (включително и местоположението му), съдържащ скрипта.
1.1. Използване на външен js-файл – препоръчителен подход:
<script type=”text/javascript” src=”<име на файла>.js”></script>
1.2. Кодът се разполага в HTML документа – ако не се посочи атрибут src=”url”.
В този случай съществуват следните варианти:
в рамките на head – секцията в таг <script>
В Пример1 е дефинирана е потребителска функция sayhi(), която в тялото си извиква JavaScript функцията alert(<низ>) (метод на обекта window), извеждаща предавания й като параметрър низ в нов прозорец. Кодът на скрипта е маркиран Bold, а извикването му в атрибута onclick на бутон натисни ме 2 в документа – Italic ;
непосредствено на мястото в документа, където се извършва съответното действие – използва се в случаи, когато кодът е кратък
В Пример1 са демонстрирани два варианта на задаване на кода на скрипта на мястото на извикването му – съответно в onclick атрибутита на бутон натисни ме 1 и href атрибутита на хипервръзката натисни ме 3 (скриптът е маркиран Bold-Italic). На тези две места директно е включен кода от тялото на потребителската функция sayhi() и тя не се извиква за разлика от случая при бутон натисни ме 2;
възможно е таг <script>, съдържащ JavaScript код да се помести и в рамките на таг <body>, но този вариант трябва да се избягва.
Пример1:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head><title>Script Example</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″>
<script type=”text/javascript”>
<!–
function sayhi() { alert(‘Здравей’);}
// –>
</script>
</head>
<body><noscript>
Your browser is not JavaScript-enabled. These buttons will not work. </noscript>
<form id=”f1″ action=”#”>
<input type=”button” value=”натисни ме 1″ onclick=”alert(‘Здравей’)”><br><br>
<input type=”button” value=”натисни ме 2″ onclick=”sayhi()”><br><br>
<a href=”javascript: alert(‘Здравей’)”>натисни ме 3</a>
</form></body></html>

1.3. Атрибути на html тагове, свързани със събития
Общият им вид е event=”url” , където:
event може да е една ключовите думи, описващи конкретно събитие – onclick, onmousedown, onmouseover, onmousemove, onmouseout и др.
url указва файл със скрипта, или съдържа целия скрипт
JavaScript обработчици на събития (event handlers)

Събитие Прилага се върху Настъпва когато Event handler(повечето съответстват на атрибути на тагове)
Abort изображения Потребителят прекъсва зареждането на изображение (например чрез избор на хипервръзка или натискане на бутон Stop) onabort
Blur прозорци и всички елементи на формуляр Потребителят отстранява входния фокус от прозореца или елемента на формуляра onblur
Change текстови полета, големи текстови полета, елементи за избор (select) Потребителят променя стойността на елемента onchange
Click бутони (вкл. submit и reset), радио бутони, бутони отметки (checkbox), хипервръзки Потребителят кликва с мишката върху елемента на формуляра или върху хипервръзката onclick
DragDrop прозорци Потребителят пуска обект върху прозореца на браузера  – например файл ondragdrop
Error изображения, прозорци Зареждането на документ или изображение предизвиква грешка onerror
Focus прозорци и всички елементи на формуляр Потребителят премества входния фокус към прозореца или елемента на формуляра onfocus
KeyDown документи, изображения, хипервръзки, големи текстови полета Потребителят натиска клавиш onkeydown
KeyPress документи, изображения, хипервръзки, големи текстови полета Потребителят натиска клавиш или го задържа натиснат onkeypress
KeyUp документи, изображения, хипервръзки, големи текстови полета Потребителят отпуска клавиш onkeyup
Load тяло на документ При зареждане на страницата в браузера onload
MouseDown документи, бутони, хипервръзки Потребителят натиска бутон на мишката onmousedown
MouseMove Потребителят премества мишката onmousemove
MouseOut области от изображения, оформени като хипервръзки, хипервръзки Потребителят отмества курсора на мишката от хипервръзка или част от изображение, оформена като хипервръзка onmouseout
MouseOver хипервръзки Потребителят позиционира курсора на мишката върху хипервръзка onmouseover
MouseUp документи, бутони, хипервръзки Потребителят отпуска бутон на мишката onmouseup
Move прозорци Потребителят или script мести прозорец onmove
Reset форми Потребителят натиска бутон Reset във формуляра onreset
Resize прозорци Потребителят или script променя размери на прозорец onresize
Select текстови полета, големи текстови полета Потребителят избира входното поле на елемента на формуляра onselect
Submit форми Потребителят изпраща формуляра (натиска бутон Submit) onsubmit
Unload тяло на документ Потребителят напуска страницата onunload

Задача 1
Изнесете тялото на функцията sayhi()от Пример 1 във външен файл first.js и го използвайте във формуляра от примера, за да функционира и бутонът натисни ме 2. Проверете резултата в браузер.
Задача 2
Във файл ex12\touse\example_body_script.html в тялото на документа (между таговете <body> и </body>) има разположен код на JavaScript в рамките на script таг. Преместете script тага в head секцията, оформете съдържанието му като функция и я използвайте в атрибута onload на таг body. Проверете резултата в браузер.
2. Някои основни сведения за JavaScript
Езикът JavaScript е обектно ориентиран. Той борави с предварително дефинирани обекти (и техни методи=функции).
По отношение на изрази и управляващи конструкции (for, do – while, while) съвпада с C/C++.
В JavaScript се прави разлика между главни и малки букви.
Използват се същите оператори за аритметични и логически операции.
Аналогично изглеждат и операторите за разклоняване  при изпълнение на кода (if, switch).
При деклариране на променливи не се обявява тип на променливата.
Низовите константи в JavaScript могат да бъдат поставяни както в кавички, така и в апострофи. Варианта в апострофи е задължителен в случаите, когато JavaScript кода е включен например посредством атрибут на html таг и е поставен в кавички.
2.0. Проверка на скрипт за синтактични грешки
Скриптовете могат да бъдат проверявани за синтактични грешки съответно за:
Internet Explorer for Windows
от меню Tools/Internet Options/Advanced
o    се изключва Disable script debugging
o    се включва Display a notification about every script error
Firefox и други Mozilla браузери
от меню Tools/JavaScript console се отваря JavaScript конзолата за индикация на съобщения за грешки.
2.1. Достъп до елементите на HTML документа от програма на JavaScript
Обектите в JavaScript са достъпни посредством следната йерархия:

Ако в HTML документа се съдържа:
<form name=”f1″ id=” f1″ method=”post” action=”">
<input type=”text” name=”txt” id=”txt” value=”първоначален текст”> … </form>
то формулярът като цяло е достъпен за програма на JavaScript по един от следните начини:

document.forms.f1  (формулярът като обект)
document.forms[0]  (формулярът като елемент на масив с целочислени индекси)
document.forms['f1'] (формулярът като елемент на масив с индекси – низове)

За достигане до елементите на формуляра може да се продължи аналогично по някой от описаните подходи като се използва id или name атрибута на съответния таг (name е вече остаряващ атрибут, който се замества от id – в долните примери са посочени и двата, но е достатъчно да присъства само единия).
Всички атрибути на HTML таговете са видими за JavaScript под съответните имена.
Така например съдържанието на текстовото поле може да се зададе по следния начин:
document.forms.f1.txt.value=”hi”
Задача 3
Създайте формуляр с два бутона (със стойности на атрибут value съответно b1 и b2) и едно текстово поле. Първоначално в полето да е изписан текстът ‘натисни b1 или b2′. Напишете и използвайте JavaScript код така, че в текстовото поле да се изписва нов текст в зависимост от натиснатия бутон съответно  b1 или b2.
Указания:
Ако работите в дизайнерски изглед на Macromedia Dreamweaver MX 2004, форма, както и нейните елементи могат да бъдат включвани в документа от меню Insert/Form … (включваните бутони не трябва вече да са обвързани с функционалност каквито са буоните submit и reset). Ако предпочитате можете да работите в кодов изглед;
Осъществявайте достъп до елементите на формуляра проследявайки йерархията на документа аналогично на използвания пример за текстовото поле;
Текстовото поле трябва да има първоначална стойност на атрибут  value ‘натисни b1 или b2′;
Посредством атрибутите onclick на двата бутона активирайте две различни функции, записващи като нова стойност на атрибута value на текстовото поле желания низ.
Задача 4
За формуляра от задача 3 заменете функцията, изпълнявана при натискане на b1 с такава, която да извежда в текстовото поле текст ‘b1 натиснат x пъти’, като x съответства на броя натискания.
Указания:
В script тага в head секцията дефинирайте и инициализирайте променлива var n=0;
В тялото на функцията предвидете нарастване на n с 1 и задаване на нова стойност на текстовото поле. За да се извежда и текст освен стойността, показваща броя натискания на бутона можа да използвате слепване на низове по следния начин “бутонът беше натиснат “+n+” пъти” (при това слепване числото n автоматично ще се преобразува в низ).
Задача 5
а) Във формуляра от задача 3 променете функционалността на бутон b2 така, че при натискането му да се отваря страницата на Русенския университет – http://www.ru.acad.bg
Указания:
При натискане на бутон b2 обектът location трява да получава желаната стойност.
б) Добавете JavaScript код, така че при позициониране на мишката върху b2 в статус линията на браузера да се извежда ‘over b2′, а при отместване на мишката извън бутона да се изчиства статус линията.
Указания:
Желaният низ трябва да стане стойност на window.status.
Радио – бутоните и полетата за избор от една група (съвпадащ атрибут name) са достъпни като елементи на масив с индекси, започващи от нула. Масивът носи общото за групата име от атрибута name.
Пример 2
Проверява се дали е избран вторият радио бутон от група с три бутона (вторият бутон е с индекс 1, тъй като елементите в масива започват да се броят от 0):
В HTML документа:
<form name=”f1″ id=”f1″ method=”post” action=”#”>
<input type=”radio” name=”R1″ id=”R1″ value=”V1″> едно
<input type=”radio” name=”R1″ id=”R1″ value=”V2″> две
<input type=”radio” name=”R1″ id=”R1″ value=”V3″> три
</form>
В JavaScript кода:
if (document.forms.f1.R1[1].checked) …
2.2. Примери за основни управляващи конструкции и извеждане:
Нека в body-секцията има форма, съдържаща текстово поле, checkbox група и елемент за избор (select елемент)
<body>
<form name=”f1″ id=”f1″ method=”post” action=”#” >
…
<input type=”text” name=”nam” id=”nam”> Име
…
Харесвам музика от следните жанрове:

<input type=”checkbox” name=”cb” id=”cb”> Класическа <br>
<input type=”checkbox” name=”cb” id=”cb”> Рок <br>
<input type=”checkbox” name=”cb” id=”cb”> Народна <br>
…
<select name=”s” id=”s”>
<option>едно</option>
<option>две</option>
<option>три</option>
</select>…
</form>
</body>
Примерен код на JavaScript, с който се проверява:
дали съдържанието на текстовото поле не е празен низ и в нов малък прозорец се извежда съответно съобщение:
s=document.forms.f1.nam.value;
if (s==”") alert(‘Моля, въведете име’);
кои от трите възможности са посочени/избрани и за всяка избрана възможност в нов малък прозорец се извежда съответно съобщение:
for (i=0;i<document.forms.f1.cb.length;i++)
if (document.forms.f1.cb[i].checked) alert(‘Избрали сте вариант номер’+i);
избраната от менюто възможност и в нов документ се извежда подходящо съобщение:
if (document.forms.f1.s[1].selected) document.write(‘Избрали сте вариант две’);
2.3. Използване на собствени функции
Както всеки език, така и JavaScript дава възможност части от програмата да се обособят в самостоятелни единици – подпрограми (в случая на JavaScript – функции).
Функциите могат да връщат и резултат.
Ако атрибутът onsubmit на формуляра върне “лъжа” (false), не се извършва предаване на информацията към сървъра.
Пример 3
Предварителна проверка на полетата във формуляр:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html><head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″>
<script type=”text/javascript”>
function check(){
if (document.forms.f1.txt.value==”") return false;
return true;  }
</script>
</head>
<body>
<form name=”f1″ id=”f1″ method=”post” action=”www.host.com/proc.cgi”
onsubmit=”return check()”>
<input type=”text” name=”txt” id=”txt”> … </form></body></html>

Задача 6
Да се състави страница, представляваща тест в минимален вариант. На Фиг.1 е даден видът й, като са посочени верните отговори. При натискане на “Оценка” (това всъщност е submit – бутона във формуляра) трябва да се задейства JavaScript код, формиращ оценката и извеждащ нова страница, съдържаща оценката, например само едно изречение: “За 25 точки получавате оценка 6″ или “За 10 точки получавате оценка 3″. За всеки верен отговор се добавят по 5 точки. Там, където се допускат повече от един верен отговор (Въпрос 1) всяко отклонение от посочения по-горе напълно верен отговор, води до получаване на 0 точки за въпроса. Крайната скала е: 10 точки – 3, 15 точки – 4, 20 точки – 5 и 25 точки за оценка 6.
След като се убедите в работоспособността на скрипта, включен в документа го изнесете в js-файл.
Указания:
Създайте документ, съдържащ формуляра от Фиг.1.  Концентрирайте се не толкова върху оформлението на формуляра, колкото върху включването на необходимите елементи в него и съответно върху реализацията на  JavaScript кода;
Можете да използвате фрагменти от кода в методическото ръководство и да започнете с долния примерен фрагмент, в който всеки checkbox има различно име, като този с име C5 не е избран.
За всеки от въпросите предвидете подходяща проверка, в зависимост от елементите на формуляра, като за верен отговор точките трябва да нарастват с 5. За проверката верността на отговора на Въпрос1 трябва да се използва съставно условие аналогично на следния пример:

<script type=”text/javascript”>
score=0;bal=2;
function check(){
if ( document.forms.f.C1.checked &&
document.forms.f.C3.checked &&
!document.forms.f.C5.checked)         score=score+5;
…
return false;
}
…
<form name=”f” id=”f” method=”post” onsubmit=”return check();”>…

Няма подобни статии