Уроки JavaScript від Саморобкіна - Урок 25
Із функціями нам уже доводилося зустрічатися. Ви, напевно, вже зрозуміли, що часто буває зручно помістити в функцію якийсь набір інструкцій, а в певному місці викликати функцію для виконання цих інструкцій.
Функція також є об'єктом і цей об'єкт можна створювати за допомогою конструктора. Як будь-який об'єкт,Functionможна призначати змінну.
З цими способами ми сьогодні познайомимося. Але це буває потрібно далеко не завжди. Найчастіше функція створюється ключовим словомfunction.
Створення функції
Функцію можна визначити як набір інструкцій.
Найпоширеніший спосіб створення функції використання ключового словаfunctionта імені функції:
При створенні можна призначити функцію на змінну:
Анонімну функцію можна створити за допомогою конструктораnew.
Тут ми використовуємо не ключове словоfunction, а об'єктFunction. Усі вбудовані об'єкти пишуться з великої літери.
Другий тип прийнятний для невеликих функцій з однією інструкцією, що повертає кінцевий результат.
Синтаксисnew Functionвикористовується рідко, про це ми докладніше поговоримо в четвертій частині, а зараз нам достатньо знати, що і таке буває.
Повернення функції
Функція повертає своє значення після проходження всього циклу інструкцій у її тілі. Буває, що з інструкцій неясно, яке саме значення має бути повернено. Тоді використовується інструкціяreturn, яка явно визначає значення, що повертається.
Якщо функції використовується один або кілька операторівif, то всі їхні гілки будуть виконані. Але іноді потрібно повернути значення одного з операторів або однієї з гілок, не доходячи до кінця вказівок. Такбуло, наприклад, у наших функціях сортування масивів. Тоді інструкціяreturnможе з'явитися і всередині функції. Якщо гілка відповідає оброблюваним даним, функція продовжує цикл.
Змінні функції
Функція «розуміє» все глобальні змінні оголошені її межами. Але якщо ці змінні беруть участь в інструкціях скрипту крім функції і можуть бути змінені цими інструкціями, то краще використовувати функціїлокальнізмінні, оголошені в її тілі.
Локальні змінні діють лише усередині функції. Це дуже зручно для уникнення конфліктів, і я б рекомендував користуватися у функціях саме локальними змінними, за винятком особливих випадків (приклад винесення значення функції у глобальну змінну можна знайти у моїй статті «Великий могутній українській мові, ч. 2»).
Виклик функції
Щоб функція спрацювала, її потрібно викликати.
Наприклад, якщо функція виводить на сторінку якийсь текст або зображення (і у функції є інструкція document.write() ), достатньо викликати:
А тепер хвилинку уваги. Іноді програмісти-початківці забувають про різницю між поверненням і викликом функції. Наприклад, пам'ятаючи, що функція доступна з будь-якого місця коду, роблять таку грубу помилку:
В результаті одержуємоundefined(не визначено). Насправді, функція чесно спрацювала. Але вже потім, коли потяг пішов. Загалом «хлопці, ви мене на екран не викликали».
Викликфункції спрацюєу будь-якому місці. Алерезультат викликутількипісля виклику. Наступний код спрацює коректно:
Можливо, цей приклад здався вам надто наївним. Але врахуйте, що в ньому тільки три сосни, а реальні скрипти часом нагадують джунглі. А правила уїх ті самі і, загалом, дуже прості. Тому не заважає ще раз закликати до уваги в дрібницях.
Функції та кадри
Будь-яка функція належить вікну, де вона визначена. Якщо вона визначена в автономному файлі.js, вона буде належати тим сторінкам, у яких є посилання цей файл.
Функції та події
Найчастіше функції викликають яке-небудь дію. А за дії, як ми знаємо, відповідають події. І часто буває потрібно, щоб функція спрацювала після натискання кнопки, посилання або ще чогось. Тоді виклик потрібно помістити до атрибуту відповідної події всередині тега.
Якщо потрібно, щоб функція спрацювала (тобто була викликана) відразу при завантаженні сторінки, то її виклик потрібно вставити в подію onLoad тегаbody:
Іноді потрібно заздалегідь викликати функцію для передбачуваного події, не вміщуючи у конкретний тег, тобто призначити її як властивість оброблювача події. Тоді ім'я функції використовується без круглих дужок:
Взаємодія з елементами HTML
Коли функція посилається на елемент HTML за його id, виклик повинен здійснюватися або після цього елемента в коді, або через подіюonLoadтегаbody.
Наприклад, ми хочемо пофарбувати текст елемента у червоний колір.
Цікаво, що якщо ми використовуємо для виклику методsetTimeoutіз затримкою навіть на нуль мілісекунд, функція спрацює з будь-якого місця:
Аргументи функції
Після імені функції (за винятком наведеного вище прикладу) обов'язково ставляться круглі дужки. Вони можуть бути порожніми, а можуть містити один чи кілька аргументів.
Аргументів може бути кілька, і вони записуються всередині круглих дужок черезкоми.
Згадаймо функцію з 3-го уроку, якапоказувала чи приховувала текстовий блок. Як аргумент використана зміннаnnn. У тілі функції використовується інструкція, що містить document.getElementById(nnn). В даному випадкуnnnзаміщає id елемент HTML. На виклик функції для конкретного елемента потрібно підставити замість імені аргументу конкретний id.
Ось приклад використання цієї функції для двох різних елементів.
Ключове слово this
У 21 та 24 уроках ми створили власні методи для об'єктівArrayтаDate. У першому випадку функція мала один аргумент, у другому — аргументів не було. Ключове словоthisобидва рази було «псевдонімом» того об'єкта, на який функція була призначена як метод. Якби така функція працювала як така (тобто як звичайна функція, а чи не «болванка» для методу), то домаthisмав бути аргумент функції. Поясню на схемі:
Тобто, щоб функцію, що вимагає як аргумент якийсь об'єкт, зробити методом цього об'єкта, цей аргумент потрібно прибрати з дужок, а в тілі перетворити його на словоthis. Якщо функції потрібні другий, третій і т.д. аргументи, вони стануть першим, другим тощо. аргументами методу:
В одному з найближчих уроків ми збудуємо таку функцію-метод.
Функція як об'єкт
Іноді буває потрібна функція, яка б приймати за обставин різну кількість аргументів. Це можна зробити. Щоб зрозуміти, як це працює, розглянемо функцію як об'єкт.
Як і в інших об'єктів, функція має властивості та методи.
Ця властивість подібна до масиву, його елементами є аргументи функції. Воно має кілька власних властивостей:arguments.callee, arguments.caller, arguments.length.
Як і у масиву, уargumentsє властивістьlength(довжина, тобто кількість аргументів).
Стукав падуанський годинник, і педантично Страсбурзький бив, і чітко нас на чверті дробили Мілана мелодійний годинник.
У минулому уроці ми розбирали функцію, що створює годинник, що працює, у відповідному тегу, id якого був параметром для аргументу функції. Зараз ми наплодимо цих тегів з годинником, а функцію напишемо так, що вона прийматиме будь-яку кількість аргументів.
цей код використовує методsetIntervalі також «заводиться» з будь-якого місця, як і з методомsetTimeout.
Ну і ще, я не втримався і трохи їх підфарбував (підкласив). До речі, якщо використовувати для дизайну додаткові тегиі т.п., тоidпотрібно присвоювати саме їм, а не абзацу або заголовку.
А ось приклад трохи хитріший. Якщо в функцію введено один числовий аргумент, вона показує його як довжину в метрах, якщо два як площа в квадратних метрах, три об'єм в кубічних метрах. У всіх інших випадках, а також за нечислових аргументів, вона повідомляє, що введені «невірні дані».
Тепер протестуємо функцію:
І подивимося, що вийшло:
Про вкладені функції (одна функція всередині іншої) і про рекурсію (виклик функції із самої себе) ми поговоримо в четвертій частині.
Домашнє завдання
Привітайте себе, коханого(-у), з Днем народження за допомогою функції, яка щороку в день виводитиме вітання (при тестуванні поставте поточний день, щоб переконатися в результаті).
Аргументи: день, місяць
Змінні: об'єкт дати, поточний день, поточний місяць, вітання, порожній рядок.
При потрібних аргументах виводить вітання, наприклад,
Вітаю з Днем народження! Щастя, здоров'я, успіхів уусім!
В інших випадках - порожній рядок.
Шпаргалок цього разу не даю. Хоча. все залежить від вашої кмітливості.