2. Использование JavaScript в HTML

     Конструкции языка JavaScript могут включаться в HTML документы двумя способами:
       - как отмеченные тегом <SCRIPT> операторы и функции,
       - как обработчики событий (event handlers), используя стандартные HTML теги.

2.1.SCRIPT теги:

     Операторы языка (скрипты) с тегами SCRIPT используют формат:

<SCRIPT>

Операторы JavaScript ...

</SCRIPT>

     Дополнительный аттрибут LANGUAGE, определяющий язык программирования скрипта задается как:

<SCRIPT LANGUAGE="JavaScript"> или <SCRIPT LANGUAGE="LiveScript">

Операторы JavaScript ...

</SCRIPT>

     Контейнер <SCRIPT> может включать произвольное число JavaScript операторов.

Пример 1. Простая скрипт-программа.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
document.write("Hello net.")
</SCRIPT>
</HEAD>
<BODY>
That's all, folks.
</BODY>
</HTML>

     При выполнении скрипт-программы на экран будет выдано:

Hello net. That's all folks.

2.2. Скрытое кодирование

     Скрипт-программы могут быть размещены в HTML документе внутри поля комментария. Этот прием используется для предотвращения интерпретации текста скрипта устаревшими WWW интерпретаторами (браузерами). Такие скрипты заключаются тегами комментария:

<!-- Begin to hide script contents from old browsers.

// End the hiding here. -->

2.3. Определение и вызов функций

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

Пример 2. Скрипт функции и комментарий.

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- to hide script contents from old browsers
  function square( i ) {
   document.write("The call passed ", i ," to the function.","<BR>")
   return i * i
   }
   document.write("The function returned ",square(5),".")
// end hiding contents from old browsers -->
</SCRIPT>
</HEAD>
<BODY>
<BR>
All done.
</BODY>

Скрипт-программа в вышеуказанном примере в результате выполнения выдает на экран:

The call passed 5 to the function.

The function returned 25.

All done.

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

Пример 3. Скрипт-программа с двумя функциями.

<HTML>
<HEAD>
<SCRIPT>
<!--- hide script from old browsers
function bar() {
   document.write("<HR ALIGN='left' WIDTH=25%>")
}
function output(head, level, string) {
   document.write("<H" + level + ">" + head + "</H" + level + "><P>" + string)
}
// end hiding from old browsers -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
<!--- hide script from old browsers
document.write(bar(),output("Make Me Big",3,"Make me ordinary."))
// end hiding from old browsers -->
</SCRIPT>
<P>
Thanks.
</BODY>
</HTML>

Результат выполнения скрипта:

Make Me Big

Make Me ordinary.

Thanks.

2.4. Кавычки.

     Одиночные кавычки (') используются для выделения текстовых фрагментов (литералов) внутри текстовых строк типа string , заданных двойными кавычками ("). В вышеприведенном примере функция bar () содержит литерал 'left' внутри литерального параметра, заданного двойными кавычками.

Еще один пример на эту тему:

<INPUT TYPE="button" VALUE="Press Me" onClick="myfunc('astring')">

2.5. Обработчики событий (Event Handlers) в скрипт-программе.

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

     Программы обработчиков событий пишутся на языке JavaScript и включаются в HTML документы в стандартных HTML тегах.

Общий формат синтаксиса:

<TAG eventHandler="JavaScript Code">

где:

TAG - стандартный HTML тег,

eventHandler - имя обработчика событий ,

JavaScript Code - текст программы обработчика событий.

Пример:

<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">

     Можно задавать произвольное число операторов языка в двойных кавычках в поле JavaScript Code. Если включается более одного оператора, они должны быть отделены символом (;).

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

     Приведенный выше пример является частью HTML конструкции form, которая передается в качестве параметра функции compute(), реализующей алгоритм данного обработчика событий.

Тип события задан именем его обработчика onClick, и момент которого наступает при нажатии левой кнопки мыши на указанном поле типа "button" в конструкции form. Параметр this.form передает функции имя текущей form.

     События в JavaScript имеют свои названия и определяют тип выполненного действия пользова-теля и применяются к различным конструкциям языка HTML, главным образом к form:

Focus, Blur - фокусировка и снятие фокусировки указателя мыши с определенных полей,

Change - изменение поля,

Click - нажатие клавиши маши,

Select - выбор поля,

MouseOver - подведение указателя мыши к полю,

Load, Unload - открытие (загрузка) и закрытие страницы документа HTML.

События применимы к различным полям документа HTML:

События Focus, Blur, Change применятся к полям form: text, textareas, selections.

Событие Click применяется к полям form: buttons, radio, checkboxes, submit, reset и к гиперссылкам ( links).

Событие Select применяется к полям form: text, textareas.

Событие MouseOver применяется к гиперссылкам (links).

     Каждому событию соответствует имя обработчика данного события; тип и программа обработки события задается пользователем.

Событие

Тип события

Обработчик события

Blur расфокусировка элемента form onBlur
Click нажата клавиша мыши элемента form или гиперссылки onClick
Change изменено поле элемента form onChange

Focus фокусировка элемента поля form onFocus
Load загрузка страниц HTML onLoad
MouseOver подведен указатель мыши к гиперссылке onMouseOver                
Select выбран элемент типа input в form onSelect
Submit нажата "кнопка" элемента submit в form onSubmit
Unload выход из текущей HTML страницы onUnload

 

Таблица типов обработчиков событий.

Пример 4. Скрипт программа с конструкциями form и обработчиками событий.

<HTML>
<!--------- Start Example Code ---------->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function compute(form) {
   if (confirm("Are you sure?"))
    form.result.value = eval(form.expr.value)
   else
    alert("Please come back again.")
}
</SCRIPT>
</HEAD>

<BODY>
<FORM>
Enter an expression:
<INPUT TYPE="text" NAME="expr" SIZE=15 >
<INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)">
<BR>
Result:
<INPUT TYPE="text" NAME="result" SIZE=15 >
<BR>
</FORM>
</BODY>
<!--------- End of Example Code ---------->
<HTML>

Выдача прграммы :

Enter an expression: ______________ Calculate

Result:_____________________

 

Пример 5. Скрипт-программа с form и обработчиками событий внутри BODY контейнера.

<!--------- Start Example Code ---------->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers
function checkNum(str, min, max) {
   if (str == "") {
    alert("Enter a number in the field, please.")
   return false
  }
  for (var i = 0; i < str.length; i++) {
   var ch = str.substring(i, i + 1)
   if (ch < "0" || ch > "9") {
    alert("Try a number, please.")
   return false
  }
  }

  var val = parseInt(str, 10)
  if ((val < min) || (val > max)) {
   alert("Try a number from 1 to 10.")
  return false
  }
  return true
}
function thanks() {
  alert("Thanks for your input.")
}
// end hiding from old browsers -->
</SCRIPT>
</HEAD>

<BODY>
<FORM NAME="ex5">
Please enter a small number:
<INPUT TYPE="text" NAME="num"
  onChange="if (!checkNum(this.value, 1, 10))
   {this.focus();this.select();} else {thanks()}">
</FORM>
</BODY>
<!--------- End of Example Code ---------->

Результат работы программы:

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

      Thanks for your input

2.6. Некоторые советы и технические приемы.

     JavaScript в Navigator генерирует выдачу на экран "сверху-вниз" при загрузке WEB страницы. Однажды сформатированная выдача не может быть изменена без перезагрузки (reloading) страницы, т.е. нельзя изменить часть страницы без изменения всей страницы. Тем не менее, используя механизм frame, можно изменять содержимое "под-окон".

     Печать.

     В различного рода WEB интерпретаторах имеется возможность распечатки (Print) сформати-рованной WEB страницы. В силу динамичекского характера выдачи на экран информации скрипт-программами, содержимое экрана может не совпадать с распечаткой страницы.

     Пример:

<P>This is some text.

<SCRIPT>document.write("<P>And some generated text")</SCRIPT>

     При распечатке страницы будет выдан лишь текст "This is some text", а на экране - дополнительная выдача: "And some generated text".

     Использование кавычек.

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

<FORM NAME="myform">

<INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!" onClick="window.open('stmtsov.html', 'newWin', 'toolbar=no,directories=no')">

</FORM>

     Существует альтернативный способ задания внутренних кавычек используя escape-операции с символом (\).

     Определение функций.

     Правилом хорошего тона является задание определений функций в контейнере заголовка HEAD, поскольку гарантирует своевременное их формирование в документе и не приведет к ошибкам типа "Undefined function" при вызове их из контейнера <BODY>.

2.7. Массивы в JavaScript.

     Массив - это есть упорядоченная система значений, к которым можно обращаться по имени с индексом. Например, элементами массива с именем emp являются emp[1], emp[2] и так далее.

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

     Можно определить массив как объект языка JavaScript :

   function MakeArray(n) {
    this.length = n;
    for (var i = 1; i <= n; i++) {
    this[i] = 0 }
    return this
   }

     В этом задании объекта первым его свойством является lenght (или элемент с индексом 0), задающим число элементов в массиве, остальные свойства объекта имеют свой номер (1 и больше) и инициализированы численным значением 0.

     Используя это определение объекта можно создавать конкретные массивы:

     emp = new MakeArray(20);

     Этим примером создан массив под названием emp из 20 элементов с нулевыми числовыми значениями.

     Заполнение массива.

     Заполнить массив можно присваивая значения его элементам:

       emp[1] = "Casey Jones"

       emp[2] = "Phil Lesh"

       emp[3] = "August West"

     и так далее.

     Массивы объектов.

     Используя несложные вышеописанные приемы можно создавать массивы объектов. Например, создать объект с типом Employee (служащие) с свойствами:

    empno - табельный номер служащего,

    name - имя,

    dept - отдел.

      function Employee(num, name, depart) {
        this.empno = num;
        this.name = name;
        this.dept = depart;
      }

     Следующие операторы образуют массив таких объектов, используя вышеприведенное описание объекта типа массив MakeArray():

       emp = new MakeArray(3)

       emp[1] = new Employee(1, "Casey Jones", "Engineering")

       emp[2] = new Employee(2, "Phil Lesh", "Music")

       emp[3] = new Employee(3, "August West", "Admin")

     Пример использования массива объектов:

for (var n =1; n <= 3; n++) {
   document.write(show_props(emp[n], "emp") + "<BR>");
}

     Текст функции show_props() будет приведен в следующих разделах данного описания.


BACK.gifВернуться к оглавлению