JavaScript - Урок 4. Создание 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-у. Можете щелкнуть и в примере ниже.

 

Щелкни меня

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

 

1. В html-странице мы привязываем к нужному элементу обработчик события (onClick, onMouseUp и т.д.), в качестве значения которого указываем имя функции, которая и должна сработать, когда настанет событие.
2. На странице с расширение.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>

   

В браузере наша страница будет выглядеть так:

Начало формы

Введите длину прямоугольника

Введите ширину прямоугольника

 

Площадь прямоугольника равна

Конец формы

 

Если вы забыли, как задаются элементы форм, то обратитесь к уроку 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. Также добавим команду объявляющую переменные a и b, как целочисленные parseInt().

 

function areaRectangle(){

var a=parseInt(document.forma1.t1.value); var b=parseInt(document.forma1.t2.value);

var s=a*b;

document.forma1.res.value=s;

}

   

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

Проверьте работу нашей html-страницы у себя в браузере. Если вы все сделали правильно, то должно работать также, как в примере ниже:

Начало формы

Введите длину прямоугольника

Введите ширину прямоугольника

 

Площадь прямоугольника равна

Конец формы

⇐ Предыдущая12345678910Следующая ⇒

Поделиться: