Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

С большей частью существенной теории, рассмотренной в предыдущей статье, в этой статье представлен практический опыт. Здесь вы получите некоторую практику, создающую свою собственную пользовательскую функцию. По пути мы также объясним некоторые полезные детали работы с функциями.

Предпосылки: Basic computer literacy, a basic understanding of HTML and CSS, JavaScript first steps, Functions — reusable blocks of code.
Задача: Предоставить некоторую практику в создании пользовательской функции и объяснить еще несколько полезных связанных деталей.

Активное обучение: построим функцию

Пользовательская функция, которую мы собираемся построить, будет называться displayMessage(). Он отобразит окно пользовательских сообщений на веб-странице и будет действовать как индивидуальная замена встроенной функции alert(). Мы это видели раньше, но давайте просто обновим наши воспоминания. Введите следующую команду в консоли JavaScript браузера на любой странице:

alert('This is a message');

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

Функция alert ограничена: вы можете изменить это сообщение, но вы не можете легко изменить что-либо еще, например, цвет, значок или что-то еще. Мы построим тот, который окажется более увлекательным.

Примечание: Этот пример должен хорошо работать во всех современных браузерах, но стиль может выглядеть немного смешным более старых браузерах. Мы рекомендуем вам выполнять это упражнение в современном браузере, таком как Firefox, Opera или Chrome.

Основная функция

Для начала давайте соединим основную функцию.

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

  1. Начните с доступа к файлу function-start.html и создайте локальную копию. Вы увидите, что HTML прост - тело содержит только одну кнопку. Мы также предоставили некоторый базовый CSS для создания настраиваемого окна сообщений и пустой элемент <script> для размещения нашего JavaScript.
  2. Затем добавьте следующее внутри элемента <script>:
    function displayMessage() {
     
    }
    Мы начинаем с function ключевого слова, что означает, что мы определяем функцию. За этим следует имя, которое мы хотим дать нашей функции, набор круглых скобок и набор фигурных скобок. Любые параметры, которые мы хотим отдать нашей функции, входят в круглые скобки, а код, который запускается при вызове функции, находится внутри фигурных скобок.
  3. Наконец, добавьте следующий код внутри фигурных скобок:
    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);
    }

Это довольно много кода, чтобы пройти, поэтому мы пройдемся по нему пополам.

В первой строке используется функция DOM API, называемая document.querySelector (), чтобы выбрать элемент <html> и сохранить ссылку на него в переменной html, поэтому мы сможем сделать что-то к нему позже:

var html = document.querySelector('html');

В следующем разделе используется другая функция DOM API, называемая Document.createElement (), чтобы создать элемент <div> и сохранить ссылку на него в переменной, называемой panel. Этот элемент будет внешним контейнером нашего окна сообщений.

Затем мы используем еще одну функцию DOM API, называемую Element.setAttribute (), чтобы установить атрибут class на нашей панели со значением msgBox. Это упрощает стиль элемента - если вы посмотрите на CSS на странице, вы увидите, что мы используем селектор классов .msgBox для стилизации окна сообщения и его содержимого.

Наконец, мы называем функцию DOM, называемую Node.appendChild () в переменной html, которую мы сохранили ранее, которая гнездится одним элементом внутри другого в качестве дочернего элемента. Мы указываем панель <div> как дочерний элемент, который мы хотим добавить внутри элемента <html>. Нам нужно сделать это, поскольку созданный нами элемент не будет просто отображаться на странице сам по себе - нам нужно указать, куда его поместить.

var panel = document.createElement('div');
panel.setAttribute('class', 'msgBox');
html.appendChild(panel);

В следующих двух разделах используются те же функции createElement() и appendChild(), которые мы уже видели, чтобы создать два новых элемента - <p> и <button> - и вставьте их на страницу в виде дочерних элементов панели <div>. Мы используем свойство 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 - в этом случае панель <div>.

closeBtn.onclick = function() {
  panel.parentNode.removeChild(panel);
}

В принципе, весь этот блок кода генерирует блок HTML, который выглядит так и вставляет его на страницу:

<div class="msgBox">
  <p>This is a message box</p>
  <button>x</button>
</div>

Это было много кода для работы - не беспокойтесь слишком много, если вы не помните точно, как каждый бит это работает прямо сейчас! Основная часть, на которой мы хотим сосредоточиться, - это структура и использование функции, но мы хотели показать что-то интересное для этого примера.

Вызов функции

Теперь у вас есть определение функции, написанное в вашем элементе <script>, просто отлично, но оно ничего не будет делать, как оно есть.

  1. Попробуйте включить следующую строку под своей функцией, чтобы вызвать ее:
    displayMessage();
    Эта строка вызывает функцию, заставляя ее работать немедленно. Когда вы сохраните код и перезагрузите его в браузере, вы увидите небольшое окно сообщения сразу, только один раз. В конце концов, мы называем это только раз.
  2. Теперь откройте свои инструменты разработчика браузера на странице примера, перейдите в консоль JavaScript и снова введите строку, вы увидите, что она появится снова! Так что это весело - теперь у нас есть функция многократного использования, которую мы можем вызвать в любое время.

    Но мы, вероятно, хотим, чтобы он появился в ответ на действия пользователя и системы. В реальном приложении такое окно сообщения, вероятно, будет вызвано в ответ на доступность новых данных или возникшую ошибку или пользователь, пытающийся удалить свой профиль («вы уверены в этом?») Или добавление пользователя новый контакт и успешная операция ... и т. д.

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

  3. Удалите предыдущую добавленную строку.
  4. Затем мы выберем кнопку и сохраним ссылку на нее в переменной. Добавьте следующую строку в свой код, над определением функции:
    var btn = document.querySelector('button');
  5. Наконец, добавьте следующую строку ниже предыдущей:
    btn.onclick = displayMessage;
    Аналогично нашей строке closeBtn.onclick... внутри функции здесь мы вызываем некоторый код в ответ на нажатие кнопки. Но в этом случае вместо вызова анонимной функции, содержащей некоторый код, мы вызываем наше имя функции напрямую.
  6. Попробуйте сохранить и обновить страницу - теперь вы должны увидеть окно с сообщением, когда вы нажимаете кнопку.

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

btn.onclick = displayMessage();

и сохранение и перезагрузка, вы увидите, что окно сообщения появляется без нажатия кнопки! Скобки в этом контексте иногда называют «оператором вызова функции». Вы используете их только в том случае, если хотите немедленно запустить функцию в текущей области. В этом же отношении код внутри анонимной функции не запускается немедленно, так как он находится внутри области функций.

Если вы пробовали последний эксперимент, перед тем, как продолжить, обязательно отмените последнее изменение.

Улучшение функции с параметрами

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

  1. Прежде всего, обновите первую строку функции:
    function displayMessage() {
    к этому:
    function displayMessage(msgText, msgType) {
    Теперь, когда мы вызываем функцию, мы можем предоставить два значения переменных внутри круглых скобок, чтобы указать сообщение для отображения в поле сообщения, а также тип сообщения.
  2. Чтобы использовать первый параметр, обновите следующую строку внутри своей функции:
    msg.textContent = 'This is a message box';
    to
    msg.textContent = msgText;
  3. И последнее, но не менее важное: теперь вам нужно обновить вызов функции, чтобы включить в него некоторый обновленный текст сообщения. Измените следующую строку:
    btn.onclick = displayMessage;
    к этому блоку:
    btn.onclick = function() {
      displayMessage('Woo, this is a different message!');
    };
    Если мы хотим указать параметры в круглых скобках для вызываемой нами функции, то мы не можем назвать ее напрямую - нам нужно поместить ее в анонимную функцию, чтобы она не находилась в непосредственной области и поэтому не вызывалась немедленно , Теперь он не будет вызываться до нажатия кнопки.
  4. Перезагрузите и попробуйте код еще раз, и вы увидите, что он по-прежнему работает просто отлично, за исключением того, что теперь вы также можете изменять сообщение внутри параметра, чтобы отображать разные сообщения в поле!

Более сложный параметр

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

  1. Прежде всего, загрузите значки, необходимые для этого упражнения (warning and chat) из GitHub. Сохраните их в новой папке с icons в том же месте, что и ваш HTML-файл.
    Note: warning and chat icons found on iconfinder.com, and designed by Nazarrudin Ansyari. Thanks!
  2. Затем найдите CSS внутри вашего HTML-файла. Мы сделаем несколько изменений, чтобы уступить значки. Во-первых, обновите ширину .msgBox:
    width: 200px;
    to
    width: 242px;
  3. Затем добавьте следующие строки внутри правила .msgBox p { ... } :
    padding-left: 82px;
    background-position: 25px center;
    background-repeat: no-repeat;
  4. Теперь нам нужно добавить код в нашу функцию displayMessage(), чтобы обрабатывать отображение значков. Добавьте следующий блок чуть выше закрывающей фигурной скобки (}) вашей функции:
    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';
    }
    Здесь, если параметр msgType установлен как 'warning', отображается значок предупреждения, а цвет фона панели - красный. Если он настроен на 'chat', отображается значок чата, а цвет фона панели - синий. Если параметр msgType не задан вообще (или чем-то другим), тогда в игру вступает в действие else {...} часть кода, а в абзаце просто задается заполнение по умолчанию и нет значка, без набора цветов фоновой панели или. Это обеспечивает состояние по умолчанию, если не указан параметр msgType, что означает, что это необязательный параметр!
  5. Давайте проверим нашу обновленную функцию, попробуем обновить вызов displayMessage():
    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 (см. также его работу в режиме реального времени) или обратитесь за помощью.

Вывод

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

 

In this module

 

Метки документа и участники

Внесли вклад в эту страницу: slychai85
Обновлялась последний раз: slychai85,