Java script


Java Script - це просто. Частина 1

Ще однією дуже важливою частиною програмування на мові JS є події і обробники подій. Події головним чином ініціюються тими чи іншими діями користувача. Кожна дія описує окремий тип події. Припустимо, при натисканні кнопки миші відбувається подія, зване "Click", при перетині покажчиком миші будь-якого посилання гіпертексту - подія MouseOver. Для того, щоб програма реагувала на ці події, використовуються спеціальні програми обробки подій. Наприклад, програма - обробник події натискання кнопки миші називається onClick і повідомляє комп'ютера, що потрібно робити, якщо станеться ця подія. Для наочності знову створимо простий приклад. Створимо форму, яка буде містити кнопку, при натисканні на яку буде з'являтися випадає вікно.



test page





Натискання на кнопку Test Button викликає вікно з текстом "Тест виконаний!" (Рис. 1). Розглянемо детальніше кожну команду цього коду.

командою

створюємо якусь форму з кнопкою. Атрибут визначає, що відбувається, коли натискають на кнопку миші. Таким чином, якщо має місце подія Click, комп'ютер виконає виклик alert ( 'Тест виконаний!'). Функція alert () створює поп вікна. При її виклику необхідно в дужках поставити якусь рядок, яка з'явиться в випадаючому вікні. Як видно в коді, в конструкції alert () використовуються одинарні лапки. Пояснюється це тим, що в більшості випадків є можливість використовувати обидва типи лапок. Причому не має значення, в якому порядку їх використовувати: спочатку подвійні, а потім одинарні або навпаки. У нашому прикладі використовуються спочатку подвійні, а після одинарні лапки, а якби ми застосували конструкцію з двох подвійних лапок - Тест виконаний! ")", То комп'ютер не зміг би розібратися в скрипті, оскільки неясно, до якої з частин конструкції має відношення функція обробки подій onClick, а до якої - ні.

Отже, вікно містить текст, який був переданий функції JS alert. Таке обмеження застосовується з міркувань безпеки. Випадає вікно можна створити і за допомогою методу prompt () (див. Рис. 2), однак в цьому випадку вікно буде відтворювати текст, який Ви самі ввели, а тому скрипт, написаний "злим хакером", може прийняти вигляд системного повідомлення і попросити ввести якийсь пароль. У нашому випадку зрозуміло, що вікно створено браузером, а не операційною системою, і його неможливо просто взяти і видалити.

Дуже зручним засобом в JS є функції, які в більшості випадків використовуються як спосіб зв'язати разом кілька команд. Як наочний приклад припустимо, що вам необхідно багато разів повторити якусь послідовність текстових рядків. Використовуючи вже отримані знання з мови JS, ми могли б використовувати команду document.write і отримали б код такого вигляду:

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

Всі команди скрипта, які знаходяться всередині фігурних дужок, належать створеної нами функції FreeFunc (). Тепер обидві команди document.write () пов'язані і можуть бути виконані при виклику зазначеної функції. Далі ми викликаємо FreeFunc () три рази відразу після того, як дали визначення самої функції. Це призведе до того, що функція виконається тричі, тобто три рази будуть надруковані обидві рядки. Родзинка полягає в тому, що можливість передачі змінних при виконанні функції надає скриптів справжню гнучкість. Функції можуть використовуватися і спільно з процедурами обробки подій. Наприклад, можна створити функцію calc (), яка буде мати дві змінні x і y, а результат математичної дії буде зберігатися у змінній result. Останньою командою функції вкажемо alert (result). Далі функцію calc () можна викликати при натисканні на кнопку командою. в результаті чого отримаємо спливаюче вікно з результатом розрахунку.

Робота з вікнами

Таблиця 1. Основні параметри створення вікна в JS

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

В результаті виконання даної програми ми отримаємо кнопку в браузері, при натисканні на яку створюється нове вікно з текстом (див. Рис. 3).

Створена нами функція OpenWindow () відкриває нове вікно браузера. Перший аргумент функції open () - порожній рядок ( "") - позначає, що в даному випадку ми не бажаємо вказувати конкретний URL, а JS зобов'язаний створити додатково новий документ. В скрипті ми визначаємо змінну myWindow, за допомогою якої отримуємо доступ до нового вікна (скористатися для цієї мети ім'ям вікна (TestWindow) в даному випадку неможливо). Створене вікно має розміри 300x100 пікселів і не має ні рядка статусу, ні панелі інструментів, ні меню. Після відкриття вікна всередині нього відкриваємо об'єкт document для відображення тексту. Робиться це за допомогою команди myWindow.document.open (). Тут ми звертаємося до open () - методу об'єкта document. Ця команда не відкриває нового вікна - вона лише готує document до майбутньої друку. Обов'язково необхідно поставити перед document.open () приставку myWindow, щоб отримати можливість друкувати в новому вікні. Далі по тексту скрипта за допомогою виклику document.write () формується текст нового документа і його параметри. Для цього записуємо в документ звичайні теги мови HTML. При цьому можна використовувати абсолютно будь-які теги мови гіпертекстової розмітки HTML. По завершенні роботи з командою document () необхідно її закрити, для чого використовуємо команду myWindow.document.close ().

При відкритті вікна ми повинні використовувати три аргументи:
myWindow = open ( "page.htm", "TestWindow",
"Width = 300, height = 100, status = no, toolbar = no, menubar = no");

В даному прикладі ми вказуємо конкретний URL (page.html), а другий параметр - це ім'я вікна. Знаючи ім'я вікна, можна завантажити туди нову сторінку за допомогою запису

При цьому потрібно вказати ім'я відповідного вікна, а якщо такого вікна не існує, то з цим ім'ям буде створено нове. Не допустіть помилки: змінна myWin - це зовсім не ім'я вікна, але тільки за допомогою цієї змінної можна отримати до нього доступ. Область дії цієї змінної обмежується лише скриптом, в якому вона визначена. А ось ім'я вікна (TestWindow) - унікальний ідентифікатор, яким можна користуватися з будь-якого з вікон браузера. Для закриття вікна використовується функція close (), а все інше ідентично роботі з функцією open ().

В JS можна записувати відео у рядок стану браузера - для цього достатньо лише записати потрібний текст в windows.status. Знову розглянемо прийоми роботи з цією функцією на прикладі. Створимо скрипт, який при натисканні на кнопку буде виводити заданий текст в рядку стану, а при натисканні на другу кнопку - прати його:

Запустивши програму в браузері, отримуємо форму з двома кнопками. При натисканні на кнопку On Statbar Text в рядку стану з'являється напис "Натиснуто кнопка On", а при натисканні кнопки Off Statbar (Clear text) рядок стану очищається (див. Рис. 4).

Отже, маємо форму з двома кнопками, які обидві викликають функцію statbar (). При натисканні клавіші On Statbar Text функція викликається
наступним чином: statbar ( 'Натиснуто кнопка On'). Текст в лапках і є той текст, який ми побачимо в рядку стану. У свою чергу, функція statbar () була оголошена в такий спосіб:

function statbar (txt) window.status = txt;>

У функції в дужках ми помістили (txt). Це означає, що рядок, яку ми передали цю функцію, поміщається в змінну txt, а рядок txt заноситься в рядок стану за допомогою команди window.status = txt. Відповідно, видалення тексту з рядка стану виконується як запис в window.status порожнього рядка: ( ''). Використання запису тексту в рядок стану безмежно. Ви можете помістити туди пояснення посилання при наведенні на неї курсором миші, створити рядок, що біжить або просто використовувати для відображення дати і часу.

За допомогою функції таймера (timeout) можна виконати деякі команди після закінчення заданого часу. Продемонструю це в наступному скрипті:

Після закінчення 3-х секунд після відкриття сторінки з'явиться спливаюче вікно з написом "Ласкаво просимо на сторінку" MyHome "" (див. Рис. 5).

SetTimeout () - це метод об'єкта window. Він призначений для установки інтервалу часу. Перший аргумент при виклику - це код JS, який слід виконати після закінчення зазначеного часу (в нашому випадку це alert ()). Другий аргумент служить для вказівки, коли цей код слід виконувати. При цьому термін визначається у мілісекундах.

Вікно браузера може бути розбите на кілька окремих фреймів. Фрейм в загальному понятті - це поле в формі прямокутника. Кожен з фреймів видає на екран вміст власного документа. Створення фреймів все ж є завданням мови HTML, але ми коротко розглянемо основні моменти цього процесу на мові JS. Для створення фреймів використовуються теги і . У наступному прикладі створимо скрипт, що розділяє сторінку браузера на 5 фреймів, і завантажимо в кожен з них окрему сторінку:













Результат виконання даного скрипта представлений на рис. 6.







Далі створимо просту HTML-сторінку "start.htm":


початкова сторінка
Це стартова сторінка нашого сайту

І меню панелі навігації:

function load (url) parent.main.location.href = url;>

Усередині дужок написано url. У нашому прикладі це означає, що рядок '1.htm' при виконанні функції заноситься в змінну url. І цю нову змінну тепер можна використовувати при роботі всередині функцій load ().

Павло Кучинський, pawelk_kg # 64; tut.by

Схожі статті