Метаданные, заголовочные данные (TITLE, BASE, META). События, методы, свойства. Объекты Jscript.

Цель: Научиться использовать метаданные (данные о данных). Изучить основы программирования на JScript.

Задание: Дополнить страницу заголовочными данными. Изучить вопрос о месте скрипт-программы в тексте документа и о времени ее срабатывания.

Заголовочные данные

Начиная писать HTML-документ, имеет смысл идентифицировать его как таковой. Такая идентификация достигается путем вставления в самое начало документа тегов <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN''> и <HTML> (соответственно, в конец документа, закрывающего тега </HTML>; никогда не забывайте закрывать скобки!). Тег DOCTYPE является тегом языка SGML и объявляет, что документ будет описан в соответствии со спецификацией HTML 3.2.

Тег HTML указывает на начало документа. Заголовок HTML-файла находится в обязательной секции <HEAD>, которая должна находиться в самом начале, то есть сразу после тега <HTML>. Оформляется заголовок с помощью тега <TITLE>. Тег <TITLE> позволяет задавать название для всего документа. Это название будет появляться в заголовке окна программы просмотра, а также будет появляться в списке закладок (bookmarks, shortcuts в различных терминологиях) при создании таковых.

Тэг <BASE параметры> - тег для указания URL документа. Этот тэг сообщает браузеру базовый адрес страницы, после чего все адреса внутри страницы могут быть заданы как относительные, так как базовый становится текущим. Тег имеет такие параметры: HREF - указывает базовый URL для документа. Замечание: URL должен быть указан в полной форме. TARGET - указывает окно для отображения документов, на которые ссылается данный документ.

<STYLE> - тег, зарезервированный для описания листов стилей.

<META параметры> - тег, который теоретически должен использоваться для включения в документ некой специфичной информации для программ-индексаторов, каталогизаторов и т. д. Кроме того, у него есть несколько полезных параметров, позволяющих страницам сменять друг друга по прошествии определенных промежутков времени. Тег имеет следующие параметры: HTTP-EQUIV="refresh'' - указывает программе просмотра, что нужно перепрыгнуть на страничку, указанную в параметре CONTENT по прошествии указанного там же промежутка времени (Изумительно просто выполненная переадресация или обновление!). CONTENT="number; url=URL'' - задает временной интервал number и URL для команды HTTP-EQUIV="refresh''. NAME="description'' или NAME="keywords'' - указывает серверу, как интерпретировать параметр CONTENT - как описание документа или как список ключевых слов. CONTENT="text или список значений'' - это не опечатка. У параметра CONTENT два смысла: один для команды HTTP-EQUIV="refresh'', другой для команды NAME. В последнем случае значение параметра определяет либо описание документа (если параметр NAME="description''), либо список разделенных запятыми ключевых слов (если параметр NAME="keywords'').

Место расположения программы в HTML-документе.

Небольшие программы, вставляемые в Web-страницы, пишутся на так называемых скрипт - языках. Это программы, позволяющие внести некоторое оживление на страницу, реализующие реакцию на некоторые действия читателя, подготавливающие данные для передачи на сервер. Наиболее распространены языки Java Script и Visual Basic Script. В настоящем курсе вы изучите основные приемы программирования на JavaScript. Язык Visual Basic Script очень похож на на Visual basic for Application, поэтому целесообразно изучить незнакомый пока для вас язык.

Программы на языке JavaScript состоят из операторов. Операторы заключаются в тэг – контейнер <SCRIPT>. Этот тэг может быть написан в произвольном месте теста Web-страницы, хотя место расположения важно (об этом чуть позже). Кроме того, программа может располагаться в значении HTML-атрибута, обозначающего то или иное событие. С другой стороны, операторы могут быть заключены в некоторую функцию, обращение к которой происходит обычным для языков программирования образом. Если же операторы не включены ни в какую функцию, то они выполняются браузером сразу же

Рекомендуется выполнять следующие соглашения: 1) программы, вызываемые из нескольких страниц сайта, располагаются в отдельном файле, 2) программы, вызываемые из нескольких мест одной страницы, должны располагаться в тэге скрипт, расположенном внутри контейнера <HEAD>.

Пример.

Последовательность выполнения:

1. Дополните страницу заголовочными данными.

2. Тэг <SCRIPT>, содержащий описание функций и глобальных переменных располагается в заголовке документа, то есть в тэге <HEAD> или, по крайней мере, перед текстом документа, в котором осуществляется вызов функций или идет обращение к переменным. Этот вариант используется в основном в тех случаях, когда программа большая или должна работать в нескольких местах документа. Программа оформляется в виде функции, в местах вызова пишется вызов функции, а сама функция помещается в специальный тэг. Тэг <SCRIPT language="JavaScript"> пишется обычно в начале или в конце документа, текст программ обрамляется тэгом комментария для того, чтобы устаревшие браузеры не показывали текст программы читателю.

<HTML>

<HEAD> <TITLE> заголовок окна </TITLE>

<!--

function try(){

операторы

}

-->

</SCRIPT>

</HEAD>

</HTML>

3. Тэг <SCRIPT>, содержащий операторы, не вложенные в функции, располагается в том месте, где должна выполняться программа.

<P> какой-то текст, после которого расположены операторы</P>

<!--

операторы

-->

</SCRIPT>

Тэг <SCRIPT>, содержащий операторы, не вложенные ни в какую функцию, может встретиться в произвольном месте документа, в таком случае эти операторы выполняются в момент загрузки документа в браузер. В приведенном примере функция f1 будет вызвана, когда пользователь щелкнет мышью по абзацу, а приветствие будет выдано на экран сразу после показа первого абзаца.

<HTML>

<HEAD> <TITLE> заголовок окна </TITLE>

<!--

function f1(){

alert('Щелкнули!')

}

-->

</SCRIPT>

</HEAD>

<BODY >

<P> Первый абзац, показываемый сразу на экране. </P>

<!--

alert('Привет!')

-->

</SCRIPT>

<P> Второй абзац, показываемый на экране после сообщения "привет". </P>

Третий абзац, показываемый на экране вслед за вторым

и реагирующий на щелчок мыши по нему.

</P>

</BODY>

</HTML>

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

С каждым объектом может быть связана программа – обработчик события, на которое реагирует данный объект.

Программа на JavaScript может быть записана в виде значения атрибута тэга, обозначающего одно из зарегистрированных событий: <тэг событие = "обработка события"> </тэг>.

В папке HTML-Reference в папке Dynamic HTML откройте файл dhtmle.htm, изучите общие события.

Событие – это изменение состояния операционной среды, регистрируемое и обрабатываемое операционной системой. Пример события – щелчок мыши, пример происшествия, не являющегося событием – перемещение клавиатуры.

С каждым событием можно связать один или несколько обработчиков, кроме стандартного, выполняемого ОС. Но обработчик, с другой стороны, связан с объектом. Например, какой тэг из нашего документа будет реагировать на щелчок мыши? Очевидно, тот, на содержимое которого указывала мышь. А если есть несколько вложенных тэгов – контейнеров, и щелчок выполнен на содержимом самого глубокого? По-видимому, можно ожидать, что все тэги по очереди прореагируют на событие. Так это и происходит. Точнее, можно отказаться от этого умалчиваемого порядка действий, то есть на определенном этапе прекратить распространение события вверх по родительским объектам. В случае обычного распространения события обработчики работают по очереди.

В приведенном примере если щелкнуть по картинке, то сначала увеличится размер картинки, затем измениться цвет букв в ячейке с черного на белый, затем вокруг таблицы появится рамка, наконец, выведется слово "ВСЕ". Вернуться к начальному виду можно, нажав кнопку "Обновить". А теперь, если щелкнуть по ячейке, содержащей число 123, то только появится рамка вокруг таблицы и выведется слово "ВСЕ".

<tr>

<td style="color:black"

onclick="alert('меняем цвет букв ячейки'); this.style.color='white'">

<img width=40 heigth=40 src="cat.gif" id="cat"

onclick="alert('меняем размер картинки');this.width=80">

</td>

</tr>

<tr>

</tr>

</table>

Итак, события могут инициировать другие события. Поэтому в событийных языках программирования всегда задан порядок возникновения (срабатывания, распознавания) событий. Обратите внимание в справочнике на порядок событий, описывающих изменение состояния мыши. Задайте разные обработчики, проанализируйте порядок их срабатывания (dhtmle.htm).

Перечень основных событий, на которые реагируют практически все объекты HTML:

ONCLICK – щелчок мыши

ONDBLCLICK – двойной щелчок мыши

ONDRAGSTART – начало перетаскивания

ONFILTERCHANGE – изменение фильтра

ONHELP – нажатие клавиши F1

ONKEYDOWN – клавиша нажата и удерживается

ONKEYPRESS – щелчок по клавише

ONKEYUP – отпущена ранее нажатая клавиша

ONMOUSEDOWN – нажата кнопка мыши и удерживается

ONMOUSEUP – отпущена кнопка мыши

ONMOUSEOVER – мышь пересекла границу объекта, входя в него

ONMOUSEOUT – мышь покинула объект

ONMOUSEMOVE – мышь перемещается над объектом

ONSELECTSTART – начало выделение мышью

Свойства – некоторые характеристики, которые можно прочитать или изменить в программе на Jscript. Методы – некоторые встроенные программы, приписанные к объектам.

Описание переменных

Сначала рассмотрим основные конструкции языка: операции, операторы, типы.

Хотя Jscript не требует описания переменных, но иногда это требуется для того, чтобы определить область видимости переменной или чтобы задать ее тип. По умолчанию тип определяется при присваивании значения.

Существует 6 типов данных: число, строка, объект, логическое, null, undefined.

Особые числовые значения: NaN – не число, Positive Infinity – положительная бесконечность, Negative Infinity – отрицательная бесконечность, Positive 0 – положительный нуль, Negative 0 – отрицательный нуль.

Логические значения true, false. Это специальные значения, не 0 и 1, хотя при сравнении выражение, значение которого равно 0 равно false, а любое другое (отличное от 0) равно true.

Операторы завершаются точкой с запятой. В конце строки точка с запятой может быть опущена. C целью образования группы несколько операторов заключаются в фигурные скобки.

Описание переменных, описываемым переменным можно сразу присваивать начальные значения: Var variable1 [=value1] [,varialbe2 [=value2]], …;

5. Приведенный пример демонстрирует описание и одновременное присваивание переменной, а так же результат описания глобальной и локальной переменной. Учтите, что приведенный текст работать не будет, но обращайте внимание на ошибки и исправляйте их.

var p=10;

function ff(){

var d;

alert(p); alert(d);

d=6;

alert(p); alert(d);

}

alert(p); alert(d);

</SCRIPT>

6. Условный оператор: if (condition) statement1;[else statement2]; В примере попробуем организовать разную выдачу на экран в зависимости от ответа пользователя на вопрос.

d=prompt('введите число');

if (d==1) alert('=1’); else alert('<>1’);

7. Оператор условного цикла: do statement1while (expression); В примере попробуем организовать выдачу на экран краснеющего сообщения. Обратите внимание на то, как применяется функция RGB, точнее, - как формируется строка для свойства color (строковое выражение, состоящее из константы, с которой конкатенируется значение переменной и снова константа).

var r=0;

</SCRIPT>

</head>

djjdjds

</BODY>

8. Оператор счетного цикла: for (initialization; test; increment) statement; В примере рассчитывается факториал введенного числа и показывается в статус-строке. Обратите внимание на преобразование числа в строку (метод toString), требующуюся для формирования строкового выражения.

<P onclick="d=prompt('число? ',1); r=1; alert('считаем факториал числа d='+d.toString()); for (i=1;i<=d;i++) r=r*i; alert('результат='+r.toString());"> факториал</P>

9. Цикл по свойствам объекта. for (variable in [object | array]) {statement; return [expression];} Можно пройтись по свойствам с целью найти нужное, составить описание и т.п.

10. Переключатель (обязательно нужен break в конце каждой группы операторов, иначе исполняется следующая группа операторов):

switch(expression){

case label:

statementlist

case label:

statementlist

case label:

statementlist

...
default:

statementlist

}

11. Фиксирование части дерева объектов сокращает время работы с объектными свойствами: with (object) statement;

12. Обращение к текущему объекту, то есть объекту, прореагировавшему на событие: this. Такое обращение работает только внутри тэга, то есть в операторах, написанных внутри тэга после свойства – события. Если же вы вызываете какую-нибудь функцию, то в ней уже текущим объектом является, вообще говоря, тэг SCRIPT, а не объект, вызвавший функцию.

case label:

Вопросы: Программа на JavaScript, ее место и момент срабатывания. Способы обращения к объекту - тэгу. Синтаксические конструкции языка. Объектная модель.

<== предыдущая лекция	\|	следующая лекция ==>
Теги html, head, title, body, p, ol, ul, li, table, img.	\|	Методика проведения анализа результатов технического развития, состояния и использования основных фондов

Дата добавления: 2016-04-19; просмотров: 866;