#10 – Функции в языке JavaScript
Функции в JavaScript выполняют важную роль. Они обеспечивают сокращение кода за счет вынесения его в отдельные места. За урок мы научимся создавать функции и передавать в них значения.
Видеоурок
Функции можно назвать небольшими подпрограммами, куда можно вынести повторяющийся код и обращаться к нему, когда это будет нужно. Функции значительно облегчают построение программ, так как нам не надо копировать однотипный код множество раз, а можно просто воспользоваться одной общей функцией.
Многие путают функции и методы и не понимают отличий между ними. На самом деле отличий нет, так как что методы, что функции являются одним и тем же. Функции что записаны вне классов называют функциями, а функции что записаны внутри классов называются методами.
Точно такая же ситуация обстоит с переменным. В классах переменные называются полями, а вне классов — переменными.
В JS функции создаются при помощи ключевого слова function . Каждая функция может иметь какие-либо параметры или же не иметь их вовсе. Функции способны что-либо возвращать в ходе выполнения кода, если это требуется.
Создание функции
На основе всех данных наша функция будет выглядеть следующим образом:
function test()
Функция выше не принимает никаких параметров и ничего не возвращает. Она просто пишет слово в консоль. Давайте разнообразим функцию и добавим параметр:
function test(word)
Теперь функция принимает параметр, который будет отображен в консоли.
Если функция должна что-либо вернуть, то прописываем тип данных который будет возвращен. Для возвращения данных используем ключевое слово return :
function test(some_number)
Локальные и глобальные переменные
В JavaScript есть несколько полей видимости: локальная и глобальная. Если записать глобальную переменную, то такая переменная будем видна повсюду и с ней можно работать отовсюду в документе. Если записать локальную переменную, то такая переменная будет видна лишь в той области, где она записана.
Для создания глобальной переменной её необходимо прописать вне функции, класса или же объекта. Для создания локальных переменных вам достаточно поместить переменную в функцию. Переменная в функции будет видна лишь внутри блока с функцией и нигде более.
Весь код будет доступен после подписки на проект!3 способа объявить функцию в JavaScript
Функции в JavaScript можно объявить тремя способами: через декларативное объявление, функциональное выражение или с помощью стрелок. Звучит сложно, но на самом деле всё совсем не так.
Декларативное объявление
Для чего использовать: для любой функции, если вы не планируете записывать её в переменную или передавать в качестве аргумента другим функциями.
Синтаксис и пример использования:
function имяФункции(параметры ) < // Тело функции >; // Пример декларативного объявления function greet(name) < console.log("Привет, " + name + "!"); >; Мы сначала указываем ключевое слово function . За ним идёт имя функции — в нашем случае greet . В круглых скобках пишем параметры, если они есть. Если параметров нет, оставляем просто — () . В фигурных скобках содержится код, который будет выполняться при вызове функции.
��️ Тело функции — это код, который выполняется при её вызове.
Плюсы:
- Простой и понятный синтаксис.
- Функцию можно использовать в любом месте в коде, даже до её объявления. Это называется «всплытием функции» (function hoisting).
Минусы:
- Такую функцию нельзя присвоить переменной или передать в качестве аргумента другой функции.
- Функцию можно использовать до её объявления — преимущество легко превращается в недостаток, потому что код сложнее читать и про функцию можно забыть.
Функциональное выражение
Для чего использовать: для функции, которую нужно записать в переменную. А ещё способ полезен, когда функция должна быть доступна только после её объявления.
Синтаксис и пример использования:
const имяПеременной = function(параметры) < // код функции >; // Пример функционального выражения const greet = function(name) < console.log("Привет, " + name + "!"); >; Сначала мы объявляем переменную — у нас это greet . Затем присваиваем ей значение — функцию. Эта функция пишется так же, как и при декларативном объявлении. Но в отличие от него здесь имя функции чаще всего опускается — то есть она является анонимной.
��️ Анонимная функция — это функция без имени.
Плюсы:
- Так как функция присваивается переменной, её легко передавать в другие функции.
- Можно создавать функции, которые используются только внутри определённого контекста.
Минусы:
- Нельзя использовать функцию до её объявления, если она анонимна — а так чаще всего и есть.
Стрелочная функция
Для чего использовать: для любых функций, в которых нет контекста this .
Синтаксис и пример использования:
const имяФункции = (параметры) => < // код функции >; // Пример стрелочной функции const sum = (a, b) => < return a + b; >; Стрелочные функции компактны. У них нет имени и ключевого слова function . Вместо них в круглых скобках сразу же пишутся параметры — (a, b) , за которыми идёт стрелка => , а после неё — фигурные скобки с телом функции.
Стрелочную функцию можно записать ещё короче. Если её тело состоит из одного выражения (действия), фигурные скобки и ключевое слово return не нужны:
// Этот пример. const sum = (a, b) => < return a + b; >; // . можно сократить до одной строки const sum = (a, b) => a + b; // А этот пример сократить нельзя — здесь уже несколько действий const sum = (a, b) => < let c = 0; if (a >b) < c = a + b; >return c; >; Если у функции только один параметр, круглые скобки тоже можно отбросить:
// Этот пример. const square = (a) => < return a * a; >; //. можно сократить до одной строки const square = a => a * 2; Но так лучше не делать — скобки визуально отделяют параметры от тела функции и с ними код читать проще. А ещё теряется единообразие в коде, так как это единственный случай, когда скобки можно раскрыть:
const sum = (a, b) => a + b; const square = a => a * 2; const multiplication = () => 2 * 2; Плюсы:
- Компактный синтаксис.
Минусы:
- Порой из-за сокращения ухудшается читаемость кода.
- Не подходит для использования в качестве методов объектов или конструкторов объектов.
- Нельзя использовать функцию до её объявления.
Что использовать
Всё зависит от ваших задач и стандартов оформления кода на вашей работе. Например, в некоторых компаниях принято писать стрелочные функции вместо стандартных функциональных выражений, а где-то наоборот. Главное, чтобы ваш код был единообразным.
Напоследок сравним все способы, чтобы вы могли выбрать подходящий под ваши задачи.
Время создания
- Декларативное объявление: функция создаётся и доступна в любом месте кода до её объявления.
- Функциональное выражение и стрелочная функция: создаётся в момент выполнения кода. Если вызвать до объявления, появится ошибка.
Присваивание переменной
- Декларативное объявление: функция не присваивается переменной. Её нельзя передать другой функции в качестве аргумента.
- Функциональное выражение и стрелочная функция: создаётся и сразу присваивается переменной. Эту переменную можно использовать, чтобы вызывать функцию или передавать в другие функции.
Видимость
- Декларативное объявление: функция становится видимой внутри текущего и будущих блоков кода (функции, циклы, условные операторы и так далее). Это означает, что функцию можно вызывать из любого места внутри блока.
- Функциональное выражение и стрелочная функция: видимость функции ограничена областью видимости переменной, которой она присвоена. Функцию можно вызывать только после присваивания её переменной.
Материалы по теме
- Типы данных в JavaScript. Инструкция для новичков
- Тернарный оператор в JavaScript
- Введение в колбэк-функции в JavaScript
- Как правильно называть переменные
- 9 книг по JavaScript для начинающих
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
ChatGPT не справляется
Притворитесь нейросетью и решите 101 задачку по JavaScript как можно быстрее.
- 2 ноября 2023
Знакомство с JavaScript
Теперь, когда вы знаете, как создать структуру веб-страницы с помощью HTML и оформить ее стилями с помощью CSS, пришло время оживить её с помощью JavaScript (JS). JavaScript — это мощный язык программирования, который используется для создания интерактивных и динамических веб-сайтов.
Что такое JavaScript?
JavaScript — это язык сценариев, который позволяет вам создавать динамически обновляемый контент, управлять мультимедиа, анимировать изображения и многое другое. Почти все современные веб-сайты используют JavaScript для улучшения пользовательского опыта.
Подключение JavaScript к веб-странице
Вы можете добавить JavaScript в ваш HTML-документ двумя способами:
Встроенный JavaScript: непосредственно в HTML-документ, в тегах :
Внешний JavaScript: подключение внешнего .js файла к HTML-документу:
Основы синтаксиса JavaScript
JavaScript состоит из инструкций, которые выполняются компьютером. Вот пример простого синтаксиса:
var message = "Привет, мир!"; alert(message); Переменные
Переменные в JavaScript — это контейнеры для хранения данных. Вы можете думать о них как о ящиках, на которых есть имена. Переменные объявляются с помощью ключевых слов var , let и const .
var name = "Алиса"; // Старый способ объявления переменной let age = 25; // Современный способ объявления переменной const pi = 3.14; // Константа, значение которой нельзя изменить Функции
Функции — это блоки кода, предназначенные для выполнения конкретной задачи. Они могут принимать параметры и возвращать значение.
function sayHello(name) < alert("Привет, " + name); >sayHello("Мир"); События
События в JavaScript позволяют реагировать на действия пользователя. Например, клик мыши или нажатие клавиши.
document.getElementById("myButton").onclick = function() < alert("Кнопка была нажата!"); >; Условия и циклы
JavaScript также поддерживает условные операторы и циклы для управления потоком выполнения кода.
if (age > 18) < alert("Вы совершеннолетний!"); >else < alert("Вы ещё не совершеннолетний!"); >for (let i = 0; i
Объекты и массивы
Объекты представляют собой коллекции данных, а массивы позволяют хранить упорядоченные коллекции данных.
let person = < name: "Джон", age: 30 >; let numbers = [1, 2, 3, 4, 5]; Отметим, что JavaScript не просто добавляет интерактивность к вашим веб-страницам, он также вносит логику и динамичность в ваш сайт. И вот почему это возможно.
Объекты Document Object Model (DOM)
DOM (объектная модель документа) — описывает структуру документа и позволяет программам изменять структуру, стиль и содержание веб-страниц. JavaScript может использовать DOM для манипуляции элементами и атрибутами.
document.getElementById("demo").innerHTML = "Привет, DOM!"; Обработка событий
События играют ключевую роль в интерактивности веб-сайтов. JavaScript может отслеживать действия пользователя, такие как клики мышью, нажатия клавиш, перемещения мыши и многие другие.
document.getElementById("myButton").addEventListener("click", function() < alert("Кнопка нажата!"); >); JSON (JavaScript Object Notation)
JSON — это формат обмена данными, легко читаемый как людьми, так и машинами. В JavaScript вы можете легко преобразовывать объекты в JSON и обратно.
let jsonObject = JSON.stringify(< name: "Джон", age: 30 >); let jsObject = JSON.parse(jsonObject); Асинхронность
JavaScript часто используется для асинхронных операций, таких как загрузка данных из интернета без перезагрузки страницы. Промисы и асинхронные функции ( async/await ) являются современными способами работы с асинхронным кодом.
fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); Замыкания
Замыкания позволяют функции доступ к переменным из области, в которой она была создана, даже после того как эта область перестала существовать. Это мощная концепция в JavaScript для управления приватностью и состоянием.
function createCounter() < let count = 0; return function() < count += 1; return count; >; > const counter = createCounter(); console.log(counter()); // 1 console.log(counter()); // 2 Современный синтаксис ES6+
Современный JavaScript включает множество улучшений синтаксиса и новых возможностей, таких как стрелочные функции, классы, шаблонные строки и деструктуризация.
// Стрелочная функция const greet = name => `Привет, $!`; // Класс class Person < constructor(name) < this.name = name; >sayHello() < return `Привет, $!`; > > // Деструктуризация const < name, age >= < name: "Джон", age: 30 >; Подводя итог, JavaScript — это только начало вашего путешествия в создание интерактивных веб-сайтов. Продолжайте изучать и экспериментировать, и вскоре вы сможете создавать сложные веб-приложения.
В следующих статьях мы углубимся в различные аспекты JavaScript, включая современный синтаксис ES6+, асинхронное программирование и работу с фреймворками, такими как React или Vue.
- 1 ноября 2023
Событие onclick в JS на примерах
Интерактивность — ключевой компонент любого современного сайта. И одним из наиболее часто используемых событий для создания интерактивности является событие onclick . В этой статье мы подробно разберёмся, что такое событие onclick , как его использовать и приведем примеры применения.
Событие onclick — это событие JavaScript, которое активируется, когда пользователь кликает на определенный элемент страницы. Это может быть кнопка, ссылка, изображение или любой другой элемент, на который можно нажать.
- 30 октября 2023
Как перевернуть сайт. Самая короткая инструкция
Не представляем, зачем это может понадобиться, но не могли пройти мимо.
Никакой магии. Мы вызываем JavaScript-функцию rotateBody() , которая применяет свойство transform с значением rotate(180deg) к элементу . Когда вы нажмете на кнопку «Перевернуть», всё, что находится внутри будет повернуто на 180 градусов (то есть, встанет вниз головой)
function rotateBody() < document.body.style.transform = 'rotate(180deg)'; > Но такой код повернёт страницу только один раз. Если нужно, чтобы она возвращалась обратно при втором клике, усложним код:
let isRotated = false; function rotateBody() < if (isRotated) < document.body.style.transform = 'rotate(0deg)'; document.body.style.direction = "ltr"; >else < document.body.style.transform = 'rotate(180deg)'; document.body.style.direction = "rtl"; >isRotated = !isRotated; > Надеемся, вы прочитали это описание до того, как нажать на кнопку.
- 25 октября 2023
Как узнать геолокацию: Geolocation API
Geolocation API позволяет сайтам запрашивать, а пользователям предоставлять свое местоположение веб-приложениям. Геолокация может использоваться для выбора города в интернет-магазине, отображения пользователя на карте или навигации в ближайший гипермаркет.
Основной метод Geolocation API — getCurrentPosition() , но есть и другие методы и свойства, которые могут пригодиться.
- 16 октября 2023
Что такое localStorage и как им пользоваться
localStorage — это место в браузере пользователя, в котором сайты могут сохранять разные данные. Это как ящик для хранения вещей, которые не исчезнут, даже если вы выключите компьютер или закроете браузер.
До localStorage разработчики часто использовали cookies, но они были не очень удобны: мало места и постоянная передача данных туда-сюда. LocalStorage появился, чтобы сделать процесс более простым и эффективным.
- 12 октября 2023
Случайное число из диапазона
Допустим, вам зачем-то нужно целое случайное число от min до max . Вот сниппет, который поможет:
function getRandomInRange(min, max)
- Math.random () генерирует случайное число между 0 и 1. Например, нам выпало число 0.54 .
- (max — min + 1): определяет количество возможных значений в заданном диапазоне. 10 — 0 + 1 = 11 . Это значит, что у нас есть 11 возможных значений (0, 1, 2, . 10).
- Math.random () * (max — min + 1): умножает случайное число на количество возможных значений: 0.54 * 11 = 5.94 .
- Math.floor (): округляет число вниз до ближайшего целого. Так, Math.floor(5.94) = 5 .
- . + min: смещает диапазон так, чтобы минимальное значение соответствовало min . Но в нашем примере, так как min = 0 , это не изменит результат. Пример: 5 + 0 = 5 .
- Итак, в нашем примере получилось случайное число 5 из диапазона от 0 до 10.
Чтобы протестировать, запустите:
console.log(getRandomInRange(1, 10)); // Тест - 7 сентября 2023
В чём разница между var и let
Если вы недавно пишете на JavaScript, то наверняка задавались вопросом, чем отличаются var и let , и что выбрать в каждом случае. Объясняем.
var и let — это просто два способа объявить переменную. Вот так:
var x = 10; let y = 20; Переменная, объявленная через var , доступна только внутри «своей» функции, или глобально, если она была объявлена вне функции.
function myFunction() < var z = 30; console.log(z); // 30 >myFunction(); console.log(z); // ReferenceError Это может создавать неожиданные ситуации. Допустим, вы создаёте цикл в функции и хотите, чтобы переменная i осталась в этой функции. Если вы используете var , эта переменная «утечёт» за пределы цикла и будет доступна во всей функции.
Переменные, объявленные с помощью let доступны только в пределах блока кода, в котором они были объявлены.
if (true) < let a = 40; console.log(a); // 40 >console.log(a); // ReferenceError В JavaScript блок кода — это участок кода, заключённый в фигурные скобки <> . Это может быть цикл, код в условном операторе или что-нибудь ещё.
if (true) < let blockScoped = "Я виден только здесь"; console.log(blockScoped); // "Я виден только здесь" >// здесь переменная blockScoped недоступна console.log(blockScoped); // ReferenceError Если переменная j объявлена в цикле с let , она останется только в этом цикле, и попытка обратиться к ней за его пределами вызовет ошибку.
- 30 августа 2023
Быстрый гайд по if, else, else if в JavaScript
Допустим, вы собираетесь идти на прогулку. Если на улице солнечно, вы возьмёте с собой солнечные очки.
Это можно описать с помощью оператора if .
let weather = "sunny"; if (weather === "sunny")
А если погода не солнечная, а, скажем, дождливая, вы возьмете зонт.
Этот сценарий можно описать с помощью if-else .
let weather = "rainy"; if (weather === "sunny") < console.log("Возьму солнечные очки"); >else
Условный оператор if-else if-else
Теперь представим, что у вас есть несколько вариантов транспорта для дороги на работу: машина, велосипед, общественный транспорт. Выбор будет зависеть от различных условий, например, погоды и времени суток. Логично, что в дождь безопаснее ехать на автобусе, а в хорошую погоду можно прокатиться на машине или велосипеде, если утро и пробки. То есть схема такая:
И всё это очень легко описывается кодом:
let weather = "sunny"; let time = "morning"; if (weather === "rainy") < // если дождь, то только так console.log("Еду на автобусе"); >else if (time === "morning") < // если не дождь и утро console.log("Еду на велике мимо пробок"); >else < // если второе не дождь и не утро console.log("Еду на машине"); >Ветвление только может показаться сложным, но вообще оно очень логичное, если понять, какие действия после каких условий выполняются. Разберитесь один раз и поймёте на всю жизнь, 100%.
- 30 августа 2023
Как исправить ошибки SyntaxError в JavaScript
Ошибки SyntaxError появляются, если разработчик нарушил правила синтаксиса JavaScript, например, пропустил закрывающую скобку или точку с запятой. Давайте посмотрим, что означает каждая ошибка и в чём может быть проблема.
Создаём свою функцию
Эта статья призвана дать практический опыт на основе теоретических знаний приведённых в предыдущей статье. Попутно мы также объясним некоторые важные детали работы с функциями.
| Предпосылки: | Базовая компьютерная грамотность, базовое понимание 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.
создать функцию добавления элемента на страницу
Необходимо создать функцию добавления элементов на страницу для такого кода:
// var wrapper = document.createElement('div'); // wrapper.classList.add('wrapper'); // var parentWrapper = document.querySelector('body'); // parentWrapper.insertBefore(wrapper, parentWrapper.children[0]); // var header1 = document.createElement('h1'); // header1.classList.add('header1'); // var parentHeader1 = document.querySelector('.wrapper'); // parentHeader1.insertBefore(header1, parentHeader1.children[0]); У меня получилось вот так:
function createElement(tagName, className, parentTagOrClass, varName, parentVarName, childPosition)< window[varName] = document.createElement(tagName); window[varName].classList.add(className); window[parentVarName] = document.querySelector(parentTagOrClass); window[parentVarName].insertBefore(window[varName], window[parentVarName].children[childPosition]); >; createElement('div', 'wrapper', 'body', 'wrapper', 'parentWrapper', 0); createElement('h1', 'header1', '.wrapper', 'header1', 'parentHeader1', 0); Но, как я понимаю, это плохое решение, из-за создания глобальных переменных. Подскажите как сделать правильно?