Урок 22

Поняття об’єктної моделі документа. Веб-програмування та інтерактивні сторінки

ОБ'ЄКТНА МОДЕЛЬ ДОКУМЕНТА DOM

 Веб-програмування та інтерактивні сторінки
JavaScript - стандартна мова для веб-скриптів - назва реалізації стандарту мови програмування ECMAScript компанії Netscape. 
Найпоширеніше і найвідоміше застосування мови — написання сценаріїв для веб-сторінок, але, також, використовується для впровадження сценаріїв керування об'єктами вбудованими в інші програми.

Основні властивості Javascript не потрібно компілювати, він підключається до HTML-сторінки й працює "як є".

Функції Javascript: 

  • змінювати сторінку, 
  • писати на ній текст,
  • додавати й видаляти теги,
  • міняти стилі елементів,
  • реагувати на події: (скрипт може чекати, коли що-небудь трапиться (клік миші, закінчення завантаження сторінки) і реагувати на це виконанням функції.) 
  • виконувати запити до сервера й завантажувати дані без перезавантаження сторінки. (Це іноді називають "AJAX".) 
  • встановлювати й зчитувати cookie, 
  • валідувати дані (перевіряти їх коректність), 
  • виводити повідомлення (й багато чого іншого.) 



















Унікальність javascript: 
  • Повна інтеграція із браузером
  • Прості речі робляться просто 
  • Підтримується майже скрізь 
Структура мови 
Структурно Javascript можна представити у вигляді об'єднання трьох частин: 


Змінні

Змінні в javascript слабко типізовані. Це означає, що при оголошенні не потрібно вказувати тип. Можна надати змінній будь-яке значення. Однак при цьому інтерпретатор javascript (браузер) завжди знає, якого типу значення містить дана змінна, а значить - які операції до неї застосовні. 

Змінну не обов'язково оголошувати. Досить їй просто надати значення: x = 5. В іменах змінних можуть використовуватися латинські букви (a...z, A...Z), цифри (0...9), знак долара ($) і знак підкреслення (_), при цьому не можна використовувати цифру першою.

Бібліотека JQuery

jquery - бібліотека Javascript, що фокусується на взаємодії Javascript і HTML. Була опублікована на комп'ютерній конференції «Barcamp» у Нью-Йорку Джоном Ресигом в 2006 році. 

Початок роботи з jquery 

1. Скачати бібліотеку з будь-якого доступного джерела. 
2. Ініціалізувати її - тобто, необхідно додати в заголовок html-документа наступний код:
<script type="text/javascript" src="/jquery.js"></script>
де jquery.js - ім'я файлу, що містить бібліотеку jquery. 

А щоб jquery-скрипт виконувався разом із завантаженням документа:
$(document).ready(function(){ //Code here});
де code here - це код виконуваної функції. 

Після ініціалізації для використання доступні всі можливості базового функціонала jquery, серед яких: 
  • функції ядра; 
  • робота із селекторами; 
  • робота з атрибутами; 
  • обхід дерева DOM; 
  • маніпуляції елементами; 
  • робота з CSS-властивостями елементів; 
  • робота з подіями; 
  • візуальні ефекти; 
  • взаємодія з ajax; 
  • утиліти. 

Для маніпулювання потрібними елементами сторінки в Javascript є кілька способів знайти їх на сторінці серед безлічі інших об'єктів. Ці способи вимагають запам'ятовування великої кількості інформації, у той час як для пошуку елемента за допомогою jquery необхідно лише пам'ятати ID елемента, з яким ви прагнете працювати. Код звернення в загальному випадку буде виглядати так:
$('шлях до елемента (елементам)')
Ключовою функцією в jquery є функція $() - вона викликається всіма методами jquery.

Програмний код JavaScript можна помістити в документ HTML трьома способами:
  1. окремі скрипти розмістити в тілі документа, там, де в їхньому використанні є потреба;
  2. скрипти (функції, оголошення об'єктів) розмістити у заголовній частині документа між тегами <HEAD>...</HEAD>, а використовувати їх у тілі документа;
  3. зберегти скрипт у файлі (зазвичай із розширенням .js), а в документі дати посилання на нього.

У першому випадку для того, щоб повідомити браузер про використання JavaScript, у тіло HTML-документа потрібно вставити парний тег <SCRIPT> з атрибутом LANGUGE="JavaScript":
<SCRIPT LANGUGE="JavaScript"> програма на JavaScript</SCRIPT>
Оскільки браузер Internet Explorer здатний розпізнавати програму на JavaScript, вміщену між тегами <SCRIPT>...</SCRIPT>, для нього зазначений атрибут задавати необов'язково.

Для відвідувачів сторінки, у яких встановлений браузер, що не підтримує JavaScript, після тегів <SCRIPT>...</SCRIPT> вміщують теги <NOSCRIPT>...</NOSCRIPT>, які описують вміст та вигляд безскриптового варіанта сторінки.

JavaScript, як і будь-яка мова програмування, має набір інструкцій, що описують виконання тих чи інших дій. Синтаксис цих інструкцій схожий на синтаксис операторів у мові Java.
джерело

Практична частина

Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки.

Вправа 1
  • Відкрити програму «Блокнот»
  • Створимо просту вебсторінку зі сценарієм. Він виводитиме на екран вікно з повідомленням «ПРИВІТ!!!».
  • Для цього використаємо метод alert ().
  • Зберегти файл з ім’ям java1.htm

В цьому скрипті змінної відразу при оголошенні x присвоюється значення "ПРИВІТ !!!". В кінці рядка стоїть крапка з комою це роздільник команд. У наступному рядку, як Ви вже можете здогадатися, оголошена змінна y. Їй присвоєно значення щодо вже оголошеної x + додатковий рядок "ТИ МОЛОДЕЦЬ!".
 А потім викликається метод alert ().
Цей метод виводить на екран вікно діалогу з повідомленням, зазначеним в дужках. Це синтаксис всіх методів javascript: ім'я методу і дужки з його вмістом.


Вправа 2. Кольоровий список

Код скрипту може бути дуже різноманітний, залежно від того, що потрібно додати до сторінки. Так, наприклад, створимо список із семи елементів, розфарбовуючи їх у кольори райдуги.

Для початку додаємо до тіла документа об'єкт нумерованого списку new_list. Далі у циклі, котрий виконається 7 разів, створюємо елементи li і додаємо їх не до загального документа, а всередину списку new_list.

Створюємо масив кольорів: 

var colors = ["red", "orange", "yellow", "green", "blue", "navy", "purple"];

А також масив усіх елементів, що оформлені тегом li:

var x = document.getElementsByTagName("li");

Для кожного з об'єктів списку x, встановлюємо колір та змінюємо напис, додаючи до нього назву кольору:

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

  x[i].style.color = colors[i];

  x[i].innerHTML = x[i].innerHTML + " = "+colors[i];

}

Результат можна переглянути у проекті:

https://jsfiddle.net/oksanapas/6busqfLr/3/

джерело Дистосвіта





Немає коментарів:

Дописати коментар

Підписатися на: Дописи (Atom)