Аннотация: Лекция посвящена способам реализации клиентской активности. Рассказывается о клиентских сценариях JavaScript и VBScript, а также о технологии, классах и платформе Java, инструментах создания Java-приложений. Дается понятие элементов управления ActivX, технология их создания и применения, а также встраивания в страницу.
При разработке динамических web-сайтов в большинстве случаев целесообразно разделять бизнес-логику между клиентом и сервером, чтобы добиться оптимальной производительности в условиях низкоскоростных каналов Интернета и лимитированных ресурсов Web-серверов.
Например, предварительную обработку введенных данных, отправляемых серверу, имеет смысл выполнять на стороне клиента. Это позволит исключить повторные передачи неправильно заполненных форм. Графическое представление результатов запроса также стоит выполнять на стороне клиента, что существенно сократит объем данных, передаваемых по сети.
Для реализации клиентской активности возможно применение сценариев JavaScript, VB Script, аплетов Java и элементов управления ActiveX.
Клиентские сценарии JavaScript
Понятие языка JavaScript
Язык программирования JavaScript предназначен для создания интерактивных HTML-документов. Это объектно-ориентированный язык разработки встраиваемых приложений, выполняющихся как на стороне клиента, так и на стороне сервера. Синтаксис языка похож на синтаксис языка Java — поэтому его часто называют Java-подобным. Клиентские приложения выполняются браузером просмотра Web-документов на машине пользователя, серверные приложения выполняются на сервере.
При разработке обоих типов приложений используется общий компонент языка, называемый ядром и включающий определения стандартных объектов и конструкций (переменные, функции, основные объекты и средство LiveConnect взаимодействия с Java-аплетами), и соответствующие компоненты дополнений языка, содержащие специфические для каждого типа приложений определения объектов.
Конструкции языка сценариев JavaScript встраиваются в страницы HTML и исполняются (интерпретируются) под управлением браузера при загрузке страниц, а также при совершении пользователем определенных действий над объектами, расположенными в этих страницах.
Назначение клиентских сценариев JavaScript
Назначение клиентских сценариев JavaScript:
- Оперативная проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер. Сценарии JavaScript способны обрабатывать данные, введенные пользователями в полях форм, а также события, возникающие в процессе манипуляций пользователя с мышью, копировать в окно браузера другие страницы HTML или изменять содержимое уже загруженных страниц.
- Создание динамических HTML-страниц совместно с каскадными таблицами стилей и объектной моделью документа.
- Взаимодействие с пользователем при решении «локальных» задач, решаемых приложением JavaScript, встроенном в HTML-страницу. В частности, сценарии JavaScript широко применяются для создания различных визуальных эффектов. Например, изменение внешнего вида элементов управления, над которыми установлен курсор мыши, анимация графических изображений, создание звуковых эффектов и т. д. Механизм локальной памяти Cookie позволяет сценариям JavaScript сохранять на компьютере локальную информацию, введенную пользователем. Например, в Cookie может храниться список товаров из Интернет-магазина, отобранных для покупки.
Приложение JavaScript представляет набор операторов языка, последовательно обрабатываемых встроенным в браузер интерпретатором.
Способы включения сценариев JavaScript в HTML-страницу
Встроить сценарий JavaScript в HTML-страницу можно несколькими способами:
- Задать операторы языка внутри тэга-контейнера <script>…</script> языка HTML. Браузеры, не поддерживающие какие-либо тэги HTML, их игнорируют, анализируя содержимое пропускаемых тэгов с точки зрения синтаксиса HTML. Это может приводить к ошибкам при отображении страницы. Поэтому операторы языка JavaScript помещаются в контейнер комментария <!— … —>:
<script type="text/javascript" language="javascript"> <!-- операторы JavaScript //--> </script>
Символы ( // ) перед закрывающим тэгом комментария —> являются оператором комментария JavaScript. Он необходим для правильной работы интерпретатора. Документ может содержать несколько тэгов <script>, расположенных в любом месте документа. Все они последовательно обрабатываются интерпретатором JavaScript по мере отображения частей документа в окне браузера. Поэтому рекомендуется размещать сценарии с глобальными функциями и переменными в разделе <head> документа. В этом случае все определения обрабатываются интерпретатором в начале загрузки документа и хранятся в памяти с первых моментов отображения документа в окне браузера.
- Указать файл с кодом JavaScript в параметре src тэга <script>. В качестве значения параметра задается полный или относительный URL-адрес внешнего файла, содержащего программный код на языке JavaScript. Задание закрывающего тэга </script> обязательно, независимо от того, заданы или нет операторы внутри тэга. Связываемый внешний файл не должен содержать тэгов HTML и должен иметь расширение .js:
<script type="text/javascript" language="javascript" src="http:www.mysite.ru/functions/jsfuncs.js"> операторы JavaScript </script>
- Использовать выражения JavaScript в качестве значений параметров тэгов HTML. Эта процедура аналогична процедуре встраивания числовых или символьных примитивов HTML. Элементы JavaScript также располагаются между амперсандом ( & ) и точкой с запятой ( ; ), но должны заключаться в фигурные скобки { } и использоваться только в качестве значений параметров тэгов HTML. Нельзя использовать элементы JavaScript в тексте HTML. Они интерпретируются только тогда, когда расположены справа от параметра и задают его значение. Пусть определена переменная barwidth, и ей присвоено значение 75. Следующий тэг нарисует горизонтальную линию длиной в 75% от горизонтального размера окна браузера:
<hr width="&{barWidth};%"/>
- Определить обработчик событий в тэге HTML. Для совместимости с языками сценариев в некоторые тэги HTML были введены специальные параметры обработки возникающих событий. Значениями этих параметров могут быть операторы языка JavaScript. Обычно в качестве значения задается имя функции, которая вызывается, когда происходит соответствующее событие, определяемое параметром обработки события. Имя параметра начинается с приставки on, за которым следует имя самого события. Например, параметр обработки события click будет иметь имя onClick. События в основном связаны с действиями, производимыми пользователем с элементами форм HTML. Поэтому чаще всего перехват и обработка событий задается в параметрах элементов форм, что позволяет проверить введенную информацию перед ее отправкой на обработку. Функция или процедура это именованная последовательность операторов, которая выполняет определенную задачу и может возвращать некоторое значение. Функция в JavaScript определяется оператором function, имеющем следующий синтаксис:
function имя_функции ( [параметры] ) { [операторы JavaScript] [return значение] }
Параметры, передаваемые функции, разделяются запятыми. Необязательный оператор return в теле функции (блок операторов, заключенный в фигурные скобки), определяет возвращаемое функцией значение. Определение необходимых функций следует осуществлять в тэге <head>, так как все определенные в нем операторы сценария интерпретируются до отображения страницы, и, таким образом, будут известны в процессе отображения всей страницы.
Пример задания функции и ее вызова в процессе формирования документа:
<head> <title>Demo</title> <script type="text/javascript" language="javascript"> <!-- //Скрыть сценарий от браузеров: не поддерживающих JavaScript function square(number) { return number * number;} //--> </script> </head> <body> <p>Начинается отображение страницы, в которую внедрен сценарий вычисления функции</p> <script type="text/javascript" language="javascript"> <!-document.write("Значение, которое вычислялось, равно ", square(5), "."); //--> </script> <p> Теперь формирование страницы закончено.</p> </body>
Пример явного вызова функции из сценария:
<head> <title>Demo</title> <script type="text/javascript" language="javascript"> <!-- //Скрыть сценарий от браузеров: не поддерживающих JavaScript function validate(form) { if(form.value >=18) {alert("Вы - совершеннолетний"); } else { alert ("Вы - несовершеннолетний"); } } //--> </script> </head> <body> <form name="form_l" action="HTMLPage.htm"> Ваш возраст: <input type="text" size="5" name="age" /> <hr/> <input type="button" value="Подтвердите" onclick="validate(this.form.age)"/> </form> </body>
В этом примере обработчик события onclick кнопки формы связан с вызовом функции validate, которой передается значение, введенное в текстовое поле age. Имя поля задается параметром name. При нажатии на кнопку вызывается функция validate, отображающая сообщение в зависимости от введенного значения.
Параметр name элемента формы задает символическое имя элемента, которое можно использовать в операторах сценария для ссылки на соответствующий элемент. Передаваемый функции параметр this.form.age использует синтаксис объектно-ориентированных языков, обозначающий элемент с именем age (текстовое поле) формы. Ключевое слово this языка JavaScript означает в данном случае ссылку на текущую форму.
Браузер MSIE реализует собственную версию JavaScript, называемую JScript. Кроме того, для выполнения многих функций клиентские сценарии обращаются к интерфейсу объектной модели браузера. Эта модель отличается для разных браузеров.
Одним
из основных недостатков языка HTML
является пассивность и статичность
документов на этом языке, то есть
невозможность алгоритмического
построения содержимого документа в
соответствии с программой, реализующей
алгоритм, или в зависимости от действий
пользователя, просматривающего документ.
Для преодоления этих недостатков в
язык HTML
введена поддержка сценариев – программ,
загружаемых с сервера вместе с документом
HTML
и выполняемых навигатором при просмотре
этого документа. Существует несколько
языков, на которых может быть написан
сценарий. Наибольшей популярностью
пользуется язык JavaScript
компании Netscape,
первой реализовавшей поддержку сценариев
стороны клиента в своем браузере.
Поскольку
программа-сценарий выполняется
пользовательским агентом на машине
клиента, то данную технологию следует
отнести к технологиям стороны клиента.
JavaScript,
как и другие языки для встраивания
сценариев в HTML-документы, имеет
программный интерфейс для доступа
навигатору. Навигатор, как правило,
имеет панель инструментов, строку ввода
адреса, рабочую область и строку
состояния. Панель инструментов, как
минимум, содержит кнопки
«Back», «Forward», «Stop», «Reload»
и «Home».
Используя язык JavaScript, можно управлять
содержимым рабочей области и строки
состояния, а также открывать новые окна
навигатора, возможно, без панели
инструментов и строки ввода адреса.
Кроме того, можно вызывать простейшие
диалоговые панели с кнопками и полями
ввода.
Для
доступа к компонентам в языке JavaScript
используются объекты. Под объектом
понимается некоторая программная
абстракция, в которой инкапсулированы
свойства (данные) и методы (код) некоторого
реального объекта. В языке JavaScript
между объектами не устанавливается
отношения наследования. Таким образом,
JavaScript не является объектно-ориентированным
языком.
С
понятием объекта связано понятие
класса. Каждый объект принадлежит
определенному классу. Например, каждый
объект «окно» принадлежит классу
«окно» (window).
Можно сказать, что каждое конкретное
окно является переменной типа window
или экземпляром класса window.
С этой точки зрения, понятие класса
близко к понятию типа.
В
языке JavaScript
имеется возможность создавать собственные
новые классы, однако данная возможность
используется редко из-за малой гибкости
(по сравнению с объектно-ориентированными
языками) при создании интерфейса нового
класса. Можно определить JavaScript как язык
для доступа к некоторой объектной
библиотеке.
С
точки зрения лексики и синтаксиса, язык
JavaScript
похож на языки C++
и Java.
Рассмотрим
следующие элементы языка JavaScript:
типы;
операции;
операторы;
встроенные
функции;
объекты
и классы.
Типы
языка JavaScript, не соответствующие никаким
классам, – числовой и логический, будем
условно называть number и bool. Значения
типа number – целые и вещественные числа.
Значения типа bool соответствуют числовым
значениям 0 и 1. Константы языка JavaScript
могут быть числовыми и строковыми.
Последние имеют тип, соответствующий
классу string. Значения остальных типов
(bool и других классов) не представляются
в виде констант, но могут возвращаться
функциями и методами. Следует еще раз
отметить, что слов number и bool в JavaScript не
существует. Это условное обозначение
для указания типов свойств, параметров
и возвращаемых значений функций и
методов.
В
JavaScript имеется ряд операций аналогичных
операциям языка C: ‘+’, ‘–’, ‘*’, ‘/’, ‘%’, ‘<<‘,
‘>>’, ‘+=’, ‘–=’. Операция ‘+’ для строк
перегружена и означает конкатенацию.
Основные
операторы JavaScript перечислены в табл. 5.
Таблица |
|
Операторы |
|
Оператор |
Описание |
var |
Объявление |
if else |
Оператор |
while |
Цикл |
for {…} |
Цикл |
for |
Цикл |
break |
Оператор |
continue |
Оператор |
function |
Определение |
Встроенные
функции JavaScript перечислены в табл. 6.
Таблица |
|
Встроенные |
|
Функция |
Описание |
string |
Перевод |
string |
Перевод |
number parseFloat(string |
Перевод |
number parseInt( string [number ) |
Перевод |
Bool |
Проверка |
string |
Выполнить |
Здесь
и далее для объявления функций, свойств
и методов применен C-подобный стиль:
тип возвращаемого значения, идентификатор
(название), список параметров в круглых
скобках. Необязательные параметры
перечислены в квадратных скобках. В
качестве типа указывается имя класса
или одно из слов number или bool.
Объекты
JavaScript
описывают интерфейс доступа к документу
в навигаторе и инкапсулируют его
свойства и методы.
В
табл. 7 приведены свойства и методы
основных классов JavaScript.
Таблица |
|
Классы |
|
Свойства |
Описание |
string: |
|
number |
Длина |
string |
Большой |
string |
Маленький |
string |
Полужирный |
string |
Наклонный |
string |
Перечеркнутый |
string |
Моноширинный |
string |
Нижний |
string |
Верхний |
string |
Мигающая |
string |
Строчные |
string |
Заглавные |
string |
Установить |
string |
Установить |
string |
Превращает |
string |
Превращает |
string |
i-й |
number |
Позиция |
number |
Позиция |
string |
Подстрока |
window: |
|
string |
Название |
string |
Содержимое |
string |
Строка |
number |
Число |
frame[] |
Массив |
Продолжение |
|
Свойства |
Описание |
window |
Ссылка |
window |
Ссылка |
window |
Родительское |
window |
Ссылка |
document |
Документ |
frame |
Фрейм |
location |
Местоположение |
window |
Открыть |
close() |
Закрыть |
timeout |
Установить |
clearTimeout(timeout |
Удалить |
alert(string |
Диалоговая |
bool |
Диалоговая |
string |
Диалоговая |
frame: |
|
string |
Название |
number |
Число |
frame[] |
Набор |
frame |
Ссылка |
frame |
Ссылка |
frame |
Ссылка |
window |
Ссылка |
timeout |
Установить |
clearTimeout (timeout |
Удалить |
Продолжение |
|
Свойства |
Описание |
location: |
|
string |
Поле |
string |
Поля |
string |
Поле |
string |
URI |
string |
Поле |
number |
Поле |
string |
Поле |
string |
Параметры |
document: |
|
string |
Заголовок |
string |
URI |
Date |
Дата |
string |
Цвет |
string |
Цвет |
string |
Цвет |
string |
Цвет |
string |
Цвет |
anchor |
Якорь |
link |
Ссылка |
history |
Набор |
form |
Форма |
anchor[] |
Массив |
link[] |
Массив |
form[] |
Массив |
string |
URI |
open([string |
Начать |
close() |
Завершить |
write(…) |
Вывести |
writeln(…) |
Вывести |
history: |
|
number |
Число |
back() |
Вернуться |
forward() |
Загрузить |
go(number |
Перейти |
go(string |
Перейти |
static |
|
number |
E |
Продолжение |
|
Свойства |
Описание |
number |
ln(2) |
number |
ln(10) |
number |
log2(e) |
number |
log10(e) |
number |
|
number |
1/sqrt(2) |
number |
sqrt(2) |
number |
Абсолютное |
number |
Арккосинус |
number |
Арксинус |
number |
Арктангенс |
number |
Наименьшее |
number |
Косинус |
number |
Экспонента |
number |
Наибольшее |
number |
Натуральный |
number |
Максимум |
number |
Минимум |
number |
ab |
number |
Случайное |
number |
Синус |
number |
Квадратный |
number |
Тангенс |
Date: |
|
Date() |
Инициализация |
static |
Возвращает |
static |
Возвращает |
number |
Число |
number |
День |
number |
Часы |
number |
Минуты |
number |
Месяц |
number |
Секунды |
number |
Число |
number |
Смещение |
Окончание |
|
Свойства |
Описание |
number |
Год, |
setDate(number |
Установка |
setHours(number |
Установка |
setMinutes(number |
Установка |
setMonth(number |
Установка |
setSeconds(number |
Установка |
setTime(number |
Установка |
setYear(number |
Установка |
string |
Преобразование |
string |
Преобразование |
Array: |
|
Array() |
Пустой |
Array(number |
Массив |
Array(a0, |
Массив инициализированными |
number |
Число |
string |
Объединение |
reverse() |
Изменение |
sort() |
Сортировка |
Image: |
|
Image() |
Пустое |
Image(number |
Пустое |
string |
URI |
В
объектно-ориентированном анализе при
проектировании и описании объектных
библиотек чаще всего рассматриваются
иерархии двух видов: иерархия классов
(иерархия «is-a»)
и иерархия объектов (иерархия «part-of»).
В иерархии классов отображаются
отношения наследования между классами.
Поскольку в JavaScript
не существует наследования, то нет и
иерархии данного типа. В иерархии
объектов отображаются отношения
агрегации (то есть отношения целого и
части) между классами и объектами. На
рис. 1 приведена иерархия объектов
JavaScript.
Для
доступа к свойствам и методам объекта
применяется операция «.»:
<объект>.<свойство>
<объект>.<метод>(<параметры>)
Некоторые
свойства и методы класса могут быть
статическими. Такие свойства относятся
не к конкретному объекту, а к классу в
целом. Можно получить доступ к этим
свойствам и методам, даже не имея доступа
ни к одному из объектов класса. В этом
случае операция «.» применяется
не к объекту, а к классу:
<класс>.<свойство>
<класс>.<метод>(<параметры>)
Класс,
в котором все свойства и методы являются
статическими, называется статическим.
Статические свойства, методы и классы
в табл. 7 приведены со словом «static»
перед идентификатором.
Методы
некоторых классов могут иметь то же
имя, что и класс. Такие методы называются
конструкторами и используются для
создания динамических объектов при
помощи операции new,
единственным аргументом которой
является конструктор с параметрами.
Массивы
в языке JavaScript
являются объектами некоторого
предопределенного класса Array.
В отличие от C
и C++
массивы в JavaScript
являются динамическими, то есть размер
массива автоматически увеличивается
при присваивании значения не существующему
элементу массива. Индексы массива
нумеруются с нуля. Для доступа к элементам
массива используются квадратные скобки.
Так же как и обычные переменные, элементы
массива не имеют типа. Тип имеют значения
элементов. В различных элементах массива
могут храниться значения различных
типов.
В
языке JavaScript
имеется возможность определять
собственные функции. Определение
функции в JavaScript
имеет следующий вид:
function
<идентификатор>(<параметры>) { …
}
Идентификатор
функции – это имя, по которому функция
будет вызываться в сценариях JavaScript.
Параметры указываются без типов и
разделяются символом «,».
Пользовательские функции в JavaScript
не могут возвращать значения, в отличие
от встроенных функций.
Для
размещения сценариев JavaScript
внутри документов HTML
используется элемент SCRIPT:
<SCRIPT
language=l src=s defer></SCRIPT>
Начальный
и конечный тэги обязательны. Атрибут
language
указывает язык, на котором написан
сценарий. Для сценариев на языке
JavaScript
этот атрибут должен принимать значение
«JavaScript».
В атрибуте src
указывается URI
файла со сценарием. Атрибут defer
указывается, если сценарий не осуществляет
вывод на экран при помощи методов write
и writeln
объекта document
для ускорения формирования содержимого
страницы.
Соседние файлы в предмете Программирование для Web
- #
- #
- #
- #
Лабораторная работа №1
1. Протокол HTTP. Структура запросов и ответов, методы запросов, коды ответов сервера, заголовки запросов и ответов
Протокол HTTP
HTTP (англ. HyperText Transfer Protocol – «протокол передачи гипертекста») – протокол прикладного уровня передачи данных (изначально — в виде гипертекстовых документов в формате «HTML», в настоящий момент используется для передачи произвольных данных). Основой HTTP является технология «клиент-сервер», то есть предполагается существование:
- Потребителей (клиентов), которые инициируют соединение и посылают запрос;
- Поставщиков (серверов), которые ожидают соединения для получения запроса, производят необходимые действия и возвращают обратно сообщение с результатом.
Структура запросов
HTTP запрос состоит из трех основных частей, которые идут в нем именно в том порядке, который указан ниже. Между заголовками и телом сообщения находится пустая строка (в качестве разделителя), она представляет собой символ перевода строки.
- строка запроса (Request Line)
- заголовки (Message Headers)
- пустая строка (разделитель)
- тело сообщения (Entity Body) – необязательный параметр
Строка запроса – указывает метод передачи, URL-адрес, к которому нужно обратиться и версию протокола HTTP.
Заголовки – описывают тело сообщений, передают различные параметры и др. сведения и информацию.
Тело сообщения – это сами данные, которые передаются в запросе. Тело сообщения – это необязательный параметр и может отсутствовать.
Пример:
GET /iaps/labs HTTP/1.1 Host: сs.ifmo.ru User-Agent: Mozilla/5.0 (X11; U; Linux i686; ru; rv:1.9b5) Gecko/2008050509 Firefox/3.6.14 Accept: text/html Connection: close
Структура ответов
HTTP ответ состоит из трех основных частей как и HTTP запрос.
- строка ответа (Response Line)
- заголовки (Message Headers)
- пустая строка (разделитель)
- тело сообщения (Entity Body) – необязательный параметр
Строка ответа – указывает версию протокола HTTP, код состояния и пояснение к коду состояния.
Заголовки – описывают тело сообщений, передают различные параметры и др. сведения и информацию.
Тело сообщения – чаще всего представляет собой содержимое web-страницы, не обязательный параметр
Пример:
HTTP/1.0 200 OK Date: Wed, 02 Mar 2011 11:11:11 GMT Server: Apache X-Powered-By: PHP/5.2.4-2ubuntu5wm1 Last-Modified: Wed, 02 Mar 2011 11:11:11 GMT Content-Language: ru Content-Type: text/html; charset=utf-8 Content-Length: 1234 Connection: close ...HTML-код запрашиваемой страницы...
Методы запросов
GET
– запрашивает представление ресурса, может только извлекать данные.HEAD
– какGET
, только без тела ответа.POST
– используется для отправка сущностей определенному ресурсу. Может изменять данные.PUT
– создает новый ресурс или заменят представление целевого ресурса (в отличее отPOST
для идентичных наборов данных будет иметь одинаковый результат).DELETE
– удаляет ресурс.CONNECT
– устанавливает «туннель» к серверу, определенному по ресурсу.OPTIONS
– для описания параметров соединения с ресурсомTRACE
– вызов возвращаемого текстового сообщенияPATCH
– частичное изменение ресурса
Коды ответов сервера
- 1хх: Informational
- 2xx: Success
- 3xx: Redirection (перенаправление)
- 4xx: Client Error
- 5xx: Server Error
Заголовки запросов и ответов
Заголовки представляются в формате ключ: значение
Выделяют 4 группы заголовков:
General Headers
– могут включаться в любое сообщение клиента и сервера.
Пример – CacheControl.Request Headers
– используются только в запросах клиента.
Пример – Referer.Response Headers
– используются только в запросах сервера.
Пример – Allow.Entity Headers
– сопровождают любую сущность сообщения.
Пример – Content-Language.
2. Язык разметки HTML. Особенности, основные теги и атрибуты тегов
Язык разметки HTML
HTML – Hypertext Markup Language, язык разметки гипертекста. Является стандартным языком разметки документов в интернете. Браузеры интерпретируют его и отображают в виде документа.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Пример веб-страницы</title> </head> <body> <h1>Заголовок</h1> <!-- Комментарий --> <p>Первый абзац.</p> <p>Второй абзац.</p> </body> </html>
Особенности
Документ должен начинаться со строки объявления версии HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Документ состоит из элементов, начало и конец которых обозначаются тегами
Некоторые теги могут не содержать текст (<br>
– перенос строки, <img>
– картинка, <input>
– элемент ввода в форме). Их не нужно закрывать:
<!-- плохо --> <input type="..."></input> <!-- хорошо --> <input type="..."/>
В HTML5 введены семантические теги <header>
, <footer>
, <section>
, которые аналогичны <div>
, но указывают
на логическую структуру.
Основные теги
Начало и конец документа обозначаются тегами <html>
и </html>
.
Внутри этих тегов должны находиться заголовок <head>...</head>
и тело документа <body>...</body>
.
Атрибуты тегов
Чтобы расширить возможности отдельных тегов и более гибко управлять содержимым контейнеров применяются атрибуты тегов.
Когда для тега не добавлен какой-либо допустимый атрибут, это означает, что браузер в этом случае будет подставлять значение, заданное по умолчанию. Если вы ожидали получить иной результат на web-странице, проверьте, возможно, следует явно указать значения некоторых атрибутов.
Допустимо использовать некоторые атрибуты у тегов, не присваивая им никакого значения, как показано в примере.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Добавление формы</title> </head> <body> <form action="self.php"> <p><input type="text"></p> <p><input type="submit" disabled></p> </form> </body> </html>
В данном примере используются атрибуты action
, type
, disabled
и некоторые другие в теге <meta>
. У атрибута disabled
явно не задано значение. Подобная запись называется «сокращенный атрибут тега».
Порядок атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет.
Каждый атрибут тега относится к определенному типу (например: текст, число, путь к файлу и др.), который обязательно должен учитываться при написании атрибута. Если тип ожидаемых данных конкретного атрибута не совпадёт с типом переданных данных, то значение будет проигнорировано и возникнет ошибка при валидации документа.
3. Структура HTML-страницы. Объектная модель документа (DOM)
Структура HTML-страницы
Документ должен начинаться со строки объявления версии HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Документ состоит из элементов, начало и конец которых обозначаются тегами
Элементы могут быть вложенными:
<b> Этот текст будет полужирным, <i>а этот - ещё и курсивным</i> </b>
Начало и конец документа обозначаются тегами <html>
и </html>
.
Внутри этих тегов должны находиться заголовок <head>...</head>
и тело документа <body>...</body>
.
Объектная модель документа (DOM)
DOM – программный интерфейс для HTML и XML документов, описывающий структурированное представление документа и определяющий, как это структура может быть доступна из программ, которые могут изменять ее содержимое.
(Другими словами, DOM соединяет web-страницу с языками описания сценариев).
Согласно DOM документ может быть представлен в виде объектов, с которыми можно производить манипуляции:
- генерация и добавление узлов
- получение узлов
- изменение узлов
- изменение связей между ними
- удаление узлов
Обращение к узлам происходит с помощью элементов document
или window
.
Дополнительно (BOM)
Есть еще BOM – объектная модель браузера. Основное предназначение — управление окнами браузера и обеспечение их взаимодействия. BOM специфична для каждого браузера. Может в создание системных диалогов, управление информацией о параметрах монитора и браузера и всякое такое.
4. HTML-формы. Задание метода HTTP-запроса. Правила размещения форм на страницах, виды полей ввода
HTML-формы
Форма предназначена для обмена данными между пользователем и сервером.
Правила размещения форм на страницах
Документ может содержать любое число форм, но одновременно на сервер может быть отправлена только одна из них.
Вложенные формы запрещены.
Задается с помощью тега <form>
и могут содержать в себе атрибуты:
action
– содержит URI обработчика формы (обязательный атрибут)method
– по умолчаниюGET
enctype
– тип кодированияaccept
– MIME-типы для загрузки файловname
Задание метода HTTP-запроса
Метод HTTP задаётся атрибутом method
тега <form>
:
<form method="GET" action="URL"> ... </form>
Виды полей ввода
Виды полей <input>
:
-
Кнопки. Типы кнопок:
submit
– кнопка для отправки данных формы на серверimage
– поле с изображением, при нажатии на рисунок данные формы отправляются на серверreset
– кнопка для возвращения данных формы в первоначальное значениеbutton
– обычная кнопка
-
checkbox
-
radio
-
select
-
text
и многострочныйtextarea
-
password
-
hidden
(скрытое поле) -
file
Пример:
<form method="POST" action="handler.php"> <p> <b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b> </p> <p> <input type="radio" name="answer" value="a1">Офицерский состав<br> <input type="radio" name="answer" value="a2">Операционная система<br> <input type="radio" name="answer" value="a3">Большой полосатый мух </p> <p> <input type="submit"> </p> </form>
5. Каскадные таблицы стилей (CSS). Структура — правила, селекторы. Виды селекторов, особенности их применения. Приоритеты правил. Преимущества CSS перед непосредственным заданием стилей через атрибуты тегов
CSS
CSS (Cascading Style Sheet, каскадные таблицы стилей) – формальный язык описания внешнего вида документа с помощью языка разметки. Используется для задания цветов, шрифтов и других аспектов представления документа.
Структура
Таблица стилей состоит из набора правил.
CSS-правило – блок, состоящий из селектора и блока объявления стилей.
Селекторы – имя тега, к которому применяется правило.
селектор, селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
Пример:
div, td { background-color: red; }
Основные виды селекторов
*
– любые элементыdiv
– элементы с тегомdiv
#id
– элемент поid
.class
– элементы с классомclass
[name="value"]
– селекторы по атрибуту:visited
– псевдоклассыdiv p
– элементыp
, являющиеся потомкамиdiv
div > p
– только непосредственные потомкиdiv ~ p
– правые соседи: всеp
на том же уровне вложенности, которые идут послеdiv
div + p
– первый правый сосед:p
на том же уровне вложенности, который идёт сразу послеdiv
Приоритеты правил
- Самый высокий приоритет имеет атрибут
style
- Второе по приоритету – присутствие ID в селекторе
- Все атрибуты (включая class и псевдоклассы)
- Самый низкий – селекторы с именами элементов и псевдоэлементами
!important
позволяет повысить приоритет стиля
Преимущества CSS перед атрибутом style
Основная цель — разделение содержимого документа и его представления. Позволяет представлять один и тот же документ в различных методах вывода
(например, обычная версия и версия для печати)
Главное преимущество CSS заключается в том, что стиль может применяться не только для одного элемента, а для всех элементов подходящих под селектор. Таким образом можно оптимизировать код например чтобы все кнопки выглядели одинаково надо будет всего один раз прописать стиль с правильным селектором, а не на каждой кнопке вставлять один и тот-же код.
6. LESS, Sass, SCSS. Ключевые особенности, сравнительные характеристики. Совместимость с браузерами, трансляция в «обычный» CSS
LESS
LESS — это динамический язык стилей, который является надстройкой над CSS (Поэтому любой CSS код будет валидный LESS).
Преимущества LESS:
- Переменные (и области видимости переменных).
- Операции (в том числе и для управления цветом, т.е можно смешивать цвета:
#941f1f + #222222
). - И другие функции для работы с цветом (осветление, затемнение и т.п.)
- Вложенность (можно вложить одно правило в другое,
article.post p {}
<=>article.post { p{ }}
). - Объединение аргументов.
LESS-файл конвертируется в CSS при помощи js (для этого необходимо скачать less.js с сайта LESS).
<script src="less.js" type="text/javascript"></script>
Затем можно привязывать файлы с расширением .less
.
<link rel="stylesheet/less" type="text/css" href="style.less">
Sass
Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.
Преимущества Sass:
- Вложенные правила.
- Переменные.
- Возможность создавать миксины, позволяющие создавать многоразовые CSS-правила — группы деклараций, для многократного использования. (LESS в это не может)
- Расширения. Одиночный селектор может быть расширен больше, чес одним селектором с помощью
@extend
. - Есть логика. (if/then/for). (Этого в LESS тоже нет)
Не может компилироваться на сервере в CSS (LESS использует js).
Браузер не распознает файлы Sass, так что сначала их нужно скомпилировать в обычный CSS.
SCSS
SCSS — «диалект» языка SASS. Отличие SCSS от SASS заключается в том, что SCSS больше похож на обычный CSS код.
@import
—@import "template"
подключитtemplate.scss
.- Вложенность.
- $переменные.
- Математика чисел и цветов.
- Строки (умеет складывать строки, поддерживает конструкцию
#{$var}
)
Совместимость с браузерами, трансляция в «обычный» CSS
Браузеры могут не поддерживать LESS, Sass, SCSS-таблицы стилей — нужен специальный транслятор, который преобразует эти правила в «обычный» CSS.
Less может быть сконвертирован в CSS прямо в браузере. А Sass и SCSS должны быть заранее скомпилированы в обычный CSS.
<!-- Пример для Maven --> <!-- Sass compiler --> <plugin> <groupId>org.jasig.maven</groupId> <artifactId>sass-maven-plugin</artifactId> <version>2.25</version> <executions> <execution> <phase>prepare-package</phase> <goals> <goal>update-stylesheets</goal> </goals> </execution> </executions> <configuration> <resources> <resource> <!-- Set source and destination dirs --> <source> <directory>${project.basedir}/src/main/webapp/sass</directory> </source> <destination>${project.basedir}/src/main/webapp/sass_compiled</destination> </resource> </resources> </configuration> </plugin>
7. Клиентские сценарии. Особенности, сферы применения. Язык JavaScript
Клиентские сценарии
Сценарий — код, включенный в состав web-страницы. Клиентский сценарий выполняется на компьютере-клиенте, для этого необходим встроенный интерпретатор. Вставка сценария в web-страницу происходит при помощи тега <script>
. Клиентский сценарии в основном используются для придания интерактивности веб-страницам.
Язык JavaScript
JavaScript является объектно-ориентированным языком. JavaScript имеет ряд свойств, присущих функциональным языкам — функции как объекты первого класса, объекты как списки, карринг, анонимные функции, замыкания. Js имеет автоматическое приведение типов, автоматическая сборка мусора, анонимные функции, функции как объекты первого класса (т.е. могут быть сохранены в переменную, переданны в функцию как аргумент, созданы во время выполнения программы и т.п.)
Основные архитектурные черты:
- динамическая типизация;
- слабая типизация;
- автоматическое управление памятью;
- прототипное программирование;
- функции как объекты первого класса.
Типы данных js
number
– целые, дробные числа, Infinity, NaNString
boolean
null
undefined
– «значение не присвоено»object
– для коллекций и более сложных сущностей
8. Версии ECMAScript, новые возможности ES6 и ES7
ECMAScript — это встраиваемый расширяемый не имеющий средств ввода-вывода язык программирования, используемый в качестве основы для построения других скриптовых языков. Стандартизирован международной организацией ECMA в спецификации. (ECMAScript это стандарт, а JavaScript его реализация).
Имеет 5 примитивных типов данных:
- Number
- String
- Boolean
- Null
- Undefined
Объектный тип данных — Object и 15 различных видов инструкций.
В особенности можно добавить то, что блок не ограничивает область видимости функции. Если переменная объявляется вне функции, то она
попадает в глобальную область видимости. Функция — это тоже объект.
Версии ECMAScript
ES6
New features:
- новый синтаксис для написания классов и модулей
- итераторы и циклы for/of
- Python-style генераторы
- двоичные данные
- лямбда-выражения
- типизированные массивы
- коллекции
- обещания (promises)
- рефлексию и прокси
- усовершенствовали числа и математику
- ключевое слово let (которое помогает объявить переменной область видимости — блок) и const.
ES7
New features:
- операция возведения в степень (**)
- Array.prototype.includes().
TODO
9. Синхронная и асинхронная обработка HTTP-запросов. AJAX
Синхронный запрос — запрос с ожиданием ответа. (скрипт послал запрос (объект) на сервер и ждет ответ).
Асинхронный запрос — запрос без ожидания ответа от сервера. (скрипт послал запрос (объект) на сервер, но продолжает выполняться, когда данные вернутся вступает в дело событие onreadystatechenge. Сам объект меняет это событие, когда у него меняется свойство readyState. Для события создается собственная функция, в которой проверяется свойство readyState. И как только оно становится равным «4» — это значит, что данные с сервера пришли. Теперь можно полученные данные обрабатывать).
var request = getXmlHttpRequest(); // создание объекта request.onreadystatechenge = function(){ // установка обработчика onreadystatechenge и проверка свойства readyState if(request.readyState == 4) ... } request.open('GET', url, true); // готовим запрос request.send(null); // посылаем запрос
AJAX
Asynchronous JavaScript and XML — подход к построению интерактивных пользовательских интерфейсов web-приложений, заключающийся в «фоновом» обмене данными браузера с web-сервером.
Пользователь что-то делает -> скрипт определяет с чем там надо работать -> браузер отправляет запрос на сервер -> сервер возвращает только то, от чего ожидаются изменения -> скрипт вносит изменения обратно (без перезагрузки страницы).
10. Библиотека jQuery. Назначение, основные API. Использование для реализации AJAX и работы с DOM
jQuery — библиотека js, помогающая легко получить доступ к любому элементу DOM и манипулировать ими, предоставляет API для работы с AJAX.
jQuery включается в страницу как внешний файл.
<script src="jquery-2.2.2.min.js">
Вся работа с jQuery ведется с помощью функции $. Работу с jQuery можно разделить на 2 типа:
- Получение jQuery-объекта с помощью функции
$()
. - Вызов глобальных методов у объекта $.
Типичный пример манипуляции сразу несколькими узлами DOM заключается в вызове $ функции со строкой селектора CSS, что возвращает объект jQuery, содержащий некоторое количество элементов HTML-страницы. Эти элементы затем обрабатываются методами jQuery.
$("div.test").add("p.quote").addClass("blue").slideDown("slow"); //находит элементы div с классом test, все элементы p с классом quote, добавляет им класс blue, ...
$.ajax и соответствующие функции позволяют использовать методы AJAX
$.ajax({ type: "POST", url: "some.php", // обращение к some.php data: {name: 'John', location: 'Boston'}, //с какими-то параметрами success: function(msg){ alert( "Data Saved: " + msg ); // полученный результат выводится в alert } });
11. Реализация AJAX с помощью SuperAgent
SuperAgent — API для реализации AJAX:
request .post('/api/pet') .send({ name: 'Manny', species: 'cat' }) .set('X-API-Key', 'foobar') .set('Accept', 'application/json') .end(function(err, res){ if (err || !res.ok) { alert('Oh no! Error'); } else { alert('yay got ' + JSON.stringify(res.body)); } });
12. Серверные сценарии. CGI — определение, назначение, ключевые особенности
CGI (Common Gateway Interface — общий интерфейс шлюза) — стандарт интерфейса, используемого для связи внешней программы с web-сервером. Программу, которая работает по такому интерфейсу совместно с web-сервером, принято называть шлюзом (оно же скрипт или CGI-программа). По сути позволяет использовать консоль ввода и вывода для взаимодействия с клиентом.
CGI — сценарии
- CGI — механизм вызова пользователем
программ на стороне сервера. - Данные отправляются программе посредством
HTTP-запроса, формируемого web-браузером. - То, какая именно программа будет вызвана,
обычно определяется URL запроса. - Каждый запрос обрабатывается отдельным
процессом CGI-программы. - Взаимодействие программы с web-сервером
осуществляется через stdin и stdout.
13. FastCGI и CGI
CGI — устаревшая технология, позволяющая взаимодействовать web-серверу с сервером приложений. Для каждого запроса запускается процесс с интерпретатором PHP, после возвращения ответа он завершается. Поскольку это очень неэффективно, был создан FastCGI, в котором процесс интерпретатора не завершается, а используется для последующих запросов.
В PHP возможна многопоточность через расширение pthreads
, но оно недоступно при использовании PHP как сервера приложений, только при написании скриптов для командной строки.
14. Язык PHP — синтаксис, типы данных, встраивание в web-страницы, правила обработки HTTP-запросов. Особенности реализации принципов ООП в PHP
PHP — скриптовый язык общего назначения, интенсивно применяемый для разработки web-приложений.
Типы данных php
PHP — язык программирования с динамической типизацией. Преобразования между скалярными типами происходят неявно.
Скалярные типы: integer, float, double, boolean, string.
Не скалярные: array, object, resource, null
Псевдотипы: mixed (любой тип), number, callback (string или анонимная функция), void.
Запрос
$url = 'https://translate.yandex.ru'; $context = stream_context_create([ 'http' => [ 'method' => 'POST', 'content' => http_build_query([ 'lang' => 'ru-en', 'text' => 'Все получилось', ]) ] ]);
stream_context_create() отвечает за создание контекста запросов различных протоколов, в том числе ftp, ssl, tcp
ООП в PHP
class ClassName { public $publicName; private $privateName; protected $protectedName; const CONST_VAL = 'val'; public function getPrivateName() { return $this->$privateName; // $this – ссылка на сам объект, $parent - на родительский. } }; echo ClassName::CONST_VAL; // для обращения к константам $classname = new ClassName(); $className->publicName; // доступ к переменной
PHP поддерживает все три основных механизма ООП — инкапсуляцию, полиморфизм подтипов и наследование (с помощью extend). Поддерживаются интерфейсы (с помощью implements). Есть абстрактные и final методы и классы. Множественное наследование не поддерживается, но класс может реализовывать несколько интерфейсов или с помощью механизма особенностей (trait), который имеет средства для разрешения конфликтов.
Методы:
__construct()
– конструктор
__destruct()
– для деинициализации объекта
__get()
, __set()
__sleep()
, __wakeup()
__clone()
В первом цикле «Изучаем JavaScript» мы рассмотрели важнейшие понятия и синтаксис языка JavaScript. Научились создавать простейшие сценарии. Узнали, что такое объекты, какими свойствами и методами они обладают. Что такое переменные, функции и массивы и еще много чего полезного для создания динамичных веб-страниц. А теперь пришло время познакомиться с клиентскими сценариями JavaScript.
В новом цикле Клиентские сценарии JavaScript мы разберемся с основными принципами создания клиентских сценариев на языке JavaScript, которые пригодятся в дальнейшем для разработкии веб-сайтов. Известно, что сценарии работают с объектовой моделью браузера и загруженного в него документа. Поэтому, для разработки сценария, необходимо знать основные элементы объектной модели.
Объекты, управляемые сценариями JavaScript
Сценариями JavaScript называются программы, работающие с объектами HTML-документа. Параметры элеменов документа, заданные с помощью атрибутов соответствующих тегов и таблиц стилей, можно изменить или даже заменить весь загруженный HTML-документ на другой. Сделать это можно с помощью сценариев JavaScript и представляющими их объектами.
Окну браузера соответствует объект window
, а HTML-документу, загруженному в окно – объект document
. Эти объекты содержат в своем составе другие объекты. Объект document входит в состав объекта window
. Элементам HTML-документа соответствуют объекты, которые входят в состав объекта document
. Все множество объектов имеет иерархическую структуру, называемою объектной моделью. Объект представляет собой контейнер для хранения информации. Он характеризуется свойствами, методами и событиями, на которые может реагировать.
Доступ к свойствам и методам объекта осуществляется с помощью выражений вида:
объект.свойство
объект.метод()
Объекты могут находится в отношении вложенности(подчиненности). Объект, содержащий в себе другой объект, называют родительским. Объект, который содержится в каком-нибудь объекте, называют дочерним по отношению к нему. Таким образом устанавливается иерархия. Чтобы указать конкретный объект, требуется перечислить все содержащие его объекты, начиная с объекта самого верхнего иерархического уровня, подобно тому, как указывается полный путь к файлу на диске:
объект1.объект2. ... .объектN
Если объект входит в состав другого объекта(является подобъектом другого), то для доступа к его свойствам и методам используется следующий синтаксис:
объект1.объект2. ... .объектN.свойство
объект1.объект2. ... .объектN.метод()
Нередко подобъект некоторого объекта называют его свойством (сложным свойством). В этом случае можно говорить, что свойства объектов бывают трех типов:
- просто свойства(простые свойства);
- методы(свойства-функции);
- объекты(сложные свойства, имеющие свои свойства).
Поскольку объект document является подобъектом объекта window
, то ссылка на HTML-документ, загруженный в текущее(активное) окно браузера, будет выглядеть следующим образом:
window.document
Объект document
имеет метод write(строка)
, позволяющий записать в текущий HTML-документ строку, содержащую просто текст или теги HTML. Чтобы применить этод метод, следует написать:
window.document.write(строка)
Как уже отмечалось выше, при загрузке HTML-документа в браузере, создается объектная модель этого документа. Прежде всего, создается объект окна window
, который является вершиной всей структуры. Это корневой объект, имеющий свои подобъекты, такие как location
для хранения информации об URL-адресе загруженного документа и screen для хранения данных о возможностях экрана монитора пользователя. Затем создается объект document
, являющейся подобъектом window
. Далее формируются объекты, представляющие отдельные элементы HTML-документа, такие как объекты графических изображений, форм и их элементов(поля ввода, переключатели, кнопки) и др.
На нижнем рисунке показано, как усложняется структура объектного представления документа с добавление новых тегов. Это упрощенные схемы, дающие самые общие представления об объектной моделе. Эти сведения играют роль путеводителя в обширном множестве объектов документа и окна браузера.
В объектной модели документа объекты сгруппированы в так называемые коллекции. Коллекцию можно рассматривать как промежуточный объект, предназначенный для группировки объектов документа. С другой стороны, коллекция является массивом объектов, отсортированных в порядке упоминания соответствующих им элементов в HTML-документе. Индексация объектов в коллекции начинается с нуля. Синтаксис обращения к элементам коллекции такой же, как к элементам массива. Коллекция также имеет свойство length
– количество всех ее элементов. Коллекция всех графических изображений в документе называется images
, коллекция всех форм – forms
, коллекция всех ссылок – links
. Это примеры частных или тематических коллекций. Кроме них имеется коллекция всех объектов документа, которая называется all
.
При этом индексы данного объекта в частной коллекции и коллекции all
могут быть различными.
Рассмотрим способы обращения к свойствам объектов документа. Общее правило заключается в том, что в ссылке должно быть упомянуто название коллекции. Исключением из этого правила является объект формы. Далее, если речь идет о документе, загруженном в текущее окно, то объект window
можно не упоминать, а сразу начинать с ключевого слова document
. Возможны несколько способов обращения к объектам документа:
document.коллекция.id_объекта
document.коллекция["id_объекта"]
document.коллекция[индекс_объекта]
Здесь id_объекта
– значение атрибута ID
в теге, который определяет соответствующий элемент в HTML-документе. Величина индекс_объекта
– целое число, указывающее порядковый номер объекта в коллекции. Первый объект в коллекции имеет индекс 0. Если при создании HTML-документа вы не использовали атрибут ID
для некоторых элементов, то для обращения к их объектам остается только взять их индексы.
Заметим, что некоторые теги(<form>, <input>
) имеют атрибут name. Значение этого атрибута можно использовать при обращении к объекту наравне со значением атрибута ID
.
К объекту формы, кроме описанных выше способов, можно обращаться по значению атрибута name (имя формы)
, если он указан в теге <form
>, но не по значению атрибута ID
:
document. имя_формы
Как известно, тег формы <form>
является контейнерным и может содержать в себе теги других элементов, таких как <input>, <button>
и другие. Обращение к элементам формы возможно через коллекцию all
. Однако имеется и специфический для них способ:
document. имя_формы.elements[индекс_элемента]
document. имя_формы.elements[id_элемента]
document. имя_формы.id_элемента
Здесь индекс_элемента
– порядковый номер элемента формы, а не порядковый номер в коллекции всех элементов; первый элемент имеет индекс 0. Для Internet Explorer вместо квадратных скобок допустимо использование и круглых скобок.
Нужно отметитить, что универсальным способом обращения к объектам документа является обращение посредством коллекции all
. Однако, если не позаботится об атрибуте ID
в тегах элементов HTML-документа, которые должны стать предметами работы сценариев, то обращение к объектам через all
посредством индексов становится проблематичным. Чтобы убедится в этом рассмотрим пример.
Напишем HTML-документ и вставим в конце документа простой сценарий основанный на использовании тега tadName
, возвращающий название тега, с помощью которого был создан соответствующий объект.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Клиентские сценарии JavaScript</title>
<script language="JavaScript">
function mystrim(){
msg=""
for (i=0; i<document.all.length;i++){
msg +=i+" "+document.all[i].tagName +"n"
}
alert(msg)
}
</script>
</head>
<body>
<h2>Моя веб
-страница</h2>
<a href="../../../index.php"><img src="../images/dom4.gif" >Сайт о сайтах</a><br>
<form action="" method="get">
<p>
<input name="" type="text" size="40">
</p>
<p>
<input name="" type="button" onClick="mystrim()" value="старт">
Жми здесь
</p>
</form>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
В диалоговом окне, выведенном с помощью метода alert()
, перечислены теги документа. Их порядковые имена соответствуют индексам в коллекции all
.
Объекту document.all[8]
соответствует элемент HTML-документа, созданный тегом <img>
и т.д. Если бы в данном HTML-документе отсутствовали теги <head>, <title>, <body>
, то они в любом случае присутствовали в коллекции all
. Можете проверить.
Теперь рассмотрим тот же пример, но добавим к основным тегам атрибуты ID
, с помощью которых можно персонифицировать соответствующие объекты. Чтобы получить значение атрибута ID
, необходимо воспользоваться свойством id
соответствующего объекта.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Клиентские сценарии JavaScript</title>
<script language="JavaScript">
function mystrim(){
msg=""
for (i=0; i<document.all.length;i++){
msg +=i+" "+document.all[i].tagName +" id="+document.all[i].id+"n"
}
alert(msg)
}
</script>
</head>
<body>
<h2>Моя веб-страница</h2>
<a href="../../../index.php"><img src="../images/dom4.gif" width="157" height="144" border="0" id="myimg">Сайт о сайтах</a><br>
<br>
<form action=
"" method="get" id="myform">
<p>
<input name="" type="text" size="40" id="myinput">
</p>
<p>
<input name="" type="button" onClick="mystrim()" value="старт" id="mybutton">
Жми здесь
</p>
</form>
</head>
<body>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Из коллекции всех элементов документа можно выделить некоторое его подмножество однотипных элементов по названию тега. Для этого служит метод
tags(название_тега)
В следующем примере выделяется подмножество всех заголовков 2-го уровня, созданных с помощью тегов <h2>
, и для каждого их них устанавливается синий цвет:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Клиентские сценарии JavaScript</title>
<script language="JavaScript">
function mystrim(){
msg=""
for (i=0; i<document.all.length;i++){
msg +=i+" "+document.all[i].tagName +" id="+document.all[i].id+a+"n"
}
alert(msg)
}
</script>
</head>
<body >
<h2>Моя веб
-страница</h2>
<a href="../../index.php"><img src="../images/dom4.gif" width="157" height="144" border="0" id="myimg">Сайт о сайтах</a><br>
<br>
<form action=
"" method="get" id="myform">
<p>
<input name="" type="text" size="40" id="myinput">
</p>
<p>
<input name="" type="button" onClick="mystrim()" value="старт" id="mybutton">
Жми здесь
</p>
</form>
<script language=
"JavaScript">
var a=document.all.tags("h2")
for (i=0;i<a.length;i++)
a(i).style.color="blue"
</script>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Универсальный способ обращения к объекту документа базируется на использовании коллекции all
. Кроме него существует еще способ, основанный на методе getElementDyId(
):
document.getElementDyId()(значение_ID)
Метод document.getElementDyId()(значение_ID)
позволяет обратиться к любому элементу по значению его идентификатора – значению атрибута ID
. Если несколько элементов документа имеют одинаковый ID
, метод возвращает первый элемент с указанным значением ID
. Отсюда становится очевидным, важность присвоения различным элементам, уникальных значений ID
.
Мы рассмотрели несколько способов обращения к объектам. Ссылки на объекты часто используются как промежуточный этап для доступа к конечным свойствам и методам. Ссылки на объекты можно сохранить в переменных, которые потом легко использовать для обращения к свойствам и методам.
В приведенном выше примере элемент изображения, созданный с помощью тега <img src="images/dom4.gif" width="157" height="144" border="0" id="myimg"
>, имеет атрибуты ID
и SRC
. Этим атрибутам соответствуют свойства id
и src
объекта данной картинки.
Рассмотрим различные варианты обращения к данным свойствам.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Клиентские сценарии JavaScript</title>
<script language="JavaScript">
function mystrim(){
msg=""
for (i=0; i<document.all.length;i++){
msg +=i+" "+document.all[i].tagName +" id="+document.all[i].id+"n"
}
alert(msg)
}
</script>
</head>
<body >
<h2>Моя веб
-страница</h2>
<a href="../../index.php"><img src="../images/dom4.gif" width="157" height="144" border="0" id="myimg">Сайт о сайтах</a><br>
<br>
<form action=
"" method="get" id="myform">
<p>
<input name="" type="text" size="40" id="myinput">
</p>
<p>
<input name="" type="button" onClick="mystrim()" value="старт" id="mybutton">
Жми здесь
</p>
</form>
<script language=
"JavaScript">
var a=document.all.tags("h2")
for (i=0;i<a.length;i++)
a(i).style.color="blue"
a1=document.
images(0).id //myimg
a2=document.
images("myimg").id //myimg
a3=document.all("myimg").id //myimg
a4=document.all.myimg.id
//myimg
a5=document.all.myimg //[object]
a5.id
//myimg
a6=document.
images(0).src //file:///D:/sevidi/images/dom4.gif
a7=document.
images("myimg").src //file:///D:/sevidi/images/dom4.gif
a8=document.all("myimg").src //file:///D:/sevidi/images/dom4.gif
a9=document.all.myimg.src //file:///D:/sevidi/images/dom4.gif
a10=document.all.myimg //[object]
a10.src //file:///D:/sevidi/images/dom4.gif
document.
write(a1+"<br>"+a2+"<br>"+a3+"<br>"+a4+"<br>"+a5+"<br>"+a5.id+"<br>"+a6+"<br>")
document.write(a7+"<br>"+a8+"<br>"+a9+"<br>"+a10+"<br>"+a10.src)
</script>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Объекты документа имееют много полезных свойств. Одни из них доступны только для чтения и могут использоваться в сценариях в качестве информации для выполнения каких-либо действий. Другие свойства можно изменять, т.е. присваивать им иные значения.