Главная › Новости

JavaScript для начинающих | Функции

Опубликовано: 24.08.2018

8 Ошибок при изучении JavaScript

Это вводный курс по JavaScript для начинающих . Сегодня мы рассмотрим, что такое функция в JavaScript . А также разберем, как программа на JavaScript проверяет правильность заполнения формы обратной связи. Напоминаю, что программы на JavaScript называются сценариями или просто скриптами. Поехали!

Ок! Давайте же уже разберем, что это за звери такие — функции в JavaScript . Бояться их не стоит. Совсем даже наоборот! Без них нам дальше, ну просто никак.

Функции в JavaScript и для чего они нужны

В общем виде функция в JavaScript выглядит так:

function имя_функции() {

Кто уже знаком с версткой сайтов , заметит нечто очень похожее на правила из листа стилей CSS :

#header {

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

Как и в листе стилей CSS функции в JavaScript представляют собой некий набор условий и команд в виде целого блока, который можно потом использовать множество раз, не переписывая одни и те же условия и команды, а просто давая ссылку на имя функции.

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

Функции в JavaScript: встроенные и создаваемые

JavaScript имеет множество встроенных функций: alert, prompt, confirm, document.write, Math и др. Мы их пока рассматривать не будем. Как вы уже, наверное, поняли, в JavaScript есть два типа функций: встроенные в язык и создаваемые программистами. Встроенные функции выполняют уже заведомо определенные задачи, а те, что создаются программистом, соответственно, те задачи, что возложил на них программист.

Давайте же напишем нашу первую собственную функцию!

Ваша первая собственная функция в JavaScript

Не делайте квадратные глаза. Сейчас мы все подробно разберем, и вы поймете, что ничего страшного или непонятного тут нет. Но для начала давайте сразу добавим на страницу код самой формы обратной связи, чтобы было более наглядно:

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

Обратите внимание на две важные особенности этой формы:

1. В тэге form помимо всех обычных для формы параметров прописан специальный атрибут onsubmit . Об атрибутах в JavaScript мы так же говорили во введении . В данном случае атрибут onsubmit служит для вызова функции проверки формы при нажатии на кнопку «Отправить». У нас эта функция, как видите, называется validate_form () .

2. Для поля ввода e-mail адреса мы использовали имя (name) — contact_mail . И это же имя мы прописываем в нашей функции в строке условия:

if ( document.contact_form.contact_mail.value == "" )

Внешне наша форма будет выглядеть так:

Что делает функция в JavaScript

Ну, а теперь давайте подробно разберем, что же делает наша функция.

В первой строке после открытия функции мы добавили переменную validation (о переменных будет отдельная статья, не пропустите!). Имя ей можно выбрать произвольное: хоть validation, хоть name_validation, хоть eklmnprst. Главное — это то, что мы присвоили этой переменной значение true , то есть истинно.

Обратите внимание: знак = это вовсе не равно, а именно присваивание. Иначе можно сказать, что левая сторона выражения приняла значение правой стороны и не более того. Знак же равенства в программировании пишется как ==

Далее мы пишем условие, начинающееся с if . Об условиях мы так же поговорим отдельно, т.к. это большая и очень интересная тема. В нашем условии мы задаем путь для проверки значения в параметре value поля e-mail адреса. Если оно пустое, то наша переменная validation сразу принимает значение false — ложно. При этом выскакивает, уже знакомое нам, окошко alert с сообщением «Пожалуйста, заполните поле ‘Ваш e-mail’».

Как вы думаете, почему незаполненное поле выдает ложное значение? Да все просто! В условии мы указываем, что если поле пустое (пустые кавычки в правой части условия после знака равенства ==), то выполняется последующий код условия, в котором срабатывает предупреждение alert. Дальнейшее выполнение кода прерывается. Нам надо закрыть окошко предупреждения и заполнить обязательное поле.

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

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

Тут есть тоже пара интересных моментов:

1. Путь для проверки условия пишется через знак точки. Это чем-то похоже на адреса в браузерной строке, только там разделителем служит знак слэша /, а здесь просто точка. Иначе можно прочитать наше условие так:

«Если зайти в форму с именем contact_form, а в ней заглянуть в поле contact_mail и там не найти ничего, то сказать пользователю, что он лох».

Обратите внимание на знак ==, о котором я уже упоминал. Здесь задается именно равенство, а не присваивание.

2. Само условие if так же имеет свой набор правил, взятых в фигурные скобки. Это, так называемое, тело цикла. Пока просто запомните это название, оно вам пригодится в будущем.

Способы применения функций в JavaScript

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

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

Надеюсь, теперь вам стало понятнее, что такое функция в JavaScript и как она работает . А в следующий раз разберемся, что такое переменные в JavaScript и с чем их едят. Оставайтесь на связи!

Автор: Игорь Квентор

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях: