Способы вызова функции

Вызов через событие в теге HTML

Самый простой способ запуска функции — записать событие в теге HTML. Это очень наглядный способ, который хорошо подходит для обучения JS, однако использовать его в рабочих проектах не рекомендуется. Данный способ противоречит концепции разделения кода верстки (HTML), оформления (CSS) и действий (JS).

Для применения кода запишите в теге HTML атрибутом следующий код:

1
  <p onclick="f1()">Hello</p>

Данный код, при наступлении события onclick на абзаце, вызывает функцию f1. Обратите внимание, что хотя мы в функцию не передаем никаких параметров, ставить круглые пустые скобочки обязательно!

Обратите внимание, событие записывается с приставкой on!

Пример рабочего события

<p onclick="h1()" id="one">Hello</p>

See the Pen qdaWxM by Alex (@Asmodey) on CodePen.

Задание

Задание 1. Напишите функцию, которая при клике на элементе div будет менять, его цвет на синий. При повторном клике — на зеленый. Вызов функции осуществите в теге div.

Запись элемент-событие в коде JS

Один из самых распространенных способов запуска функции — это запись в формате: . Данный вызов записывается внутри JS кода. Пример:

1
  document.getElementById('one').onclick=f1;

Обратите внимание, что событие записывается через точку, а вызов функции осуществляется без кавычек. Подобная запись события очень распостраненна, и часто применяется в JS. При таком подходе можно отделить HTMl и JS. Пример:

function f1() {
  document.getElementById('one').innerHTML="Привет";
}

document.getElementById('one').onclick=f1;

See the Pen YXGKvM by Alex (@Asmodey) on CodePen.

Одной из главных особенностей такого способа вызова, является то, что внутри функции this указывает на объект по которому произошло событие, в данном случае this указывает на абзац, поэтому код можно сократить до следующего:

function f1() {
  this.innerHTML="Привет";
}

document.getElementById('one').onclick=f1;

See the Pen KpgPBW by Alex (@Asmodey) on CodePen.

При вызове функции как атрибута тега HTML (данный способ описан в первом параграфе), this указывает на объект windows, поэтому данная запись в функции не сработает.

Задание

Задание 2. Модифицируйте скрипт из задания 1. Измените способ вызова функции на запись в JS вида: элемент.событие=функция. Все ссылки на элемент внутри функции замените на this.

Задание 3. Создайте html документ вида:

1
<div id="one">Меню</div><div id="two">Содержимое меню</div>
Скройте содержимое блока #two с помощью CSS. Напишите скрипт, который при наведении курсора мыши на блок #one будет отображать содержимое блока #two. При потере фокуса — скрывать. Способ вызова — как описано в данном параграфе.

Вызов функции из другой функции

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

function f1() {
  f2();
}
function f2(){
document.getElementById('one').innerHTML='Работает';
}

document.getElementById('one').onclick=f1;

See the Pen eNdNMG by Alex (@Asmodey) on CodePen.

В данном примере мы по клику на параграфе вызываем функцию f1, которая, в свою очередь, вызывает функцию f2. Т.е. одни функции можно использовать внутри других. Более того, функции можно объявлять внутри других функций!

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

1
2
3
function f1() {
  f2(); // название функции которую мы хотим вызвать
}

Задание

Задание 4. Создайте в Html параграф текста. Пропишите ему событие onclick которое вызывает функцию f1. Функция f1 должна вызывать функцию f2 которая меняет цвет текста параграфа на оранжевый. Создайте функцию f4, которая при повторном клике изменяет цвет текста на черный.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *