Об'єкти JavaScript. Керування завантаженням зображень Javascript реалізують керування зображеннями на сторінці

Нещодавно задумався, як на сайті dribbble.com реалізовано управління анімацією зображень. Коли на сторінці багато gif зображень дуже зручно, якщо вони не миготять перед очима, і користувач може сам вибрати, що переглянути, а що ні.

Щоб впровадити ручне управління gif анімацією у себе на сайті, готову бібліотеку JS Gifffer. Gifffer дозволяє вимкнути автоматичний запуск браузером gif-зображень. Крім того, бібліотека додає кнопку керування над анімацією: користувач може вручну запустити, поставити на паузу або відновити перегляд. І є ще один плюс. Кнопку запуску можна оформити так, як вам захочеться за допомогою CSS стилів.

Важливо! Якщо ви використовуєте gif анімацію на сайті під керуванням WordPress, під час завантаження двигун створює зменшені копії вихідного зображення. Проблема в тому, що копії стають статичними. Єдиний спосіб обійти цю проблему – виводити вихідне зображення. Це означає, що оптимізацію та вибір відповідного розміру, необхідно проводити перед заливкою картинки на сайт. Залишається сподівається, що у майбутніх версіях WP цю проблему буде усунуто.

Підключаємо бібліотеку.

У тезі img вкажіть шлях до зображення, замість src використовуйте атрибут data-gifffer . Наприклад:

Ініціалізація бібліотеки:

Window.onload = function() ( Gifffer(); )

Можна оформити кнопку запуску анімації.

window.onload = function() ( Gifffer(( playButtonStyles: ( "width": "60px", "height": "60px", "border-radius": "30px", "background": "rgba(255, 255) , 255, 0.3)", "position": "absolute", "top": "50%", "left": "50%", "margin": "-30px 0 0 -30px" ), playButtonIconStyles: ( "width": "0", "height": "0", "border-top": "14px solid transparent", "border-bottom": "14px solid transparent", "border-left": "14px solid rgba (255, 255, 255, 0.75)", "position": "absolute", "left": "26px", "top": "16px" ) ))))

Додатково можна прописати атрибути зображення:

Робота бібліотеки сумісна з браузерами:

Chrome, FF, Safari, Opera, IE9+

Щоб наша бібліотека запрацювала на сайті WordPress, нам доведеться підкоригувати звичайний виведення мініатюр з використанням функції the_post_thumbnail . Для роботи анімації, нам потрібно додати зображення атрибут data-gifffer. Робиться це так:

Від автора: Схоже, що завантаження зображень або повністю упускається із виду, або доручається надмірно великим плагінам. Гарне, гладке та швидке завантаження сайту – найважливіша частина гарного враження користувача, а також – елементарна ввічливість по відношенню до вашого дизайнера. Кому хочеться щоразу при вході на сторінку бачити свій дизайн зіпсованим повільним рядковим завантаженням зображень?

Безліч сайтів, над якими я працюю, сильно перевантажені фотографіями, і всі переваги швидкісного Інтернету зводяться нанівець необхідністю надання матеріалів в ультрависокій роздільній здатності retina для дедалі більшої кількості пристроїв. Це – найкращий момент, щоб взяти кермо в свої руки і почати контролювати завантаження зображень, і в цій статті я продемонструю вам чотири легкі методи, за допомогою яких ваш сайт буде і чудово виглядати, і здорово збільшить свою продуктивність.

Щоразу побачивши повільно завантаження зображення я згадую цю класичну сцену з хлопцем з коміксу.

Це методика, яку можна застосувати до будь-якого або всіх зображень свого сайту для запобігання (або хоча б приховання) традиційного рядкового завантаження базових JPG'ів. Ми почнемо з упаковки кожного зображення до div з класом img_wrapper:

Цей пакувальник надасть нам деяке додаткове керування розмірами наших зображень та їх коефіцієнтом пропорційності, що не може гарантувати простий тэг img. Він також дасть можливість застосувати спіннер завантаження - або як фонове зображення, або як окремий елемент - який після закінчення завантаження можна приховати.

Для цього прикладу обмежимо своє зображення коефіцієнтом пропорційності 4:3 дуже важливо для адаптивних сайтів. Зверніть увагу, що ми також приховали зображення за допомогою opacity: 0;, що дає нам можливість керувати тим, як і коли ми його побачимо при настанні потрібного моменту.

Img_wrapper( position: relative; padding-top: 75%; overflow: hidden; ) .img_wrapper img( position: absolute; top: 0; width: 100%; opacity: 0; )

Кожна картинка в DOM запускає подію load, коли всі дані завантажені з сервера, а саме зображення відображене браузером. Щоб захопити та прив'язати цю подію, нам знадобиться використовувати JavaScript. Я почну з додавання атрибуту onload до тега зображення.

До уваги новачків, які ще не бачили нічого подібного - це називається вбудованим атрибутом скрипта, і дозволяє нам прив'язати функціональність JavaScriptу прямо до подій, що запускаються з елементів DOM, що багато в чому схоже з додаванням стилів безпосередньо до елементів за допомогою вбудованого атрибуту style. Вірте чи ні, але на початку розвитку Інтернету ці вбудовані атрибути скрипту займали значну частину написання JavaScript'а і, подібно до вбудованих стилів, засуджуються в наші дні борцями за чистоту коду та семантику.

Тому ті з вас, хто відчуває огиду побачивши вбудований JavaScript і вже готовий пуститися втік, будь ласка, затримайтеся і повірте мені на слово, що це все ще єдиний ефективний і надійний метод захоплення події load зображення в DOM. Хоча я цілком і повністю виступаю за прогрес та HTML5 – я не маю зовсім нічого проти застосування прийомів старої школи, якщо вони елегантні та функціональні.

Альтернативою є індивідуальна прив'язка події load до кожного зображення в document ready. Однак проблема виникає, коли зображення завантажуються перед запуском document ready, і до того, як у нас з'являється можливість прив'язати функціональність до події завантаження кожного зображення. Окрема проблема, коли зображення вже кешовані браузером попередньої сесії, і завантажуються миттєво. Ми пропускаємо подію, а наша функція не викликається. У атрибуту onload відсутні такі проблеми, тому що він, так би мовити, «попередньо прив'язаний» до події і тому обробляється, коли браузер аналізує HTML.

Я абсолютно не маю нічого проти використання прийомів старої школи, якщо вони елегантні та функціональні.

При доданому атрибуті onload в момент завантаження зображення буде викликано функцію imgLoaded(). Її потрібно помістити у файл javascript у head самої сторінки (після jQuery, якщо ви його застосовуєте у своїй функції, і після будь-яких інших плагінів) для того, щоб вона компілювалася до парсингу body і завантаження зображень. Якщо вставити функцію внизу сторінки, висока ймовірність того, що зображення будуть завантажуватися до визначення функції.

За допомогою ключового слова this ми можемо надіслати необроблений об'єкт DOM зображення у свою функцію JavaScript як аргумент:

function imgLoaded(img)( var $img = $(img); $img.parent().addClass("loaded"); );

Або простим JavaScript'ом:

function imgLoaded(img)( var imgWrapper = img.parentNode; imgWrapper.className += imgWrapper.className ? " loaded" : "loaded"; );

За допомогою JavaScript можна швидко пройти по DOM на один рівень вгору і додати до елемента упаковщика клас loaded. Я впевнений, ви погодитеся з тим, що це напрочуд елегантне рішення. Вибірково призначивши цьому класу стилі, тепер можна показати своє завантажене зображення, встановивши його непрозорість на 1:

Img_wrapper.loaded img( opacity: 1; )

Щоб процес відбувався гладко, ми додамо до img кілька переходів CSS3 і досягнемо завантаження свого зображення ефекту «поступового прояву».

Img_wrapper img( position: absolute; top: 0; width: 100%; opacity: 0; -webkit-transition: opacity 150ms; -moz-transition: opacity 150ms;

Дивіться працюючий приклад на codepen.io, що включає альтернативну версію з відображенням завантаження спінера.

Як примітки до цієї техніки та у відповідь на деякі отримані мною до цієї статті відгуки, безперечно варто згадати «прогресивні» JPG'и. Це ще одна давня методика родом з 1990-х, що стосується збереження JPG'ів як «прогресивних», а не «звичайних» з метою запобігання рядковому завантаженню – а замість неї покадрово промальовуючи зображення однієї висоти в міру його завантаження. Основна перевага цього прийому полягає в тому, що він запобігає «стрибкам» контенту, що прибуває, по сторінці при завантаженні зображень.

Чи подразнюють такі ефекти, як спіннери завантаження і поступовий прояв – це справа особистого смаку, але в основному прийом з div'ом, що упаковує, вирішує ці проблеми за допомогою мінімуму CSS і JavaScript'а.

У застосуванні техніки div'а, що упаковує, найкраще те, що можна не хвилюватися з приводу зміни висоти зображень у міру їх завантаження, а також не потрібно прирікати своїх користувачів на потворне об'єднання пікселів у групи, що, на мою думку, може для користувача виявитися настільки ж дратівливим, як і звичайне завантаження. До того ж вона нічого не варта – процес повторного відображення малюнку кілька разів насправді створює додаткове навантаження на малопотужні мобільні пристрої. Чи подразнюють такі ефекти, як спіннери завантаження і поступовий прояв - це справа особистого смаку, але в основному прийом з div'ом, що упаковує, вирішує ці проблеми за допомогою мінімуму CSS і JavaScript'а, і відсутня необхідність покладатися на користувача (у ситуації з CMS) за збереження JPG'ів певним способом.

Вищеописана техніка дуже хороша для окремих зображень, але як бути, якщо у нас є добірка зображень, які потрібно відобразити в «каруселі» чи слайдшоу, або якщо ми користуємося плагіном розмітки типу Masonry? Звичайна помилка під час використання плагінів «каруселі»/слайдера – їх обробка при document ready, найчастіше до завантаження їх зображень. Це може викликати перехід слайдшоу до порожнього, ще не завантаженого зображення, особливо якщо ми маємо справу з фотографіями з високою роздільною здатністю та великим розміром файлу.

Для попередження цього явища потрібно обробляти плагін тільки тоді, коли всі необхідні зображення вже завантажилися. Застосувавши варіацію наведеної вище техніки, ми знову додамо атрибут onload до всіх зображень свого слайдшоу:

NB: Нижченаведена розмітка наводиться лише як спрощений зразковий варіант розмітки слайдшоу, і повинна бути адаптована відповідно до ваших вимог.

У JavaScript'і ми застосуємо функцію slideLoaded() для відстеження процесу завантаження зображень, і піддамо свою плагін обробці, коли готовий:

function slideLoaded(img)( var $img = $(img), $slideWrapper = $img.parent(), total = $slideWrapper.find("img").length, percentLoaded = null; $img.addClass("loaded "); var loaded = $slideWrapper.find(".loaded").length; = loaded/total * 100;););

Щоразу під час завантаження матеріалу ми додаємо до нього клас loaded для стеження його прогресом.
За допомогою останнього if ми ініціалізуємо плагін (в даному випадку jQuery EasyFader), коли кількість зображень з класом loaded дорівнює кількості зображень в контейнері. Як додаткову властивість можна розділити змінну loaded на змінну total і використовувати її для візуалізації прогресу для користувачів: або відображення відсоткового співвідношення, або використовуючи її для керування шириною індикатора виконання, або іншим подібним чином.

І знову, цей скрипт повинен бути поміщений в head вашого документа, після jQuery і того плагіна, який ви будете обробляти, коли готовий.

На сайтах з великою кількістю зображень можна трохи знизити навантаження при закачуванні зображень шляхом фонового завантаження зображень у кеш браузера, поки користувач блукає сторінкою.

Наприклад, скажімо, у мене є багатосторінковий сайт, де кожна друга другорядна сторінка має вгорі зображення у високій роздільній здатності. Замість того, щоб примушувати користувача чекати на час завантаження всіх цих зображень кожного разу при переході на окрему сторінку, можна завантажити їх у кеш до того, як користувач потрапить на сторінку. Давайте почнемо з поміщати їх URL у масив:

var heroArray = [ "/uploads/hero_about.jpg", "/uploads/hero_history.jpg", "/uploads/hero_contact.jpg", "/uploads/hero_services.jpg" ]

Зазвичай я скористався своєю CMS або будь-яким іншим бекендом, на чому створюю сайт, для передачі цих даних на саму сторінку у формі тега script в нижньому колонтитулі. Таким чином, список зображень можна динамічно оновлювати та розширювати.

Коли користувач зайде на домашню сторінку мого сайту, я дочекаюся її повного завантаження, перш ніж щось робити, щоб переконатися, що я не перериваю завантаження контенту самої сторінки, додаючи стороннє завантаження. Для цього, я прикріплю функціональність JavaScript'а до події window load, що запускається тільки коли весь контент сторінки вже завантажений і відображений (включаючи зображення), на відміну від події document ready, яка запускається, як тільки готовий DOM:

function preCacheHeros()( $.each(heroArray, function()( var img = New Image(); img.src = this; )); ); $(window).load(function()( preCacheHeros(); ));

Або простим JavaScript'ом:

function preCacheHeros()( for(i = 0; i< heroArray.length; i++){ var url = heroArray[i], img = new Image(); img.src = url; }; }; window.onload = preCacheHeros();

За допомогою циклу ми проходимо масивом heroArray, створюючи порожній об'єкт зображення на кожній ітерації, а потім задаємо URL для атрибуту src нашого зображення. Таким чином, зображення завантажується в кеш браузера для поточної сесії з тим, щоб коли користувач дійсно відвідав сторінку, на якій представлено зображення, воно миттєво відобразилося.

На жаль, хоча практика попереднього кешування прискорює завантаження і покращує враження користувача на стороні клієнта, насправді вона збільшує навантаження на сервер. У такому разі має сенс перед здійсненням попереднього кешування розглянути аналітику вашого сайту. Якщо більша частина ваших користувачів заходить на домашню сторінку вашого сайту і залишають її до відвідування другорядних сторінок, вартість додаткових запитів до вашого сервера може переважити переваги, що надаються тим користувачам, які залишаються.

Має сенс розглянути аналітику вашого сайту до впровадження попереднього кешування

Разом з тим, якщо ви дійсно хочете застосувати попереднє кешування, я раджу розділити зображення для нього на значні групи, які стратегічно розміщені на сайті. Наприклад, знаючи про те, що переважна більшість користувачів, що залишаються на сайті, після відвідування домашньої сторінки перейдуть до другорядної, я б попередньо кешував основне зображення другорядної сторінки, поки вони знаходяться на домашній сторінці.

Давайте, однак, уявімо, що кожен пост мого блогу також має зображення у високій роздільній здатності. Їхнє попереднє кешування, поки відвідувач знаходиться на домашній сторінці, не тільки завдасть сильного удару по серверній стороні, але і може виявитися марною витратою ресурсів, оскільки, скажімо, всього 15% користувачів, що заходять на домашню сторінку, переходять до посту блогу. Найкращим місцем для попереднього кешування зображень блогу може стати цільова сторінка, якщо знати, що майже всі користувачі перейдуть звідти до посту блогу.

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

Можливо, звучить дещо фантастично, але ви здивуєтеся, наскільки точно можна передбачити потік відвідувачів

Поняття lazy-loading відноситься до зображень, що завантажуються програмним шляхом після спеціальної події, щоб заборонити браузеру вимагати та відображати всі зображення на сторінці як тільки документ завантажується.

В основному застосовується у довгих або перевантажених зображеннями сторінках. На цільовій сторінці блогу Barrel ми поєднуємо «ліниве» завантаження з плагіном MixItUp для того, щоб гарантувати, що зображення, відсутні в поточному фільтрі або сторінці, не завантажуватимуться без особливої ​​потреби, поки цей елемент не стане видимим. Будь-які зображення, що підлягають «лінивому» завантаженню, ми знову обернемо в div з класом img_wrapper, якому в свою чергу поставимо клас lazy_load для того, щоб можна було легко вибрати їх за допомогою jQuery:

lazyLoad();

Наведена вище функція «ліниво» завантажує всі зображення після запуску події window load, але код всередині циклу.each() можна адаптувати так, щоб він підходив до багатьох ситуацій. Дуже поширене його застосування – прикріпити до події window scroll та «ліниво» завантажувати зображення в міру їх прокручування до вікна перегляду.

У процесі експериментування з парою цих методик над безліччю проектів протягом останніх приблизно 12 місяців мені довелося по-справжньому скоротити і відточити їх для застосування в нещодавно переробленому проекті barrelny.com (випущеному назад у світ у квітні), де я застосовував поєднання всіх чотирьох методів щоб забезпечити граціозне завантаження зображень, намагаючись при цьому вичавити кожну унцію продуктивності з екстремально перевантаженого фотографіями та зображеннями вебсайту. Шляхом комбінування попереднього кешування та «лінивого» завантаження із завантаженням сторінок за допомогою AJAX, слайдшоу та посторінковою розбивкою на стороні клієнта ми змогли створити чудове враження гладкості та всього сайту.

Намагаючись зробити вичавки з цих прийомів для презентації команди розробників Barrel, я був приємно здивований тим, наскільки легковажними є всі ці методики на папері – зазвичай 5-10 рядків коду в jQuery – і як легко їх впровадити в будь-який проект. Крім того, кожну з них можна написати простим JavaScript'ом без зайвого клопоту та додаткового коду, але якщо ви користуєтеся jQuery, як це часто робимо ми, безперечно слід скористатися перевагами його надійних методик проходу DOM.

Ці прийоми, безперечно, є єдиним способом виконання їхньої відповідної функціональності, але їх можна легко адаптувати під існуючі каркаси-фреймворки та плагіни. Якщо ви ще не обмірковували завантаження зображень, сподіваюся, що це зробите зараз! Чому б не застосувати один-два з них у своєму наступному проекті?

Частина 8: Об'єкт Image

Зображення на веб-сторінці
Розглянемо тепер об'єкт Image, який став доступним, починаючи з версії з 1.1 мови JavaScript (тобто Netscape Navigator 3.0). За допомогою об'єкта Image Ви можете вносити зміни до графічних образів, присутніх на веб-сторінці. Зокрема це дозволяє нам створювати мультиплікацію.
Зауважимо, що користувачі браузерів старіших версій (таких як Netscape Navigator 2.0 або Microsoft Internet Explorer 3.0 - тобто, які використовують версію 1.0 мови JavaScript) не зможуть запускати скрипти, наведені в цій частині опису. Або, у кращому разі, на них не можна буде отримати польового ефекту. Давайте спочатку розглянемо, як із JavaScript можна адресуватися до зображень, представлених на веб-сторінці. У мові, що розглядається, всі зображення постають у вигляді масиву. Цей масив називається images і є властивістю об'єкта document. Кожне зображення на веб-сторінці отримує порядковий номер: перше зображення отримує номер 0, друге – номер 1 тощо. Таким чином, до першого зображення ми можемо адресуватися, записавши document.images.
Кожне зображення в HTML-документі розглядається як об'єкт Image. Об'єкт Image має певні властивості, до яких можна звертатися з мови JavaScript. Наприклад, Ви можете визначити, який розмір має зображення, звернувшись до його властивостей width та height. Тобто за записом document.images.width можна визначити ширину першого зображення на web-сторінці (у пікселах).
На жаль, відстежувати індекс всіх зображень може виявитися скрутним, особливо якщо на одній сторінці у Вас їх досить багато. Ця проблема вирішується призначенням зображень своїх власних імен. Так, якщо Ви заводите зображення за допомогою тега

Ви зможете звертатися до нього, написавши document.myImage або document.images["myImage"].

Зміна зображень відповідно до подій, ініційованих самим читачем
Ви можете створити красиві ефекти, використовуючи зміну зображень як реакцію певних подій. Наприклад, Ви можете змінювати зображення в той момент, коли курсор миші потрапляє на певну частину сторінки.

Вихідний код цього прикладу виглядає так:


При цьому можуть виникнути такі проблеми:
- Читач користується браузером, який не має підтримки JavaScript 1.1.
- Друге зображення не було завантажено.
- Для цього ми маємо писати нові команди для кожного зображення на веб-сторінці.
- Ми хотіли б мати такий скрипт, який можна було б використовувати в багатьох веб-сторінках знову і знову, і без великих переробок.
Тепер ми розглянемо повний варіант скрипту, який би вирішив ці проблеми. Хоча скрипт і став набагато довшим - але написавши його один раз, Ви не більше турбуватиметеся про ці проблеми. Щоб цей скрипт зберігав свою гнучкість, слід дотримуватися двох умов:
- Не застерігається кількість зображень - не повинно мати значення, скільки їх використовується, 10 або 100
- Не застерігається порядок зображень - повинна існувати можливість змінювати цей порядок без зміни самого коду
(online-версія посібника дозволить Вам перевірити цей скрипт негайно)

Розглянемо скрипт (я вніс туди деякі коментарі):

width="140" height="50" border="0">

width="140" height="50" border="0">

width="140" height="50" border="0">


Цей скрипт поміщає всі зображення у масив pics. Створює цей масив функція preload(), що викликається на самому початку. Виклик функції preload() виглядає просто як:
preload("link1", "img1f.gif", "img1t.gif");
Це означає, що скрипт повинен завантажити із сервера два зображення: img1f.gif та img1t.gif. Перше - це та картинка, яка буде представлена, поки курсор миші потрапляє у область зображення. Коли ж користувач поміщає курсор миші на зображення, з'являється друга картинка. При виклику функції preload() як перший аргумент ми вказуємо слово "link1" і тим самим задаємо на веб-сторінці об'єкт Image, якому і будуть належати обидва попередньо завантажені зображення. Якщо Ви подивіться в нашому прикладі в розділі, то виявите зображення з тим же ім'ям link1. Ми користуємося не порядковим номером, а саме ім'ям зображення для того, щоб мати можливість переставляти зображення на web-сторінці, не переписуючи при цьому сам скрипт.
Обидві функції on() і off() викликаються за допомогою програм обробки подій onMouseOver і onMouseOut. Оскільки сам елемент image неспроможна відстежувати події MouseOver і MouseOut, ми повинні зробити цих зображеннях ще й посилання. Можна бачити, що функція on() повертає всі зображення, крім зазначеного, у вихідний стан. Робити це необхідно тому, що в іншому випадку виділеними можуть виявитися відразу декілька зображень (справа в тому, що подія MouseOut не буде зареєстрована, якщо користувач перемістить курсор із зображення відразу за межі вікна).
Зображення - безперечно потужний засіб викриття Вашої web-сторінки. Об'єкт Image дає Вам можливість створювати справді складні ефекти. Однак зауважимо, що не кожне зображення чи програма JavaScript здатне покращити Вашу сторінку. Якщо Ви пройдетеся по Мережі, то зможете побачити безліч прикладів, де зображення використані найжахливішим способом. Не кількість зображень робить Вашу веб-сторінку привабливою, а їхня якість. Саме завантаження 50 кілобайт поганої графіки здатне викликати роздратування.
При створенні спеціальних ефектів із зображеннями за допомогою JavaScript пам'ятайте про це і ваші відвідувачі/клієнти частіше повертатимуться на Ваші сторінки.

Таким чином, інструментарій роботи з поданням веб-документу нам надає CSS.

Залишилося пояснити питання з поведінкою веб-сторінки. Насамперед необхідно зрозуміти, що ховається за терміном "поведінка".

Поведінка веб сторінки це те, як вона буде реагувати на активність користувача. Також можна сказати, що поведінка веб-сторінки – це низка правил, за якими вона взаємодіє з користувачем.

Якщо копнути історію HTML, що нами було зроблено в одній з перших лекцій, можна дізнатися, що ця мова створювалася для спрощення взаємодії груп учених (запам'ятайте цей аргумент, якщо доведеться доводити комусь цінність наукової праці).

Тобто ніхто спочатку не закладав у HTML підтримку інтерактивної взаємодії з користувачем. Просто ніхто не міг припустити, який розвиток отримає глобальна павутина надалі.

За допомогою HTML та CSS можна створювати чудово оформлені та грамотно структуровані, але не інтерактивні сайти. Звичайно, існує ряд сайтів, що чудово обходяться без будь-якої "складної" взаємодії з користувачем. Але слід пам'ятати, що єдиним незаперечним на даний момент показником успішності сайту є його відвідувачів.

Тому хорошим тоном стало "обростання" сайтів форумами, блогами, можливостями взаємодії зі сторонніми сервісами і т.д. А в цій справі без інтерактивності вже далеко не втекти.

Під інтерактивністю, в даному контексті, автори розуміють складнішу поведінку елементів веб-сторінки у відповідь на дії користувача, ніж проста можливість переходити за вказаними посиланнями, тому що це є стандартною функцією HTML, закладеною в нього із самого початку.

Отже, стандартизований HTML, незважаючи на всі його переваги, стримує розробника, який прагне додавання складних сценаріїв поведінки у відповідь на дії користувача.

Звичайно, різноманітні спроби розширити можливості HTML робилися чи не з самого початку його існування, про це ми вже говорили у вступній частині до теми про каскадні таблиці стилів. Розробники різних браузерів закладали у них можливість роботи з нестандартизованими тегами. Легко можна здогадатися, що це вело до виникнення проблем сумісності, а розробник, який раніше існував у рамках HTML, ставав також залежним і від певного браузера.

Виходом із ситуації стали веб-сценарії – програми написані "звичайними" мовами програмування та впроваджені безпосередньо в HTML – код сторінки.

Взагалі, фантазія веб-дизайнера, який вирішив створити інтерактивну Web-сторінку з використанням Web-сценаріїв, майже нічим не обмежена. (В даний час існують навіть Web-сторінки, вміст яких може змінюватися самим користувачем прямо у вікні Web-браузера. Також Web-сценарії часто використовуються для правильного розміщення на сторінці елементів, що вільно позиціонуються. Зокрема, можна створити вільний елемент, який при будь-яких змінах розмірів вікна Web-браузера завжди перебуватиме в його центрі.

За допомогою Web-сценаріїв можна створити новий інтерфейс користувача для своєї сторінки. На багатьох сторінках використовується ієрархічний список, в якому перераховані всі розділи та підрозділи сайту. Такі сторінки нагадують вікно Провідника Windows. Часто за допомогою елементів, що вільно позиціонуються, і складних Web-сценаріїв створюють принципово нові елементи управління для введення даних.

Для підтримки мови сценаріїв використовується так званий інтерпретатор (або віртуальна машина) мови. Web-браузер виділяє сценарії з HTML-коду сторінки і передає його на виконання інтерпретатора. Останній аналізує код сценаріїв, розшифровує їх і виконує, передаючи результат виконання назад Web-браузеру.

Мови, на яких написані веб-сценарії інтерпретуються, це означає, що програма розшифровується при кожному її виконанні. У цьому полягає основна відмінність інтерпретованих мов програмування від компилируемых. У мовах компілювання програма розшифровується одноразово, після чого перетворюється на виконуваний машинний код.

Природно, що програми, написані компілюваними мовами виконуються швидше, ніж інтерпретованих, проте, з огляду на специфіки Інтернету, для написання Інтернет – сценаріїв підходять лише інтерпретовані мови.

Існує ще один дуже важливий момент, який неодмінно потрібно розуміти. Веб – сценарії виконуються за клієнта . Подібний підхід має як низку переваг, так і низку недоліків, але про це буде сказано пізніше.

JavaScript - прототипно-орієнтована мова сценаріїв, що дозволяє включати у веб-сторінки вміст, що виконується (скрипти). JavaScript виконується на стороні клієнта, і підтримка JavaScript увімкнена практично у всіх браузерах. За допомогою JavaScript можна створювати як статичні HTML сторінки, так і сторінки з змістом, що динамічно змінюється.

Сам JavaScript був розроблений Брендоном Айхом (на той момент співробітником компанії Netscape). Власне, про сам процес роботи над JavaScript ходять ледь не легенди, оскільки терміни були дуже стислими, потрібен був результат. Це пояснює низку існуючих у мові помилок. Докладніше про це можна прочитати у зазначених матеріалах для самостійного вивчення.

Причиною появи JavaScript стало бажання дати розробникам HTML-документів можливість динамічно керувати всіма об'єктами, що описуються на веб-сторінках. Спочатку мову було включено до браузера Netscape Navigator, починаючи з версії 2.0B3 у грудні 1995 року. Спочатку мова називалася Mocha, потім була перейменована на LiveScript. На синтаксис JavaScript вплинули такі мови, як C і Java, і оскільки технологія Java була на той час дуже модною, LiveScript перейменували на JavaScript, отримавши відповідну ліцензію від Sun Microsystems, Inc.

Реалізація компанії Microsoft отримала назву JScript. Internet Explorer , починаючи з версії 3.0, випущеної серпні 1996 року, підтримує JScript . Стандартизація мови асоціацією ECMA ініційована компанією Netscape. Стандартизована версія має назву ECMAScript, описується стандартом ECMA-262.

Web-браузер, що працює на комп'ютері-клієнті, забезпечує середовище, в якому JavaScript має доступ до об'єктів, які являють собою вікна, меню, діалоги, текстові області, фрейми, cookies(кукі) і введення-виведення в Web-сторінку. Крім того, оглядач дозволяє приєднати сценарії на мові та вивантаження сторінок та графічних образів, натискання клавіш і рух миші, вибір тексту та пересилання форм. При цьому програмний код сценаріїв лише реагує на події і тому не потребує головної програми. Набір об'єктів, що надаються браузером, відомий під назвою Document Object Model(DOM).

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

Ми вже торкалися цієї теми. Зараз поговоримо про це докладніше. У мові JavaScript всі елементи на веб-сторінці вишиковуються в ієрархічну структуру. Кожен елемент представляється як об'єкта. І кожен такий об'єкт може мати певні властивості та методи.

Припустимо, у нас є ось така web-сторінка:

Її html-код: Ієрархія об'єктів, створювана цією html-сторінкою, виглядає так:

Кожен об'єкт цієї структури має своє ім'я та індекс. Індекс визначається положенням об'єкта на сторінці (згори донизу). Тому картинка, яка розташована вище на сторінці, має менший номер. Нумерація починається з 0. Об'єкт formsмає властивість-масив - elements, в якому містяться посилання на елементи форми у порядку їх перерахування у тезі form. Їх нумерація також починається з 0. Об'єкти форми можуть мати свої підлеглі об'єкти. У нашому прикладі об'єкт elements, який є списком, це пункти списку, які мають внутрішню нумерацію.

Щоб отримати доступ до об'єкта, слід вказати весь шлях від верхівки ієрархії до потрібного елемента. Так, шлях до першої картинки виглядає так:

Document.images

Шлях до форми:

Шлях до списку:

Document.forms.elements

А шлях до третього пункту списку:

Document.forms.elements

Погодьтеся, що такий підхід не завжди зручний, тому що легко заплутатися у всіх цих індексах. Тому всім елементам на сторінці зазвичай даються імена і доступ до елементів здійснюється за іменами.

Наприклад, наша форма має ім'я forma1, а перше текстове поле – ім'я name. Тоді, щоб отримати доступ до нього, ми повинні написати:

Document.forma1.name

Щоб дізнатися, що користувач ввів у це текстове поле, використовується властивість value:

Document.forma1.name.value

Припустимо, ми хочемо здійснювати перевірку на збіг двох полів уведення пароля у нашому прикладі. Для цього напишемо таку функцію:

Function prov()( var a=document.forma1.elements.value; var b=document.forma1.elements.value; if (a==b)( alert ("Ви зареєстровані!"); ) else ( alert (" Введіть правильний пароль."); ) )

Нехай ця функція спрацьовує при натисканні на кнопку "Надіслати":

... ... ... ... ... ...

Щоб дізнатися, яку стать вказав користувач, використовується властивість перемикачів checked. А для визначення обраного користувачем пункту зі списку – властивість selected.

Припустимо, ми хочемо, щоб залежно від обраних статі та захоплення, користувачеві видавалося якесь повідомлення. Перепишемо функцію prov():

function prov()( if (document.forma1.elements.checked && document.forma1.elements.selected)( alert ("Чоловік, який любить тварин заслуговує на повагу."); ) else if (document.forma1.elements.checked && document.forma1.elements.selected) ( alert ("Жінка за кермом завжди викликає інтерес."); ) else ( alert ("Відмінне захоплення."); ) )