WWW (Всемирная паутина) (стр. 5 )

Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*). Например:

<input type=password name=pw size=20 maxlength=10>

Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля – 10 символов. Введенный пароль передается обработчику в переменной pw.

TYPE=radio

Определяет радиокнопку. Может содержать дополнительный атрибут checked (показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка.

Пример:

<input type=radio name=modem value="9600" checked> 9600 бит/с

<input type=radio name=modem value="14400"> 14400 бит/с

<input type=radio name=modem value="28800"> 28800 бит/с

В окне браузера:

Определяет группу из трех радиокнопок, подписанных 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600. Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800.

TYPE=checkbox

Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут checked (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов.

Пример:

<input type=checkbox name=comp value="pc"> персональные компьютеры

<input type=checkbox name=comp value="ws" checked> рабочие станции

<input type=checkbox name=comp value="lan"> серверы локальных сетей

<input type=checkbox name=comp value="is" checked> серверы интернет

В окне браузера:

Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: comp=ws и comp=is.

TYPE=hidden

Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело. Например:

<input type=hidden name=version value="1.1">

Определяет скрытую переменную version, которая передается обработчику со значением 1.1.

TYPE=reset

Определяет кнопку, при нажатии на которую форма возвращается в исходное состояние. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name. Например:

<input type=reset value="очистить форму">

Определяет кнопку Очистить форму, при нажатии на которую форма возвращается в исходное состояние.

Помимо элементов <input>, формы могут содержать меню <select> и поля для ввода текста <textarea>.

<SELECT>…</SELECT>

Метка <select> содержит обязательный атрибут name, определяющий имя переменной, которую генерирует меню.

Пример:

<select name="имя">

<option value="значение 1">текст 1

<option value="значение 2">текст 2

...

<option value="значение n">текст n

</select>

В окне браузера:

Метка <select> может также содержать атрибут multiple, присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство браузеров показывают меню <select multiple> в виде окна, в котором находятся элементы меню (высоту окна в строках можно задать атрибутом size=число). Меню <select> в большинстве случаев показывается в виде выпадающего меню.

<OPTION>

Данный тег определяет элемент меню. Обязательный атрибут value устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Тег <option> может включать атрибут checked, показывающий, что данный элемент отмечен по умолчанию.

<TEXTAREA>…</TEXTAREA>

Пример:

<textarea name=address rows=5 cols=50>

а здесь – ваш адрес...

</textarea>

Все атрибуты обязательны. Атрибут name определяет имя, под которым содержимое окна будет передано обработчику (в примере – address). Атрибут rows устанавливает высоту окна в строках (в примере – 5). Атрибут cols устанавливает ширину окна в символах (в примере – 50).

В окне браузера:

Текст, заключенный в теге <textarea>…</textarea>, представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.

Важно знать, что русские буквы в окне <textarea> при передаче обработчику могут быть конвертированы в соответствующие им символьные объекты.

Сценарии и сценарные языки

Архитектура "клиент-сервер" предполагает два способа генерации Web-страниц. Страницы можно генерировать как на стороне сервера, так и на стороне клиента. Первое реализуется через механизм подстановок на стороне сервера (Server Site Includes). Механизм управления страницами на стороне клиента реализуется с помощью сцераниев (скриптов).

Скрипт (script, сценарий) - программа, управляющая целыми программными компонентами.

Сценарные языки - это языки управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Благодаря им появился DHTML. Сценарные языки являются интерпретируемыми.

Первые браузеры выводили информацию на дисплей по мере ее поступления, не подвергая никаким изменениям. Сейчас же обычный путь Web-странички до дисплея сложнее:

· Страничка скачивается с сайта и размещается в памяти компьютера;

· Производится анализ странички и препарирование ее на составляющие;

· Контейнеры, из которых состоит страничка (<body>…</body>, <head>…</head>, <p>…</p> и т. д.), размещаются во временной базе данных соответственно структуре объектной модели.

· Для доступа и управления содержимым этой базы данных браузер предоставляет и использует механизм объектов и скриптовый язык.

Теперь содержимое базы может быть изменено до вывода на экран, что и позволяет работать DHTML. Но объектная модель остается работать даже после того, как страничка показана на экране дисплея. Это дает нам возможность менять содержимое странички после загрузки.

Любая развитая программная система имеет возможности для написания скриптов. Разнятся языки, их гибкость, сложность, специализация. Сценарные языки часто применяются для системной интеграции, чтобы "склеить" разнородные программные компоненты.

Существует множество сценарных языков:

· Perl (1987) для просмотра и обработки текстовых файлов с извлечением информации и построением отчетов на основе полученных данных.

· Tcl (тикль) для построения графического интерфейса;

· Python (1991) для быстрого создания программных продуктов;

· PHP (1995) - система программирования веб-приложений на стороне сервера, вывод Web-страницы, работа с HTTP, FTP, POP3 и др.);

· Curl (1995) ориентирован на формирование информационного продукта, позволяющего снизить нагрузку на Интернет, перейдя от передачи данных к передаче команд.

Сегодня наиболее популярны два языка:

· VBScript - подмножество Visual Basic;

· JavaScript - является наиболее универсальным.

Microsoft предложила собственную версию JavaScript для работы с Internet Explorer, назвав ее JScript. Обе эти реализации похожи друг на друга, но в каждой из них имеются свои уникальные функциональные возможности.

Задание

Открыть файл E-html.htm, который представляет собой HTML-редактор реализованный с помощью языка Java Script и позволяющий создавать новые Web-страницы прямо в окне браузера. Создать с помощью редактора E-html страницу, в которой разместить конспективный ответ на вопрос о сценарных языках.

JAVA SCRIPT

Java Script был разработан фирмой Netscape в сотрудничестве с Sun Microsystems. Это язык управления сценарием отображения документа. Все операции, которые можно исполнять в программе на JavaScript, описывают действия над элементами рабочей области браузера и контейнерами языка HTML.

JavaScript - это язык программирования, используемый в составе страниц HTML для увеличения функциональности и возможностей взаимодействия с пользователями. С помощью JavaScript на Web-странице можно сделать то, что невозможно сделать стандартными тегами HTML.

Наиболее часто JavaScript используется для:

· отображения диалоговых панелей;

· отображения сообщений в статусной строке браузера;

· динамического создания содержимого страницы во время её загрузки или после того, как она полностью загружена;

· изменения содержимого страницы и отклика на события;

· проверки вводимой пользователем информации и управление отсылкой содержимого форм;

· навигации по другим страницам;

· управления встроенными в Web-страницу объектами типа Java-аплетов и элементов ActiveX.

Код JavaScript размещается внутри HTML страницы, не может существовать автономно и функционирует, будучи запущенными в браузерах типа Netscape Navigator или Internet Explorer. Когда браузер читает HTML, он интерпретирует JavaScript и выполняет любые функции, которые требует от него программа. Браузеры, не имеющие поддержки JavaScript, "не знают" и тэга <script>. Они игнорируют его и печатают все стоящие вслед за ним коды как обычный текст. Иными словами, посетитель странички увидит, как код JavaScript окажется вписан открытым текстом прямо посреди HTML-документа.

В Java Script имеются объекты с набором свойств и набор функций над объектами, которые называются методами. Функция пользователя выполняется по наступлении некоторого события, а внутренние функции языка используются непосредственно.

Задание

Открыть файл GameJS.htm и провести игру, созданную на основе JavaScript. Изменить количество задействованных в игре фрагментов до 8. Изменить фоновую текстуру Web-страницы на однотонную, на произвольную структуру.

Размещение скрипта в html-коде

Код JavaScript размещается непосредственно в HTML-коде странички и обычно состоит из двух частей:

· функции, которые вызываются из кода страницы в ответ на событие;

· код событий, которые вызывают функции.

Описание функций должно располагаться в теге <head></head> - это гарантирует нам, что к моменту вызова функции она уже будет находиться в памяти компьютера. Для вставки кода используется специальный тег <script>, в параметрах которого мы и определяем конкретный язык. Вот пример типичного описания JavaScript-вставки:

<script language="JavaScript">

<!--

// здесь располагается код функции

//-->

</script>

Непосредственно сам код заключен в тег комментария. Это сделано для того, чтобы старые браузеры игнорировали непонятные им команды. Новые версии программ "знают" о существовании закомментированных скриптов.

Закрывающий тег комментария предваряется двумя косыми чертами. Две косые черты - это комментарий языка JavaScript, т. е. скрипт игнорирует все, что идет после него.

Рассмотрим скрипт, который помещает текст на веб-страницу.

В данном случае текст будет красного цвета (это достигается средствами HTML, а JavaScript только размещает соответствующий код:

Пример:

<script language="JavaScript">

document. write("<font color='red'>Это красный текст</font>")

</script>

В окне браузера:

Это красный текст

Первая строка: <SCRIPT LANGUAGE="JavaScript">. Это код HTML, который дает браузеру понять, что с этого места начинается JavaScript. Все скрипты начинаются с такой команды. LANGUAGE (язык) ="JavaScript" позволяет браузеру отличить код от других типов скриптов, например, VBScript.

Последняя строка: </SCRIPT> этим тегом заканчивается любой JavaScript.

Вторая строка: document. write("<FONT COLOR='RED'>Это красный текст</FONT>") В скрипте указывается DOCUMENT (документ HTML) и те изменения, которые в нем произойдут - что-то будет написано (WRITE). То, что будет написано, находится в скобках.

DOCUMENT представляет собой object (объект). Слово WRITE (писать), отделенное точкой, называется method (методом объекта). Текст в скобках называется instance (примером метода), он передает то, что происходит, когда метод воздействует на объект. Текст внутри скобок находится в кавычках. Никогда нельзя про них забывать. Текст в кавычках представляет собой простой HTML: тег <FONT>, которая делает текст красным. Дальше идут одинарные кавычки. Если поставить двойные, JavaScript решит, что это конец строки, и получится, что только часть вашего текста будет применена к объекту, а это уже ошибка.

Задание

Создайте Web-страничку, вставьте в нее рассмотренный скрипт. Измените скрипт так, чтобы вышли три строки текста: красная, зеленая и синяя. Для этого необходимо дописать несколько команд Javascript, а не просто добавить немного HTML к приведенному примеру. На странице должно оказаться следующее:

Это красный текст

Это зеленый текст

Это синий текст

Объекты JavaScript

Все операции, которые можно исполнять в программе на JavaScript, описывают действия над объектами, которыми являются элементы рабочей области браузера и контейнеры языка HTML.

Как любой язык программирования, JavaScript имеет определенный набор объектов, типов переменных, операторов, встроенных функций. Изучение JavaScript как такового как раз и заключаются в запоминании всего этого. Синтаксис полностью соответствует тому, что используется в объектных языках. Т. е. нижележащие объекты отделяются от вышележащих точкой, и для доступа к конкретному свойству нужно просто корректно построить строку доступа.

Но оторванный от объектной модели, он мало полезен сам по себе. А потому рассмотрим объектную модель браузера и несколько популярных эффектов, применяемых на Web-страничках.

Объектная модель Internet Explorer (версии 4 и выше):

· window – объект, дающий доступ к окну браузера

· frames – объект, дающий доступ к фреймам

o window...

o window...

o ...

· document – объект, содержащий в себе всю страничку

o all – полная коллекция всех тегов документа

o forms – коллекция форм

o anchors – коллекция якорей

o appleеs – коллекция апплетов

o embeds – коллекция внедренных объектов

o filters – коллекция фильтров

o images – коллекция изображений

o links – коллекция ссылок

o plugins – коллекция подключаемых модулей

o scripts – коллекция блоков <script>…</script>

o selection – коллекция выделений

o stylesheets – объекты с индивидуально заданными стилями

· history – объект, дающий доступ к истории посещенных ссылок

· navigator – объект, дающий доступ к характеристикам браузера

· location – объект, содержащий текущий URL

· event – объект, дающий доступ к событиям

· screen – объект, дающий доступ к характеристикам экрана

Рассмотрим скрипт, открывающий новое окно браузера.

<script language="javascript">

window. open ('opened2.htm', 'newwin', config='height=250,width=300,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')

</script>

В общем случае лучше помещать скрипты повыше (в контейнере <head>…</head>), чтобы они первыми загружались в память компьютера и начинали работать без задержки. Но для открытия нового окна лучше ставить скрипт ближе к концу документа, пусть сначала загрузится страница, а потом всплывет окошко. Если команда стоит в начале, то окошко всплывет прежде, чем пользователь увидит вашу страницу.

window (окно) - объект, a open (открыть) – метод, который на него воздействует.

Свойства (атрибуты) объекта: ('URL документа в новом окне', 'Название нового окна', config='параметры нового окна')

('opened. html', 'joe',)

· opened. html – это URL страницы, которая появится в новом окне. Если страница располагается на другом сервере, то добавьте http:// и так далее.

· joe – название нового окна. Через минуту я объясню вам, для чего оно нужно.

· config= указывает, что следующие команды относятся к конфигурации нового окна. config='height=300,width=300 (новое окно будет размером 300 на 300 пикселей).

Команды height (высота) и width (ширина) разделены только запятой без пробелов, а значения поставлены в одинарные кавычки, так как эти два эелемента являются подкомандами config. Пробел для браузера означает конец команды.

· toolbar= отвечает за наличие панели инструментов c кнопками НАЗАД, ВПЕРЕД, СТОП и т. д.

· menubar= отвечает за наличие строки меню с элементами файл, правка, вид и т. д.

· scrollbars= отвечает за наличие полосы прокрутки. Я никогда не делаю новое окно с полосой прокрутки. По-моему, это убивает весь эффект.

· resizable= указывает, сможет ли пользователь изменить размер окна по своему желанию.

· location= отвечает за наличие адресной строки, где виден URL страницы.

· status= отвечает за наличие строки состояния.

Задание

Создать скрипт, открывающий окно размером 200 на 400 пикселей, в рабочей области которого будет текст с объектной моделью браузера MS IE, а также будет панель инструментов, строка меню, полосы прокрутки и возможность масштабирования.

Методы JavaScript

Cкрипт должен поместить в документ часы, минуты и секунды. Все это было создано с помощью метода "getЧто-либо()".