7 Основи javascript
JavaScript - це мова написання сценаріїв, призначених для виконання безпосередньо на машині користувача. Розміщюються сценарії JavaScript або усередині HTML-документів, або в окремих файлах з розширенням * .js. Мова JavaScript застосовується для перевірки правильності заповнення форм, організації зручної навігації в межах сайту, а також для створення інших сервісів.Кожна вставка зі сценарієм JavaScript в HTML-документі починається відкриваючим дескриптором <script> і завершується закриваючим дескриптором </script>. Відкриваючий дескриптор <script> може мати необов'язковий параметр LANGUAGE, якому повинне бути привласнене значення. У зв'язку з появою ще однієї мови сценаріїв, VBScript, рекомендується завжди вказувати цей параметр. Крім того, зверніть увагу на використання дескрипторів коментарія <!-- й //-->. Якщо сторінка з JavaScript буде завантажена в браузер, який не підтримує мови сценаріїв, рядки програми будуть виведені на екран як звичайний текст, засмічуючи основний зміст сторінки. Якщо ж використати в документі дескриптори коментарія, то браузер, який не підтримує JavaScript, пропустить текст програми, сприймаючи його як коментар. Наприклад,
<html>
<body>
<script language="JavaScript">
<!--
document.write("Це JavaScript!")
// -->
</body>
</html>
Браузер, який підтримує JavaScript, виведе на екран "Це JavaScript!", в іншому випадку екран буде пустим. Сценарії мовою JavaScript може містити наступні елементи.
Оператори. Вони виконують дії над одним або декількома операндами або змінними. Оператори відокремлюються один від одного символом ";". Функції. Являють собою послідовність операторів, що виконують яке-небудь загальне завдання. Приклад:
<html>
<script language="JavaScript">
<
!--
function myFunction() {
document.write("Ласкаво просимо!<br>"); -опис функції
}
myFunction(); -виклик функції
// -->
</script>
</html>
В наведеному прикладі функція myFunction() виведе у вікні браузера текст “Ласкаво просимо!”. Методи. Це функції, які відразу роблять якусь дію над об'єктом. Метод являє собою функцію, пов'язану з об'єктом. Зокрема, використовуючи методи alert, confirm і prompt, можна виводити повідомлення користувачеві. Повідомлення, виведені за допомогою методу alert, застосовуються для виводу попереджень або якої-небудь корисної для користувача інформації. Метод confirm призначений для виводу повідомлень, що вимагають прийняття користувачем деякого рішення, тому у виведеному на екран вікні присутні дві кнопки - ОК і Скасування. При використанні методу prompt виведене вікно діалогу крім самого повідомлення містить також поле для уведення тексту. Події. Події — це дії, які зробив користувач. Подіями є щиглик на посиланні або кнопці, наведення покажчика миші на який-небудь об'єкт, щиглик в текстовому полі перед початком його заповнення (тобто передача фокуса уведення цьому елементу вікна) і т.д. Приклад обробки події onClick (щиглик по кнопці "Click me")
<form>
<input type="button" value="Click me" onClick="alert('ОК')">
</form>
При натисканні кнопки з написом "Click me" випливає вікно з текстом 'ОК'. Оброблювачі подій — це підпрограми, які дозволяють програмістові відслідковувати дії користувача. Опис деяких оброблювачів подій і приклади їхнього використання наведено в таблиці.
Таблиця 7.1
|
Подія |
Опис та прклад використання |
|
OnClick |
Реагує на одинарний щиглик миші по об’єкту. <A HREF="#null" OnClick="alert('Приклад події OnClick'); return false" LANGUAGE="Javascript"> Приклад </A> |
|
OnDblClick |
Реагує на подвійний щиглик миші. <A HREF="#null" OnClick="return false" OnDblClick="alert('Приклад події OnDblClick')" LANGUAGE="Javascript"> Приклад </A> |
|
OnDragStart |
Реагує на перетаскування курсором миші. <A HREF="#null" OnClick="return false" OnDragStart ="alert('Приклад події OnDragStart ')" LANGUAGE="Javascript"> Приклад </A> |
|
OnKeyDown |
Реагує при натисканні й триманні клавіші. <A HREF="#null" OnKeyDown="alert('Приклад події OnKeyDown')" LANGUAGE="Javascript"> Приклад </A> |
|
OnKeyPress |
Реагує при натисканні клавіші. <A HREF="#null" OnKeyPress="alert('Приклад події OnKeyPress')" LANGUAGE="Javascript"> Приклад </A> |
|
OnKeyUp |
Реагує при відпусканні клавіші. <A HREF="#null" OnKeyUp="alert('Приклад події OnKeyUp')" LANGUAGE="Javascript"> Приклад </A> |
|
KeyCode |
Містить символ клавіші (UNICODE) , що була натиснута, щоб змусити події onkeypress, onkeydown або onkeyup працювати. |
|
OnMouseDown |
Реагує на натискання кнопки миші. <A HREF="#null" OnMouseDown="alert('Приклад події OnMouseDown')" LANGUAGE="Javascript"> Приклад </A> |
|
OnMouseMove |
Реагує щораз, коли миша користувача переміщається поверх певного тексту в документі. У наступному прикладі, коли користувач проводить по тексту курсором миші, у статустному рядку відображається різний текст: <p OnMouseMove="top.status='Тут ПЕРШИЙ коментар...' " STYLE="cursor:default" ALIGN="center"> Тут перший коментар, <em onmousemove="top.status='Тут ДРУГИЙ коментар...';self.event.cancelBubble=true;return true"> тут другий</em>, і знову перший</p> |
|
OnMouseOut |
Реагує коли курсор миші залишає зону посилання. <A HREF="#null" OnMouseOut="alert('Приклад події OnMouseDown')" LANGUAGE="Javascript"> Приклад </A> |
|
OnMouseOver |
Реагує коли курсор миші користувача входить в зону посилання. <A HREF="#null" OnMouseOver="alert('Приклад події OnMouseOver')" LANGUAGE="Javascript"> Приклад </A> |
|
OnMouseUp |
Реагує на відпущення кнопки миші <A HREF="#null" OnMouseUp="alert('Приклад події OnMouseUp')" LANGUAGE="Javascript"> Приклад </A> |
Коментарі. Це примітки програміста. Коментарі бувають однорядкові ( починаються з двох символів //) та багаторядкові (починаються з символів /* та закінчуються символами */ ). Змінні. У програмі мовою JavaScript змінні оголошуються за допомогою ключового слова var, за яким слідує ім'я змінної. Можливе оголошення відразу декількох змінних, у цьому випадку вони розділяються комами. Крім того, змінні при оголошенні можуть бути відразу ж ініціалізовані, тобто їм буде привласнене значення. Областю видимості змінної є поточна функція або, у випадку оголошення поза функцією, весь поточний документ (Web-сторінка). Змінні в мові JavaScript підрозділяються на типи - чисельні, логічні (true або false), строкові (обрамляються в одинарні або подвійні лапки).
На завершення, приклад інтерактивної сторінки з використанням JavaScript.
Рисунок 7.1 – Зовнішній вигляд сторінки
Код сторінки:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
<head>
<title>Інтерактивний тест на знання HTML</title>
<style type="text/css">
<!-і
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
body {
color: #000;
background: #fff;
font: 75% Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
h1 {
font-size: 200%;
color: #fff;
background: #369;
margin: 0px;
padding: 5px 20px;
}
form {
margin: 0px;
padding: 0px;
}
h2 {
font-size: 150%;
color: #369;
margin: 10px 20px 5px;
}
p {
margin: 0px 50px;
}
p.buttons {
padding: 30px 0px;
}
#questions, #results
{
display: none;
}
-і>
</style>
</head>
<body onload="hideNoDHTML();">
<script type="text/javascript">
<!-і
function hideNoDHTML()
{
document.getElementById('nodhtml').style.display = 'none';
showQuestions();
}
function showQuestions()
{
document.getElementById('questions').style.display = 'block';
document.getElementById('results').style.display = 'none';
}
function showResults()
{
var i = 0;
if(document.getElementById('choice12').checked == true)
{
i++;
}
if ((document.getElementById('choice31').checked == true) && (document.getElementById('choice32').checked == false) && (document.getElementById('choice33').checked == true) && (document.getElementById('choice34').checked == false))
{
i++;
}
document.getElementById('questions').style.display = 'none';
document.getElementById('results').style.display = 'block';
document.getElementById('results').innerHTML = '<h2>Результати тесту</h2>\n<p>Кількість правильних відповідей: <strong>' + i + '</strong>.</p>';
if(i == 2)
{
document.getElementById('results').innerHTML += '<p style="color: #096">Поздоровляємо з відмінним результатом!</p>';
}
if(i ==0)
{
document.getElementById('results').innerHTML += '<p style="color: #c00">На жаль, результат дуже поганий</p>';
}
document.getElementById('results').innerHTML += '<p class="buttons"><input type="button" value="Повернутися до запитань" onclick="showQuestions();" /></p>';
}
function getHelp()
{
document.getElementById('choice12').checked = true;
document.getElementById('choice31').checked = true;
document.getElementById('choice32').checked = false;
document.getElementById('choice33').checked = true;
document.getElementById('choice34').checked = false;
}
//-і>
</script>
<h1>Інтерактивний тест на знання HTML</h1>
<div id="nodhtml">
<h2 style="color: #c00">Помилка</h2>
<p>Ваш браузер повною мірою не підтримує технології динамічного HTML. Імовірно, ви відключили JavaScript або використаєте застарілу версію браузера. На жаль, ця сторінка не буде коректно працювати у вашому браузері</p>
</div>
<div id="questions">
<form action="">
<h2>1. Яке, на ваш погляд, основне призначення мови HTML? </h2>
<p><input type="radio" name="question1" id="choice11" /> <label for="choice11">Візуальне оформлення веб- сторінок </label></p>
<p><input type="radio" name="question1" id="choice12" /> <label for="choice12">Логічне структурування вмісту веб-сторінок</label></p>
<p><input type="radio" name="question1" id="choice13" /> <label for="choice13">Опис правил передачі гіпертекстової інформації</label></p>
<p><input type="radio" name="question1" id="choice14" /> <label for="choice14">Керування поданням даних веб- сторінок </label></p>
<h2>2. Які теги з перерахованих нижче визначають елементи-контейнери? </h2>
<p><input type="checkbox" id="choice31" /> <label for="choice31"><a></label></p>
<p><input type="checkbox" id="choice32" /> <label for="choice32"><br></label></p>
<p><input type="checkbox" id="choice33" /> <label for="choice33"><div></label></p>
<p><input type="checkbox" id="choice34" /> <label for="choice34"><img></label></p>
<p class="buttons"><input type="button" value="Показати результати" onclick="showResults();" /> <input type="button" value="Підказати відповіді" onclick="getHelp();" /> <input type="reset" value="Очистити форму" /></p>
</form>
</div>
<div id="results"></div>
</body>
</html>
В наведеному прикладі функція showResults() підраховує кількість вірних відповідей та на новій сторінці виводе результат та коментар. Викликається функція натисканням кнопки “Показати результати” (подія onclick ). Функція getHelp() вказує вірні відповіді, викликається натисканням кнопки "Підказати відповіді". Функція showQuestions() знову завантажує сторінку з запитаннями, викликається натисканням кнопки “Повернутися до запитань". Код сторінки створений з використанням каскадних таблиць стилів.