Scribd
Загрузить
28 просмотров11 страниц

Dinamicheskii HTML

Документ описывает динамический HTML (DHTML) и его интеграцию с JavaScript для управления содержимым веб-страниц. Он охватывает синтаксис JavaScript, включая объявление переменных, операторы, функции и встроенные объекты, такие как Math и String. Также рассматриваются элементы управления, такие как input, textarea и select, и их использование для взаимодействия с пользователем.

Загружено:

spamthispost
Авторское право
© © All Rights Reserved
Мы серьезно относимся к защите прав на контент. Если вы подозреваете, что это ваш контент, заявите об этом здесь.
Доступные форматы
Скачать в формате PDF, TXT или читать онлайн в Scribd
28 просмотров11 страниц

Dinamicheskii HTML

Документ описывает динамический HTML (DHTML) и его интеграцию с JavaScript для управления содержимым веб-страниц. Он охватывает синтаксис JavaScript, включая объявление переменных, операторы, функции и встроенные объекты, такие как Math и String. Также рассматриваются элементы управления, такие как input, textarea и select, и их использование для взаимодействия с пользователем.

Загружено:

spamthispost
Авторское право
© © All Rights Reserved
Мы серьезно относимся к защите прав на контент. Если вы подозреваете, что это ваш контент, заявите об этом здесь.
Доступные форматы
Скачать в формате PDF, TXT или читать онлайн в Scribd
Вы находитесь на странице: 1/ 11

1

Динамический HTML
HTML является языком разметки и не имеет каких-либо средств, которые могли бы
использоваться для изменения содержимого страницы. Эту проблему решает
использование языка DHTML (Dynamic HTML), поддерживающего средства
программирования на клиентской стороне. Для этого в DHTML встроена поддержка
скриптового языка JavaScript (должен поддерживаться браузером).
Возможности динамического управления содержимым становятся доступны при
внедрении в веб-страницу кода JavaScript . Это делается с помощью тега script,
размещаемого в нужном месте веб-страницы и которым выделяют начало и конец
исходного кода или указывают на подгружаемый из сети файл с исходным кодом:
Для внедрения скриптов в веб-документ используется контейнерный тег
<script>...</script>, внутри которого записываются команды JavaScript (в общем случае и
ряда других яыков: VBScript, php, tcl/tk ... ).
Если этот тег ипользуется в теле документа (внутри тега body), то исполнение скрипта
осуществляется по мере отображения веб-страницы в браузере. Если же контейнер 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


2

var myarr;
myarr = new Array(256);

myarr[0] = 255;
myarr[1] = 254;

var x = myarr[7];
Операторы
Комментарии - предназначены для пояснения фрагментов кода или исключения
фрагментов кода из обработки. Игнорируются при выполнении программы.
// Это однострочный комментарий.

/*
Это многострочный комментарий. Он может объединять несколько строк и
его можно использовать в любом месте программы
*/
Условный оператор 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 (объект) {блок операторов;}
3

Функции. Представляют возможность создания повторно используемого кода. Функция


может принимать параметры и возвращать значение в вызывающую программу. Если в
функции не предусмотрен возврат значения, то она работает как процедура.
function имяФункции ([список параметров]) {
блок операторов;
[return возвращаемоеЗначение;]
}
Встроенные объекты JavaScript
JavaScript предлагает разработчику некоторый набор библиотечных функций,
оформленных в виде свойств и методов различных объектов. Обращение к этим
свойствами методам - через точечную нотацию.
Кратко рассмотрим некоторые встроенные объекты JavaScript.
Объект Math
Объект Math представляет математические константы и функции. Константы
представлены свойствами объекта, а функции - его методами. Их назначение понятно из
названий:
Свойства: E, LN2, LN10, LOG2E, LOG10E, PI, SQRT1_2, SQRT2.
Методы: abs, acos, asin, atan, ceil, cos, exp, floor, log, max, min, pow, random, round, sin, sqrt,
tan.
Примеры использования:
var r = 1.8, theta = 30, a, x, y, D;
var rnd = Math.round(Math.random()*99)+1;

D = Math.PI*r*r;
x = Math.max(1,7,5,9);
y = Math.pow(2,10);

with (Math) {
y = r*sin(theta);
x = r*cos(theta);
}
Объект string
Встроенный объект string представляет литерал (строку символов), заключенный в
одинарные или двойные кавычки или вычислимое выражение, которое может быть
интерпретировано как строка.
Для объекта string определены следующие свойства и методы:
 Свойства: length (длина строки).
 Методы (не все): anchor (якорь), bold (полужирное начертание), charAt (символ в
позиции), fixed (преформат), fontcolor (цвет шрифта), fontsize (размер шрифта),
indexOf (индекс первого вхождения символа), italics (курсив), link (гиперссылка),
substring (подстрока), toLowerCase (строчные), toUpperCase (прописные).
Несколько примеров использования объекта string:
var hello = "Hello, ", w = "World!";
var str = hello + w; // конкатенация строк

document.write(str.bold());
document.write(str.toUpperCase());
document.write(hello.fontsize(6));
document.write(hello.substring(0,3));

document.write(hello.link("http://localhost"));
4

document.write(w.indexOf("l"));

alert("string lehgth = " + str.length);


Вывод данных в JavaScript
Результаты работы скрипта JavaScript могут быть отображены по меньшей мере двумя
способами: в окно текущего веб-документа и в диалоговое окно.
Для вывода данных в веб-документ можно использовать метод write объекта document
(подробней в ЛР №5). Примеры использования этого метода приведены при описании
объекта string. Еще несколько примеров:
document.write("Hello, World!");
document.write("<h1>>Hello, World!</h1>"); // внедрение HTML в JavaScript

// обратите внимание на использование вложенных кавычек


document.write("<p><a href='http://localhost'>Link to localhost</a></p>");
Для вывода различных информационных сообщений, не относящихся напрямую к
содержимому веб-страницы следует использовать метод alert, представляемый объектом
window. Этот метод выводит модальное диалоговое окно (рис.1), блокирующее
выполнение скрипта до нажатия пользователем кнопки в этом диалоге.

Пример использования метода alert:


var a, b, s = "=";

with (Math) {
a = ceil(random()*100);
b = ceil(random()*100);
}
a > b ? s = ">" : s = "<"; // тернарное сравнение

alert("A = "+a+";\nB = "+b+";\nСледовательно, A "+s+" B"); // "\n" - перевод строки


5

Объекты JavaScript
Задание
Написать скрипт, проверяющий код защиты от автоматического постинга и вырезающий
ссылки из формы ввода комментария (на странице отзывов и комментариев)
Пояснение: В ходе выполнения задания требуется написать клиентсткую программу на
javascript, которая генерирует арифметический пример, ответ на который должен дать
пользователь. Другой вариант — генерация произвольной строки, которую должен
воспроизвести пользователь. После того, как пользователь ввел ответ программа должна
проверить его правильность. Смысл этого задания не столько в разработке эффективного
теста Тьюринга, сколько в освоении javascript.
Указания к работе
 Элементы управления
 Объект document
 События
 Объект RegExp
 Примеры скриптов
Элементы управления
Элементы управления — это интерактивные объекты, позволяющие получить данные от
пользователя. Их назначение и внешний вид идентичны элементам пользовательского
интерфейса современных операционных систем с графическим интерфейсом (кнопки,
поля ввода, чекбоксы и т.п.).
Элемент input
Тэг <input> представляет различные элементы, в зависимости от значения атрибута type
(табл.1).
Таблица 1. Типы элементов управления (атрибут type)
Значение
Описание
type
Однострочное поле ввода. Используйте атрибуты maxlength и size для
определения максимальной длинны вводимого значения в символах и размера
text
отображаемого поля ввода на экране (по умолчанию принимается 20
символов).
То же самое, что и атрибут text, но вводимое пользователем значение скрыто
password
замещающими символами (звездочки, точки и т.п.).
Флажок (маркер множественного выбора). Используется для отметки
checkbox
выбранных вариантов.
Скрытое поле. Не отображается браузером и не дает пользователю изменять
присвоенные данному полю значение. Это можно сделать только
hidden
программным путем (или изменением значения поля при передаче данных
через адресную строку или в теле запроса).
Кнопка-картинка. Позволяет использовать графический рисунок в качестве
image кнопки. Все значения атрибута value игнорируются. Само описание картинки
осуществляется через атрибут src и по синтаксису совпадает с тегом <img>.
Радиокнопка. Позволяет вводить одно значение из нескольких альтернатив.
Для создания набора альтернатив вам необходимо создать несколько полей
ввода с атрибутом type="radio" с разными значениями атрибута value, но с
radio
одинаковыми значениями атрибута name. При выборе одного из полей ввода
типа radio все остальные поля данного типа с тем же именем (атрибут name)
автоматически станут невыбранными на экране.
Пользовательская кнопка. Должна быть запрограммирована на обработку
button
нажатий. Атрибут value содержит текст надписи на кнопке.
6

Значение
Описание
type
Кнопка отправки данных. При ее нажатии будет будет вызван обработчик,
описанный в заголовке формы (form action="scriptname", подробнее о теге form
submit
- в лабораторной работе №8 ) и ему будут переданы значения всех элементов,
описанных в теге form. Атрибут value содержит текст надписи на кнопке.
Кнопка сброса. При нажатии ее все поля формы примут значения, заданные по
reset
умолчанию.
Атрибуты элемента input
 type — определяет тип поля ввода. По умолчанию равно text.
 name — имя поля ввода. Используется как идентификатор переменной при
передаче данных на сервер и для программного обращения к элементу из скрипта
javascript.
 id — идентификатор элемента. Должен быть уникальным в пределах веб-
документа.
 checked — означает, что checkbox или radio будет выбран.
 maxlength — определяет количество символов, которое пользователи могут ввести
в поле ввода. При превышении количества допустимых символов броузер
реагирует на попытку ввода нового символа звуковым сигналом и не дает его
ввести.
 size — определяет визуальный размер поля ввода на экране в символах.
 src — URL, указывающий на картинку (используется совместно со значением
type="image").
 value — значение по умолчанию или установленное значение.
Элемент textarea
Тэг <textarea> используется для того, чтобы позволить пользователю вводить более одной
строки информации (многострочный текст). При передаче значения из textarea
сохраняются все символы форматирования (табуляция, перевод строки, возврат каретки).
Атрибуты, используемые с тегом <textarea> задают его размеры (в символах и строках):
 rows — высота поля ввода в символах
 cols — ширина поля ввода в строках
Пример использования тега <textarea>:
<textarea rows=10 cols=50>Москва, Дмитровское шоссе, д.9Б, офис 448</textarea>
Элемент select
Элемент select отображает на странице список выбора, который может быть представлен
следующими способами:
 select — выпадающий список.
 select single — развернутый список.
 select multiple — список с множественным выбором.
Примеры описания элемента select:
<select name="group">
<option>понедельник, среда, пятница</option>
<option> вторник, четверг, суббота</option>
<option> воскресенье</option>
</select>

<select single name="group" size="3">


<option>зима</option>
<option>весна</option>
<option>лето</option>
<option>осень</option>
7

</select>
Объект document
Объект document это абстрактная структура данных, представляющая полное описание
веб-страницы. Набор свойств и методов этого объекта позволяет управлять как
поведением веб-страницы целиком, так и отдельных ее объектов (элементов управления,
ссылок, текстовых блоков, изображений и т.д.). Доступ к свойствам и методам реализован
через стандартные программные интерфейсы (рис. 1).

Свойства объекта Document


Начнем со свойств, общих для всех браузеров. Большинство их доступны как для чтения,
так и для изменения. Все значения свойств — строковые.
 title — текст заголовка документа (содержимое элемента title);
 fgColor и bgColor — цвет текста и цвет фона документа;
 linkColor, vLinkColor, aLinkColor — цвета непосещенных, посещенных и активных
гиперссылок;
 lastModified (только для чтения) — дата изменения документа;
 referrer (только для чтения) — адрес источника перехода;
 URL, location — собственный адрес документа.
Более интересны и полезны для разработчика свойства-массивы объекта Document. Все
они, естественно, имеют свойство length (количество элементов в массиве). Большинство
свойств, специфичных для объектов, хранящихся в этих массивах, ассоциируются с
атрибутами соответствующих элементов HTML (список неполный):
 объект Anchor (якорь) имеет единственное свойство name;
 объект Link (ссылка) имеет свойства href, target;
 объект Image (изображение) имеет свойства src, width, height.
К объектам документа, хранящимся в массивах images, controls и прочим, а также к
элементам форм можно обращаться по имени (свойство name) или идентификатору
(свойство id). Пусть, например, в документе имеется описание <img src="images/cat.jpg"
id="cat_id" name="cat_name"> и оно является n-ым изображением, встречающимся в
8

документе. К этому элементу img можно обратиться по крайней мере следующими


способами:
1. Как к элементу массива images по индексу (индексация начинается с 0):
window.document.images[n-1]
2. Как к элементу хэш-массива images по ключу (значение name как ключ массива):
window.document.images["cat_name"]
3. Используя значение атрибута name как свойство объекта:
window.document.cat_name
4. Используя значение атрибута id и свойство getElementById:
window.document.getElementById("cat_id")
Методы объекта Document
 open() — открывает новый документ; при этом все его содержимое удаляется.
 close() — закрывает ранее открытый документ.
 write() — записывает в документ заданную в качестве аргумента строку.
 writeln() — аналогичен предыдущему, но выведенная в документ строка
заканчивается символом перевода строки.
Методы write() и writeln() весьма полезны и часто используются для динамического
формирования содержимого документа. Вот как, например, можно включить в документ
дату его последнего изменения:
<script>document.write(document.lastModified);</script>
События
Для всех элементов документа имеется возможность отслеживать различные события
(загрузка, перемещение мыши, мышеклики и проч.) и вызывать функции обработки таких
событий. В таблице 2 приведено краткое описание событий, доступных для
использования в программах на javascript:
Таблица 2. События веб-документа
Событие Описание
OnLoad Броузер заканчивает открытие документа HTML
OnUnload Броузер выгружает документ HTML
OnClick Пользователь щелкнул мышью по элементу
OnDblClick Пользователь дважды щелкнул мышью по элементу
OnMouseDown Пользователь нажимает кнопку мыши
OnMouseOver Пользователь перемещает мышь поверх элемента
OnMouseMove Пользователь перемещает мышь поверх элемента
OnMouseOut Пользователь перемещает мышь, выходя из элемента
OnFocus Элемент получает фокус ввода
OnBlur Элемент теряет фокус ввода
OnKeyPress Пользователь нажимает и отпускает клавишу
OnKeyDown Пользователь нажимает клавишу над элементом
OnKeyUp Пользователь отпускает клавишу над элементом
OnSubmit Данные из формы переданы Web-серверу
OnReset Форма очищена
OnSelect Пользователь выбирает текст в текстовом поле
OnChange Потеря фокуса ввода элементом после изменения его значения
Назначение обработчика события выполняется путем указания имени события в виде
атрибута тега, например так:
<a name="test" onClick="alert('Hello, world!');">say "Hello"</a>
9

При использовании событий, следует понимать, что не каждый элемент может породить
определенное событие. Например в следующем примере вызов функции resetAll не
произойдет, поскольку элемент <a>, никогда не породит событие onReset;
...
<script>
function resetAll() {
// do something
}
</script>
...
<a href="clear.htm" onReset="resetAll();">Сброс</a>
...
Объект RegExp
При работе с веб-страницами часто возникает необходимость выполнить сложную
обработку текста. В javascript для этого имеется встроенный объект RegExp, который
позволяет работать с регулярными выражениями.
Работа с объектном RegExp в javascript мало отличается от работы с любыми другими
объектами, но сам синтаксис регулярных выражений требует понимания и практики.
Хорошая статья по этой теме написана М.С.Выскорко, она приводится здесь в качестве
руководства по регулярным выражениям в javascript.
Примеры скриптов
В листингах 1-6 приведены примеры простых скриптов, иллюстрирующими базовые
возможности javascript при работе с объектами веб-документа. При выполнении заданий
используйте предлагаемые примеры в качестве образцов.
WARNING: Имейте ввиду, что различные браузеры могут по разному выполнять код
javascript (или даже не выполнять его совсем).
Листинг 1. Ограничение количества символов
<html>
<head>
<title>Ограничение количества вводимых символов</title>
<script type="text/javascript">
var maxLen = 25;
function checkMaxinput(form) {
if (form.message.value.length > maxLen)
form.message.value = form.message.value.substring(0, maxLen);
else
form.remLen.value = maxLen —
form.message.value.length;
}
</script>
</head>
<body>
<form name=myform action="somehandler.cgi">
<h1>Ограничение количества вводимых символов<h1>
<textarea name=message cols=28 rows=4 onKeyDown="checkMaxinput(this.form)"
onKeyUp="checkMaxinput(this.form)"></textarea>
<p>Осталось <input readonly type=text name=remLen size=3 value="25"> символов</p>
</form>
</body>
</html>
Листинг 2. Проверка ввода
<html>
10

<head>
<title>Проверка ввода
</title>
<SCRIPT type="text/javascript">
function checkIt(){
var t0=document.getElementById('first').value;
var t1=document.getElementById('second').value;
if (t0 == "" || t0 == "Имя") {
alert("Вы не указали свое имя!"); return false;
}
if (t1 == "") {
alert("Вы не ввели необходимую информацию!");
return false;
}
return true;
</SCRIPT>
</head>
<body>
<form method='get' action='somescript.php'>
<input id="first" type="text" size=60px value='Имя'>
<br>
<textarea id="second" rows=4 cols=60></textarea>
<br>
<input type='submit' onClick="if (!checkIt()){return false;}" value="ОК">
</form>
</body>
</html>
Листинг 3. Управление окнами (используется объект window)
<html>
<head>
<title>Открытие/закрытие нового окна</title>
</head>
<body>
<p><a name="demoOpen" onClick="mywindow =
window.open('window.htm','mywin','height=120, width=300, left=100, top=30');">Открыть</a>
<a name="demoClose" onClick="mywindow.window.close();">Закрыть</a>
</body>
</html>
Листинг 4. Изменение оформления
<html>
<HEAD>
<TITLE>Изменение цвета объекта по щелчку мыши</TITLE>
</head>
<BODY>
<p onClick="fgColor='#3CB094';bgColor='#FFFF00';">CLICK 4 REDRAW</p>
</BODY>
</HTML>
Листинг 5. Текущее время (использован встроенный объект Date)
<html>
<HEAD>
<TITLE>Часы, отображающие текущее время</TITLE>
<script type="text/javascript">
11

function fulltime() {
var time=new Date();
document.clock.full.value=time.toLocaleString(); // 1-ый вариант
document.getElementById("jsclock").innerHTML=time.toLocaleString(); // 2-ой
вариант
setTimeout('fulltime()',500) }
</script>
</head>
<body>
<form name=clock>
<input type=text size=20 name=full><!-- 1-ый вариант -->
<span id="jsclock"></span><!-- 2-ой вариант -->
</form>
<script type="text/javascript"> fulltime(); </script>
</BODY>
</HTML>
Листинг 6. Определение браузера (использован объект navigator)
<HTML>
<HEAD>
<TITLE>Сведения о браузере</TITLE>
</HEAD>
<BODY>
<h1>Для навигации в Web вы используете:</h1>
<ul>
<SCRIPT type="text/javascript">
document.write("<li>Имя программы:<b>"+navigator.appName+"</b>");
document.write("<li>Версия:<b>"+navigator.appVersion+"</b>");
document.write("<li>Пользовательский агент:<b>"+navigator.userAgent+"</b>");
document.write("<li>Платформа: <b>"+navigator.platform+"</b>");
</SCRIPT>
</ul>
</BODY>
</HTML>

Вам также может понравиться