JavaScript-1 by Leonid Flegantov

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

JavaScript

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

Частина 1 Впровадження сценаріїв JavaScript до веб-сторінок Прості застосування JavaScript у веб-дизайні

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

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

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

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

Зміст ЗАНЯТТЯ 1 .................................................................................... 5 Впровадження сценаріїв JavaScript до веб-сторінки.......................... 5 Основні питання заняття............................................................................ 5 Організація робочого середовища ........................................................... 5 Порядок виконання вправ.......................................................................... 6 Внутрішні сценарії. Елемент SCRIPT ..................................................... 7 Підключення зовнішнього сценарію ....................................................... 9 Приклад. Розрахунок віку........................................................................10 Доповнення електронного довідника темою „Впровадження сценаріїв JavaScript до веб-сторінки”....................................................12 На цьому занятті ........................................................................................13 ЗАНЯТТЯ 2 .................................................................................. 14 Прості застосування JavaScript у веб-дизайні ....................................14 Основні питання заняття..........................................................................14 Привітання відвідувача ............................................................................14 Прощання з відвідувачем.........................................................................15 Запит імені відвідувача ............................................................................16 Дата оновлення сторінки .........................................................................18 Поточна дата...............................................................................................18 Привітання залежно від часу дня ...........................................................20 Біжучий рядок на веб-сторінці ...............................................................22 Задання повідомлення у рядку стану ....................................................23 Біжучий рядок у рядку стану ..................................................................25 Підрахунок кількості відвідувань протягом сеансу ...........................27 Кнопки Вперед-Назад...............................................................................29 Додати в Избранное, зробити стартовою .............................................34 Властивості броузера та монітора..........................................................35 Свято наближається ..................................................................................37 Залишайтесь з нами (жарт)......................................................................42 Захист сторінки за допомогою пароля ..................................................43 Запит і персональне привітання .............................................................44 3

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

Форматування тексту методами JavaScript ..........................................46 Доповнення електронного довідника темою „Прості застосування JavaScript у веб-дизайні”..........................................................................48 На цьому занятті ........................................................................................49

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

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

Заняття 1 Впровадження сценаріїв JavaScript до веб-сторінки Основні питання заняття - Організація робочого середовища - Порядок виконання вправ - Внутрішні сценарії. Елемент SCRIPT - Підключення зовнішнього сценарію - Приклад. Розрахунок віку - Доповнення

електронного довідника сценаріїв JavaScript до веб-сторінки”

темою „Впровадження

Організація робочого середовища У вашій робочій папці має бути наступне дерево папок: Ваша папка \Web \Images \Sounds \Videos \HTML \CSS Створіть у папці Web ще одну папку під назвою JavaScript. Таким чином, дерево папок повинно набути такого виду: Ваша папка \Web \Images \Sounds \Videos \HTML \CSS \JavaScript

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

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

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

виправлений файл, перейдіть у вікно броузера і виконайте команду Обновить на панелі інструментів - веб-сторінка зміниться відповідно до внесених виправлень. 8. Якщо необхідно внести зміни, доповнення або виправлення у зовнішній сценарій JavaScript (js-файл), тоді через контекстне меню js-файлу відкрийте цей файл у Блокноті командою Изменить або Открыть с помощью > Блокнот. По закінченні редагування, збережіть js-файл і перезавантажте зв'язану вебсторінку, щоб переглянути результат. Внутрішні сценарії. Елемент SCRIPT Сценарій JavaScript - це невелика комп'ютерна програма написана мовою програмування JavaScript, яка широко застосовується у вебдизайні. Для впровадження сценаріїв JavaScript у веб-сторінку застосовують тег SCRIPT з необов'язковими атрибутами LANGUAGE="JavaScript" та TYPE="text/javascript", які вказують, якою мовою написано сценарій та тип вмісту елементу SCRIPT. Код сценарію розміщують між тегами <SCRIPT> та </SCRIPT>. Тобто все, що розміщено між тегами <SCRIPT> та </SCRIPT>, вважається кодом JavaScript. При відкритті веб-сторінки броузер намагається прочитати і виконати (інтерпретувати) цей код. Якщо між тегами <SCRIPT> та </SCRIPT> розмістити запис якій не є кодом JavaScript, то у рядку стану броузера з'явиться повідомлення про помилку, і виконання коду сценарію, що йде після помилки, буде припинено. Коментарі у коді JavaScript Якщо рядок коду сценарію розпочати із символів //, то цей рядок вважається коментарем. Тобто він не бере участі у роботі сценарія. Якщо коментар займає більше ніж один рядок, то його відокремлюють символами /* та */. Тобто та частина коду JavaScript, яка міститься між символами /* та */ також є коментарем. Коментарі у коді JavaScript, як і в інших мовах програмування, використовують для зручності, коли необхідно додати до сценарію 7

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

нотатки, пояснення, або тимчасово відключити фрагмент коду сценарію. Приховування сценаріїв JavaScript від броузерів, які не підтримують сценарії Деякі старі броузери не мають можливості працювати із JavaScript. Тому, замість виконання сценарію, вони його проігнорують, і можуть показати код сценарію на екрані монітора. Щоб цьому запобігти, код сценарію слід розпочинати із символів коментарю  У випадку, коли броузер не підтримує роботу зі сценаріями, після коду сценарію слід розмістити парний елемент <NOSCRIPT>…</NOSCRIPT>, всередині якого можна залишити відповідне повідомлення для користувачів. Це повідомлення відображається тільки у броузері, що не підтримує JavaScript. Згідно наступного лістингу створіть веб-сторінку, що містить внутрішній сценарій JavaScript. Лістинг 1.1. Файл 1.1.html <html><head> <title>Впровадження сценарію до вебсторінки</title> <script language="JavaScript" type="text/javascript"> <!-alert("Ця сторінка містить сценарій JavaScript в області заголовку!") //--> </script> </head> <body> <h1>Сторінка із сценаріями JavaScript</h1><hr> <p style="color:red;"> 8

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

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

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

Заняття 2 Прості застосування JavaScript у веб-дизайні Основні питання заняття - Привітання відвідувача - Прощання з відвідувачем - Запит імені відвідувача - Дата оновлення сторінки - Поточна дата - Привітання залежно від часу дня - Біжучий рядок на веб-сторінці - Задання повідомлення у рядку стану - Біжучий рядок у рядку стану - Підрахунок кількості відвідувань протягом сеансу - Кнопки Вперед-Назад - Додати в Избранное, зробити стартовою - Властивості броузера та монітора - Свято наближається - Залишайтесь з нами (жарт) - Захист сторінки за допомогою пароля - Запит і персональне привітання - Форматування тексту методами JavaScript - Доповнення електронного довідника темою „Прості застосування

JavaScript у веб-дизайні” Привітання відвідувача Сценарії JavaScript можуть звертатися до властивостей веб-документу і маніпулювати ними. Наступний сценарій звертається до назви документу, що виводится броузером у рядку заголовку і 10

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

використовує її для привітання відвідувача. Цей сценарій виконується безпосередньо під час завантаження веб-сторінки. Сценарій виводить текст привітання на веб-сторінці в тому місці, де він розміщений в коді веб-сторінки. Лістинг 2.1. Файл 2.1.html <html><head><title>Просте привітання</title> </head> <body> <script language="JavaScript" type="text/javascript"> <!-var nazva = document.title; document.write('<H2>Ласкаво просимо до вебсторінки <SPAN STYLE="color:red;">' + nazva + '</SPAN></H2>'); //--> </script> </body></html> Відкрийте веб-сторінку у броузері і оцініть результат. Прощання з відвідувачем Сценарії JavaScript можуть виконуватися не тільки в момент завантаження веб-сторінки, алей й у момент настання певних подій. Наступний сценарій виконується в момент, коли користувач закриває веб-сторінку. В момент закриття веб-сторінки запускається виконання функції, яка виводить діалогове вікно з текстом прощання. Лістинг 2.2. Файл 2.2.html <html><head> <title>Спасибі, що відвідали</title> <script language="JavaScript" 11

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

type="text/javascript"> <!-function say_goodbye() { alert("Спасибі, що відвідали. Сподіваємось побачити Вас знову!") } //--> </script> </head> <body onUnload="say_goodbye()"> <H1>Закрийте сторінку - одержите повідомлення.</H1> </body> </html> Відкрийте веб-сторінку у броузері і оцініть результат. Запит імені відвідувача Сценарії JavaScript мають можливість звертатися до відвідувача вебсторінки, і одержувати від нього відомості, які будуть використані під час подальшої роботи сценарію. Наступний сценарій в момент завантаження веб-сторінки виводить діалогове вікно, у якому відвідувач вводить своє ім’я. Ім’я користувача використовується сценарієм у привітальному надписі та під час прощання. Лістинг 2.3. Файл 2.3.html <html><head> <title>Запит сценарія</title> <script language="JavaScript" type="text/javascript"> <!-12

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

var custom_message; //Привітання function welcome_message() { var user_name = prompt("Будь ласка, назвіть своє ім'я:",""); custom_message = user_name != "" && != null ? ", " + user_name + "!" : "!";

user_name

document.write ("Ласкаво просимо до нас" + custom_message); } //Прощання function say_goodbye() { alert("Спасибі, що відвідали нас" + custom_message + "\n\nЧекаємо на Вас знову!") } //--> </script> </head> <body onUnload="say_goodbye()"> <script language="JavaScript" type="text/javascript"> <!-welcome_message(); //--> </script> </body></html>

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

Властивості броузера та монітора У веб-дизайні дуже часто виникає потреба визначити, які властивості має броузер та монітор відвідувача. Від цих властивостей часто залежить, які технологій може використати веб-дизайнер, та як буде сприйматися веб-сторінка на моніторі користувача. JavaScript надає можливості визначити властивості броузера і монітора користувача і, знаючи їх, відповідним чином скорегувати код веб-сторінки. У наступній вправі пропонується код JavaScript, якій визначає головні властивості броузера та монітора, і виводить їх для перегляду на вебсторінці. Лістинг 2.15. Файл 2.13.html <html><head> <title>Властивості броузера та монітора</title> </head> <body> <H1>Властивості броузера та монітора</H1><HR> <H2>Властивості броузера</H2>  14

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

монітора</H2> монітора !-->

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

document.write ('<table border=1 width= 100%>'); document.write ('<tr><th>Властивість</th><th>Значення</th></tr>'); document.write ('<tr><td>Максимальна висота зображення</td><td>' + screen.availHeight + ' px</td></tr>'); document.write ('<tr><td>Максимальна ширина зображення</td><td>' + screen.availWidth + ' px</td></tr>'); document.write ('<tr><td>Дійсна висота зображення</td><td>' + screen.height + ' px</td></tr>'); document.write ('<tr><td>Дійсна ширина зображення</td><td>' + screen.width + ' px</td></tr>'); document.write ('<tr><td>Глибина кольору монітору</td><td>' + screen.colorDepth + ' bit</td></tr>'); document.write ('</table>'); //--> </script> </body></html> Відкрийте веб-сторінку у броузері і ознайомтеся з властивостями броузера і монітора, якими ви користуєтесь на занятті.

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

Форматування тексту методами JavaScript Це приклад демонструє застосування методів форматування шрифту, якими володіє JavaScript. Ці методи часто використовують при генеруванні динамічних веб-сторінок, зміст і форматування яких час від часу змінюються. Лістинг 2.21. Файл 2.18.html <html><head> <title>Методи форматування тексту</title> </head> <body> <script language="JavaScript" type="text/javascript"> <!-document.write("Це - якорь".anchor("Top")) document.write("<br>") document.write("Текст великими літерами".big()) document.write("<br>") document.write("Жирний текст".bold()) 17

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

document.write("<br>") document.write("Моноширинний текст".fixed()) document.write("<br>") document.write("Червоний колір".fontcolor("FF0000")) document.write("<br>") document.write("Текст жовтого кольору".fontcolor("yellow")) document.write("<br>") document.write("Розмір шрифту 5".fontsize(5)) document.write("<br>") document.write("На 2 менше, ніж основний шрифт".fontsize("-2")) document.write("<br>") document.write("Курсивний текст".italics()) document.write("<br>") document.write("Це - гіперпосилання".link("#Top")) document.write("<br>") document.write("Текст малими літерами".small()) document.write("<br>") document.write("Закреслений текст".strike()) document.write("<br>") document.write("Звичайний текст" + "текст нижнього індекса".sub()) document.write("<br>") document.write("Звичайний текст" + "текст верхнього індекса".sup()) document.write("<br>") document.write("Цей текст жирний, курсивний, 18

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

червоний".bold().italics().fontcolor("FF0000")) //--> </script> </body></html> Доповнення електронного довідника темою „Прості застосування JavaScript у веб-дизайні” Додайте тему „Прості застосування JavaScript у веб-дизайні” до складу електронного довідника. Для цього у головний файл електронного довідника index.html перед закриваючим тегом </OL> в кінці файлу додайте наступні рядки: Лістинг 2.22. Доповнення до файлу index.html <LI> Прості застосування JavaScript у веб-дизайні. <UL> <LI><A HREF="JavaScript/2.1.html">Привітання відвідувача</A> <LI><A HREF="JavaScript/2.2.html">Прощання з відвідувачем</A> <LI><A HREF="JavaScript/2.3.html">Запит імені відвідувача</A> <LI><A HREF="JavaScript/2.4.html">Дата оновлення сторінки</A> <LI><A HREF="JavaScript/2.5.html">Поточна дата</A> <LI><A HREF="JavaScript/2.6.html">Привітання залежно від часу дня</A> <LI><A HREF="JavaScript/2.7.html">Біжучий рядок на веб-сторінці</A> <LI><A HREF="JavaScript/2.8.html">Задання повідомлення у рядку стану</A> <LI><A HREF="JavaScript/2.9.html">Біжучий 19

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

рядок у рядку стану</A> <LI><A HREF="JavaScript/2.10.html">Підрахунок кількості відвідувань протягом сеансу</A> <LI><A HREF="JavaScript/2.11.html">Кнопки Вперед-Назад</A> <LI><A HREF="JavaScript/2.12.html">Додати в Избранное, зробити стартовою</A> <LI><A HREF="JavaScript/2.13.html">Властивості броузера та монітора</A> <LI><A HREF="JavaScript/2.14.html">Свято наближається</A> <LI><A HREF="JavaScript/2.15.html">Залишайтесь з нами (жарт)</A> <LI><A HREF="JavaScript/2.16.html">Захист сторінки за допомогою пароля</A> <LI><A HREF="JavaScript/2.17.html">Запит і персональне привітання</A> <LI><A HREF="JavaScript/2.18.html">Форматування тексту методами JavaScript</A> </UL> На цьому занятті - Привітання відвідувача - Прощання з відвідувачем - Запит імені відвідувача - Дата оновлення сторінки - Поточна дата - Привітання залежно від часу дня

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

- Біжучий рядок на веб-сторінці - Задання повідомлення у рядку стану - Біжучий рядок у рядку стану - Підрахунок кількості відвідувань протягом сеансу - Кнопки Вперед-Назад - Додати в Избранное, зробити стартовою - Властивості броузера та монітора - Свято наближається - Залишайтесь з нами (жарт) - Захист сторінки за допомогою пароля - Запит і персональне привітання - Форматування тексту методами JavaScript - Доповнення електронного довідника темою „Прості застосування

JavaScript у веб-дизайні”

МЕТОДИЧКА 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-му шейному позвонку и обратно до появления чувства «прилива» к голове.

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