Функция, function, введение
📘
Функции в JavaScript — это фундаментальные строительные блоки, которые позволяют организовывать
код, избегать дублирования и выполнять определенные блоки команд по требованию.
1. Что такое функция?
Вот стоит перед нами задача. После каждого изменения переменной мы хотим сразу показать её значение
с помощью window.alert(...). Но если выводить каждое значение отдельно, то таких вызовов станет
слишком много. В итоге код получится перегруженным и трудным для чтения.
// тому что слева, мы присваиваем то, что справа
var firstNameId = "first-name"
// = это оператор присваивания ... то есть, то что слева (переменная), ей присваивается значения слова
var firsNameEl = document.getElementById(firstNameId)
var lastNameId = "last-name"
var lastNameEl = document.getElementById(lastNameId)
var addressId = "address"
var addressEl = document.getElementById(addressId)
var citiesId = "cities"
var citiesEl = document.getElementById(citiesId)
var hobbiesId = "hobbies"
var hobbiesEl = document.getElementById(hobbiesId)
var avatarWrapperId = "avatar-wrapper"
var avatarWrapperEl = document.getElementById(avatarWrapperId)
var avatarId = "avatar"
var avatarEl = document.getElementById(avatarId)
firsNameEl.value = "Andrey"
window.alert(firsNameEl.value)
window.alert(lastNameEl.value)
window.alert(addressEl.value)
lastNameEl.className = "last-name-input default-input error-input"
window.alert(firsNameEl.value)
window.alert(lastNameEl.value)
window.alert(addressEl.value)
lastNameEl.title = "Wrong last name"
window.alert(firsNameEl.value)
window.alert(lastNameEl.value)
window.alert(addressEl.value)
avatarEl.src =
"http://is1.mzstatic.com/image/thumb/Purple128/v4/a6/05/ca/a605ca8d-ff54-ccf7-76ed-233f4cd5331f/source/175x175bb.jpg"
window.alert(firsNameEl.value)
window.alert(lastNameEl.value)
window.alert(addressEl.value)
avatarEl.title = "I am avatar"
window.alert(firsNameEl.value)
window.alert(lastNameEl.value)
window.alert(addressEl.value)
citiesEl.value = "Minsk2"
window.alert(firsNameEl.value)
window.alert(lastNameEl.value)
window.alert(addressEl.value)
hobbiesEl.value = "I have not interests"
avatarWrapperEl.innerHTML = "<ul id='list'><li>1</li><li>2</li></ul>"
var listId = "list"
var numberList = document.getElementById(listId)
window.alert(numberList.innerHTML)
Чтобы этого избежать, на помощь приходят функции. С их помощью можно один раз описать нужные
действия, а потом вызывать их тогда, когда нужно. Например, мы можем создать функцию alertValues и
запустить её. В этом случае наша новая функция выполнит повторяющийся код и три раза вызовет
window.alert(...).
- По сути,
функция – это "набор каких-то команд", объединенных одним именем, которые выполняются
как единое целое.
- Когда мы видим такие куски команд, которые выполняются как одно целое и состоят из одинаковых
действий, а использовать их приходится часто, самое время задуматься. Нам нужно объединить эти
команды во что? Правильно — в
функцию.
2. Создание функции
Для того чтобы создать функцию нам нужно использовать ключевое слово function и написать структуру
функции
function — ключевое слово, с помощью которого объявляется функция.alertValue — имя функции, то есть как мы её сами назвали.() — круглые скобки нужны, чтобы указать параметры функции. Если оставить их пустыми, то при
вызове функции мы ничего туда не передаём. (Позже мы это разберём подробнее.){ ... } — фигурные скобки, внутри которых находится код. Этот код называют телом функции.
Итак, мы создаём функцию и ниже запускаем её с помощью круглых скобок. Если же мы просто напишем
название функции alertValue без скобок, то функция не запустится, и код, который мы прописали
внутри неё, не выполнится.
// тому что слева, мы присваиваем то, что справа
var firstNameId = "first-name"
// = это оператор присваивания ... то есть, то что слева (переменная), ей присваивается значения слова
var firsNameEl = document.getElementById(firstNameId)
var lastNameId = "last-name"
var lastNameEl = document.getElementById(lastNameId)
var addressId = "address"
var addressEl = document.getElementById(addressId)
var citiesId = "cities"
var citiesEl = document.getElementById(citiesId)
var hobbiesId = "hobbies"
var hobbiesEl = document.getElementById(hobbiesId)
var avatarWrapperId = "avatar-wrapper"
var avatarWrapperEl = document.getElementById(avatarWrapperId)
var avatarId = "avatar"
var avatarEl = document.getElementById(avatarId)
function alertValue() {
console.log("1")
console.log("2")
console.log("3")
}
alertValue()
firsNameEl.value = "Andrey"
window.alert(firsNameEl.value)
window.alert(lastNameEl.value)
window.alert(addressEl.value)
lastNameEl.className = "last-name-input default-input error-input"
window.alert(firsNameEl.value)
window.alert(lastNameEl.value)
window.alert(addressEl.value)
lastNameEl.title = "Wrong last name"
window.alert(firsNameEl.value)
window.alert(lastNameEl.value)
window.alert(addressEl.value)
avatarEl.src =
"http://is1.mzstatic.com/image/thumb/Purple128/v4/a6/05/ca/a605ca8d-ff54-ccf7-76ed-233f4cd5331f/source/175x175bb.jpg"
window.alert(firsNameEl.value)
window.alert(lastNameEl.value)
window.alert(addressEl.value)
avatarEl.title = "I am avatar"
window.alert(firsNameEl.value)
window.alert(lastNameEl.value)
window.alert(addressEl.value)
citiesEl.value = "Minsk2"
window.alert(firsNameEl.value)
window.alert(lastNameEl.value)
window.alert(addressEl.value)
hobbiesEl.value = "I have not interests"
avatarWrapperEl.innerHTML = "<ul id='list'><li>1</li><li>2</li></ul>"
var listId = "list"
var numberList = document.getElementById(listId)
window.alert(numberList.innerHTML)
3. Методы отладки кода console.log() и debugger
Для того чтобы отследить нужный нам alert или любую часть кода, мы можем использовать debugger.
Эта команда позволяет при открытой консоли разработчика остановить выполнение программы в том месте,
где стоит debugger. В этот момент мы можем посмотреть, что именно происходит в коде.
Кроме того, чтобы было удобнее отслеживать изменения, заменим window.alert() на console.log().
Эта функция выводит нужные нам значения прямо в панели разработчика, во вкладке Console.
// тому что слева, мы присваиваем то, что справа
var firstNameId = "first-name"
// = это оператор присваивания ... то есть, то что слева (переменная), ей присваивается значения слова
var firsNameEl = document.getElementById(firstNameId)
var lastNameId = "last-name"
var lastNameEl = document.getElementById(lastNameId)
var addressId = "address"
var addressEl = document.getElementById(addressId)
var citiesId = "cities"
var citiesEl = document.getElementById(citiesId)
var hobbiesId = "hobbies"
var hobbiesEl = document.getElementById(hobbiesId)
var avatarWrapperId = "avatar-wrapper"
var avatarWrapperEl = document.getElementById(avatarWrapperId)
var avatarId = "avatar"
var avatarEl = document.getElementById(avatarId)
debugger
function alertValue() {
console.log("1")
console.log("2")
console.log("3")
}
alertValue()
firsNameEl.value = "Andrey"
console.log(firsNameEl.value)
console.log(lastNameEl.value)
console.log(addressEl.value)
lastNameEl.className = "last-name-input default-input error-input"
console.log(firsNameEl.value)
console.log(lastNameEl.value)
console.log(addressEl.value)
lastNameEl.title = "Wrong last name"
console.log(firsNameEl.value)
console.log(lastNameEl.value)
console.log(addressEl.value)
avatarEl.src =
"http://is1.mzstatic.com/image/thumb/Purple128/v4/a6/05/ca/a605ca8d-ff54-ccf7-76ed-233f4cd5331f/source/175x175bb.jpg"
console.log(firsNameEl.value)
console.log(lastNameEl.value)
console.log(addressEl.value)
avatarEl.title = "I am avatar"
console.log(firsNameEl.value)
console.log(lastNameEl.value)
console.log(addressEl.value)
citiesEl.value = "Minsk2"
console.log(firsNameEl.value)
console.log(lastNameEl.value)
console.log(addressEl.value)
hobbiesEl.value = "I have not interests"
avatarWrapperEl.innerHTML = "<ul id='list'><li>1</li><li>2</li></ul>"
var listId = "list"
var numberList = document.getElementById(listId)
window.alert(numberList.innerHTML)
Теперь мы можем увидеть, что происходит в коде, с помощью двух способов:
console.log() — функция, которая позволяет вывести нужное значение в панели разработчика, во
вкладке Console.debugger — это точка остановки. Когда код доходит до неё при открытой панели разработчика,
выполнение приостанавливается, и мы можем шаг за шагом посмотреть, что происходит в программе.
4. Рефакторим наш код
Заменим дублирующийся код на вызов функции alertValue. При её вызове мы увидим актуальные значения
переменных, которые изменяются в коде.
// тому что слева, мы присваиваем то, что справа
var firstNameId = "first-name"
// = это оператор присваивания ... то есть, то что слева (переменная), ей присваивается значения слова
var firsNameEl = document.getElementById(firstNameId)
var lastNameId = "last-name"
var lastNameEl = document.getElementById(lastNameId)
var addressId = "address"
var addressEl = document.getElementById(addressId)
var citiesId = "cities"
var citiesEl = document.getElementById(citiesId)
var hobbiesId = "hobbies"
var hobbiesEl = document.getElementById(hobbiesId)
var avatarWrapperId = "avatar-wrapper"
var avatarWrapperEl = document.getElementById(avatarWrapperId)
var avatarId = "avatar"
var avatarEl = document.getElementById(avatarId)
debugger
function alertValue() {
console.log(firsNameEl.value)
console.log(lastNameEl.value)
console.log(addressEl.value)
console.log(citiesEl.value)
}
alertValue()
firsNameEl.value = "Andrey"
alertValue()
lastNameEl.className = "last-name-input default-input error-input"
alertValue()
lastNameEl.title = "Wrong last name"
alertValue()
avatarEl.src =
"http://is1.mzstatic.com/image/thumb/Purple128/v4/a6/05/ca/a605ca8d-ff54-ccf7-76ed-233f4cd5331f/source/175x175bb.jpg"
alertValue()
avatarEl.title = "I am avatar"
alertValue()
citiesEl.value = "Minsk2"
alertValue()
hobbiesEl.value = "I have not interests"
avatarWrapperEl.innerHTML = "<ul id='list'><li>1</li><li>2</li></ul>"
var listId = "list"
var numberList = document.getElementById(listId)
window.alert(numberList.innerHTML)
📘
Отличие наименования функций от переменных: переменные — это существительные (например,
avatarId, element), они хранят значения, а функции — это глаголы (например, alertValues,
getElement), они выполняют действия.
❗
Для того чтобы функция 'заработала' не забывайте что нужно писать скобки иначе функция не
запуститься, только так она будет работать alertValue()
