- •Лабораторна робота №1 Створення найпростіших Web-Сторінок. Форматування тексту засобами мови html
- •3.1 Практичні завдання:
- •Лабораторна робота №3 Каскадні таблиці стилів
- •Способи застосування css
- •Чому каскадні?
- •Спадкування
- •Синтаксис css
- •Псевдокласи
- •Коментарі
- •Параметри css
- •Одиниці виміру в css
- •Завдання кольору в css
- •Лабораторна робота №4 Розмітка сторінок за допомогою блоків (div) і css. Позиціонування
- •Теоретичні відомості
- •Як це робиться
- •Практичні завдання
- •Лабораторна робота №5 Форми
- •Теоретичні відомості:
- •Елементи керування форми
- •Списки вибору.
- •Практична частина
- •Лабораторна робота №6 Фрейми. Карти зображень
- •Теоретичні відомості: Фрейми
- •Карти зображень
- •Практична частина
- •Лабораторна робота №7 Динамічний html. Введення в Javascript
- •Теоретичні відомості:
- •Синтаксис мови програмування Javascript
- •Функції
- •Вбудовані об'єкти мови програмування Javascript
- •Вивід даних в Javascript
- •Практична частина
- •Лабораторна робота №8 Динамічний html. Об'єкти JavaScript
- •Теоретичні відомості: Елементи керування
- •Властивості об'єкта Document
- •Методи об'єкта Document
- •Практична частина
- •Лабораторна робота №9 Встановлення, налаштування Denwer. Мова програмування рнр.
- •Теоретичні відомості:
- •Створення власного домену на локальному комп'ютері
- •Принципи обробки сценаріїв php
- •Включення фрагментів рнр у html-код
- •Стандартні дескриптори
- •Короткі дескриптори
- •Дескриптори в стилі asp
- •Практична частина
- •Лабораторна робота №10 Мова програмування рнр. Змінні, типи даних, операції, керуючи оператори.
- •Теоретичні відомості
- •Типи даних
- •Строковий тип
- •Операції
- •Керуючі оператори
- •Практична частина
- •Лабораторна робота №11 Мова програмування рнр. Цикли. Структура вибору. Масиви. Функції.
- •Теоретичні відомості:
- •Використання функцій
- •Передача параметрів у функції
- •Практична частина
- •Лабораторна робота №12 Серверні додатки. Бібліотечні функції php
- •Теоретичні відомості
- •Функції обробки рядків
- •Практична частина
- •Лабораторна робота №13 Робота з базами даних. Утиліта РhpMyAdmin.
- •Теоретичні відомості
- •Термінологічний словник
- •Практична частина
- •Лабораторна робота №14 Доступ до бази даних MySql з використанням мови рнр.
- •Теоретичні відомості
- •Доступ до бази даних MySql з використанням мови рнр
- •MySql і проблеми безпеки
- •Екранування спецсимволів
- •Шаблони запитів і placeholders
- •Практична частина
- •Лабораторна робота №15 Виконання запитів до бази даних.
- •Теоретичні відомості
- •Вибір за шаблоном.
- •Функції
- •Практична частина
- •Додаток 1. Основні теги html
Лабораторна робота №7 Динамічний html. Введення в Javascript
Мета роботи: Ознайомитися з базовим синтаксисом і основними можливостями керування змістом web-сторінки на стороні клієнта. Одержати практичні навички написання клієнтських скриптів з використанням мови Javascript.
Контрольні питання:
Динамічний HTML.
Синтаксис мови програмування Javascript.
Оператори мови програмування Javascript.
Вбудовані об'єкти мови програмування Javascript.
Вивід даних в Javascript.
Теоретичні відомості:
Динамічний HTML
HTML є мовою розмітки і не має інших засобів, які могли б використовуватися для зміни вмісту сторінки. Цю проблему вирішує використання мови DHTML (Dynamic HTML) засобу, що підтримує, програмування на клієнтській стороні. Для цього в DHTML вбудована підтримка скриптової мови Javascript (повинен підтримуватися браузером).
Можливості динамічного керування вмістом стають доступні при впровадженні у web-сторінку коду Javascript . Це робиться за допомогою тегу <script>, розташовуваного в потрібному місці web-сторінки і яким виділяють початок і кінець вихідного коду або вказують на завантажуваний з мережі файл із вихідним кодом:
Для використання скриптів у web-документі використовується контейнерний тег <script>...</script>, всередині якого записуються команди Javascript (в загальному випадку і в інших мовах: Vbscript, php, tcl/tk ... ).
Якщо цей тег використовується в тілі документа (всередині тегу body), то виконання скрипта здійснюється по мірі відображення web-сторінки в браузері. Якщо ж контейнер script описаний всередині тегу head, то звертання до скрипта можливо тільки явно, наприклад, через виклик функції.
<!-- впровадження скрипта в розмітку -->
<script type="text/javascript">
код скрипта
</script>
Є можливість винести код Javascript в окремий файл (як правило з расширением.js), який потім підключити до документа в такий спосіб:
<html>
<head>
<!-- завантаження скрипта із зовнішнього файлу -->
<script type="text/javascript"> src="http://example.com/scripts.js"></script>
</head>
...
Такий спосіб використання скриптів дозволяє створювати свого роду бібліотеки скриптів і використовувати їх на всіх сторінках сайту.
Синтаксис мови програмування Javascript
Мова Javascript синтаксично близька до мов C/C++, Java, PHP і іншим C- подібним мовам.
Змінні
Для оголошення змінних використовується ключове слова var. Змінні можна відразу ініціализовувати. Можна оголошувати декілька змінних відразу, розділивши їх комами.
var color = "#FFF", fsize = 1024, total_count = 0, i;
var average = null;
var c = 3;
d = 0; //Помилка!
Змінні, які неініціалізовані будуть мати невизначене значення (undefined).
Використовувати змінні можна в будь-якому місці скрипта, але до першого звернення
Типи даних змінним в javascript призначаються автоматично. Так само автоматично виконується приведення типів.
Оголошення масивів даних можуть виконуватися статично і динамічно. Індексування елементів починається з нуля. Елементи масиву можуть бути проініціализовані при створенні.
var weekdays = ["Пн", "Вт", "Ср", "Чт", "Пт"]; // статичний масив з п'яти елементів
//динамічне оголошення масиву шляхом створення екземпляра вбудованого класу Array
var myarr;
myarr = new Array(256);
myarr[0] = 255;
myarr[1] = 254;
var x = myarr[7];
Оператори мови програмування Javascript
Коментарі - призначені для пояснення фрагментів коду або виключення фрагментів коду з обробки. Ігноруються при виконанні програми.
// Це однорядковий коментар.
/*
Це багаторядковий коментар. Він може поєднувати кілька рядків і
його можна використовувати в будь-якім місці програми
*/
Умовний оператор if призначений для розгалуження програми залежно від значення (true | false) логічного вираження:
if (умова) {блок операторів1}
[else {блок операторів2}]
Оператор вибору switch також як і умовний оператор призначений для виконання розгалуження алгоритму, але дозволяє аналізувати безліч можливих результатів перевірки умови. Оператор break дозволяє перервати виконання оператора, якщо його не вказати, то будуть виконані всі наступні оператори.
switch (умова) {
case значення1 : {блок операторів1; break;}
case значення2 : {блок операторів2; break;}
case значення3 : {блок операторів3; break;}
...
[default : {блок операторів за замовчуванням};]
}
Цикл із лічильником for. Використовується для циклів із заданим числом ітерацій (примітка: насправді конструкція for може використовуватися і для побудови будь-яких циклів, все залежить від того, які значення зазначені параметру циклу).
for ([початкове значення]; [умова]; [збільшення]) {блок операторів;}
Цикл з після умовою do...while. Виконується, поки умова є дійсною. Завжди виконується хоча б один раз.
do {блок операторів;} while (умова)
Цикл із перед умовою while. Виконується, якщо умова є дійсною. Може не виконатися жодного разу.
while (умова) {блок операторів;}
Оператори break і continue - використовуються для переривання виконання циклу або завершення поточної ітерації.
По елементний цикл for (... in ...) застосовується для виконання команд над кожним елементом масиву.
for (змінна in массив|объект|колекція) {блок операторів;}
Оператор об'єднання with представляє звертання до властивостей і методів об'єкта через загальне ім'я.
with (об'єкт) {блок операторів;}