Суть примера
★ Переменные
★ Форма
★ элементы формы
★ Функция
★ Объект document
★ Обращение к форме
★ Методы сообщений
★ Запуск программы без создания кнопки
★ Метод addEventListener()
★ Стиль поля ввода
★ Поле ввода без создания формы
★ Одна кнопка на несколько событий
Суть примера
Рассмотрим программу,
(текст приводится ниже), позволяющую осуществить
математическое действие с цифрами, которые задает
пользователь, и получить информацию о результате. В качестве примеров
выбрано простейшее математическое действие - сложение двух чисел.
Сначала
ПОСМОТРИМ
на исходное окно браузера и проследим, как работает
нижеприведенная программа. Если в поле, обозначенное словами "ввести х",
ввести одну цифру, а в поле, обозначенное словами "ввести у", - другую,
а затем нажать кнопку ПУСК, то на экран будет выведен результат действия (сложение).
Теперь приведем текст программы (оставлены коды, составляющие суть программы, коды стиля, в основном, опущены).
<html>
<head>
</head>
<script>
function Show()
{
var x=Number(form1.nam.value)
var y=Number(form1.fam.value)
w=x+y
c="ответ="
alert('Результат:\n'+x+"+"+y+" "+c+w)
}
</script>
<body>
<form name="form1">
<P><input type="text" name="nam" onfocus="this.value=''">Ввести х
<P><input type="text" name="fam" onfocus="this.value=''">Ввести у
<P><input type="button" value="ПУСК" onClick="Show()"></P>
</form>
</body>
</html>
Пример №1 знакомит, как с помощью JavaScript организовать:
1) ввод информаци, на которую хотим получить ответ (в данном случае - это числа),
2) вывод результата (сумма двух чисел)
3) очистка полей ввода
Для этого необходимо кратко рассмотреть следующие понятия:
1) "переменные", 2) "форма", 3) "элементы формы", 4) "функция",
5) "объект документ", 6) "обращение к форме" 7) "методы сообщений".
Переменные
Символы x, y, w, c именуются переменными. Они задаются с помощью символа var: var x, var y, и т.д.
После того, как переменные заданы, обращение к ним происходит без использования символа var.
Переменные, которые появляются в ходе математических действий, также можно записывать без
символа var (в нашем случае - переменная w). Переменная может быть либо числовой, либо
строковой (задается в кавычках).
Форма
Управление скриптом (ввод исходной информации и команды на совершение
определенных действий)
осуществляется с помощью кода, который записывается в HTML-ной части программы. Последний
именуется формой и обозначается как form. Форма является единственным средством, которое
предоставляет пользователю возможность вводить данные в Web-документы без помощи каких-либо
программ.
По терминологии JavaScript форма является объектом, который имеет несколько свойств
(в нашем примере используются свойства: elements, name). Кроме того, в нашей форме содержится
определенный метод (method) приведения в действия скрипта (в нашем случае это click- нажатие
на кнопку), а также обработчик событий (onClick), который и запускает выполнение сценария,
записанного в скрипте. Буквально onClick - это то, что происходит после нажатия на кнопку.
Содержимое формы заключается между тэгами
<form> и </form>. В рассматриваемом программе
документ содержит одну форму, которая открывается тэгом <form name="form1">.
<form>
<form name="form1">
<input type="text" name="nam" >Ввести х
<P><input type="text" name="fam">Ввести у
<P><input type="button" value="Show"
onClick="Show()"></P>
</form>
В нашем случае form1 является именем формы. Если в документе несколько форм или
он содержит несколько скриптов с формами - каждая форма должна иметь свое уникальное имя.
Элементы формы
Поля ввода и кнопки являются элементами управления формы. Они также
являются объектами. Элемент (Element) является дочерним объектом по
отношению к объекту форма (Form). Элементы формы задаются с помощью тэга <input>.
Элемент
input создает однострочное поле и всегда используется совместно
с атрибутом type (тип элемента: текстовый - text или кнопка - button) и атрибутом name (его имя).
У нас два поля. Одно из них (для ввода х) имеет имя nam, другое (для ввода у) - fam.
Для задания имени формы используется произвольный набор символов. Эти имена используются
при обращении к форме внутри скрипта.
После закрытия тэга input можно разместить пояснительный текст (Ввести х и Ввести у).
Наименование кнопки содержится в ее атрибуте value (Show-имя).
<input type="text" name="nam" >Ввести х
<P><input type="text" name="fam">Ввести у
<P><input type="button" value="Show"
После нажатия на кнопку срабатывает обработчик событий. Событие - это действие,
которое пользователь совершает с формой. Обработчик событий запускает выполнение
сценария, записанного в скрипте. В нашей программе использован обработчик событий
onClick - событие, которое происходит после щелчка по кнопке. Само событие указывается
в виде атрибута обработчика событий. В нашем случае событие - это функция, записанная в
скрипте. Для нашей формы такой функцией является Show( ): onClick="Show( )". Заметим, что после
знака равенства кавычки можно было бы и не ставить. Но это касается только того случая,
когда запись значения атрибута не содержит пробела. Если же значение атрибута содержит
пробелы, кавычки обязательны.
Функция
Функция - это подпрограмма, содержащая один или несколько
операторов. Функция задается только один раз, но в программе ее саму и результат
ее вычислений можно вызывать многократно. Функции могут передаваться аргументы,
или параметры, определяющие значение или значения, для которых она должна выполнять
вычисления; также функция может возвращать значение, соответствующее результату
этих вычислений.
Обозначается функция как
function F(v){s}.
То, что относится к функции, помещается между фигурными скобками
{...}
и называется телом функции (s). v - параметр функции. Его может не быть, и тогда
скобки остаются пустыми. Вызов функции осуществляется либо в самом скрипте,
либо в форме с помощью обработчика событий. Именно так в нашем примере вызывается функция
Show( ).
Объект document.
При обращении к форме (чуть ниже) мы встречаемся с понятием "документ".
В понятие
document входит содержимое текущего гипертекстового документа, расположенное
между тэгами <body>.....</body>. Элементы этого содержимого именуются свойствами документа.
Свойствами документа являются, в частности, цвет фона (bgcolor), формы.
Одно из свойств объекта document - forms (не нужно путать с form). Это свойство
подразумевает массив form, ибо контейнеров <form>.....</form> в документе может быть несколько.
Массив начинается с нулевого элемента.
К документу можно применять методы: clear ( ), close ( ), open ( ), write ( )
и использовать обработчики событий: onLoad (при загрузке, т.е. при открытии окна)
и unLoad (при разгрузке, т.е. при закрытии окна).
Обращение к форме
Для ввода исходной информации, для выполнения определенных действий с введенными
данными, для вывода полученных результатов мы должны уметь обратиться к форме. Когда
происходит "обращение к форме"? Тогда, когда мы хотим записать код переменной [числовой или
строковой (смысловой)], которая содержится в поле ввода. Это можно осуществить двумя
способами.
В первом способе обращения к форме используется код с именем формы (form1)
var x=Number(form1.nam.value)
var y=Number(form1.fam.value)
При этом присутствие document в записи кода не обязательно.
Во втором способе используется код:
var x=Number(document.forms[0].nam.value)
var y=Number(document.forms[0].fam.value)
Этот способ применяется том случае, если наш документ содержит несколько форм. Тогда они
образуют массив форм, в котором первая считается нулевой, вторая - первой и т.д. Запись
forms[0] обозначает нулевой компонент массива, т.е. первую форму. Как и в первом способе,
код должен содержать имена полей (nam и fam). Если к формам обращаться через
var x=Number(document.forms[i].nam.value),
то i надо последовательно менять на 0, 1, 2 и т.д.
Символ value -это свойство формы, в котором хранится значение поля ввода или вывода.
Это значение может быть либо числовым (и это отражено в характеристике переменных x и y
словом Number), либо смысловым (совокупность определенных символов, в том числе обычное
слово, как в строковой переменной).
Если числовая переменная берется не из формы, то при ее задании (например, var t)
слово Number указывать не нужно. Но если числовая переменная берется из формы, то исключить
Number и value при ее описание нельзя, иначе программа работать не будет. Если при
задании числовых переменных, взятых из формы, опустить Number, они будут восприняты как
строковые переменные, и вместо их сложения мы получим в ответе "приставление" одного
числа к другому.
Очистка поля ввода будет осуществляться автоматически (при клике курсора в начале
поля), если в коде тэга input поместить onfocus="this.value=''"
Методы сообщений
Так по терминологии JavaScript именуются методы вывода информации,
после завершения операций, записанных в скрипте. В приведенной выше программе
задействован самый простой метод.
Метод
alert.
Метод alert() выводит на экран модальное окно с сообщением. Термин
"модальное окно" означает, что выполнение сценария и дальнейшее взаимодействие со
страницей приостанавливается до тех пор, пока не закроется это окно. А закрывается
оно после нажатия кнопки OK для продолжения работы. Это простейший метод вывода информации,
с помощью которого последняя появляется в маленьком окошке (правда, его размер зависит от
объема содержащейся в нем информации).
В нашей программе код вывода информации по alert таков
alert('Результат:\n'+x+"+"+y+" "+c+w)
Разберем, что записано внутри скобок после alert, учитывая, что между кавычками должны
быть перечислены только те символы, которые обладают свойствами строковых переменных.
Слово результат и символ переноса строки \n не относятся к переменным,
поэтому должны быть преобразованы в строковые переменные. Для этого мы заключаем их в
кавычки. Далее мы хотим вывести переменные x (первое слагаемое), значок плюс,
переменную y (второе слагаемое), сделать пробел и вывести переменные c (слово 'ответ')
и w (результат сложения).
Что касается x, у и w, то они являются числовыми переменными, и их мы записываем
без кавычек, поскольку alert сам преобразует числовые переменные в строковые.
Переменная с является строковой и также в кавычках не нуждается. А вот
пробел - это не переменная, поэтому заключаем его в кавычки, тем самым превращая его в
строковую переменную. Чтобы все переменные появились на экране браузера, их следует
соединить знаком сложения.
В окошко alert можно помещать ЛЮБОЕ количество текста (для этого используется
код перевода строки \n). К сожалению, мы не можем повлиять на шрифт в окошке alert,
поэтому необходимо кратко остановиться на еще двух способах вывода результата.
Метод document.write и свойство innerHTML. Помимо метода alert, есть еще два метода вывода, которые позволяют сделать
выводимое сообщение более ярким и насыщенным по цвету и размеру шрифта. Это метод
document.write и свойство innerHTML.
Для того, чтобы осуществить вывод по методу document.write в тексте нашей
программы строку
alert('Результат:\n'+x+"+"+y+" "+c+w)
следует заменить на строки
xow = window.open("","","width=420,height=120,left=300, top=150");
d="<span style='font-size:30;color:blue'>(вывод с помощью метода document.write)</span>"
dv=" " //пробел
pl="+" //значок плюс
zz=dv+c+dv+"="+dv+w+dv+d
im="<span style='font-size:40;color:green'>"+x+pl+y+zz+"</span>"
xow.document.write(im)
В скобках заметим, что первая строка соответствует открытию нового окна, которое
обозначается как переменная xow.
Для того, чтобы осуществить вывод по свойству innerHTML в тексте нашей
программы строку
alert('Результат:\n'+x+"+"+y+" "+c+w)
следует заменить на строки
xow = window.open("","","width=300,height=300,left=300, top=150,");
d1="<span style='font-size:30;color:red'>(вывод с помощью свойства innerHTML)</span>"
zz1=dv+c+dv+"="+dv+w+dv+d1
s7="<span style='font-size:30;color:f0f'>"+x+pl+y+zz1+"</span>"
xow.document.body.innerHTML=s7
ПОСМОТРИТЕ вывод результата в новом окне с помощью метода document.write и свойства
inerHTML.
Подробно с методом
document.write и свойством
innerHTML можно ознакомиться, перейдя
по указанным ссылкам.
Запуск программы без создания кнопки
Любой скрипт можно запустить различными способами. Чаще всего
его запускают с помощью обработчика, код которого записывают в body (нажатием
кнопки).Есть способы, которые позволяют запустить скрипт другими способами (без
создания кнопки обработчика). Как запускают документ? Обычно файл документа находи-
тся в какой-то папке. Мы раскрываем папку и дважды щелкаем по файлу. Как правило,
файл содержит скрипт, а в нем, по крайней мере одну функцию. Чтобы начала
выполняться функция, создают кнопку обработчика и однократным щелчком запускают
выполнение этой функции.
Как обойтись без кнопки обработчика, чтобы выполнение функции началось
сразу после загрузки файла? Для этого нужно между закрывающей функцию
скобкой } и кодом закрытия скрипта вставить некий код, замещающий кнопку
обработчика. Самые простые коды таковы. Пусть,например, в скрипте имеется
функция WWR(). Тогда код ее запуска:
<script>
function WWR(){
коды функции
}
WWR()
</script>
Вместо имени функции между закрывающей функцию скобкой }
и кодом закрытия скрипта можно поставить код onLoad=WWR():
<script>
function WWR(){
коды функции
}
onLoad=WWR()
</script>
Метод addEventListener()
Далее перейдем к обработчику, который нуждается в предварительных пояснениях.
С помощью метода addEventListener() можно задать обработчик, который не появляется
в окне браузера, но реагирует на тип события, выполняемым пользователем. В общем
виде код записи обработчика(в скрипте после закрытия функции) имеет вид:
addEventListener('event', function(event) и содержит два параметра.
Первый параметр метода указывает на тип события, которое совершил пользователь. Это
своеобразный сигнал, который должен быть услышан и на него должна быть определенная
реакция. Эту реакцию расшифровывает второй параметр: в ответ на сигнал чаще всего
запускается выполнение функции. В записи function(event): function - это и есть
второй параметр. Стоящее в скобках event в коде функции не присутствует, а лишь
подчеркивает, что функция привязывается к первому параметру - типу события.
Для обозначения типа события используется символ event и термин "событие",
под которым подразумевают способ воздействия пользователя на обработчик
с помощью мыши. Примерами действия пользователя могут служить: keydown – нажатие
клавиши; click – щелчок мыши по кнопке или окну браузера; moseover -
наведение курсора и др. Действие пользователя должно быть указано в коде
метода addEventListener() в качестве первого параметра. В этом коде также должно
быть указано событие, которое происходит в ответ на действие пользователя (т.е.
при срабатывании обработчика), например, запуск функции.
Итак, метод addEventListener первым параметром принимает название события,
а вторым - функцию, которую нужно привязать к этому событию. При этом имя события
пишется без 'on': 'click' вместо 'onclick', 'mouseover' вместо 'onmouseover' и так
далее. Имя функции (второй параметр) пишется без кавычек и без круглых скобок.
Например, если тип события - щелчок по фону, а реакция на этот щелчок - запуск
функции WWR(), то следует использовать код:
addEventListener("click", WWR)
Если метод привязывается к какому-либо объекту, то первым указывается объект и
через точку добавляется код метода. Например,
document.getElementById("iden1").addEventListener ("click", WWR);
function WWR() {
document.getElementById("iden2") innerHTML = "Hello World"; }
Целевым объектом может быть: Element, Document или Window.
Приведем примеры запуска документа без создания кнопки с использованием
метода addEventListener. Применительно к событию click cхематично кодировка
выглядит так.
<script>
function WW0(){
Ваша функция
}
addEventListener("click", WW0)
</script>
Нажмите кнопку, чтобы посмотреть.
Если вы хотите запускать скрипт двойным щелчком, то первым параметром метода
addEventListener будет не click, а dblclick.
Нажмите кнопку, чтобы посмотреть.
Можно запустить скрипт нажатием клавиши. В этом случае первым параметром
метода addEventListener будет keydown.
Нажмите кнопку, чтобы посмотреть.
Если вы хотите запускать скрипт заданной клавишей,(например, ENTER)
то в функцию нужно ввести параметр и условие выбора клавиши (код 13),
<script>
function WW(a) {
a = event;
if (a.keyCode == 13)
{
Ваша функция
}
}
addEventListener("keydown", WW0);
Обратите внимание на то,что в коде
addEventListener("keydown", WW0)
параметр а не указывается.
Стиль поля ввода
Дизайн поля ввода можно оформить с помощью CSS.Приведем кодировку документа
представленного ниже (оформление и работа поля ввода).
<head>
<style>
#but
{
background-color: yellow;
height:50px;
font-size:25;
color:red;
border:2px solid blue
}
#ram
{
padding:20px;
line-height: 200px;
border: 6px solid red;
border-radius: 8px;
width: 200px;
height: 250px;
font-size:70;
font-family: Arial;
font-weight: bold;
color:black;
letter-spacing: 0.2em;
background-color: cyan;
}
#inp
{
background-color: yellow;
height:50px;
width:300;
font-size:25;
color:blue;
border:2px solid red;
}
#tex
{
font-size:30px;
color:blue;
}
#itak
{
border:6px solid red;
border-radius: 10px;
text-align:center;
padding:2px;
width: 80px;
background-color: cyan;
margin-top:40px;
margin-left:5
}
</style>
<p id="mym"><p id="my"></p>
<script>
function Show()
{
document.getElementById('tex').style.display='none'
document.getElementById('itak').style.display='none'
document.getElementById('inp').style.display='none'
s2="<span style='font-size:35;color:green'<Вы ввели в поле ввода</span>"
mym.innerHTML=s2
var x=document.form1.nam.value
wx="<span id='ram'>"+x+"</span>"
my.innerHTML=wx
}
</script>
<body>
<form name="form1">
<input id='inp' type="text" name="nam" autocomplete="off">
<p id='tex'>ВВЕСТИ в поле ввода буквы или цифры</p>
<div id="itak"><input type="button" style='font-size:30px; color:black;
border:0; background-color: transparent' value=OK onClick="Show()">
</div>
<button id='but' onClick='window.location.reload()'>СБРОС</button>
</form>
Посмотрите, как это выглядит
Поле ввода без создания формы (простой поисковик)
Предположим, что вы хотите создать поисковик для базы данных, например,
для таблиц свойств веществ. После того, как вы записали формулу вещества
в поле ввода и нажали <ОК>, вы получаете ответ на вопрос: имеется ли в базе данных
интересующее вас вещество, и в каких таблицах оно присутствует.
ПОСМОТРИТЕ работу такого поисковика.
Приведем скрипт, особенностью которого является создание поля ввода БЕЗ создания формы.
Поле ввода создается кодом <input type="text" name="ask" id="ask">, а обращение к нему
происходит через идентификатор: var x=ask.value
<script>
function WP()
{
var x=ask.value
var fn=x
fn=fn.toLowerCase()
s=new Array(25);sa=85; f=new Array(85); fa=85; t=new Array(85); ta=85
s[0]="пустой";f[0]="0"; t[0]="1,2,3,4,5,6,7,8,9,10"
s[1]="ar"; f[1]= "<font size=7>Ar</font>"; t[1]="0,1,2,4,5,10,15,19"
.........................................................................
s[85]="hbr"; f[85]= "HBr"; t[85]=" 0,1,2,3,4,5,6,8,9,10,11,13,14,15,17,18"
for (var i=0; i<=sa; i++)
{
if (fn==s[i])
{
s=f[i]
tt=" Yes \n\Такое вещество \n\ в базе данных
\n\ \n\ ПРИСУТСТВУЕТ \n\ \n\таблицы (tables) № :\n" //строку не разрывать
alert(tt+t[i])
location.reload()
break
}
if (i>sa-1)
{
rr="\n\n\ Нет \n\nТакого вещества \n\ в базе данных \n\n\ Н Е Т"
alert(rr)
location.reload()
}
}
}
</script>
<body>
<font size=5 color="#ff00ff"><BR><BR>ВВЕДИТЕ</font><font
size=5 color="ff0000"> формулу вещества<BR><BR></font>
<input type="text" name="ask" id="ask">
<button OnClick=WP()>OK</button>
Одна кнопка на несколько событий
В принципе, на одну кнопку обработчика можно подвесить большое количество
событий. Ниже приводится скрипт, который содержит одну кнопку, запускающую
следующие события: 1)изменение цвета кнопки, 2)изменение цвета фона,
3)открытие нового окна, 4)закрытие нового окна, 5)вывод текста, 6)скрытие текста,
7)вывод сообщения alert(), 8)закрытие исходного окна.
<body>
<script>
function WW()
{
a="<span style='font-size:50;color:red'><BR>вывод текста с помощью функции WW()</span>"
setTimeout("document.body.innerHTML =a",2000)
setTimeout("document.body.innerHTML=''",4000)
}
function NN()
{
var w = "<p align = left>вывод текста в новом окне с помощью функции NN()</p>";
d=window.open("","","width=170,height=160,left=580, top=460")
d.document.write(w.fontsize (5).fontcolor('blue'))
f="<body bgcolor='cyan'>"
d.document.write(f);
setTimeout("d.document.bgColor='yellow'",4800)
}
</script>
<button style='width:100; height:45; border-color:red ;border-style: solid;
border-width: 4px; font-weight:bold;font-size:30px;color:blue' onClick=
style.background='#ff0000';setTimeout("document.bgColor='#00ff99'",1000);WW();NN();
setTimeout("d.window.resizeBy(420,150)",6000);setTimeout("d.close()",8000);
setTimeout("alert('Возврат')",8500);setTimeout("window.close()",9000)>ПУСК</button>
Оглавление (простые скрипты для основных приложений JavaScript)
