Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
Советы программисту:
Отношения с заказчиком станут менее формальными, если программа начисления зарплаты вместо 'ИТОГО' будет печатать 'ИГОГО'

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

Разговор подруг:
- Мой муж программист - дебил. Сделали сыну прививки и он написал на ребенке маркером: «Вирусная база обновлена 01.10.12 г.»

  Моя группа в контакте:



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

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

function имя (){
оператор;
.......
оператор;
}

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

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

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

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

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

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

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

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

Щелкни меня

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

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

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

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

<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="cascade.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>

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

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

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



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

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

Теперь пришло время написать саму функцию "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-страницы у себя в браузере. Если вы все сделали правильно, то должно работать также, как в примере ниже:

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

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



Площадь прямоугольника равна
1 2 3 4 5 6 7 8

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Нет комментариев. Вы можете стать первым !

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь