Функции
Циклы отвечают, когда работа повторяется. Функции — на другой вопрос: где хранить блок работы, чтобы запускать его по имени? Функция — именованный рецепт. Вы объявляете его один раз. Вызываете, когда нужны эти шаги. Копипаст слабеет; имя остаётся.
Что такое функция?
В JavaScript вы объявляете её ключевым словом function, именем, скобками () и телом в { }. Пока вы не вызовете функцию — имя плюс () — тело молчит. Думайте: «упакуйте шаги, потом нажмите play.»
Части функции
📊 Анатомия функции
| Часть | Роль | Когда уместно |
|---|---|---|
ключевое слово function |
начинает объявление | «сюда идёт именованный рецепт» |
| имя | так вызываете позже | sayHi, showTotal — ясные глаголы помогают |
() после имени |
место вызова / позже входы | пустые () всё равно значит «выполни сейчас» |
тело { } |
шаги при каждом вызове | логи, счёт, обновление страницы |
вызов name() |
запускает тело сейчас | повтор без переписывания тела |
Одно объявление сохраняет рецепт. Вызов выполняет его. Без вызова тело тихое — так и задумано, это не баг языка.
function sayHi() {
console.log("Hi");
}
sayHi();
Сначала объявите, потом вызовите
Первые три строки объявляют sayHi. Последняя вызывает. В консоли должно быть Hi. Без sayHi(); функция есть, но не бежит.
function beep() {
console.log("beep");
}
beep();
beep();
Один корпус — много раз
Одно определение, два вызова — beep печатается дважды. В этом смысл: шаги пишете раз, запускаете, когда история снова просит этот звук. Позже правка тела обновит все места вызова с этим именем.
function showReady() {
console.log("loading");
console.log("ready");
}
showReady();
В теле может быть несколько шагов
При одном вызове обе строки идут по порядку: loading, затем ready. Функция не ограничена одной инструкцией — положите всю мини-задачу в фигурные скобки.
function greetCity() {
let city = "Tehran";
let line = "Hello from " + city;
console.log(line);
}
greetCity();
Локальная работа остаётся в рецепте
city и line живут внутри greetCity. Каждый вызов собирает сообщение и пишет Hello from Tehran. В этом шаблоне имена снаружи не нужны — спусковой крючок это вызов.
function fillOut() {
let box = document.getElementById("out");
box.textContent = "Function ran";
}
fillOut();
Запустить работу для страницы
Как в уроках про DOM: найти элемент, задать textContent. Обернуть в функцию — и кнопка, таймер или скрипт могут вызвать fillOut(), когда страница должна обновиться: одно имя, одна работа.
Показать функцию на странице
Объявите функцию, которая пишет короткую строку в абзац, затем вызовите её из скрипта, чтобы посетитель увидел результат.
<!DOCTYPE html>
<html>
<head>
<title>functions — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
function showMsg() {
let box = document.getElementById("msg");
box.textContent = "Hello from a function";
}
showMsg();
</script>
</body>
</html>
Страница показывает Hello from a function. Тело showMsg записало в DOM; вызов внизу нажал play. Смените строку, обновите страницу, прочитайте новую строку. Дальше — параметры: значения, которые передаёте в скобки при вызове.
Попробуйте сами
- Объявите
function hello(), которая пишет"hello", и вызовите один раз. - Вызовите ту же функцию второй раз без переписывания тела.
- Сделайте функцию, чьё тело пишет два разных слова по порядку.
- Внутри функции соберите строку через
letи выведите её. - Напишите функцию, которая ставит
#outв"ok"(или id из демо). - В HTML-демо смените только текст сообщения, обновите, прочитайте абзац.
Частые ошибки
- Объявить функцию и забыть вызвать с
() - Написать
sayHiбез()— это имя, тело не бежит - Копировать те же строки вместо двух вызовов одной функции
- Класть работу вне
{ }и ждать, что имя функции ею «владеет» - Путать этот урок с параметрами/
return— они позже; здесь объявление + вызов
Кратко
- Функция упаковывает шаги под именем
- Объявляйте:
function name() { … } - Вызывайте:
name(), чтобы тело выполнилось - Одно тело, много вызовов — повторное использование
- В теле могут быть несколько инструкций и локальный
let - Обновления страницы удобно класть в функцию, которую вызываете по нужде
- Дальше: параметры — передавайте значения при вызове
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху