- •1. Основні технології розробки web-додатків
- •1.1 Протокол http
- •Основні технології розробки web-додатків
- •1.3 Короткі підсумки
- •2 Структура html-документа
- •2.1. Елементи мови html
- •2.2 Структура html-документа
- •2.2.1.Початок
- •2.2.2 Тіло документа
- •Заголовки
- •Нижче на малюнку показаний результат використання наступних заголовків:
- •Списки в html
- •2.3 Використання графіки в html
- •2.4 Таблиці
- •Атрибут border. Значення цього атрибута визначає як будуть виглядати рамки таблиці. Якщо атрибут не заданий або його значення дорівнює нулю, то таблиця не матиме рамок.
- •2.5 Html-форми Форми використовуються в www для передачі інформації від клієнта до сервера.
- •3 Каскадні таблиці стилів css
- •3.1 Загальні відомості про css
- •3.2 Додавання стилю на веб-сторінку
- •3.2.1. Таблиця пов'язаних стилів
- •3.2.2 Таблиця глобальних стилів
- •3.2.3 Внутрішні стилі
- •3.3 Синтаксис css
- •3.3.1 Властивості css
- •3.3.2 Селектори тегів
- •3.3.3 Селектори класів
- •3.3.4 Селектори-ідентифікатори
- •3.3.5 Контекстні селектори
- •3.3.6 Сусідні селектори
- •3.3.7 Дочірні селектори
- •Селектор зі значенням атрибута – встановлює стиль елемента в тому випадку, якщо задано певне значення зазначеного атрибута. Синтаксис застосування наступний.
- •Наприклад:
- •3.3.9 Універсальний селектор
- •3.4 Псевдокласи
- •3.4.2 Короткі підсумки
- •4 Типи і структури даних в javascript
- •Скрипт в html документі
- •4.2 Змінні та літерали
- •4.2.1 Літерали
- •4.3 Оператори JavaSscript
- •4.3.2 Оператор обробки рядків
- •4.3.3 Оператор typeof Аргументом оператора є змінна або вираз. Оператор повертає рядок, що описує тип аргументу(див. Табл. 4.4).
- •4.3.4 Умовний оператор (Оператор If)
- •4.3.5 Оператор перемикання (switch)
- •4.3.6 Оператори циклу
- •4.4 Масиви
- •Метод reverse () – застосовується для зміни на протилежний порядок елементів масиву всередині масиву. Припустимо, масив натуральних чисел впорядкований по зростанню:
- •Впорядкуємо його по спаданню:
- •4.5.2 Інструкція return
- •4.5.3 Виклик функції
- •4.6.2 Константи
- •4.6.3 Математичні функції.
- •4.6.4 Приклад. Генератор випадкових чисел
- •4.7 Контрольні питання
- •Події та обробники подій
- •5.1.1 Спливання подій в dhtml
- •5.1.2 Стандартні події dhtml.
- •Способи зв'язування подій
- •5.2.1 Введення подій в якості атрибутів.
- •5.2.2 Обробники подій як функції.
- •5.2.3 Динамічне зв'язування подій у сценарії.
- •5.2.5 Атрибути for і event.
- •Об'єкти браузера
- •Об'єктна модель браузера
- •Об'єкт window (Операції з вікнами)
- •Об'єкт navigator (властивості браузера)
- •Об'єкт location (Інформація про документ і вікна браузера)
- •Об'єкт history (Переходи між Web-сторінками )
- •Робота з діалоговими вікнами
- •Управління документом
- •Об'єктна модель документа
- •7.1.1 Сімейства, властивості і методи
- •Дерево документа (Document Tree)
- •Переміщення по Дереву Документа.
- •Динамічний вміст
- •8.1.1 Найбільш популярні моделі даних
- •9.3.1 Поділ інструкцій.
- •9.3.2 Коментарі.
- •9.3.3 Змінні, константи й оператори
- •9.3.6 Типи даних
- •Висновок
- •Керуючі конструкції рнр
- •Умовні оператори
- •// Ця програма надрукує всі парні цифри
- •{// Друкуємо цифру, якщо вона парна
- •Оператори передачі управління
- •Оператори включення
- •10.5 Висновок
- •Функції і масиви в php
- •Функції, визначені користувачем
- •11.1.1 Повернення значень функцією.
- •Рекурсивні функції.
- •11.1.3 Функції-змінні.
- •11.1.4 Побудова бібліотек функцій.
- •11.2.1 Операції з масивами.
- •11.2.2 Сортування масивів.
- •Sort_regular – порівнювати елементи масиву звичайним чином; sort_numeric – порівнювати елементи масиву як числа; sort_string – порівнювати елементи масиву як рядки.
- •11.2.3 Сортування масиву за ключами.
- •11.2.4 Сортування за допомогою функції, заданої користувачем.
- •Ми застосували нашу власну функцію сортування до всіх елементів масиву.
- •11.2.5 Застосування функції до всіх елементів массиву.
- •11.2.6 Виділення підмасива
- •Висновок
- •12 Строкові функції php
- •12.1 Функції пошуку в тексті (substr(), strpos(), strrpos(), strstr(), strchr(), stristr(), strrchr(), substr_count(), strspn(), strcspn())
- •12.2 Функції strlen(), chr() і ord()
- •12.3 Trim-функції (функції видалення символів відступу) trim (), ltrim (), rtrim (), chop ()
- •12.4 Функції форматного виведення. Специфікатори перетворення printf (), sprintf (), sscanf ().
- •12.5 Функції перетворення кодування
- •12.6 Функції роботи з бінарними даними pack () unpack ()
- •12.7 Функції роботи з блоками тексту (wordwrap (), str_replace (), substr_replace (), strtr (), stripslashes (), stripcslashes (), addslashes (), addcslashes (), quotemeta (), strrev ())
- •12.8 Функції об'єднання / поділу рядків (str_repeat (), str_pad (), chunk_split (), strtok (), explode (), implode (), join ())
- •12.9 Функции сравнения строк (strcmp(), strncmp(), strcasecmp(), strncasecmp(), strnatcmp(), strnatcasecmp(), similar_text(), levenshtein())
- •12.10 Функції роботи з url (parse_url (), parse_str (), rawurlencode (), rawurldecode (), base64_encode (), base64_decode ())
- •12.11 Функції перетворення регістру (strtolower (), strtoupper (), ucfirst (), ucwords ())
- •12.13 Функція htmlspecialchars
- •13 Робота з файлами
- •13.1 Відкриття і закриття файлів
- •13.2 Читання з файлів і запис у файли
- •13.2.1 Читання з файлів.
- •13.2.2 Запис в файли
- •13.5 Переміщення по файлам
- •13.6 Робота з каталогами
- •13.7 Завантаження файлу на сервер
- •14.1 Авторизація доступу
- •14.2 Механізм сесій
- •14.3 Налаштування сесій
- •14.4.1 Відкриття сесії
- •14.4.2 Створення сесії
- •14.4.3 Реєстрація змінних сесії
- •14.4.4 Видалення змінних сесії
- •14.5 Безпека
- •14.6 Висновок
- •15.1 Проектування
- •15.2 Система адміністрування контенту
- •15.2.1 Вимоги до системи адміністрування контенту (cms).
- •15.2.2 Адміністрування списку користувачів.
- •15.2.3 Вхід на сторінку адміністрування
- •15.2.4 Відкриття списку користувачів.
- •15.2.5 Редагування запису користувача.
- •15.2.6 Видалення користувача
Об'єкт window (Операції з вікнами)
При роботі браузера завжди існує об'єкт window – це поточне вікно. Можна створити ще одне чи навіть кілька вікон, які будуть благополучно уживатися в рамках прийнятої об'єктної моделі. В один і той же момент часу можуть існувати кілька об'єктів window. У мові JavaScript вважається, що посилання window завжди позначає ваше поточне вікно, то є вікно документа, що містить виконуваний JavaScript-код. Звертатися до інших об'єктів window можна за допомогою імен, які задаються при створенні вікна.
Властивості. Об'єкт window має наступні властивості:
defaultStatus – текстове повідомлення, яке за замовчуванням виводиться в рядку стану (status bar) вікна браузера;
name – заголовок вікна, який задається за допомогою аргументу windowName методу open().
parent – синонім, використовується для звернення до батьківського вікна; self – синонім, використовується для звернення до поточного вікна. status – текст тимчасового повідомлення в рядку стану вікна браузера. top – синонім, використовується для звернення до головного вікна браузера. window – синонім, використовується для звернення до поточного вікна. frames – масив фреймів у документі, що містить фрейми. length – кількість фреймів у документі, що містить фрейми.
Методи:
alert () – застосовується для того, щоб вивести на екран текстове повідомлення;
open () – використовується для відкриття вікна;
close () – використовується для закриття вікна;
confirm () – виводить на екран вікна повідомлення з кнопками Yes і No, і повертає логічне значення true або false, залежно від натиснутої кнопки;
prompt () – виводить діалогове вікно з полем введення;
setTimeout () – встановлює в поточному вікні обробку подій, пов'язаних з таймером;
clearTimeout () скасовує обробку подій, пов'язаних з таймером;
moveTo (), moveBy () – переміщує вікно браузера;
resizeTo (), resizeBy – змінює розміри вікна браузера;
print () – виводить документ на друк.
Обробники подій. Об'єкт window не виконує жодних події до тих пір, поки в вікно не завантажений документ. Однак можна обробляти події, пов'язані із завантаженням і розвантаженням документів. Обробники таких подій задаються як значення атрибутів onLoad і onUnload, що визначаються в тезі <body>.
Створення нового вікна браузера (метод open). Щоб створити нове вікно, потрібно застосувати метод window. open (). Типові інструкції, що вводять цей метод, мають такий вигляд:
window.open ( "URL", "Namewin", "Features");
або
var win = window.open ( "URL", "name", "features");
Згідно з першим записом створюється новий об'єкт window без можливості посилання на нього. При використанні другого запису дані про об'єкт зберігаються в змінній win. Тобто можна послатися на створений об'єкт, використовувати його методи і властивості.
При операціях в поточному вікні в записі window.open () об'єкт верхнього рівня (window) можна не вказувати. Метод open () створює вікно, яке відноситься до типу немодального вікна. На відміну від модальних вікон alert (), prompt (), confirm (), немодальні вікна не залежать від поточного вікна. Програма в немодальному вікні виконується незалежно від інших вікон.
Аргументи методу ореn (). Аргумент "URL" позначає URL документа, що завантажується у вікні.Аргумент "Namewin" вводить назву вікна. Ім'я вікна Namewin буде присвоєне властивості name об'єкта win.Аргумент "Features" позначає список необов'язкових опцій, які розділені комою. У цьому списку можуть бути:
параметри розмірів вікна в пікселах (width і height);
можливості зміни розмірів кордону вікна (resizable);
параметри наявності панелі інструментів (toolbar);
меню (menubar);
поля введення адреси (location);
рядки стану (status).
Всі зазначені параметри в методі open () є необов'язковими. Якщо опущений в списку параметрів покажчик URL, то в новому вікні браузера буде відкрита порожня сторінка. Ім'я також можна не вказувати, проте в цьому випадку не можна буде використовувати дане вікно в якості цільового (target) для наступних документів. Нарешті, якщо не задані параметри вікна, використовуються значення параметрів, прийняті за замовчуванням.
Наведений нижче сценарій призведе до створення трьох різних незалежних вікон:
<SCRIPT LANGUAGE="JavaScript">
var winl = open("","Copy");
var win2 = open("F:/Examp/About.html", "Version",
"width=200, height=150, toolbar=0, status=l, menubar=yes");
var win3 = open("www.rumber.com/Home.html","Session");
</SCRIPT>
Змінна winl буде містити дані про порожнє вікно з ім'ям Сору. У вікно з ім'ям Version (об'єкт win2) буде завантажений файл F:\Examp\About.html, а у вікні Session (об'єкт win3) буде відкрита Web-сторінка www.rumber.com/home.html. Для об'єкта win2 задані розміри вікна: width=200, height=150, а також передбачені меню (menubar) і рядок стану (status).
Щоб включити той чи інший елемент вікна (toolbar, menubar, location» status), використовуються значення параметрів yes, 1 або сама назва елемента. Для відключення елемента - значення no або 0. Наприклад, для виведення панелі інструментів, в вікні можна використовувати будь-яку з наступних інструкцій:
window.open("...і,"...", "toolbar=l"); open("...","...", "toolbar=yes"); open(n...","...", "toolbar").
Переключення між вікнами (методи focus() і blur()). Якщо на екрані відкрито кілька вікон, то для перемикання між ними можна скористатися методом window.focus (). Вікно, яке отримало фокус, буде відрізнятися від інших вікон кольоровий підсвічуванням рядка заголовка. Позбавити вікно фокусу можна за допомогою методу window. blur ().
Виклик методу focus () можна пов'язати з виконанням відповідного обробника подій – onfocus . При цьому важливо враховувати, що подія onfocus запускається, якщо фокус отримує раніше не викликане вікно. Якщо ж вікно активне, то при виклику методу focus () воно вже не буде генерувати подію onfocus.
Присвоєння імені вікна (властивість name). Всі вікна, створювані в браузері, залишаються без імені, поки воно їм не присвоєно за допомогою спеціальної директиви - присвоєння значення рядка властивості name об'єкта window. Наступні п'ять рядків приводять до одного і того ж результату, вони присвоюють ім'я MyWin поточного вікна:
window.window.name = "MyWin"
window.self.name = "MyWin"
window.name = "MyWin"
self.name = "MyWin"
name = "MyWin"
У цих записах використано властивість self об'єкта window, яке повертає вікно. Переконатися в тому, що будь-яка з директив присвоює ім'я MyWin можна з допомогою наступних операторів:
self.name = "MyWin"; alert(name);
які в діалозі повідомлення виведуть ім'я вікна «MyWin».
Переміщення вікна браузера (методи moveTo, moveBy) window. moveTo () – цей метод отримує два параметри, що відповідають переміщенню лівого верхнього кута вікна в точку з заданими координатами. Наприклад, метод window.moveTo(100,200) перемістить вікно в положення, при якому лівий верхній кут вікна буде розташований на відстані 100 пікселів від лівого краю екрана і в 200 пікселів від верхнього крану екрана; window. moveBy () – цей метод здійснює переміщення вікна на задану відстань, наприклад, window.moveBy (10, 5) перемістить вікно на 10 пікселів вправо і на 5 пікселів вниз. Можливі як позитивні, так і негативні значення аргументів. Переміщення буде здійснюватися при кожному виконанні методу. Приклад: <INPUT
type="button" value="Перемістити" onClick="window.moveBy(10,5);"> За допомогою цієї інструкції на екран виводиться кнопка з написом «Перемістити». При клацанні мишею по цій кнопці вікно переміститься на відстань, зазначену в аргументах методу.
Зміна розмірів вікна (методи resizeTo і resizeBy). Методи window. resizeTo () і window. resizeBy (аналогічні методам переміщення вікна).
Метод window. resizeTo () призводить до зміни вікна до зазначених розмірів.
Наприклад, window. resizeTo (420, 350) змінює розмір вікна до 420 пікселів в ширину і 350 пікселів у висоту.
Метод window, resizeBy () дає збільшення розмірів вікна на зазначену величину. Наприклад, window.resizeBy (20, -15)збільшує ширину вікна на 20 пікселів і зменшує висоту на 15 пікселів.
Друк Web-сторінки (метод Print). Роздрукувати Web-документ можна за допомогою кнопки «Друк» на панелі браузера. Однак аналогічне засіб є і в JavaScript, воно представлено методом window.print (). Наприклад, розмістимо на Web-сторінці кнопку «Друк», введемо в HTML-код рядок:
<INPUT type = "button" value = "Друк" onClick = "window.print ();">
При натисканні цієї кнопки буде з'являтися звичайне діалогове вікно друку. Користувачеві надається вибрати опції в цьому вікні і направити документ на друк. Якщо принтер до комп'ютера не підключено, на екрані з'явиться повідомлення про необхідність встановити принтер перш, ніж надрукувати документ.
Закриття вікна (метод close). Вікна, які створені методом open, можуть бути закриті методом close. Для закриття вікна використовуються такі записи:
window.close ();
window.close (Namewin);
Перша з цих директив закриває поточне вікно, а друга - вікно з ім'ям Namewin. Відзначимо, що факт закриття вікна записується в властивість closed об'єкта window. Вікно закрите, а його властивість ще існує. Об'єкт window після закриття вікна повністю не руйнується: властивість MyWin. closed залишається доступною (MyWin – змінна вікна) і повертає значення true.
У разі закриття останнього вікна браузера потрібне підтвердження цієї операції користувачем. Така можливість передбачена спеціально, щоб уникнути «хуліганського» закриття всіх вікнон з боку JavaScript-програми.