Наука + Бизнес = $$$

Карта Сайта

Четверг, 25.04.2024, 13:23
Приветствуем Вас Гость
Главное Меню
Помощь Сайту
Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:

Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139

Урок №7: функции в JavaScript

Функции

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

Поэтому функции относятся к фундаментальным конструкциям в JavaScript. Функцией называется группа связанных между собой операторов JavaScript, перед которыми стоит цель, выполнять определенные задачи.


Синтаксис функции

Синтаксис стандартной функции выглядит примерно так:

function name_function(параметры, аргументы)
{ инструкции, операторы JavaScript }

Рассмотрим подробнее составляющие функции:

  • function – важное ключевое слово JavaScript, которое объявляет функцию.
  • name_function – название функции, необходимо задавать уникальные названия, (допустимые символы: цифры, латинские буквы, подчеркивание _ и не должно начинаться с цифр.)
  • параметры, аргументы – функция использует аргументы при вычислении. Даже если нет необходимости использовать аргументы, скобки необходимо указывать всегда. Если функция имеет несколько аргументов, их необходимо задавать через запятую. Довольно часто в качестве аргументов можно увидеть переменные.
  • инструкции, операторы JavaScript – тело функции или блок кода. Этот блок используется при каждом обращении к функции

В HTML функция должна заключаться между парными тегами script. Функция может быть расположена в любом месте веб-страницы, но предпочтительнее располагать функции в контейнере Head.


Примеры функций

Рассмотрим пример простейшей функции, сначала создадим функцию:

function messageWindow() {
alert('Данный текст был выведен на страницу с помощью JavaScript!');
}

Теперь создадим кнопку, в параметрах которой укажем событие, которое будет запускать нашу функцию:

<input type='button' value='Попробуйте' onclick='messageWindow()' >

В данном случае использовано событие onclick, т.е кликнув по кнопке "Попробуйте" активируется функция messageWindow, в которой в свою очередь прописан alert, благодаря которому выводится сообщение в всплывающем окне.

Событие можно прикрепить к любому объекту, необязательно к кнопке. Например зададим эту же функцию, только к блоку div'у.

<div style="border:2px dashed red" onClick="messageWindow();">Попробуйте</div>

Попробуйте

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

function umnogenie(){
var a=document.formax.p1.value;
var b=document.formax.p2.value;
var x=a*b;
document.formax.rezultat.value=x;

Функция есть, теперь осталось создать форму и подключить к ней нашу функцию:

<form name="formax">
Первое число: <input type="text" name="p1" size="5">
Второе число: <input type="text" name="p2" size="5">
<input type="button" name="button" value="Умножить" onClick="umnogenie();">
Результат: <input type="text" name="rezultat" size="5">
</form>

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

Первое число:
Второе число:

Результат:

На следующем уроке перейдем к рассмотрению событий в JavaScript: События и их обработчики


Форма входа
Поиск по сайту
Полезные Сайты
Счетчики
Счетчик PR-CY.Rank
Подписка на обновления
Ваш e-mail: *
Ваше имя: *
Контакты
PhantomX5 © 2014-2017Пишем нам: PhantomX5@mail.ru