Сценарії JavaScript розміщуються всередині WеЬ-сторінки і не можуть існувати
окремо від неї. Для виконання JS-сценаріїв не потрібен компілятор, вони виконуються браузером. JS-сценарій – це звичайний текст, і ви можете переглянути код сценарію неозброєним поглядом - без будь-якого спеціального програмного забезпечення.Що ж такий JavaScript? Це мова програмування із синтаксисом, подібним з мовою Java, що використовується у складі НТМL-сторінок для збільшення їхньої функціональності. Спочатку мова JavaScript була розроблена компаніями Netscape і Sun Microsystems, за його основу було взято мову Sunjava.
JavaScript дозволяє реалізувати функції сторінки, які неможлив реалізувати стандартними тегами HTML. Сценарії запускаються в результаті настання якоїсь події, наприклад користувач натиснув кнопку або змінився розмір вікна. JavaScript має доступ до властивостей документа та властивостей браузера.
JavaScript використовується об'єктна модель документа, в рамках якої кожен НТМL-контейнер можна розглядати як сукупність властивостей, методів та подій, що відбуваються у браузері.
По суті це зв'язок між НТМL-сторінкою та браузером.
Поки що вам потрібно знати, що є старший клас Window, що дозволяє звертатися до методів та властивостей НТМL-сторінки та браузера.
Наприклад, метод close() дозволяє закрити вікно браузера, а властивість location - звернутися до адресного рядка браузера.
У JavaScript все засноване на класах та об'єктах (оскільки це об'єктно-орієнтована мова), і без них ви не зможете написати свої програми. Саме тому ми почали розмову про об'єктної моделі JavaScript у цьому вступному розділі.
Об'єкт можна сприймати як сукупність даних та методів (функцій) для їхньої обробки. JavaScript з деякими об'єктами також зв'язуються певні події.
Давайте розберемося, що таке об'єкт, як кажуть, "на пальцях". Уявимо, що об'єкт – це людина Human. У такого об'єкта може бути маса характеристик - ім'я, стать, дата народження і т.д. Усе це називається властивостями об'єкта. Звернутися до нього можна так: об'єкт.властивість
Наприклад:
Human.Sex = 'М';
Human.Name = 'Микола';
Numan.YearOfBirth = '1976';
Human.Sex = 'М';
Human.Name = 'Микола';
Numan.YearOfBirth = '1976';
Метод – це функція обробки даних.
Наприклад, метод, що повертається Рік народження людини може називатися GetYear.
Звернення до методу виробляється так:
объект.метод(параметри);
Звернення до методу виробляється так:
объект.метод(параметри);
Наприклад:
Human.GetYear();
Human.GetYear();
Зв'язати метод із функцією можна так:
объект.метод = ім'я функції;
объект.метод = ім'я функції;
З об'єктом може бути пов'язана якась подія.
Наприклад, при народженні людини може генеруватися подія OnВirth.
Для кожної події можна визначити його обробник - функцію, яка буде на нього реагувати.
Що робитиме ця функція, залежить від події.
Наприклад,
Обробник OnВirth може заносити в якусь загальну таблицю бази даних інформацію про об'єкт - ім'я, стать та дату народження. Така таблиця може використовуватиметься для прискорення пошуку потрібного об'єкта.
Наприклад,
Обробник OnВirth може заносити в якусь загальну таблицю бази даних інформацію про об'єкт - ім'я, стать та дату народження. Така таблиця може використовуватиметься для прискорення пошуку потрібного об'єкта.
Тепер розглянемо ще одне, абстрактне поняття - клас. Клас - це зразок об'єкта, якщо хочете – тип змінної об'єкта.
Нехай ми розробили клас Human. Тоді об'єкт, тобто екземпляр класу Human, може називатися Human1.
Ви можете створювати декілька об'єктів класу Human
- Імена у них будуть різними:
John New Human;
Mary = New Human;
створюємо об'єкт John класу Human
створюємо об'єкт Mary класу Human
- Імена у них будуть різними:
John New Human;
Mary = New Human;
створюємо об'єкт John класу Human
створюємо об'єкт Mary класу Human
Перша програма
Щоб ваша JavaScript-програма (або сценарій) запустилася, її потрібно впровадити в НТМL-код документа (або "пов'язати" програму із документом).
Зверніть увагу - я використав два різні терміни - впровадження та зв'язування.
Я зробив це навмисне, тому що є різні способи взаємного існування JаvаSсriрt та HTML.
Найпростіший із них - використання тегу <SCRIPT>, який зазвичай розташований після тега <BODY> .
Наприклад:
<!-- Приклад 1 -->
<html>
<head>
<title> Привіт </title>
</head>
<body>
<script>
document.write("<h1> Пpивіт, світе! </h1>");
</script>
</body>
</html>
Однак не завжди потрібно, щоб ваша програма починала працювати одразу
під час відкриття сторінки. Найчастіше потрібно, щоб вона запускалася при
певній події, наприклад, при натисканні якоїсь кнопки. При натисканні
кнопки генерується подією onClick.
певній події, наприклад, при натисканні якоїсь кнопки. При натисканні
кнопки генерується подією onClick.
Обробник для цієї події можна вказати прямо в НТМL-коді, наприклад:
<form>
<input type=button value="Haзaд" onClick="history.back()">
</form>
Зрозуміло, що не завжди обробник події компактний. Іноді він просто
не міститься в один-два рядки. Звичайно, максимальна довжина значення
атрибута НТМL-тега становить 1024 символи, що цілком вистачило б для
нескладних обробників.
не міститься в один-два рядки. Звичайно, максимальна довжина значення
атрибута НТМL-тега становить 1024 символи, що цілком вистачило б для
нескладних обробників.
Однак такі довгі обробники значно погіршують читабельність НТМL-коду, тому
якщо обробник події досить довгий, його прийнято оформляти як функції,
наприклад:
<form>
<input type="button" vаluе="Натисніть мене"
onClick="openWindow()">
</form>
Функцію open Window() потрібно визначити у тезі <SCRIPT>.
<!-- Приклад 2 -->
<html>
<head>
<script language="JavaScript">
function openWindow()
{
msgWindow=open("ім'я файла.html")
}
</script>
</head>
<body>
<form>
<input type="button" value="Відкрити веб сторінку" onClick="openWindow()">
</form>
</body>
</html>
Запитання
1. Що таке Javascript ?
2. Як виконуються сценарії Javascript ?
3. Як використовується в Javascript об'єктна модель документа ?
4. Що таке об'єкт в Lavascript ?
5. В яких розділах веб-сторінки можуть розміщуватися вказівки Javascript ?
Завдання
1. Виконати приклад 1
2. Виконати приклад 2
Комментариев нет:
Добавлять новые комментарии запрещено.