Меню сайта
Категории раздела
| HTML [44] |
| Visual C++ и MFC [21] |
| c++ [78] |
| php [19] |
| Javascript [15] |
| C# [51] |
| загрузки [0] |
|
XNA
[10]
создание игр с помощью xna
|
Наш опрос
Друзья сайта
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Реклама
| Главная » Статьи » Javascript |
Урок 4
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-у. Можете щелкнуть и в примере ниже. Щелкни меня Таким образом, мы рассмотрели механизм работы обработки событий: В 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> В браузере наша страница будет выглядеть так: Введите длину прямоугольника Введите ширину прямоугольника Площадь прямоугольника равна Если вы забыли, как задаются элементы форм, то обратитесь к уроку 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-страницы у себя в браузере. Если вы все сделали правильно, то должно работать также, как в примере ниже: Введите длину прямоугольника Введите ширину прямоугольника Площадь прямоугольника равна Вот мы и написали наш первый сценарий. Возможно, вам сейчас кажется, что все слишком запутано. Но это только на первый взгляд, просто много новых терминов и понятий сразу. Уже через несколько уроков вы привыкнете мыслить в категориях объектов и функций. | |
| Просмотров: 1593 | Рейтинг: 0.0/0 |
| Всего комментариев: 0 | |
