к банкам данных Интернет   к оглавлению   к алгоритмизации и языкам   к высокоуровневым языкам   к визуальным средам

Создание сценариев в Navigator, Seamonkey и др. подобных браузерах

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

Чтобы запускать скрипты, написанные на языке JavaScript вам понадобится браузер, способный работать с JavaScript - например Netscape Navigator или Microsoft Internet Explorer (MSIE). С тех пор, как оба этих браузера стали широко распространеными, множество людей получили возможность работать со скриптами, написанными на языке JavaScript. Несомненно, это важный аргумент в пользу выбора языка JavaScript, как средства улучшения ваших Web-страниц. Перед изучением языка JavaScript вы должны познакомиться с основами другого языка - HTML. При этом, возможно, Вы обнаружите, что много хороших средств диалога можно создать, пользуясь лишь командами HTML.

Скрипт-программа размещается непосредственно на HTML странице, как правило внутри тега HTML файла.Она загружается в браузер вместе с файлом.

А именно JavaScript может быть внедрен в HTML документе двумя способами:

Тег SCRIPT

Сценарий, внедренный в web-страничу,использующий тег SCRIPT имеет следующий формат: 
<SCRIPT>
   JavaScript statements...
</SCRIPT>
Необязательный атрибут LANGUAGE определяет язык создания сценария следующим образом: 
<SCRIPT LANGUAGE="JavaScript">
   JavaScript statements...
</SCRIPT>
В документе HMTL теги <SCRIPT>, и закрывающий тег </SCRIPT> могут содержать любое количество утверждений JavaScript. Чтобы наглядно увидить как пишутся скрипты на языке JavaScript рассмотрим простой пример скрипт-программы расположенной на сторанице HTML: 

<html>
  <head><title>Скрипт-программа</title>
   <script language="JavaScript">
    <!Здесь располагаются строки скрипт-программы!>
   </script>
  <head> 
 <body onload="scroll_start();"onunload="scroll_stop();">
   <!А здесь распологаются теги HTML страницы!>
 </body>
</html>

В этом примере внутри тега <BODY> указано событие ONLOAD, по которому скрипт-программа запускается сразу после загрузки. Событиями также могут являться щелчком или перемещение указателя мышки.

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

 
<!-- Begin to hide script contents from old browsers.
// End the hiding here. -->

Определение и запрос функций

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

<HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Windows-1251"> <META HTTP-EQUIV="Translator" CONTENT="Promt98 TranslationSystem"> <SCRIPT LANGUAGE="JavaScript"> <!-- to hide script contents from old browsers function square(i) { document.write("Запрос был ", i ," В функции.","&lt;BR&gt;") return i * i } document.write("Функция возвратила",square(5),".") // end hiding contents from old browsers --> </SCRIPT> </HEAD> <BODY> <BR> Документ готов. </BODY>

Тег HTML

Вы должны определить функции на странице в теги HTML документа. Так как HTML грузится сначала, что гарантирует функции загрузиться прежде, чем пользователь вызовет функцию.
Пример скрипта с двумя функциями:

<HEAD> <SCRIPT> <!--- hide script from old browsers function bar() { document.write("<HR ALIGN='center' 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>

Кавычки

Использeйте оденочные ковычки ('), чтобы разграничить литералы ряда так, чтобы скрипты могли отличать литералы от атрибутов, расположенные в двойных кавычках. В предыдущем примере, функция содержит литерал 'center' внутри атрибута, находящийся в двойных кавычках. Рассмотрим другой пример: <INPUT TYPE="button" VALUE="Press Me" onClick="myfunc('astring')">

Создание скриптов обработчиков событий

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

<TAG eventHandler="JavaScript Code"> Где TAG - это тег HTML, и eventHandler - имя обработчика результата.
Например вы создали функцию JavaScript, и назвали ее compute. Вы можете заставить Навигатор выполнять эту функцию, когда пользователь нажимает на кнопку,в которой к onClick приписан обработчик результата кнопки: <INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">

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

Вообще, это - хорошая идея определить функцию для ваших обработчиков результата потому что:

В этом примере используется this.form, чтобы обратиться к текущей форме. Ключевое слово обращается к текущему объекту - в вышеупомянутом примере, объекту кнопки. Затем конструкция this.form обращается к форме, содержащей кнопку. Там же, onClick обработчик результата - запрос к функции compute(), с this.form, текущей формой, как параметр функции.

События обращаются к тегам HTML следующим образом:

Если события обращаются к тегам HTML, то для этого вы можете определять обработчик событий. Вообще, обработчик событий имеет имя события, прещедствующее "on". Например, обработчик результата для результата Focus - onFocus.

Много объектов также имеют методы, которые подражают событиям. Например, кнопка имеет метод щелчка, который подражает нажимаемой кнопке. Заметьте: методы подражаемые событиям не вызывают обработчика событий. Так, например, метод щелчка не вызывает обработчика результата onClick. Однако, Вы можете всегда вызывать обработчик результата (например, Вы можете вызывать onClick явно в сценарие).

Метод Происходит когда ... Обработчик Результата
Blur Пользователь удаляет строку фокус из элемента формы OnBlur
click Пользователь нажимает на элемент формы или link OnClick
change Пользователь изменяет значение text, textarea, или select элемента OnChange
Focus Пользователь передает фокус указанному элементу формы OnFocus
load Пользователь загружает страницу в Navigator OnLoad
Mouseover Происходит, когда пользователь помещает указатель мышки над гиперссылкой OnMouseOver
Select Пользователь выделяет область ввода указанного элемента формы OnSelect
Submit Пользователь подчиняет форму OnSubmit
Unload Пользователь выходит из страницы OnUnload

Приведем сценарий "калькулятор" с формой и атрибутом обработчика результата.

<HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251"> <META HTTP-EQUIV="Translator" CONTENT="Promt98 Translation System"> <SCRIPT LANGUAGE="JavaScript"> function compute(form) { if (confirm("Вы уверены?")) form.result.value = eval(form.expr.value) else alert("Please come back again.") } </SCRIPT> </HEAD> <BODY> <FORM> Введите выражение: <INPUT TYPE="text" NAME="expr" SIZE=15 > <INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)"> <BR> Результат: <INPUT TYPE="text" NAME="result" SIZE=15 > <BR> </FORM> </BODY>

Сценарий с формой и атрибутом обработчика результата внутри тега BODY.

<HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251"> <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("Попробуйте еще, пожайлуста.") return false } } var val = parseInt(str, 10) if ((val < min) || (val > max)) { alert("Введите число от 1 до 10.") return false } return true } function thanks() { alert("Спасибо.") } // end hiding from old browsers --> </SCRIPT> </HEAD> <BODY> <FORM NAME="ex5"> Пожалуйста введите маленькое число: <INPUT NAME="num" onChange="if (!checkNum(this.value, 1, 10)) {this.focus();this.select();} else {thanks()}"> </FORM> </BODY>

Советы и методы

Этот раздел описывает различные полезные методы создания сценария.

Модифицирование Страниц

Результаты JavaScript в Navigator вызываются из вершины загруженной страницы. Если вы хотите что - нибудь форматировать,то вы не можете изменить это без перезагрузки страницы. В настоящее время, Вы не можете модернизировать частную часть страницы без модифицирования всей страницы. Хотя, вы можете модернизировать "sub-window" (незначительную часть окна) в фрейме отдельно.

Печать

Вы не можете в настоящее время напечатать вывод, созданный с JavaScript. Например, если у вас есть следующее в странице:

<P> This is some text. <SCRIPT> document.write("<P>And some generated text") </SCRIPT> И вы напечатали его, вы получите только "This is some text", даже если вы видели бы обе экранные линии.

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

Убедитесь, что бы чередовали двойные котировки с одиночными ковычками. Так как обработчики событий в HTML должны быть расположены в кавычках, вы должны использовать одиночные ковычки, чтобы разграничить аргументы. Например

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

В качестве альтернативы, вы можете выйте из ковычек, предшествуя им наклонной чертой влево (\).

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

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

Создание Массивов

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

JavaScript не имеет явный тип данных массива, но из-за близкой связи между массивами и объектами свойств (смотрите Объектная Модель JavaScript). Вы можете определять тип объекта массива, следующим образом: 

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

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

Вы можете создавать массив вызывая new с именем массива, определяя число элементов, которые имеет. Например: 

 emp = new MakeArray(20);

Здесь создается массив, с именем emp с 20 элементами, и элементы инициализируется к нолю.

Начальная загрузка Массива

Вы можете заполнять массив, просто присваивая значения к ее элементам. Например: 

 
emp[1] = "Casey Jones"
emp[2] = "Phil Lesh"
emp[3] = "August West"
И так далее.

Вы можете также создавать массивы объектов. Например, пусть вы определяете тип объекта, именованный Employees, следующим образом: 

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

Затем следующие утверждения определяет массив этих объектов: 

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")

Затем Вы можете легко показывать объекты в этом массиве, используя функцию show_props (определенную в разделе Объектная Модель JavaScript) следующим образом: 

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

к банкам данных Интернет   к оглавлению   к алгоритмизации и языкам   к высокоуровневым языкам   к визуальным средам
Знаете ли Вы, что релятивизм (СТО и ОТО) не является истинной наукой? - Истинная наука обязательно опирается на причинность и законы природы, данные нам в физических явлениях (фактах). В отличие от этого СТО и ОТО построены на аксиоматических постулатах, то есть принципиально недоказуемых догматах, в которые обязаны верить последователи этих учений. То есть релятивизм есть форма религии, культа, раздуваемого политической машиной мифического авторитета Эйнштейна и верных его последователей, возводимых в ранг святых от релятивистской физики. Подробнее читайте в FAQ по эфирной физике.

Последнее обновление: четверг 25 апреля 2024 г.
Bourabai Research Institution home page

Bourabai Research - Технологии XXI века Bourabai Research Institution БОРОВСКОЕ ИССЛЕДОВАТЕЛЬСКОЕ УЧРЕЖДЕНИЕ - Технологии XXI века