JavaScript-2 by Leonid Flegantov

Основи Web-майстерності

JavaScript

Методичні вказівки та завдання до лабораторних робіт

Частина 2 Прості застосування JavaScript у веб-дизайні (продовження). Управління вікнами браузера. Робота з формами. Взаємодія з системними функціями.

Основи Web-майстерності: JavaScript. Частина 2.

Основи Web-майстерності: JavaScript. Частина 2. Методичні вказівки та завдання до лабораторних робіт. – 58 c.

Фрагмент методического пособия представлен для ознакомления с продукцией электронного магазина МЕТОДИЧКА http://metodichka.com.ua/ МЕТОДИЧКА – Лучшие пособия для самостоятельного практического обучения!

Основи Web-майстерності: JavaScript. Частина 2.

Зміст ВСТУПНІ ЗАУВАЖЕННЯ ................................................................ 5 Організація робочого середовища ............................................................... 5 Порядок виконання вправ............................................................................. 5 ЗАНЯТТЯ 2 (ПРОДОВЖЕННЯ) ....................................................... 7 Прості застосування JavaScript у веб-дизайні............................................ 7 Основні питання заняття .............................................................................. 7 Індикатор відліку часу .................................................................................. 7 Доповнення електронного довідника.......................................................... 8 На цьому занятті............................................................................................ 8 ЗАНЯТТЯ 3 ..................................................................................... 9 Управління вікнами браузера....................................................................... 9 Основні питання заняття .............................................................................. 9 Відкриття дочірнього вікна .......................................................................... 9 Управління інтерфейсом дочірнього вікна............................................... 10 Максимізація дочірнього вікна.................................................................. 12 Центрування дочірнього вікна ................................................................... 13 Позиціонування дочірнього вікна.............................................................. 14 Завантаження сторінки у дочірнє вікно .................................................... 16 Повноекранний режим дочірнього вікна .................................................. 18 Анімаційний ефект при відкриванні вікна................................................ 20 Прокрутка вікна........................................................................................... 21 Впровадження механізму прокрутки до електронного довідника ......... 23 Вимикач Інтернету (жарт) .......................................................................... 24 Доповнення електронного довідника темою „Управління вікнами браузера” ...................................................................................................... 25 На цьому занятті.......................................................................................... 26 ЗАНЯТТЯ 4 ....................................................................................27 Робота з формами .......................................................................................... 27 Основні питання заняття ............................................................................ 27 Перевірка: чи не порожнє поле форми...................................................... 28 Підказка у рядку стану................................................................................ 28

Основи Web-майстерності: JavaScript. Частина 2.

Проста перевірка форми перед відправкою.............................................. 30 Повна перевірка E-mail ............................................................................... 34 Перевірка правильності введення номера телефону та поштових індексів (за зразком).................................................................................... 36 Очистка поля від небажаних символів...................................................... 41 Запит на відправку форми .......................................................................... 44 Доповнення електронного довідника темою „Робота з формами” ....... 49 На цьому занятті.......................................................................................... 50 ЗАНЯТТЯ 5 ....................................................................................51 Взаємодія з системними функціями........................................................... 51 Основні питання заняття ............................................................................ 51 Запис даних у файл...................................................................................... 51 Пошук у тексті і виділення знайденого..................................................... 52 Доповнення електронного довідника темою „Взаємодія з системними функціями”................................................................................................... 56 На цьому занятті.......................................................................................... 56

Ці методичні вказівки є посібником для виконання лабораторних робіт з основ веб-майстерності при підготовці фахівців за напрямом "Web-дизайн". У посібнику докладно розглядаються основні можливості та практичні аспекти застосування мови програмування JavaScript, яка знаходить широке застосування у веб-дизайні. За основу взято останню на цей час базову версію JavaScript 1.3. Частина 2 методичних вказівок містить відомості про управління вікнами броузера за допомогою JavaScript . Методичні вказівки можуть бути використані для самостійної роботи всіма, хто хоче самостійно опанувати використання у веб-дизайні JavaScript та навчитись застосовувати JavaScript для розробки вебсторінок та веб-сайтів. Посібник побудований таким чином, що при умові ретельного виконання усіх вправ та суворого дотримання методичних вказівок, по закінченні вивчення курсу студент має одержати самостійно створений ним електронний "Довідник Веб-майстра".

Основи Web-майстерності: JavaScript. Частина 2.

Вступні зауваження Організація робочого середовища Для належної організації робочого середовища у вашій робочій папці має бути завчасно створене наступне дерево папок: Ваша папка \Web \Images \Sounds \Videos \HTML \CSS \JavaScript Остання папка, JavaScript, призначена для зберігання веб-сторінок (HTML-файлів) та файлів з розширенням *.js, що містять код зовнішніх сценаріїв JavaScript, які будуть створені вами під час виконання вправ. По закінченні роботи ви одержите самостійно створений вами електронний "Довідник Веб-майстра". Для цього необхідно лише ретельно виконувати всі запропоновані вправи, і суворо додержуватися методичних вказівок. Порядок виконання вправ На заняттях для створення коду JavaScript використовуйте текстовий редактор Блокнот, якій входить до складу стандартних програм операційної системи Windows. При виконанні вправ рекомендуємо дотримуватися наступного порядку: 1. Прочитайте вступні зауваження. 2. Ознайомтеся з лістингом коду. 3. Наберіть текст коду у текстовому редакторі Блокнот. 4. Збережіть набраний код у файлі з розширенням *.html або *.htm під назвою, яка вказана у лістингу. Файли зберігайте у папку 5

Основи Web-майстерності: JavaScript. Частина 2.

JavaScript, яку необхідно завчасно створити у своїй робочій папці. 5. Зовнішні сценарії JavaScript також створюйте у Блокноті і зберігайте у файлах з розширенням *.js у папку JavaScript. 6. Для перевірки роботи сценарію відкрийте створений HTMLфайл подвійним клацанням (файл відкриється, як веб-сторінка, у вікні броузера Internet Explorer) і оцініть результат. 7. Якщо необхідно внести зміни або доповнення в код вебсторінки, то через контекстне меню веб-сторінки відкрийте її код у текстовому редакторі Блокнот (контекстне меню > Просмотр в виде HTML), внесіть необхідні зміни, збережіть виправлений файл, перейдіть у вікно броузера і виконайте команду Обновить на панелі інструментів - веб-сторінка зміниться відповідно до внесених виправлень. 8. Якщо необхідно внести зміни, доповнення або виправлення у зовнішній сценарій JavaScript (js-файл), тоді через контекстне меню js-файлу відкрийте цей файл у Блокноті командою Изменить або Открыть с помощью > Блокнот. По закінченні редагування, збережіть js-файл і перезавантажте зв'язану вебсторінку, щоб переглянути результат.

Используйте это методическое пособие, чтобы детально, на прмерах, изучить применение языка JavaScript в веб-дизайне МЕТОДИЧКА http://metodichka.com.ua/

Основи Web-майстерності: JavaScript. Частина 2.

Заняття 2 (продовження) Прості застосування JavaScript у веб-дизайні На цьому занятті ми продовжимо розгляд теми «Прості застосування JavaScript у веб-дизайні». Основні питання заняття - Індикатор відліку часу - Доповнення електронного довідника

Індикатор відліку часу Даний приклад демонструє можливості застосування JavaScript для імітації створення індикатора відліку часу, подібного до тих, що виводяться на екран монітора під час установки комп’ютерних програм. Ця вправа є одним з простих прикладів динамічного HTML. Лістинг 2.23. Файл 2.19.html <HTML><HEAD><TITLE>Індикатор відліку часу</TITLE> <script> var j=0; var interval_id = ''; var element = ''; var t1 = '<table border=0 cellspacing=1 cellpadding=0><tr>'; var t2 = '<td bgColor=000099>&nbsp;</td>'; var t3 = '</tr></table>'; function goIndicator () { var interval_id = setInterval('makeIndicator()',1000); } function makeIndicator() { 7

Основи Web-майстерності: JavaScript. Частина 2.

element = element + t2; ++j; if (j == 5) {clearInterval(interval_id); t2 = '<td bgColor=990000>&nbsp;</td>';} indicator.innerHTML = t1 + element + t3; } </script> </HEAD> <BODY onLoad="goIndicator ();"> <div id=indicator style="background: #eeeeee; width=100%">&nbsp;</div> </BODY></HTML> Доповнення електронного довідника Доповніть тему „Прості застосування JavaScript у веб-дизайні” у складі електронного довідника. Для цього у головний файл електронного довідника index.html перед закриваючим тегом </UL>, що містить список елементів даного розділу додайте рядок: Лістинг 2.24. Доповнення до файлу index.html <LI><A HREF="JavaScript/2.19.html">Індикатор відліку часу</A></LI> На цьому занятті - Індикатор відліку часу - Доповнення електронного довідника

Основи Web-майстерності: JavaScript. Частина 2.

Заняття 3 Управління вікнами браузера Управління вікнами браузера – ще одне з важливих застосувань JavaScript. Сценарії JavaScript надають можливість повного контролю над вікнами браузера, включаючи їх відкриття із різними наборами елементів управління. Він також дозволяє переміщувати відкриті вікна, позиціонувати їх, установлювати та змінювати розміри вікон, завантажувати до відкритих вікон нові документи (веб-сторінки), створювати у них фрейми, змінювати стилі документів у відкритих вікнах та багато чого іншого. Основні питання заняття - Відкриття дочірнього вікна - Інтерфейс дочірнього вікна - Максимізація дочірнього вікна - Центрування дочірнього вікна - Позиціонування дочірнього вікна - Завантаження сторінки у дочірнє вікно - Повноекранний режим дочірнього вікна - Анімаційний ефект при відкриванні вікна - Прокрутка вікна - Впровадження механізму прокрутки до електронного довідника - Вимикач Інтернету (жарт) - Доповнення електронного довідника темою «Управління вікнами

браузера» Відкриття дочірнього вікна Послідовно відкриті вікна браузера, подібно до фреймів, знаходяться одне з одним у відношенні «батьки-діти». «Дочірнім» до основного, «батьківського», вікна, називають вікно браузера, що відкрите за 9

Основи Web-майстерності: JavaScript. Частина 2.

допомогою коду JavaScript, розміщеного у коді батьківського вікна. Зокрема, кажуть, що дочірнє вікно відкривається з батьківського вікна. Закрити дочірнє вікно можна як із самого цього вікна, так і з батьківського вікна, або з будь-якого іншого вікна браузера, що містить відповідний код. Лістінг 3.1. Файл 3.1.html <html><head> <title>Відкриття "дочірнього" вікна</title></head> <body><h1>Відкриття "дочірнього" вікна</h1><hr> <a href="javascript:void(0)" onClick="window.open('2.1.html', '')"> Відкрити веб-сторінку у "дочірньому" вікні </a> </body></html> Управління інтерфейсом дочірнього вікна Цей приклад показує, як за допомогою JavaScript можна змінювати набір елементів управління у дочірньому вікні. За замовчанням, дочірнє вікно відкривається з повним набором елементів управління. Якщо ж у функції open(), що відкриває нове вікно, явно вказати ті параметри цієї функції, що визначають склад елементів управління у вікні, то матимемо наступне: –

вікно з параметром "directories" - має тільки Панель навігації.

–

вікно з параметром "location" - має Адресний рядок.

–

вікно з параметром "menubar" - має рядок Меню.

–

вікно з параметром "toolbar" - має Панель інструментів.

–

вікно з параметром "status" - має Рядок стану.

–

вікно з параметром "scrollbars" - має полоси прокрутки.

–

вікно з параметром "resizable" - розміри вікна можна змінювати. 10

Основи Web-майстерності: JavaScript. Частина 2.

Лістінг 3.2 Файл 3.2.html <html><head> <title>Інтерфейс "дочірнього" вікна</title> <script language="JavaScript" type="text/javascript"> <!-var new_window; function open_window(window_feature) { if (new_window) {new_window.close();} var window_chrome = window_feature + ",height=200,width=300"; new_window = window.open("2.1.html", "", window_chrome); } //--> </script></head><body> <h1>Інтерфейс "дочірнього" вікна</h1> <hr> <h3>Відкрити:</h3> <a href="javascript:void(0)" onClick="open_window('directories');"> Вікно з параметром "directories"</a> - має тільки Панель навігації. <br> <a href="javascript:void(0)" onClick="open_window('location')"> Вікно з параметром

"location"</a>

- має Адресний рядок. <br><a href="javascript:void(0)" 11

Основи Web-майстерності: JavaScript. Частина 2.

onClick="open_window('menubar')"> Вікно з параметром - має рядок

"menubar"</a>

Меню.

<br><a href="javascript:void(0)" onClick="open_window('toolbar')"> Вікно з параметром "toolbar"</a> - має Панель інструментів. <br><a href="javascript:void(0)" onClick="open_window('status')"> Вікно з параметром "status"</a> - має

Рядок стану.

<br><a href="javascript:void(0)" onClick="open_window('scrollbars')"> Вікно з параметром "scrollbars"</a> - має

полоси прокрутки.

<br><a href="javascript:void(0)" onClick="open_window('resizable')"> Вікно з параметром

"resizable"</a>

- розміри вікна можна змінювати. </body></html>

Основи Web-майстерності: JavaScript. Частина 2.

Анімаційний ефект при відкриванні вікна Дана вправа реалізує цікавий ефект: дочірнє вікно після відкриття плавно зміщується у задану позицію. Лістінг 3.8 Файл 3.8.html <html><head> <title>Анімаційний ефект при відкриванні вікна</title> <script language="JavaScript" type="text/javascript"> <!-var interval_id; var counter = 20;// Початковий відступ вікна //Рухати поточне вікно (self) self.moveTo(counter, counter); // Встановити інтервал руху interval_id = setInterval("move_window()", 50) function move_window() { // Рухати вікно вгору на 1 піксел та вліво на 1 піксел moveBy(-1, -1); // Лічильник рухів counter--; // Зупинити рух, коли вікно опиниться у лівому верхньому куті if (counter < 0) {clearInterval(interval_id)} } //--> </script></head><body BGCOLOR=red TEXT=yellow> 13

Основи Web-майстерності: JavaScript. Частина 2.

<h1>Анімаційний ефект при відкриванні вікна</h1> <hr COLOR=yellow></body></html> Прокрутка вікна Вправа реалізує ефект плавної прокрутки вмісту вікна браузера. Ефект вмикається та вимикається спеціальною кнопкою, створеною у коді веб-сторінки, що вмикає та вимикає відповідний механізм. Для наочної ілюстрації роботи механізму бажано, щоб кількість рядків на веб-сторінці значно перевищувала висоту вікна браузера. Механізм прокрутки знаходиться у зовнішньому файлі scrolling.js. Лістінг 3.9 Файл 3.9.html <HTML><head> <title>Скроллінг - прокрутка вікна</title> <script language="javascript" src="scrolling.js"></script></head> <BODY BACKGROUND="../images/bg_gray.jpg" BGPROPERTIES="FIXED"> <DIV id=scr style="LEFT: 559px; POSITION: absolute; TOP: 40px"> <INPUT name=scrolling onclick=runTimer(); title=Прокрутка type=button value=V> </DIV> <P>Прокрутка <P>Прокрутка <P>Прокрутка <!-Фрагмент <P>Прокрутка скопіюйте на 2-3 сторінки --> <P>Прокрутка <P>Прокрутка </BODY></HTML> 14

Основи Web-майстерності: JavaScript. Частина 2.

Механізм прокрутки вікна. Лістінг 3.10 Файл scrolling.js <!-var tScroll; var curPos = 0; var whatDo = true; function doTimer() { curPos = document.body.scrollTop + 1; window.scroll(0, curPos); if(curPos > document.body.scrollHeight document.body.clientHeight) { window.scroll(0, 0); clearTimeout(tScroll); } tScroll = window.setTimeout("doTimer();", 20); doScroll(); } function runTimer() { window.onscroll = doScroll; if(document.all.scrolling.value == "V") { doTimer(); document.all.scrolling.value = "--"; document.all.scrolling.title = "Стоп"; } else { clearTimeout(tScroll); document.all.scrolling.value = "V"; document.all.scrolling.title = "Прокрутка"; 15

Основи Web-майстерності: JavaScript. Частина 2.

} } function doScroll() { document.all.scr.style.posTop = document.body.scrollTop + 25; document.all.scr.style.posLeft = document.body.scrollLeft + 560; } window.onunload = new Function("clearTimeout(tScroll);"); // -->

Основи Web-майстерності: JavaScript. Частина 2.

Заняття 4 Робота з формами Форми на веб-сторінці – це електронні бланки, за допомогою яких користувач може вводити свої дані і відправляти їх для обробки на веб-сервер. Екранні форми створюються засобами HTML. Механізм відправки даних із форми на сервер (механізм GET або POST), автоматично реалізується браузером: веб-майстру необхідно лише правильно вказати у відкриваючому тегу елемента form значення атрибуту action, що містить шлях до серверної програми, яка приймає і обробляє дані введені у форму. У зв'язку з цим одним з важливих завдань веб-майстра є створення механізму, що виконує перевірку правильності (коректності) даних введених у форму перед тим, як вони будуть відправлені на сервер. Така перевірка створює комфортні умови для користування формою, значно прискорює обмін даними з веб-сервером, запобігає відправці помилкових або некоректних даних, що можуть негативно вплинути на роботу веб-сервера. Основні питання заняття - Перевірка: чи не порожнє поле форми - Підказка у рядку стану - Проста перевірка форми перед відправкою - Повна перевірка E-mail - Перевірка правильності введення номера телефону та поштових

індексів (за зразком) - Очистка поля від небажаних символів - Запит на відправку форми - Доповнення електронного довідника темою «Робота з формами».

Основи Web-майстерності: JavaScript. Частина 2.

Перевірка: чи не порожнє поле форми У цьому прикладі перевіряється чи не залишив користувач порожнім те поле форми, яке має бути обов’язково заповнене. Лістінг 4.1 Файл 4.1.html <html><head><title>Перевірка: чи не порожнє поле форми (при втраті фокусу)</title> <script language="JavaScript" type="text/javascript"> <!-function blur_handler(text_field) { if (text_field.value == "") { alert("Це поле не можна залишити порожнім. \n\nВведіть значення, будь-ласка!"); text_field.focus(); } } //--> </script> </head><body> Клацніть спочатку всередині поля, а потім зовні поля, або натисніть Tab:<br> <form> <input type="text" onBlur="blur_handler(this)"> </form> </body></html>

Основи Web-майстерності: JavaScript. Частина 2.

Повна перевірка E-mail В цьому прикладі виконується більш правильності введення email у поле форми.

досконала

перевірка

Лістінг 4.4 Файл 4.4.html <html><head><title>Повна перевірка E-mail</title> <script language="JavaScript" type="text/javascript"> <!-function valid_email(email_address) { // Перевірка довжини if (email_address.length < 5) {return false} // Перевірка наявності знаків @ та . (крапка) at_location = email_address.indexOf("@") dot_location = email_address.lastIndexOf(".") if (at_location == -1 || dot_location == -1 || at_location > dot_location ) { return false } // Чи є хоч один символ перед @? 19

Основи Web-майстерності: JavaScript. Частина 2.

if (at_location == 0) {return false} // Чи є хоч один символ між @ та .? if (dot_location - at_location < 2 ) {return false} // Чи є символи після .? if (email_address.length - dot_location < 2) {return false} // Якщо email правильний, тоді: return true return true } // Вивід результатів перевірки function answer () { alert('Адреса email ' + (valid_email(mail_form.email_field.value) ? 'правильна.' : 'неправильна.')); } //--> </script> </head><body><h1>Повна перевірка E-mail</h1><hr> <form name="mail_form" onSubmit="answer();" method="get"> <b>Введіть адресу Email:</b> <br><input type="text" value="a@b.c" name="email_field"> <p> <input type="submit" value="Це правильна адреса?"> </p> </form></body></html>

Основи Web-майстерності: JavaScript. Частина 2.

Заняття 5 Взаємодія з системними функціями. Однією з головних відмінностей JavaScript від інших мов програмування є те, що він не має розвинених засобів для взаємодії з операцыйною системою комп'ютеру. Завдяки цьому, зокрема, JavaScript не може прямо зберігати файли на комп’ютері або, наприклад, втручатися у роботу операційної системи. Це зроблене навмисно з метою безпеки при роботі в Інтернет. Але JavaScript має засоби управління так званими елементами ActiveX, що підтримуються операційною системою Windows, за допомогою яких він має доступ до деяких системних функцій. Основні питання заняття - Запис даних у файл - Пошук у тексті і виділення знайденого - Доповнення

електронного системними функціями».

довідника

темою

«Взаємодія

Запис даних у файл Цей скрипт створює об’єкт ActiveX типу TextFile (тобто текстовий файл) з іменем output.txt, виконує запис заданого тексту в цей файл і зберігає файл на Робочий Стіл. Лістінг 5.1 Файл 5.1.html <html><head> <title>Запись текста в файл с помощью JavaScript</title></head> <script> <!-function wriToFile (text) { var fso = new ActiveXObject("Scripting.FileSystemObject"); 21

Основи Web-майстерності: JavaScript. Частина 2.

var MyFile = fso.CreateTextFile("output.txt", true); MyFile.Write(text); MyFile.Close(); } // --> </script> <body> <h1>Запись в текстовый файл с помощью JavaScript</h1> Скрипт создает объект ActiveX типа TextFile с именем output.txt, выполняет запись заданного текста в этот файл и сохраняет файл на Рабочий Стол. <form onSubmit="javascript: wriToFile (text.value)"> <input type=text name=text value="Нет, не вводите сюда текст, пожалуйста !!!" size=48 onFocus="select();">  <p><input type=submit value="Записать текст в файл"> </form></body></html>

Основи Web-майстерності: JavaScript. Частина 2.

Доповнення електронного довідника темою „Взаємодія з системними функціями” Доповніть електронний довідник темою «Взаємодія з системними функціями». Для цього у головний файл електронного довідника index.html перед закриваючим тегом </OL> додайте рядки: Лістинг 5.3. Доповнення до файлу index.html <LI>Взаємодія з системними функціями. <UL> <LI><A HREF="JavaScript/5.1.html">Запис даних у файл</A> <LI><A HREF="JavaScript/5.2.html">Пошук у тексті і виділення знайденого</A> </UL> На цьому занятті - Запис даних у файл - Пошук у тексті і виділення знайденого - Доповнення

електронного системними функціями»

довідника

темою

МЕТОДИЧКА http://metodichka.com.ua/ Магазин классных методичек!

«Взаємодія

Гимнастика для глаз А. Динамический комплекс 1.

Движения глаз вправо-влево, 30 секунд.

Движения глаз вверх-вниз, 30 секунд.

Движения глаз по диагоналям, по 30 секунд.

Круговые движения глазами по часовой стрелке, 30 секунд.

Круговые движения глазами против часовой стрелки, 30 секунд.

Упражнения 1-5, только с закрытыми глазами, общая продолжительность до 3 минут.

Б. Самомассаж глаз 1.

Сильно зажмурить глаза на 3-5 секунд, затем широко открыть глаза на 3-5 секунд. Повторить 10-12 раз.

Быстро моргать в течение 1-2 минут.

Смотреть вдаль 3-5 секунд (можно в окно), затем на палец руки в 2530 см от глаз (можно на оконную раму) в течение 3-5 секунд, повторить 10-12 раз.

Тремя пальцами каждой руки легко нажать на верхнее веко, спустя 1-2 секунды снять пальцы. Повторить 5-6 раз.

Круговыми движениями подушечек пальцев помассировать височную область в течение 2-3 минут.

Выполнить массаж затылочной области продольными движениями пальцев обеих рук в направлении от затылочного бугра к 7-му шейному позвонку и обратно до появления чувства «прилива» к голове.

Регулярное выполнение этих простых упражнений поможет вам уменьшить усталость глаз при работе на компьютере и надолго сохранить хорошее зрение.