Создаём свою функцию
Эта статья призвана дать практический опыт на основе теоретических знаний приведённых в предыдущей статье. Попутно мы также объясним некоторые важные детали работы с функциями.
| Предпосылки: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, первые шаги в JavaScript, Функции — блоки кода используемые многократно. |
|---|---|
| Задача: | Научить создавать пользовательской функции и объяснить ещё несколько полезных деталей. |
Активное обучение: построение функции
Пользовательская функция, которую мы собираемся построить, будет называться displayMessage() . Она отобразит настраиваемое окно сообщения на веб-странице и будет действовать как настраиваемая замена встроенной в браузер функции alert(). Мы видели эту функцию раньше. Введите следующую команду в консоли JavaScript браузера на любой странице:
alert("This is a message");
Функция alert принимает один аргумент — строку, которая отображается в окне сообщения на веб-странице Попробуйте изменить строку, чтобы изменить сообщение.
Функция alert ограничена: вы можете изменить текст сообщения, но не получится изменить его стиль, например, цвет, значок или что-то ещё. Создадим сообщение, более интересное по стилю.
Примечание: Этот пример будет работать во всех современных браузерах, но стиль может выглядеть немного смешным в более старых браузерах. Мы рекомендуем вам выполнять это упражнение в современном браузере, таком как Firefox, Opera или Chrome.
Основная функция
Для начала давайте соберём основную функцию.
Примечание: Для согласований имён функций нужно следовать тем же правилам, что и правила именования переменных. Отличить имена функций от имён переменных просто: после имён функций указываются круглые скобки, а после имён переменных их нет.
- Откройте файл function-start.html и скопируйте его себе на компьютер. Код HTML в нем предельно прост: body содержит только одну кнопку. Также здесь представлен базовый CSS для создания настраиваемого окна сообщений и пустой элемент для размещения нашего JavaScript.
- Затем добавьте строку внутри элемента :
function displayMessage() >
var html = document.querySelector("html"); var panel = document.createElement("div"); panel.setAttribute("class", "msgBox"); html.appendChild(panel); var msg = document.createElement("p"); msg.textContent = "This is a message box"; panel.appendChild(msg); var closeBtn = document.createElement("button"); closeBtn.textContent = "x"; panel.appendChild(closeBtn); closeBtn.onclick = function () panel.parentNode.removeChild(panel); >;
Рассмотрим этот код по строкам (прим. — в оригинале статьи: «bit by bit»).
var html = document.querySelector("html");
Затем мы используем ещё одну функцию DOM API, называемую Element.setAttribute() , чтобы установить атрибут class на нашей панели со значением msgBox . Это упрощает стилизацию элемента. Если вы посмотрите на CSS на странице, вы увидите, что мы используем селектор класса .msgBox для стилизации окна сообщения и его содержимого.
Наконец, мы вызываем функцию DOM с именем Node.appendChild() в переменной html , которую мы сохранили ранее, которая вкладывает один элемент в другой как его дочерний элемент. Указываем панель как дочерний элемент, который мы хотим вложить внутрь элемента . То есть, когда мы создаём какой-то элемент, он не просто будет отображаться на странице сам по себе, нам нужно указать, куда его поместить.
var panel = document.createElement("div"); panel.setAttribute("class", "msgBox"); html.appendChild(panel);
В следующих двух разделах используются те же функции createElement() и appendChild() , которые мы уже видели, чтобы создать два новых элемента: и , и вставить их на страницу, как дочерних элементов панели . Мы используем свойство Node.textContent , которое представляет текстовое содержимое элемента, для вставки сообщения внутри абзаца и символ «x» внутрь кнопки. Нажатие/активация этой кнопки будет закрывать окно сообщения.
var msg = document.createElement("p"); msg.textContent = "This is a message box"; panel.appendChild(msg); var closeBtn = document.createElement("button"); closeBtn.textContent = "x"; panel.appendChild(closeBtn);
В заключении мы используем обработчик событий GlobalEventHandlers.onclick , чтобы при нажатии кнопки был запущен некоторый код для удаления всей панели со страницы, т.е. для закрытия окна сообщения.
Вкратце, обработчик onclick — это свойство, доступное для кнопки (или, фактически, для любого элемента страницы), которое можно установить в функцию, чтобы указать, какой код следует запускать при нажатии кнопки. Вы узнаете об этом больше в нашей статье о последующих событиях. Мы делаем обработчик onclick равным анонимной функции, которая содержит код, запускаемый при нажатии кнопки. Строка внутри функции использует функцию Node.removeChild() DOM API, чтобы указать, что мы хотим удалить определённый дочерний элемент внутри HTML — в данном случае панель .
.onclick = function () panel.parentNode.removeChild(panel); >;
В принципе, весь этот блок кода генерирует блок HTML, который выглядит так и вставляет его на страницу:
div class="msgBox"> p>This is a message boxp> button>xbutton> div>
Вам не обязательно запоминать сейчас, как работает каждый элемент во всем этом коде. Основная задача — понять структуру и использование функции, при этом мы хотели показать что-то интересное для этого примера.
Вызов функции
Теперь у вас есть определение функции, написанное в вашем элементе , но оно ничего не будет делать в том виде, в каком оно есть.
-
Попробуйте написать следующую строку под своей функцией, чтобы вызвать её:
displayMessage();
var btn = document.querySelector("button");
.onclick = displayMessage;
Возможно, вам интересно, почему мы не включили круглые скобки после имени функции. Это связано с тем, что нам нужно не сразу вызвать функцию, а только после нажатия кнопки. Если вы попытаетесь изменить строку на
.onclick = displayMessage();
сохраните и перезагрузите страницу, вы увидите, что окно сообщения появляется без нажатия кнопки! Скобки в этом контексте иногда называют «оператором вызова функции». Вы используете их только в том случае, если хотите немедленно запустить функцию в текущей области. В этом же отношении код внутри анонимной функции не запускается сразу, так как он находится внутри области функций.
Если вы пробовали последний эксперимент, перед тем, как продолжить, обязательно отмените последнее изменение.
Улучшение функции с параметрами
В нынешнем виде функция по-прежнему не очень полезна — мы не хотим показывать одно и то же сообщение по умолчанию каждый раз. Давайте улучшим нашу функцию, добавив некоторые параметры, позволяющие нам называть её различными вариантами.
-
Прежде всего, обновите первую строку функции:
function displayMessage()
function displayMessage(msgText, msgType)
.textContent = "This is a message box";
.textContent = msgText;
.onclick = displayMessage;
к этому блоку:
.onclick = function () displayMessage("Woo, this is a different message!"); >;
Более сложный параметр
Переход к следующему параметру. Это потребует немного больше работы. Установим его так, чтобы в зависимости от того, какой параметр msgType установлен, функция отображала другой значок и другой цвет фона.
-
Для начала, загрузите значки, необходимые для этого упражнения (warning и chat [тут чёрные иконки на чёрном фоне. тролли на GitHub]) из GitHub. Сохраните их в новой папке icons в том же месте, что и ваш HTML-файл.
Примечание: иконки warning и chat были найдены на iconfinder.com, и разработаны Nazarrudin Ansyari. Спасибо! (Фактические страницы значков были перемещены или удалены.)
width: 200px;
измените на:
width: 242px;
padding-left: 82px; background-position: 25px center; background-repeat: no-repeat;
if (msgType === "warning") msg.style.backgroundImage = "url(icons/warning.png)"; panel.style.backgroundColor = "red"; > else if (msgType === "chat") msg.style.backgroundImage = "url(icons/chat.png)"; panel.style.backgroundColor = "aqua"; > else msg.style.paddingLeft = "20px"; >
displayMessage("Woo, this is a different message!");
к одному из них:
displayMessage("Your inbox is almost full — delete some mails", "warning"); displayMessage("Brian: Hi there, how are you today?", "chat");
Примечание: Если у вас возникли проблемы с запуском примера, не стесняйтесь проверять свой код на готовой версии GitHub (см. также в режиме реального времени) или обратитесь к нам за помощью.
Вывод
В этой статье мы познакомились со всем процессом создания практической пользовательской функции, которую с небольшими доработками можно перенести в реальный проект. В следующей статье мы рассмотрим ещё одну важную концепцию — возвращаемые значения функций.
В этом модуле
- Принятие решений в вашем коде — условные конструкции
- Зацикливание кода
- Функции — Переиспользуемые блоки кода
- Создайте свою собственную функцию
- Возвращаемое значение функции
- Введение в события
- Создание галереи
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Как вызвать функцию js в html
Задача: как сделать так, чтобы при загрузке страницы в браузере запускалась функция JavaScript? Это может понадобиться, например, чтобы заполнить поля ввода формы какими-нибудь значениями. Есть несколько вариантов решения, ниже приведены 2 самых простых, которые я нашел на сайте stackoverflow.com [1].
Вариант 1 больше подходит для вставки в статью Joomla, потому что код запуска функции вставлен прямо в модуль JavaScript, и не требуется менять шаблон для всей страницы.
[Вариант 1. Использование события window.onload]
Test http-equiv="Content-Type" content="text/html; charset=utf-8" /> type="text/javascript"> function codeAddress() < alert('ok'); > window.onload = codeAddress;
[Вариант 2. Использование тега body]
Test http-equiv="Content-Type" content="text/html; charset=utf-8" /> type="text/javascript"> function codeAddress() < alert('ok'); > onload="codeAddress();">
[Ссылки]
1. run function when page is loaded site:stackoverflow.com.
2. onload Event site:w3schools.com.
3. HTML onload Event Attribute site:w3schools.com.
4. Загрузка документа: DOMContentLoaded, load, beforeunload, unload site:learn.javascript.ru.
Вызов функций JavaScript
Код внутри функции JavaScript не выполняется, когда эта функция определяется. Он выполняться только тогда, когда эта функция будет «запущена».
Обычно говорят «вызвать функцию» или «выполнить функцию».
Запуск функции как функции
function myFunction(a, b) < return a * b; >myFunction(10, 2); // вернет 20
Функция в предыдущем примере не принадлежит какому-либо объекту. Однако в JavaScript всегда существует «дефолтный» глобальный объект.
В HTML таким глобальным объектом является HTML страница, таким образом, функция из предыдущего примера «принадлежит» текущей HTML странице.
В браузере объект страницы — это окно браузера или объект window. Так, функция из примера автоматически становится функцией объекта window. Таким образом, myFunction() и window.myFunction() это одна и та же функция:
function myFunction(a, b) < return a * b; >window.myFunction(10, 2); // также вернет 20
Это обычный способ вызывать функции JavaScript. Однако, это не очень хорошая практика. Глобальные переменные, методы или функции могут создавать конфликты имен и приводить к сбоям в глобальном объекте.
Ключевое слово this
В JavaScript ключевое слово this — это объект, который «владеет» текущим кодом.
При использовании в функции значением ключевого слова this является объект, который «владеет» данной функцией.
Обратите внимание, что this — это не переменная, а ключевое слово. Вы не можете изменять его значение.
Глобальный объект
Когда функция вызывается без объекта-владельца, значением ключевого слова this становится глобальный объект.
В браузере глобальный объект — это окно браузера (объект window).
В следующем примере функция возвращает объект window:
var x = myFunction(); // значением x будет объект window function myFunction()
Внимание! Вызов функции как глобальной, устанавливает this на глобальный объект. Использование объекта window в качестве переменной может привести к краху вашей программы.
Вызов функции как метода
В JavaScript вы можете определять функции как методы объектов.
В следующем примере создается объект (myObject) с двумя свойствами (firstName и lastName) и одним методом (fullName):
var myObject = < firstName:"John", lastName: "Doe", fullName: function () < return this.firstName + " " + this.lastName; >> myObject.fullName(); // вернет "John Doe"
Метод fullName — функция. Эта функция принадлежит объекту. Объект myObject — владелец функции fullName.
Ключевое слово this указывает на объект, который «владеет» данным кодом JavaScript. В данном случае значением ключевого слова this является объект myObject:
var myObject = < firstName:"John", lastName: "Doe", fullName: function () < return this; >> myObject.fullName(); // вернет [object Object] (объект-владелец)
Вызов функции как метод объекта устанавливает в качестве значения ключевого слова this сам объект.
Вызов функции как конструктора объекта
Если перед вызовом функции стоит ключевое слово new, то это вызывается конструктор объекта.
Выглядит так, будто вы создаете новую функцию, но так как функции в JavaScript являются объектами, вы на самом деле создаете новый объект:
// Это функция конструктор: function myFunction(arg1, arg2) < this.firstName = arg1; this.lastName = arg2; >// Это создает новый объект var x = new myFunction("John", "Doe"); x.firstName; // вернет "John"
Вызов конструктора создает новый объект. Новый объект наследует свойства и методы своего конструктора.
У ключевого слова this в конструкторе нет значения. Значением ключевого слова this станет новый объект, созданный при вызове функции конструктора.
JavaScript — Урок 5. Параметры функции
На прошлом уроке мы написали сценарий, который вычисляет площадь прямоугольника по введенным пользователем значениям длины и ширины. Также мы написали функцию, которая собственно и производит вычисление. Но что, если у нас будет несколько html-страниц, на которых нужно будет вычислять площадь прямоугольника. Нам придется написать для каждой свою функцию? Если оставить сценарий в том виде, в котором он находится сейчас, то — ДА. Но это, как вы понимаете, не очень удобно.
Разумнее написать один раз функцию и в дальнейшем использовать ее на всех html-страницах. Для этого html-страница должна каким-то образом указать функции, какие именно значения (с какой страницы) брать для вычисления. Вот здесь нам и пригодятся параметры (те, которые указываются в круглых скобках).
Сейчас код нашей формы такой: