Ввод и вывод информации. Функции JavaScript. Параметры функции.

04.11.2022 14:23

JavaScript обработчики событий

 

    Давайте напишем нашу первую программу. Для этого сделаем исключение и поместим наш javascript-код на html-странице. Итак, откройте (или создайте) html-страницу и поместите в нее следующий код:

 

<html>

  <head>

    <title>Заголовок документа</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script language="javascript">

      document.write("Моя первая страница.");

    </script>

  </head>

  <body>

  </body>

</html>

    

    Откройте эту страницу в браузере, она выглядит так:

    Давайте разберемся как это работает. Браузер читает нашу html-страницу, видит оператор для выполнения document.write("Моя первая страница."); и выполняет его. Рассмотрим из чего состоит сам оператор (инструкция):

    При интерпретации html-страницы браузер создает объекты javascript. Они хранятся в виде иерархической структуры, отражая структуру документа, например:

    На самом верхнем уровне находится объект window, представляющий окно браузера и являющийся "родителем" всех остальных объектов. Расположенные ниже могут иметь свои подчиненные объекты. Так объект document (текущая страница) может иметь дочерний объект form (форма) и т.д.

    Все объекты имеют методы (отделяются от объекта точкой), например:


document.write позволяет писать текст в текущую страницу,
window.open открывает новое окно браузера.

    Также объекты имеют свойства, например:


document.bgcolor содержит значение фонового цвета текущей страницы,
document.title содержит заголовок страницы.

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

    Для этого в тегах элементов страницы введены параметры обработки событий, задающие действия, выполняемые при возникновении события, связанного с элементом. Например:

&lt;div onClick="addText();"&gt;&lt;/div&gt;

    Здесь Click - событие (щелчок по div-у), onClick -  обработчик события, addText() -  имя функции, которая сработает при возникновении этого события (щелчка по div-у).
    Функции мы будем рассматривать в следующем уроке, а сейчас перечислим события, которые поддерживаются javascript. Запоминать их не следует, в дальнейшем можете просто обращаться к этой таблице.

событие

когда происходит

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

Blur

потеря объектом фокуса

onBlur

Change

пользователь изменяет значение элемента

onChange

Click

пользователь щелкает мыщью по объекту

onClick

DblClick

пользователь делает двойной щелчок мышью по объекту

onDblClick

DragDrop

пользователь перетаскивает мышью объект

onDragDrop

Error

возникновение javascript-ошибки

onError

Focus

окно или элемент формы получает фокус

onFocus

KeyDown

пользователь нажимает клавишу клавиатуры

onKeyDown

KeyPress

пользователь удерживает нажатой клавишу клавиатуры

onKeyPress

KeyUp

пользователь отпускает клавишу клавиатуры

onKeyUp

Load

документ загружается в браузер

onLoad

MouseDown

пользователь нажимает кнопку мыши

onMouseDown

MouseOut

указатель мыши выходит за пределы элемента

onMouseOut

MouseOver

указатель мыши помещается над элементом

onMouseOver

MouseUp

пользователь отпускает кнопку мыши

onMouseUp

Move

пользователь перемещает окно

onMove

Reset

пользователь нажимает кнопку "reset" формы

onReset

Resize

пользователь изменяет размеры окна или элемента

onResize

Select

пользователь выбирает элемент формы

onSelect

Submit

пользователь нажимает кнопку "submit" формы

onSubmit

Unload

пользователь закрывает документ

onUnload


    Хорошим стилем программирования является оформление действий, выполняемых при обработке событий, в виде функций.

 

Создание JavaScript-функций

 

    Функция - это именованная последовательность операторов (инструкций). Любая функция имеет следующий синтаксис:
 
function имя (){
оператор;
.......
оператор;
}
 

    Сначала идет ключевое слово function, затем имя функции, затем в круглых скобках перечисляются параметры (если они есть), затем в фигурных скобках перечисляются операторы, т.е. последовательность выполняемых действий. Каждый оператор заканчивается точкой с запятой.

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

 
<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <div onClick="showMessage();">Щелкни меня</div>
  </body>
</html>
    

    Мы указали, что при щелчке пользователя по div-у (т.е. по словам "Щелкни меня") должна быть вызвана функция с именем "showMessage". Теперь на странице script.js надо написать саму функцию "showMessage". Открываем страницу script.js и пишем:

 
function showMessage(){
  alert ("Вы щелкнули по div-у");
}
    

    Наша функция "showMessage" будет выполнять одно действие - отображать окно предупреждений с текстом "Вы щелкнули по div-у". 

    alert - это стандартная функция javascript, которая и выводит окно предупреждений, мы лишь задаем текст для этого окна.

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

    Вернемся к нашему примеру. Откройте вашу html-страницу с помощью браузера и щелкните по div-у. Появится окно с сообщением:  "Вы щелкнули по div-у"  с предложением нажать "Ок".

    Таким образом, мы рассмотрели механизм работы обработки событий:
 

    В html-странице мы привязываем к нужному элементу обработчик события (onClick, onMouseUp и т.д.), в качестве значения которого указываем имя функции, которая и должна сработать, когда настанет событие.

    На странице с расширение .js мы пишем код этой функции, т.е. инструкции, которые должны быть выполнены, если функция инициализирована (к ней обратились).

    Давайте усложним задачу и напишем сценарий, который будет рассчитывать площадь прямоугольника по введенным пользователем длине и ширине. Для этого сначала разместим на html-странице нужные элементы формы:

 
<html>
  <head>
    <title>Расчет площади прямоугольника</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
 
    <form name="forma1">
 
    Введите длину прямоугольника <input type="text" name="t1" size="10"><br><br>
 
    Введите ширину прямоугольника <input type="text" name="t2" size="10"><br><br>
 
    <input type="button" name="button" value="Вычислить"><br><br>
 
    Площадь прямоугольника равна <input type="text" name="res" size="10">
 
    </form>
    
  </body>
</html>
    

 

 

    Если вы забыли, как задаются элементы форм, то обратитесь к лекции по работе с формами.

    Итак, пользователь вводит значения ширины и длины и нажимает на кнопку "Вычислить". После чего, в поле площадь должен появиться результат. Таким образом, событие наступает при нажатии на кнопку "Вычислить", значит именно к ней мы и привяжем обработчик события.     Функцию вычисления площади назовем "areaRectangle":

 
.......
 <input type="button" name="button" value="Вычислить"
                                    onClick="areaRectangle();"><br><br>
.......
 
    

    Теперь пришло время написать саму функцию "areaRectangle". Для этого откроем страницу script.js и напишем заготовку для функции:

 
function areaRectangle(){
}
 
    

    Теперь надо написать тело функции. Для начала объявим три переменные: a - значение длины прямоугольника, b - значение ширины прямоугольника, s - площадь прямоугольника:

 
function areaRectangle(){
  var a;
  var b;
  var s;  
}
    

    Значение (value) a должно браться из текущей страницы (document), из формы с именем "forma1", из текстового поля с именем "t1". Так это и записывается document.forma1.t1.value, т.е. перечисляются через точку имена объектов от родительского до нужного (иерархическую структуру объектов мы обсуждали в предыдущем уроке). Последним указывается необходимое свойство объекта (value).

 
Аналогично и для значения b - document.forma1.t2.value.
 
А наша переменная s - есть произведение a на b. Запишем это в тело функции:
 
function areaRectangle(){
  var a=document.forma1.t1.value;
  var b=document.forma1.t2.value;
  var s=a*b;
}
    

    Осталось только написать инструкцию записи вычисленной площади в текстовое поле с именем "res" нашей формы. Т.е нам надо, чтобы в текщую страницу, в форму с именем "forma1", в текстовое поле с именем "res", в качестве значения (value) было присвоено значение s. Так и запишем:

 
function areaRectangle(){
  var a=document.forma1.t1.value;
  var b=document.forma1.t2.value;
  var s=a*b;
  document.forma1.res.value=s;
}
    

    Иными словами, мы сначала присвоили нашим переменным a и b значения из формы, затем произвели необходимые расчеты, а после этого присвоили некоторому элементу формы полученное значение s. Проверьте работу нашей html-страницы у себя в браузере.

 

Параметры функции

 

    В предыдущей части мы написали сценарий, который вычисляет площадь прямоугольника по введенным пользователем значениям длины и ширины. Также мы написали функцию, которая собственно и производит вычисление. Но что, если у нас будет несколько html-страниц, на которых нужно будет вычислять площадь прямоугольника. Нам придется написать для каждой свою функцию? Если оставить сценарий в том виде, в котором он находится сейчас, то - ДА. Но это, как вы понимаете, не очень удобно.

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

 
Сейчас код нашей формы такой:
 
<html>
  <head>
    <title>javascript параметры</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
 
    <form name="forma1">
 
    Введите длину прямоугольника <input type="text" name="t1" size="10"><br><br>
 
    Введите ширину прямоугольника <input type="text" name="t2" size="10"><br><br>  
    
    <input type="button" name="button" value="Вычислить" onClick="areaRectangle();"><br><br>
 
    Площадь прямоугольника равна <input type="text" name="res" size="10">
 
    </form>
 
  </body>
</html>
    
А код нашей функции следующий:
 
function areaRectangle(){
  var a=document.forma1.t1.value;
  var b=document.forma1.t2.value;
  var s=a*b;
  document.forma1.res.value=s;
}
    
Обратите внимание, в функции мы используем имя формы - forma1, его мы и сделаем параметром. Т.е. перепишем нашу функцию следующим образом:
 
function areaRectangle(obj){
  var a=obj.t1.value;
  var b=obj.t2.value;
  var s=a*b;
  obj.res.value=s;
}
    
Т.е мы указали, что функция должна принять в качестве параметра какой-то объект (obj) и производить все действия с ним. Нам осталось на нашей html-странице указать имя объекта:
 
.......
 <input type="button" name="button" value="Вычислить"
                                    onClick="areaRectangle(forma1);"><br><br>
.......
 
    

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

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

    Итак, сначала на странице script.js напишем код функции, которая будет открывать окно сообщений, назовем ее "message". Как вы помните, вызов окна сообщений осуществляет стандартная функция javascript - alert, а текст сообщений мы будем передавать, как параметр, обозначим его как "m":

 
    function message(m){
    alert (m);
    }
 
Теперь в html-странице напишем код самих квадратиков:
 
    <html>
 
        <head>
            <title>javascript параметры</title>
            <link rel="stylesheet" type="text/css" href="style.css">
            <script type="text/javascript" src="script.js"></script>
        </head>
 
        <body>
            <table><tr>
              <td><div id="red" onClick="message('Вы щелкнули по красному квадратику');"></div></td>
              <td><div id="green" onClick="message('Вы щелкнули по зеленому квадратику');"></div></td>
              <td><div id="blue" onClick="message('Вы щелкнули по синему квадратику');"></div></td>
            </tr></table>
        </body>
 
    </html>
 

    Мы указали, что при щелчке по нашим квадратикам должна срабатывать функция "message", а в качестве параметров указали текст нужных сообщений (они будут подставляться вместо параметра "m" при обращении к функции).

    Осталось только оформить наши квадратики. Для этого на странице style.css напишем стили для них:

 
#red, #green, #blue{
 width:100px;
 height:100px;
 margin:10px;
}
#red{
 background:red;
}
#green{
 background:green;
}
#blue{
 background:blue;
}
 

    Все, осталось только проверить работу сценария в браузере.

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

    Такая конструкция может пригодиться не на одной странице, поэтому нам потребуется два параметра: один с именем объекта (формы), второй - с описанием ягод. Параметры в таком случае записываются через запятую. Итак, наша функция будет выглядеть так:

 
function showDesc(obj, n){
  obj.desc.value=n;
}

    где desc - имя текстового поля для вывода описаний. Эта функция будет срабатывать, когда на название ягоды наведен курсор, но нам понадобится еще одна функция, которая будет очищать текстовое поле, когда курсор выйдет за пределы названия. Назовем ее "delete":

 
function delet(obj){
  obj.desc.value=' ';
}

    где пробел в одинарных кавычках означает пустую строку.

 

    Теперь напишем код самой страницы. Напоминаю, обработчик события, когда указатель мыши помещается над элементом, называется onMouseOver, а обработчика события, когда указатель мыши выходит за пределы элемента - onMouseOut.

 
<html>
  <head>
    <title>javascript параметры</title>
    <link rel="stylesheet" type="text/css" href="style1.css">
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <form name="forma2">
        <textarea name="desc" cols=45 rows=4></textarea>
    </form>
    <ul>
 
        <li onMouseOver="showDesc(forma2,'Малина обыкновенная — кустарник с многолетним корневищем,'+
            ' из которого развиваются двухгодичные надземные стебли высотой до полутора метров.');"
            onMouseOut="delet(forma2);">Малина</li>
            
        <li onMouseOver="showDesc(forma2,'Черника — кустарничек высотой 15—30 см. Ветви отходят'+
            ' от главного стволика под острыми углами.');"
            onMouseOut="delet(forma2);">Черника</li>
 
        <li onMouseOver="showDesc(forma2,'Ежевика — название нескольких видов растений из рода Rubus'+
            ' семейства Розовые.');"
            onMouseOut="delet(forma2);">Ежевика</li>
            
    </ul>
 </body>
</html>
 

    Обратите внимание, текст в параметре заключается в одинарные кавычки, а при переносе строк используется операция конкатенации строк, т.е. каждая часть заключается в одинарные кавычки и эти части соединяются оператором +. У себя вы можете не использовать конкатенацию строк, просто напишите текст в одну строку.

 

Объект math в javascript

 
 

    Как уже было сказано, в javascript определены некоторые стандартные объекты и функции. Сегодня мы рассмотрим объект math и его методы.
    Объект math работает с математическими функциями, а его методы можно использовать для вызова этих функций. Ниже представлены некоторые методы объекта math:

метод описание
abs абсолютное значение
sin, cos, tan тригонометрические функции
log натуральный логарифм
exp экспонента
pow показательная функция
sqrt квадратный корень
min наименьшее значение
max наибольшее значение



    Какие-то методы вы будете использовать часто, какие-то редко, а некоторые вам и вовсе не пригодятся. Рассмотрим пример использования объекта math.
    Предположим мы хотим написать сценарий, который будет вычислять площадь треугольника по трем его сторонам. Для этого нам потребуется использовать формулу Герона:

Для тех, кто давно окончил школу, напоминаю:
S - площадь
a, b, c - длины сторон треугольника
 
Итак, напишем в html-странице код формы:
 
    <html>
        <head>
            <title>math javascript</title>
            <link rel="stylesheet" type="text/css" href="style1.css">
            <script type="text/javascript" src="script.js"></script>
        </head>
        <body>
            <form name="forma3">
                Сторона 1 <input type="text" size="8" maxlength="8" name="st1">
                Сторона 2 <input type="text" size="8" maxlength="8" name="st2">
                Сторона 3 <input type="text" size="8" maxlength="8" name="st3"><br><br>
                <input type="button" value="Вычислить" onClick="areaOfTriangle(forma3);">
                <input type="reset" value="Отменить">
                Результат <input type="text" size="8" maxlength="8" name="res">
            </form>             
        </body>
    </html>
 
Здесь нет ничего нового. Теперь на странице script.js напишем код функции:
 
function areaOfTriangle(obj){
  var a=1*obj.st1.value;
  var b=1*obj.st2.value;
  var c=1*obj.st3.value;
  var p=(a+b+c)/2;  
  var s=Math.sqrt(p*(p-a)*(p-b)*(p-c));
  obj.res.value=s;
}
 

    Здесь мы использовали объект Math и его метод sqrt для извлечения квадратного корня. Выражение, из которого извлекается корень, должно быть взято в скобки.

    Также обратите внимание на первые три строчки функции, они начинаются с 1*, т.е. наши переменные a, b, c мы умножили на единицу. Зачем? Помните, в первом уроке мы говорили о том, что у каждой переменной есть тип, который определяется автоматически. Так как наши переменные приходят из текстового поля, то и тип они имеют string, т.е. они воспринимаются функцией не как числа, а как буквы.

    Если бы мы перемножали эти переменные, то их тип автоматически переопределился бы к number, но мы их складываем, а знак операции + расценивается в данном случае, как конкатенация строк. Чтобы этого не происходило, мы и умножили наши переменные на единицу, преобразовав их таким образом к типу number. Ради эксперимента уберите умножение на единицу в этих трех строках и посмотрите, что "насчитает" сценарий. Затем верните правильный вариант и убедитесь, что все работает правильно, как в примере ниже.

 

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

    Чтобы округлить результат до N знаков после запятой можно воспользоваться методом toFixed объекта Number. Синтаксис записи следующий:

 
(x).toFixed(N)
 
    где x - число, которое надо округлить, а N - число знаков после запятой.
 

Давайте исправим конец нашей функции и округлим результат до 2 знаков после запятой:

 
function areaOfTriangle(obj){
  var a=1*obj.st1.value;
  var b=1*obj.st2.value;
  var c=1*obj.st3.value;
  var p=(a+b+c)/2;
  var s=Math.sqrt(p*(p-a)*(p-b)*(p-c));
  s=s.toFixed(2);
  obj.res.value=s;
}
 
    Вот теперь все стало правильно.
Назад