Язык сценариев html

18 Сценарии (скрипты)

Содержание

Введение
Дизайн документов для
пользовательских агентов (ПА), поддерживающих скрипты (сценарии)
- Элемент SCRIPT
- Установка языка скрипта
  - Язык по умолчанию
  - Локальное объявление языка скриптов
  - Ссылки на элементы HTML
    из скрипта
- Внутренние события
- Динамическое изменение документа
Дизайн документов для ПА, не поддерживающих скрипты
- Элемент NOSCRIPT
- Скрытие данных
  скрипта от ПА

18.1 Введение

Скрипт, выполняемый на стороне клиента (клиентский),
это программа, которая может быть загружена
вместе с документом HTML ил встроена прямо в
него. Программа выполняется на клиентской
машине при загрузке документа или в другое
время, когда, например, если активируется
гиперссылка. Поддержка скриптов языком HTML
не зависит от языка скриптов.

Скрипты,
таким образом, позволяют авторам
расширить возможности документов HTML,
как активные, так и интерактивные. Например:

Сценарии могут выполняться по мере
загрузки документа для динамической
модификации содержимого этого документа.
Сценарии могут находиться в форме и
обрабатывать ввод данных пользователем.
Части формы могут динамически заполняться
на основе значений других полей. Можно
также проверять соответствие введённых
данных значениям определённого диапазона,
эти поля могут быть взаимосвязаны и т.д.
Скрипты могу запускаться событиями,
происходящими в документе: загрузка
документа, выгрузка, передача фокуса
элементу, движение мыши и т.д.
Скрипты могут быть связаны с ЭУ (напр.,
кнопками) для создания графического
интерфейса пользователя.

Есть два вида скриптов, которые могут быть
включены в документ HTML:

выполняемые однократно при
загрузке документа ПА. Скрипты внутри
элемента SCRIPT
выполняются при загрузке документа. Для ПА,
которые не могут или «не хотят» выполнять
скрипты, авторы могут включить
альтернативное содержание с помощью
элемента NOSCRIPT.
выполняемые каждый раз при
возникновении определённого события. Эти
скрипты могут быть подключены к
нескольким элементам с помощью атрибутов внутренних событий.

Примечание. Эта спецификация
содержит более детальную информацию о
сценариях в разделе о макросах сценариев.

18.2 Дизайн документов для ПА,
поддерживающих скрипты

В следующем разделе обсуждаются вопросы,
касающиеся ПА, поддерживающих скрипты.

18.2.1 Элемент `SCRIPT`

<!ELEMENT SCRIPT - - %Script;          -- операторы скрипта -->
<!ATTLIST SCRIPT
  charset     %Charset;      #ПРЕДПОЛАГАЕТСЯ  -- набор символов связанного ресурса --
  type        %ContentType;  #НЕОБХОДИМ -- тип содержимого языка скрипта --
  src         %URI;          #ПРЕДПОЛАГАЕТСЯ  -- URI внешнего скрипта --
  defer       (defer)        #ПРЕДПОЛАГАЕТСЯ  -- ПА могут отложить исполнение скрипта --
  >

Начальный тег: необходим,
Конечный тег: необходим

Определения атрибутов

src = uri [CT]: Определяет местонахождение внешнего
скрипта.
type = content-type [CI]: Определяет язык скрипта содержимого
элемента и переопределяет язык по
умолчанию. Язык сценария определяется как
тип содержимого (напр., «text/javascript»).
Авторы обязаны указать значение этого
атрибута. Для этого атрибута нет значения
по умолчанию.
language = cdata [CI]: Не рекомендуется.
Определяет язык скрипта содержимого
элемента. Его значением является
идентификатор языка, но поскольку эти
идентификаторы не стандартизованы, этот
атрибут применять не
рекомендуется, в отличие от атрибута type.
defer [CI]: Если установлен, этот булев атрибут подсказывает
ПА, что скрипт не запущен для генерации
какого-либо содержимого документа (напр., «document.write»
в javascript), и, таким образом, ПА может
продолжить разбор и вывод документа.

Элемент SCRIPT помещает скрипт в документ. Этот
элемент может появляться любое число раз в HEAD и BODY
документа HTML.

Скрипт может быть определён внутри
элемента SCRIPT или во внешнем
файле. Если атрибут src
не установлен, ПА должен интерпретировать
содержимое элемента как скрипт. Если src имеет значение URI, ПА должен
игнорировать содержимое элемента и
затребовать скрипт по URI.
Обратите внимание,
что атрибут charset относится к кодировке
символов скрипта, обозначенного
атрибутом src; он не касается
содержимого элемента
SCRIPT.

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

Синтаксис данных
скрипта зависит от языка скриптов.

18.2.2 Установка языка скриптов

Поскольку HTML не соотносится с
определённым языком сценариев, авторы
документа должны однозначно указать ПА
язык каждого скрипта. Это можно сделать,
объявив значение по умолчанию или локально.

Язык сценариев по
умолчанию

Авторы должны определить язык скриптов по
умолчанию для всех скриптов в документе,
включив следующее META объявление в HEAD:

<META http-equiv="Content-Script-Type" content="type">

где «type» — это content type/тип
содержимого, называющий язык скриптов.
Примеры — «text/tcl»,
«text/javascript», «text/vbscript».

В отсутствие META объявления, значение по умолчанию
может быть установлено заголовком «Content-Script-Type»
HTTP:

    Content-Script-Type: type

где «type» это опять же content type/тип
содержимого, называющий язык скриптов.

ПА должны определить язык скрипта по
умолчанию в такой последовательности (приоритет
от высшего к низшему):

Если есть какое-либо объявление META, определяющее «Content-Script-Type»,
последний определяет в потоке символов
язык скриптов по умолчанию.
Иначе, если какой-либо заголовок HTTP
определяет «Content-Script-Type», последний
определяет в потоке символов язык
скриптов по умолчанию.

Документы, в которых язык скриптов по
умолчанию не определён, и которые содержат
элементы со скриптами внутренних
событий, являются некорректными. ПА могут
попытаться интерпретировать некорректно
определённые скрипты, но это не обязательно.
Авторские утилиты должны генерировать информацию
о языке скриптов по умолчанию, чтобы помочь
избежать создания некорректных документов.

Локальное объявление
языка скриптов

Атрибут type должен быть
определён для каждого элемента SCRIPT
в документе. Значение атрибута type элемента SCRIPT переопределяет
язык скриптов по умолчанию для данного
элемента.

В это примере мы объявляем язык скриптов
по умолчанию «text/tcl». Мы включаем один SCRIPT в «шапку», чей скрипт
находится во внешнем файле и написан на
языке «text/vbscript». Мы также включили SCRIPT
в тело документа, который сам содержит
собственный скрипт, написанный на «text/javascript».

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with SCRIPT</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
...сценарий JavaScript...
</SCRIPT>
</BODY>
</HTML>

Ссылки на
элементы HTML из скрипта

У каждого языка скриптов есть свой набор
соглашений о том, как ссылаться на объекты HTML
из скрипта. Эта спецификация не определяет
стандартный механизм ссылки на объекты HTML.

В то же время, скрипты должны ссылаться на
элемент в соответствии с его установленным
именем. Машины скриптов должны соблюдать
правило старшинства при идентификации
элемента: атрибут name имеет
преимущество перед атрибутом id,
если оба установлены. Иначе тот или другой
могут быть использованы.

18.2.3 Внутренние события

Примечание. Обращаем внимание
авторов документов HTML, что изменения вскоре
могут появиться в определении внутренних
событий (напр., как скрипты ограничены
событиями). Исследования в этой сфере проводятся
членами W3C Document Object Model Working Group (см. W3C сайт http://www.w3.org/).

Определения атрибутов

onload = script [CT]: Событие onload возникает, когда ПА
закончил загрузку окна или всех фрэймов FRAMESET. Этот атрибут
может быть использован элементами BODY и FRAMESET.
onunload = script [CT]: Событие onunload возникает, когда
ПА удаляет документ из окна или фрэйма.
Этот атрибут может быть использован
элементами BODY и FRAMESET.
onclick = script [CT]: Событие onclick возникает, когда
указательное устройство «щёлкает» на
элементе. Этот атрибут может быть
использован с большинством элементов.
ondblclick = script [CT]: Событие ondblclick возникает, когда
указательное устройство дважды «щёлкает»
на элементе. Этот атрибут может быть
использован с большинством элементов.
onmousedown = script [CT]: Событие onmousedown возникает, когда
кнопка указательного устройства «нажала»
на элемент. Этот атрибут может быть
использован с большинством элементов.
onmouseup = script [CT]: Событие onmouseup возникает, когда
кнопка указательного устройства отпущена
над элементом. Этот атрибут может быть
использован с большинством элементов.
onmouseover = script [CT]: Событие onmouseover возникает, когда
указательное устройство проходит над
элементом. Этот атрибут может быть
использован с большинством элементов.
onmousemove = script [CT]: Событие onmousemove возникает, когда
указательное устройство перемещается в
тот момент, когда находится над элементом.
Этот атрибут может быть использован с
большинством элементов.
onmouseout = script [CT]: Событие onmouseout возникает, когда
указательное устройство убирается с
элемента. Этот атрибут может быть
использован с большинством элементов.
onfocus = script [CT]: Событие onfocus возникает, когда элемент
получает фокус от указательного
устройства или при навигации табуляцией.
Этот атрибут может использоваться в
элементах: A, AREA, LABEL, INPUT, SELECT, TEXTAREA и BUTTON.
onblur = script [CT]: Событие onblur возникает, когда
элемент теряет фокус от указательного
устройства или при навигации табуляцией.
Может использоваться с теми же элементами,
что и onfocus.
onkeypress = script [CT]: Событие onkeypress возникает, когда
клавиша нажата и отпущена над элементом.
Этот атрибут может быть использован с
большинством элементов.
onkeydown = script [CT]: Событие onkeydown event возникает, когда
клавиша нажата над элементом. Этот атрибут
может быть использован с большинством
элементов.
onkeyup = script [CT]: Событие onkeyup возникает, когда
клавиша отпущена над элементом. Этот
атрибут может быть использован с
большинством элементов.
onsubmit = script [CT]: onsubmit возникает при отправке
формы. Применяется только к элементу FORM.
onreset = script [CT]: onreset возникает при «очистке»
формы. Применяется только к элементу FORM.
onselect = script [CT]: onselect возникает, когда
пользователь выделяет какой-либо текст в
текстовом поле. Этот атрибут может
использоваться в элементах INPUT и TEXTAREA.
onchange = script [CT]: onchange возникает, когда ЭУ теряет
фокус ввода и его значение
изменилось с момента получения фокуса.
Применяется в элементах: INPUT, SELECT и TEXTAREA.

Можно ассоциировать действие с определённым количеством событий,
возникающих при взаимодействии
пользователя с ПА. Каждое из «внутренних
событий», перечисленных выше, имеет
значение — скрипт. Скрипт выполняется , как
только возникает событие в данном элементе.
Синтаксис данных
скрипта зависит от языка скрипта.

ЭУ,
такие как INPUT, SELECT, BUTTON,
TEXTAREA и LABEL, все откликаются на
определённые внутренние события. Если эти
элементы находятся вне формы, они могут
использоваться для расширения
возможностей пользовательского интерфейса
документа.

К примеру, авторы могут вставить в
документ кнопку, которая не отправляет
форму, а взаимодействует с сервером при
активации.

Следующие примеры показывают некоторые
ЭУ и действия пользовательского интерфейса
на базе внутренних событий.

Здесь заполнение поля userName является
необходимым. Если пользователь переносит
фокус с этого поля, событие onblur
вызовет функцию JavaScript для того, чтобы
удостовериться, что userName содержит
приемлемое значение:

<INPUT NAME="userName" onblur="validUserName(this.value)">

Вот пример другого JavaScript:

<INPUT NAME="num"
    onchange="if (!checkNum(this.value, 1, 10)) 
        {this.focus();this.select();} else {thanks()}"
    VALUE="0">

Пример VBScript-обработчика события для
текстового поля:

    <INPUT name="edit1" size="50">    
    <SCRIPT type="text/vbscript">
      Sub edit1_changed()
        If edit1.value = "abc" Then
          button1.enabled = True
        Else
          button1.enabled = False
        End If
      End Sub
    </SCRIPT>

Пример с использованием Tcl:

    <INPUT name="edit1" size="50">
    <SCRIPT type="text/tcl">
      proc edit1_changed {} {
        if {[edit value] == abc} {
          button1 enable 1
        } else {
          button1 enable 0
        }
      }
      edit1 onChange edit1_changed
    </SCRIPT>

Пример JavaScript для события, связанного со
скриптом. Сначала — простой обработчик
щелчка кнопки:

 
<BUTTON type="button" name="mybutton" value="10">
<SCRIPT type="text/javascript">
      function my_onclick() {
         . . .
      }
    document.form.mybutton.onclick = my_onclick
 </SCRIPT>
 </BUTTON>

Более интересный обработчик окна:

<SCRIPT type="text/javascript">
      function my_onload() {
         . . .
      }

      var win = window.open("some/other/URI")
      if (win) win.onload = my_onload
</SCRIPT>

В Tcl это выглядит похоже:

 <SCRIPT type="text/tcl">
     proc my_onload {} {
       . . .
     }
     set win [window open "some/other/URI"]
     if {$win != ""} {
         $win onload my_onload
     }
 </SCRIPT>

Учтите, что «document.write» или
аналогичные операторы в обработчиках
внутренних событий создают новый документ
и записывают туда, а не модифицируют
текущий документ.

18.2.4 Динамическое изменение
документов

Скрипты, выполняемые при загрузке
документа, могут использоваться для
динамической модификации документа.
Возможность сделать это зависит от самого
языка скриптов (напр., оператор «document.write»
в объектной модели HTML не поддерживается
некоторыми производителями).

Динамическая модификация документа может
быть смоделирована так:

Все элементы SCRIPT
выполняются в том порядке, как они
загружаются.
Все конструкции скриптов в данном
элементе SCRIPT, генерирующем SGML
CDATA, выполняются. Их комбинированный
сгенерированный текст вставляется в
документ вместо элемента SCRIPT.
Сгенерированные CDATA выполняется заново.

Документы HTML должны соответствовать
Определению Типа Данных (ОТД) HTML и до, и
после обработки элемента SCRIPT.

Следующий пример иллюстрирует, как
скрипты могут модифицировать документ
динамически.
Скрипт:

 <TITLE>Test Document</TITLE>
 <SCRIPT type="text/javascript">
     document.write("<p><b>Hello World!</b>")
 </SCRIPT>

работает так же, как и :

 <TITLE>Test Document</TITLE>
 <P><B>Hello World!</B>

18.3 Дизайн документов
для ПА, не поддерживающих сценарии

В данном разделе рассматривается, как авторы
могут создать документ, работающий с ПА, не
поддерживающими скрипты.

18.3.1 Элемент `NOSCRIPT`

Начальный тег: необходим,
Конечный тег: необходим

Элемент NOSCRIPT даёт авторам возможность
предоставить альтернативное содержимое,
если скрипт не выполняется. Содержимое
элемента NOSCRIPT должно
отображаться ПА, «понимающим» скрипты,
только в следующих случаях:

ПА сконфигурирован так, чтобы не
выполнять скрипты;
ПА не поддерживает язык скриптов, ранее
заявленный в элементе SCRIPT
в этом документе.

ПА, не поддерживающие скрипты на стороне
клиента, обязаны выводить содержимое этого
элемента.

В следующем примере ПА, исполняющий SCRIPT,
будет включать некоторые динамически
создаваемые данные в документ. Если ПА не
поддерживает скрипты, пользователь сможет
запросить данные по гиперссылке.

<SCRIPT type="text/tcl">
 ...некоторый скрипт Tcl для вставки данных...
</SCRIPT>
<NOSCRIPT>
 <P>Перейдите на <A href="http://someplace.com/data">data.</A>
</NOSCRIPT>

18.3.2 Скрытие данных скрипта от
ПА

Есть вероятность того, что ПА, не
распознающие элемент SCRIPT, будут
рассматривать его содержимое как текст.
Некоторые машины скриптов, в том числе для
языков JavaScript, VBScript и Tcl, разрешают включение
операторов скрипта в комментарий SGML. ПА, не
распознающие элемент SCRIPT,
будут тогда игнорировать комментарий, в то
время как более совершенные машины
скриптов «поймут», что скрипт внутри
комментария должен выполняться.

Другим решением проблемы является сохранение
скриптов во внешнем документе и ссылка на
него с помощью атрибута src.

Комментирование скриптов в JavaScript

Машина JavaScript допускает «<!—» как начало
элемента SCRIPT и игнорирует оставшиеся
символы до конца строки.
JavaScript интерпретирует «//» как начало
комментария до конца текущей строки. Это
необходимо, чтобы спрятать «—>» от
разборщика JavaScript.

<SCRIPT type="text/javascript">
<!--  прячет содержимое скрипта от старых браузеров
  function square(i) {
    document.write("Вызов передан функции", i "<BR>")
    return i * i
  }
  document.write("Функция возвратила ",square(5),".")
// конец скрытия содержимого от старых браузеров  -->
</SCRIPT>

Комментирование скриптов в VBScript

В VBScript одиночная кавычка указывает, что
оставшаяся часть строки должна
рассматриваться как комментарий. Таким
образом, она может использоваться для
скрытия «—>» от VBScript, например:

   <SCRIPT type="text/vbscript">
     <!--
       Sub foo()
        ...
       End Sub
     ' -->
    </SCRIPT>

Комментирование скриптов в TCL

В Tcl символ»#» обозначает комментарий до
конца строки:

<SCRIPT type="text/tcl">
<!--  прячет содержимое скрипта от старых браузеров
  proc square {i} {
    document write "Вызов передан функции $i.<BR>"
    return [expr $i * $i]
  }
  document write "Функция вернула [square 5]."
# конец скрытия содержимого от старых браузеров  -->
</SCRIPT>

Примечание. Некоторые
браузеры закрывают комментарий при
обнаружении первого символа «>», поэтому,
для того, чтобы спрятать скрипт от таких
браузеров, Вы можете поменять местами
операнды в операторах сравнения и смещения
(напр., использовать «y < x» вместо «x > y») или
использовать зависимые от языка скриптов
escape-последовательности для «>».

Источник

Аннотация: Описываются механизмы работы скриптов.

Введение

Скрипт, выполняемый на стороне клиента (клиентский) — это программа, которая может быть загружена вместе с документом HTML или встроена прямо в него. Программа выполняется на клиентской машине при загрузке документа или в другое время, когда активируется гиперссылка. Поддержка скриптов языком HTML не зависит от языка скриптов.

Скрипты, таким образом, позволяют авторам расширить возможности документов HTML, как активные, так и интерактивные. Например:

Сценарии могут выполняться по мере загрузки документа для динамической модификации содержимого этого документа.
Сценарии могут находиться в форме и обрабатывать ввод данных пользователем. Части формы могут динамически заполняться на основе значений других полей. Можно также проверять соответствие введённых данных значениям определённого диапазона, эти поля могут быть взаимосвязаны и т.д.
Скрипты могут запускаться событиями, происходящими в документе: загрузка документа, выгрузка, передача фокуса элементу, движение мыши и т.д.
Скрипты могут быть связаны с ЭУ (напр., кнопками) для создания графического интерфейса пользователя.

Есть два вида скриптов, которые могут быть включены в документ HTML:

выполняемые однократно при загрузке документа ПА. Скрипты внутри элемента SCRIPT выполняются при загрузке документа. Для ПА, которые не могут или «не хотят» выполнять скрипты, авторы могут включить альтернативное содержание с помощью элемента NOSCRIPT.
выполняемые каждый раз при возникновении определённого события. Эти скрипты могут быть подключены к нескольким элементам с помощью атрибутов внутренних событий.

Примечание. Эта спецификация содержит более детальную информацию о сценариях в разделе о
«макросах сценариев»
.

Дизайн документов для ПА, поддерживающих скрипты

В следующем разделе обсуждаются вопросы, касающиеся ПА, поддерживающих скрипты.

Элемент SCRIPT

<!ELEMENT SCRIPT - - %Script;          -- операторы скрипта -->
<!ATTLIST SCRIPT
  charset     %Charset;      #ПРЕДПОЛАГАЕТСЯ  -- набор символов связанного ресурса --
  type        %ContentType;  #НЕОБХОДИМ -- тип содержимого языка скрипта --
  src         %URI;          #ПРЕДПОЛАГАЕТСЯ  -- URI внешнего скрипта --
  defer       (defer)        #ПРЕДПОЛАГАЕТСЯ  -- ПА могут отложить исполнение скрипта --
  >

Начальный тег: необходим, Конечный тег: необходим

Определения атрибутов

src = uri [CT]

Определяет местонахождение внешнего скрипта.

type = content-type [CI]

Определяет язык скрипта содержимого элемента и переопределяет язык по умолчанию. Язык сценария определяется как тип содержимого (напр., «text/javascript» ). Авторы обязаны указать значение этого атрибута. Для этого атрибута нет значения по умолчанию.

language = cdata [CI]

Не рекомендуется. Определяет язык скрипта содержимого элемента. Его значением является идентификатор языка, но поскольку эти идентификаторы не стандартизованы, этот атрибут применять не рекомендуется, в отличие от атрибута type.

defer [CI]

Если установлен, этот булев атрибут подсказывает ПА, что скрипт не запущен для генерации какого-либо содержимого документа (напр., «document.write» в javascript), и, таким образом, ПА может продолжить разбор и вывод документа.

Атрибут, определённый в другом месте

charset (набор символов)

Элемент SCRIPT помещает скрипт в документ. Этот элемент может появляться любое число раз в HEAD и BODY документа HTML.

Скрипт может быть определён внутри элемента SCRIPT или во внешнем файле. Если атрибут src не установлен, ПА должен интерпретировать содержимое элемента как скрипт. Если src имеет значение URI, ПА должен игнорировать содержимое элемента и затребовать скрипт по URI.

Обратите внимание, что атрибут charset относится к
«кодировке символов»
скрипта, обозначенного атрибутом src ; он не касается содержимого элемента SCRIPT.

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

Синтаксис данных скрипта зависит от языка скриптов.

Установка языка скриптов

Поскольку HTML не соотносится с определённым языком сценариев, авторы документа должны однозначно указать ПА язык каждого скрипта. Это можно сделать, объявив значение по умолчанию или локально.

Язык сценариев по умолчанию

Авторы должны определить язык скриптов по умолчанию для всех скриптов в документе, включив следующее META объявление в HEAD:

<META http-equiv="Content-Script-Type" content="type">

где «type» — это content type/тип содержимого, называющий язык скриптов. Примеры — «text/tcl«, «text/javascript», «text/vbscript«.

В отсутствие META объявления, значение по умолчанию может быть установлено заголовком «Content-Script-Type» HTTP:

Content-Script-Type: type

где «type» это опять же content type/тип содержимого, называющий язык скриптов.

ПА должны определить язык скрипта по умолчанию в такой последовательности (приоритет от высшего к низшему):

Если есть какое-либо объявление META, определяющее «Content-Script-Type» , последний определяет в потоке символов язык скриптов по умолчанию.
Иначе, если какой-либо заголовок HTTP определяет «Content-Script-Type» , последний определяет в потоке символов язык скриптов по умолчанию.

Документы, в которых язык скриптов по умолчанию не определён, и которые содержат элементы со скриптами внутренних событий, являются некорректными. ПА могут попытаться интерпретировать некорректно определённые скрипты, но это не обязательно. Авторские утилиты должны генерировать информацию о языке скриптов по умолчанию, чтобы помочь избежать создания некорректных документов.

Локальное объявление языка скриптов

Атрибут type должен быть определён для каждого элемента SCRIPT в документе. Значение атрибута type элемента SCRIPT переопределяет язык скриптов по умолчанию для данного элемента.

В этом примере мы объявляем язык скриптов по умолчанию «text/tcl«. Мы включаем один SCRIPT в «шапку», чей скрипт находится во внешнем файле и написан на языке «text/vbscript«. Мы также включили SCRIPT в тело документа, который сам содержит собственный скрипт, написанный на «text/javascript».

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with SCRIPT</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
...сценарий JavaScript...
</SCRIPT>
</BODY>
</HTML>

Ссылки на элементы HTML из скрипта

У каждого языка скриптов есть свой набор соглашений о том, как ссылаться на объекты HTML из скрипта. Эта спецификация не определяет стандартный механизм ссылки на объекты HTML.

В то же время, скрипты должны ссылаться на элемент в соответствии с его установленным именем. Машины скриптов должны соблюдать правило старшинства при идентификации элемента: атрибут name имеет преимущество перед атрибутом id, если оба установлены. Иначе тот или другой могут быть использованы.

Источник

Лабораторная
работа № 4

Разработка
и использование сценариев в языке HTML

Цель работы:
познакомиться с построением динамических
Web-страниц.

Для того чтобы
после загрузки в браузер содержимое
Web-страницы
динамически изменялось, необходимо
воспользоваться специализированными
Web-приложениями
(сценариями). В результате применения
этих программных средств можно
запрограммировать «поведение» тех или
иных элементов Web-страницы,
в зависимости от действий пользователя
(например, щелчок мышью или перемещение
указателя мыши).

Программные
средства для создания динамических
страниц: ActiveX,
DHTML,
Java,
JavaScript,
VBScript.

1. Язык сценариев
VBScript.

Для того чтобы
добавить код сценария в Html-документ,
необходимо воспользоваться дескриптором
<Script>,
который должен находиться в пределах
дескриптора <Head>
или <Body>.
В дескрипторе <Script>
указывается язык программирования, на
котором записываются действия. Например,
если используется язык программирования
VBScript,
то открывающий дескриптор выглядит

Сценарии используют
для «обслуживания» событий, которые
возникают на Web-странице
после ее загрузки в Web-браузер.
Существует несколько видов событий. Из
самых распространенных можно отметить:
window_onload — запускается при полной загрузке
документа. Создайте Web-страницу
с обработчиком этого события. В этом
примере код Script
записан в теле страницы. Процедура Alert
выводит сообщение, которое записывается
в кавычках.

Пример №1

<Html>

<Head>

<Title>
Задача
1-Загрузка</Title>

</Head>

<Body>

Sub
window_onload

Alert
«Добро пожаловать на мою домашнюю
страницу!»

end
sub

</Script>

</Body>

</Html>

При загрузке
документа появится окошко с данной
надписью и кнопкой ОК

Пример №2

Событие onmouseover —
возникает при наведении указателя мыши
на гиперссылку. В этом примере код Script
расположен в теле программы.

<Html>

<Head>
<Title> Задача
2- ссылка</Title> </Head>

<Body>

Наведите
на эту ссылку указатель мыши</a>

sub
link_onmouseover

status
=»Home page!!!»

end
sub

</script>

</Body>

</Html>

1.1 Процедуры

Чаще код обработчика
события записывается в теле процедуры.

Процедура это
общее название функций или подпрограмм.
Имеет синтаксис:

sub
name_событие ……. end
sub.

name — это имя
процедуры.

событие — то, что
может «случиться» в окне броузера.

«onclick» означает,
что процедура выполнится, при нажатии
на кнопку, предварительно заданную на
форме.

Событие
onclick
возникает при щелчке по компоненту.

Пример № 3

Создадим форму,
на которой расположены два текстовых
окна и кнопка. При нажатии на кнопку
содержимое первого окна копируется во
второе окно.

<Html>

<Head>
<Title>
Задача 3 Копирование</Title>
</Head>

<Body>

<FORM NAME=forma>

<INPUT TYPE=»button»
NAME=»knopka»

VALUE=»Скопировать»
OnClick=copyfun()>

</FORM>

sub copyfun

dim copytext

copytext=document.forma.text1.value

document.forma.text2.value=copytext

end sub

</SCRIPT>

</Body>

</Html>

1.2.
Обращение к содержимому компонентов

Синтаксис операторов
указывающих как «добраться» до
данных в поле ввода:

x
= top.имя_фрейма.document.имя_формы.имя_объекта_text_box.value

1.3.
Вызов сценариев VBscript.

Веб-страница с
активным содержимым, всегда делится
как бы на две части: Первая,
это html код самой страницы содержащий
необходимые элементы управления (ссылки,
кнопки, формы для ввода информации и
т.д.), и Вторая,
сценарии на скрипте, которые начинают
работать при различных событиях
происходящих с элементами управления.
Это можно назвать главной отличительной
особенностью программ для Web-страниц,
от обычных исполняемых приложений.

Основные приемы
вызова сценариев, или процедур.

Сценарий
вызываемый неявно:

Пример
№ 4.

<html>

<head>

<Title>
Задача
4 Привет</Title>

Sub
but_onclick

Alert «Привет
пиплы:)»

End
sub

</script>

</head>

<body>

<form>

</form>

</body>

</html>

Это самый простой
метод. Указываем имя оператором name=»имя»
в теге характеризующим элемент управления
(but),
это же «имя» пишем в вызываемой
процедуре и через знак подчеркивания
пишем событие, которое должно произойти
для исполнения сценария (but_onclick).

Выполните этот
пример.

Вызов
сценария, определяемый в элементе
управления:

Пример
№5

<html>

<head>

<Title>
Задача
5 Привет</Title>

Sub
scenariy

Alert «Привет
пиплы:)»

End
sub

</script>

</head>

<body>

<form>

</form>

</body>

</html>

Обработчик
события определяется в дескрипторе
компонента.

Вызов
из другой процедуры:

Пример
№ 6

<html>

<head><Title>
Задача
6 Привет</Title>

Sub
but_onclick

Call butalert(«Привет
пиплы«)

End
Sub

Sub
butalert(a)

Alert a

End
Sub

</script>

</head>

<body>

<form>

</form>

</body>

</html>

Выполните
этот пример.

Все способы, кроме
автоматического вызова сценария, чисто
визуально будут выглядеть так:

Sub
but2_onclick

Alert
«Привет
пиплы:)»

End
sub

</script>

<form>

</form>

В каком месте
документа лучше размешать код сценария?
В любом месте документа и в неограниченном
количестве. Определения процедур
рекомендуется размещать в разделе
<HEAD>, хотя это и не обязательно.
Подобная практика улучшает чтение кода
сценария, позволяя избегать поиска
процедуры по всему документу. Более
того, при интерпретации браузером
документа раздел <HEAD> интерпретируется
до начала обработки тела документа,
следовательно, все процедуры будут
размещены в памяти до того, как в документе
встретится их вызов.

1.4. Выполнение
общих примеров

Пример №7

Разработаем
Web-страницу,
которая реализует игру «Угадай число».
Поставим задачу, написать программу,
которая бы случайным образом загадывала
число от 1 до 100, и предлагала Вам его
угадать. При неправильном предположении,
программа должна выводить сообщение о
том, больше загаданное число или меньше.
Ведется подсчет попыток. В случае победы
выводится поздравление.

<html>

<Head>

<title>
Угадай
число</title>

dim
a,
p,
v ‘
определяем переменные

sub
begin_onclick
‘ процедура срабатывающая при нажатии
(событие onclick)

document.ugadai.chislo.value
=»qqqqqqqq»
‘ кнопки с именем begin

randomize ‘
включение генератора случайных чисел

a=int(rnd(1)*100+1) ‘
присваивание переменной (a) случайного
значения

p = 1 ‘
обнуление счетчика

alert «число
загадано» ‘ вывод сообщения в отдельном
окне

end sub ‘
конец процедуры

sub but_onclick ‘
процедура срабатывающая при нажатии

‘ (событие onclick)
кнопки с именем but

v =
document.ugadai.chislo.value ‘ переменной (v)
присваивается значение

‘ содержащееся в
поле ввода формы

‘ путь: документ
(просто эта html страница).

‘ форма с именем
ugadai.

‘ объект- поле для
ввода с именем chislo.

‘ свойство value

v=cint(v) ‘ поскольку
поле для ввода содержит текстовую

‘ информацию, то
переменную (v) надо преобра-

‘ зовать в
целочисленный тип (функция cint)

if a > v then

alert «загаданное
число больше, попробуйте еще»

p = p +
1

end if

if a < v then

alert «загаданное
число меньше, попробуйте еще»

p = p +
1

end if

if a = v then

document.write»<center>Победа
за
«&p&» ходов.</center>»

end if

‘
оператор document.write выводит содержащуюся

‘ в
кавычках информацию в новое окно броузера

‘
как
html код.

end sub

</script>

</head>

<body>

Ваш
вариант:<BR>

</FORM>

</body>

</html>

Пример №8

Разработайте форму
для расчета площади фигур, определяющихся
с помощью компонента «выпадающий
список».

<html>

<head>

<title>Контроль
и обработка формы на клиенте</title>

function calc()

alert «!!!»

dim f, L, h

f =
document.frm.f.selectedIndex

L = document.frm.L.value

h = document.frm.h.value

if is Numeric(L) AND is
Numeric(h) Then

L = ABS(L)

h = ABS(h)

If f = 0 Then

calc = L*h

Else

If f =1 then calc = L*h/2

EndIf

Else

MsgBox «НЕДОПУСТИМЫЕ
ПАРАМЕТРЫ»

EndIf

EndFunction

</SCRIPT>

</HEAD>

<H3>Вычисление
площади фигуры</H3><HR>

<P>Фигура

<OPTION
VALUE=0>прямоугольник

<OPTION
VALUE=1>треугольник

</SELECT>

<P>Ширина <INPUT
TYPE=TEXT NAME=»L» VALUE=10>

<P>Высота <INPUT
TYPE=TEXT NAME=»h» VALUE=20>

<P>Площадь
<INPUT TYPE=TEXT NAME=»S» VALUE=0>

</FORM>

</BODY>

</HTML>

1.5. Самостоятельная
работа

Разработайте
Web-страницу,
которая будет представлять собой
калькулятор.

На форме должны
быть расположены текстовые окна для
ввода исходной информации и окно
результата. Четыре кнопки (+, -, *, /) должны
осуществлять арифметические действия.

Соседние файлы в папке Лабораторные работы

Источник

HTML JavaScript

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

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

Код JavaScript может быть написан либо непосредственно в самом HTML-документе, либо в отдельном файле.

Для записи JavaScript-кода в HTML-документе используется тег <script>. Сценарии часто помещаются внутри элемента <head>. Это гарантирует, что сценарий готов к работе, когда он вызывается. Тем не менее, это не является обязательным требованием, и вы также можете поместить его в элемент <body>, где он также будет прекрасно работать.
Вы также можете указать язык с помощью атрибута type (type=»text/javascript»). Тем не менее, когда вы используете язык JavaScript атрибут type можно опустить, т.к. JavaScript — значение атрибута type по умолчанию.
Синтаксис тега <script> следующий:

<script type="text/javascript">
Код JavaScript
</script>

В следующем примере код JavaScript написан непосредственно в самом HTML-документе. При загрузке страницы данный код сработает и вызовет всплывающее сообщение:

Пример HTML:

Попробуй сам

<script>
alert("Я — скрипт! Я сработал первым.");
</script>

Запуск скрипта

В предыдущем примере скрипт запустился во время загрузки HTML-документа. Но что делать если вы не хотите, чтобы скрипт запускался автоматически? Вы легко можете сделать так, чтобы запуск скрипта осуществлялся только в том случае, если пользователь делает что-то на странице (например, перемещает курсор мыши или кликае ссылку).
Эти действия называются внутренними событиями (события, для краткости). Есть множество предопределенных внутренних событий, которые осуществляют запуск скрипта. Вы можете использовать обработчики событий, чтобы сообщить браузеру, какое событие должно вызвать тот или иной сценарий. События определяются как атрибуты внутри HTML-тега.
Допустим, вы хотите, чтобы появлялось сообщение после того, когда пользователь нажимает кнопку. Вы можете использовать обработчик событий onclick() для выполнения действий. В следующем примере будет отображено окно предупреждения JavaScript, содержащее сообщение:

Пример HTML:

Попробуй сам

<p>Нажмите на кнопку ниже, чтобы заданный скрипт выполнился.</p>
<input type='button' value='Кликни меня' onclick='showMessage()'>
<script>
function showMessage() {
  alert('Вы кликнули по кнопке!')
}
</script>

Подключение внешнего скрипта

Если предполагается использовать один и тот же сценарий на многих веб-страницах, удобно разместить его в отдельном файле и затем сослаться на этот файл. Это целесообразно сделать даже в том случае, если код будет использован только на одной странице. Например, если сценарий слишком большой и громоздкий, то выделение его в отдельный файл облегчает восприятие и отладку кода веб-страницы.
JavaScript-код можно записать в отдельном файле с расширением .js, после чего подключать его к HTML-документу примерно так, как мы делали это с CSS-файлами.
Файл с расширением .js является обычными текстовым файлом, как и другие уже известные нам файлы с расширениями: .css и .html.

Создадим файл script.js и сохраним в нем небольшую функцию, созданную с помощью Javascript:

function Hello() {
    alert("Привет, мир!");
}

Для подключения JS-файлов также используется тег <script>. Однако, в отличие от подключения CSS-файлов, на этот раз следует использовать другой синтаксис:

<script type="text/javascript" src="путь к JS-файлу"></script>

Теперь давайте подключим внешний файл script.js к нашему следующему HTML-документу:

Пример HTML:

Попробуй сам

<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<input type="button" onclick="Hello();" name="ok" value="Кликни меня">
</body>
</html>

Элемент <noscript>

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

Пример HTML:

Попробуй сам

<script>
document.write("Привет, мир!")
</script>
<noscript>
Вы видите это сообщение, потому что Ваш браузер не поддерживает JavaScript.
</noscript>

Посмотрите несколько примеров того, что может делать JavaScript:

JavaScript может менять HTML контент:

Попробуй сам

<script>
function Hello() { 
    document.getElementById("demo").innerHTML = "Привет, мир!";
}
</script>

JavaScript может менять значение HTML атрибута:

Попробуй сам

<script>
function dancer() { 
    document.getElementById("image").src = "picture.gif";
}
</script>

JavaScript может менять стили:

Попробуй сам

<script>
function setColor() {
  document.getElementById("demo").style.backgroundColor = "red";  
}
</script>

JavaScript может менять шрифты:

Попробуй сам

<script>
function setFont() {
  document.getElementById("demo").style.fontSize = "20px";  
}
</script>

Задачи

Замена контента

Используя JavaScript замените текст внутри абзаца фразой «Привет, JavaScript!». Замена контента должна произойти при загрузке страницы.

Подсказка: Используйте метод document.getElementById(), чтобы найти элемент <p> с нужным id.
Затем добавьте свойство innerHTML, чтобы изменить текст.
Задача HTML:

Посмотреть решение »
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="demo">Этот текст будет заменен.</p>
<script>
// Пишите код здесь
</script> 
</body>
</html>
```

Добавление фона

Используя JavaScript добавьте зеленый фон («green») к элементу <div>.

Подсказка: Используйте метод document.getElementById(), чтобы найти элемент <div> с нужным id.
Затем используйте свойство style.backgroundColor, чтобы добавить цвет фона.
Задача HTML:

Посмотреть решение »
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="demo" style="height:100px; width:100px;"></div>
<script>
// Пишите код здесь
</script> 
</body>
</html>
```

Изменение размера шрифта

Используя JavaScript увеличте размер шрифта текста «Я люблю JavaScript!» до 45 пикселей.

Подсказка: Используйте метод document.getElementById(), чтобы найти элемент <p> с нужным id.
Затем используйте свойство style.fontSize, чтобы изменить размер шрифта.
Задача HTML:

Посмотреть решение »
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="demo">Я люблю JavaScript!</p>
<script>
// Пишите код здесь
</script> 
</body>
</html>
```

Замена изображения

Используя JavaScript сделайте так, чтобы при клике по кнопке вместо изображения auto.jpg появилось изображение camel.jpg.

Подсказка: Используйте метод document.getElementById(), чтобы найти элемент <img> с нужным id.
Затем используйте свойство src, чтобы указать путь к картинке.
Задача HTML:

Посмотреть решение »
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
function func() {
// Пишите код здесь
}
</script> 
<img id="image" src="images/auto.jpg">
<p><button type="button" onclick="func()">Кликни меня!</button></p>
</body>
</html>
```

Источник

18 Сценарии (скрипты)

18.1 Введение

18.2 Дизайн документов для ПА, поддерживающих скрипты

18.2.1 Элемент SCRIPT

18.2.2 Установка языка скриптов

Язык сценариев по умолчанию

Локальное объявление языка скриптов

Ссылки на элементы HTML из скрипта

18.2.3 Внутренние события

18.2.4 Динамическое изменение документов

18.3 Дизайн документов для ПА, не поддерживающих сценарии

18.3.1 Элемент NOSCRIPT

18.3.2 Скрытие данных скрипта от ПА

Введение

Дизайн документов для ПА, поддерживающих скрипты

Элемент SCRIPT

Установка языка скриптов

Язык сценариев по умолчанию

Локальное объявление языка скриптов

Ссылки на элементы HTML из скрипта

Лабораторная работа № 4

Разработка и использование сценариев в языке HTML

1. Язык сценариев VBScript.

1.1 Процедуры

1.3. Вызов сценариев VBscript.

Сценарий вызываемый неявно:

Пример № 4.

Вызов сценария, определяемый в элементе управления:

Пример №5

Вызов из другой процедуры:

Пример № 6

HTML JavaScript

Пример HTML:

Запуск скрипта

Пример HTML:

Подключение внешнего скрипта

Пример HTML:

Элемент <noscript>

Пример HTML:

JavaScript может менять HTML контент:

JavaScript может менять значение HTML атрибута:

JavaScript может менять стили:

JavaScript может менять шрифты:

Задачи

Замена контента

Задача HTML:

Добавление фона

Задача HTML:

Изменение размера шрифта

Задача HTML:

Замена изображения

Задача HTML:

18.2 Дизайн документов для ПА,
поддерживающих скрипты

18.2.1 Элемент `SCRIPT`

Язык сценариев по
умолчанию

Локальное объявление
языка скриптов

Ссылки на
элементы HTML из скрипта

18.2.4 Динамическое изменение
документов

18.3 Дизайн документов
для ПА, не поддерживающих сценарии

18.3.1 Элемент `NOSCRIPT`

18.3.2 Скрытие данных скрипта от
ПА

Лабораторная
работа № 4

Разработка
и использование сценариев в языке HTML

1. Язык сценариев
VBScript.

1.3.
Вызов сценариев VBscript.

Сценарий
вызываемый неявно:

Пример
№ 4.

Вызов
сценария, определяемый в элементе
управления:

Пример
№5

Вызов
из другой процедуры:

Пример
№ 6