<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Создание функций в JavaScript

Создание функций в JavaScript

Как создать функцию в JavaScript? Такой вопрос достаточно распространён среди начинающих программистов. И эта статья написана как раз для таких новичков. Для начала необходимо разобраться с вопросом: а что такое функция? Давайте с этого и начнём.

Вы должны помнить из школы, что такое функция. Если нет, то напоминаю. У функции есть определённые параметры, которыми она манипулирует, и возвращает результат. Например, функция y = 2 * x +5. Здесь мы можем задать x = 3, а в ответ получим y = 11. Вот это пример функции из математики. Абсолютно аналогичные функции и в JavaScript, только тут функцией может быть не просто какое-то вычисление какого-то выражения, а всё, что угодно.

Давайте для начала создадим функцию, которая 3 раза выводит сообщение "Привет".

<script language = "javascript">
  function hello() {
   alert("Привет");
    alert("Привет");
   alert("Привет");
  }
  hello();
</script>

Первая строчка сообщает, что дальше идёт сценарий на языке JavaScript. На следующей строке объявляется функция. Как видите, всё начинается с ключевого слова function. Внутри скобок указываются параметры, но в данном случае параметров нет, поэтому внутри скобок всё пусто. Дальше идут фигурные скобки, внутри которых находится код функции, который должен быть выполнен при её вызове. В качестве этого кода используется функция alert(), которая вызывает информационное окошко, в котором написан текст, заданный параметром. В качестве параметра мы функции alert() (это пример встроенной функции) передаём строку "Привет". Функцию alert() мы вызываем три раза.

Когда функция написана, то необходимо поставить закрывающую фигурную скобку. На следующей строке мы вызываем функцию hello(). Надеюсь, Вам стало понятно, что такое функция. Возможно, что некоторые из Вас спросят: "А какие преимущества? Ведь мы могли бы просто написать три раза alert() и результат был бы тот же". Вы правы, и так и нужно поступать, если Вам нужно использовать этот код всего один раз. А представьте, что Вам это нужно 3, 4 или большее число раз. Разумеется, неудобно писать постоянно этот повторяющийся код. Гораздо проще написать одно слово hello(). Согласны? Думаю, что да. В конце статьи я, исходя из этого, сделаю один очень важный вывод, поэтому дочитайте её до конца.

Теперь поговорим о функциях с параметрами. Давайте создадим один из таких примеров (буду писать сразу функцию и её вызов, без тега <script>).

function sum (x, y) {
  var sum = x + y;
  document.write(sum);
}
sum(5, 4);

Код достаточно прозрачный, однако, давайте прокомментирую. Опять ключевое слово function, потом название функции (в данном случае, пусть будет sum). Внутри скобок указал два параметра, которые требуются (x и y). Внутри функции я создаю ещё одну переменную sum (это совершенно нормально называть переменные и функции одинаково), которой присваиваю сумму x и y (которые были переданы). И затем вывожу в окно браузера полученный результат. После функции вызываю её, передав параметры 5 и 4. Вы можете проверить, и увидите в окне браузера - 9.

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

function sum(x, y) {
  var sum = x + y;
  return sum;
}
var z = sum(4, 5) + sum(1,-3);
document.write(z);

Обратите внимание на ключевое слово return. Оно возвращает результат (в нашем случае - сумму двух чисел). Таким образом, sum(4,5) возвращает 9. Это число мы складываем с результатом работы функции sum(1, -3), то есть -2. В итоге мы получим 7. И только потом печатаем результат в браузере.

Надеюсь, Вы оценили возможности функций, поэтому создавать и использовать функции в JavaScript надо обязательно. И сейчас я сделаю один важный вывод, принцип, которому надо всегда следовать: любой повторяющийся код - необходимо выделять в отдельную функцию. Если у Вас 20 раз выводится одинаковые 5 строк (к примеру), то необходимо эти 5 строк выделить в отдельную функцию. Тем самым Вы вместо 100 строк (20 раз * 5 строк), напишите только 20 строк, да ещё и более понятных (название функции - это гораздо проще, чем 5 строк кода). Хочется сказать, что если этому правилу не следовать, то размер программы может увеличиться в десятки, а, может, и в сотни раз.

Советую Вам потренироваться и, например, создать функции всех основных математических операций (сложение, вычитание, умножение и деление).

Дерзайте, и Удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (23):

BotaniQue BotaniQue 05.07.2012 14:41:50

В принципе, всё понятно. Но как и почему в самой последней функции на экран выводится число 9, ведь там нету сроки document.write?

Ответить

Admin Admin 05.07.2012 14:44:14

После функции document.write(z);

Ответить

BotaniQue BotaniQue 05.07.2012 15:51:22

Ясно.Спасибо за оперативность.

Ответить

heyly4 heyly4 12.11.2012 20:08:22

Делаю калькулятор с вводом двух чисел. Все операции (-,*,/) работают нормально, а вот сложение (+) выдаёт результат: "a+b=ab" (например 1+2=12, а не 3). Михаил помоги пожалуйста, что не так, я голову сломал: var a = prompt("Введите первое число:"); var b = prompt("Введите второе число:"); function sum(a,b) { var sum = a + b; document.write(a,'+',b,'=',sum,'</br>'); } sum(a,b);

Ответить

Admin Admin 12.11.2012 20:22:09

Используйте функцию Number() для преобразования строк в числа.

Ответить

heyly4 heyly4 12.11.2012 20:40:12

Не получается, где именно её писать? :l

Ответить

Admin Admin 12.11.2012 20:45:17

a = prompt("..."); a = Number(a);

Ответить

heyly4 heyly4 12.11.2012 20:49:08

Спасибо!)

Ответить

Тимур Тимур 19.11.2012 20:10:03

Насколько я понял alert это тоже функция. Но мы же ее не писали, как мы ее используем? Это вроде глобальная функция которые действуют во всех браузерах по умолчанию? Если я прав, то где можно посмотреть все глобальные функции? Если нет, то что это?

Ответить

Admin Admin 19.11.2012 21:02:28

Это глобальная функция, она действует везде. Посмотреть можете в справочнике JavaScript.

Ответить

Natalisa2110 Natalisa2110 26.02.2013 19:30:32

Пытаюсь разобраться с заданием на return (задание JavaScript 4 пункт 3). Под буквой "а" забиваю такой код: var x = prompt ("Введите первое число:"); x = Number(x); var y = prompt ("Введите второе число:"); y = Number(y); var znak = prompt ("Введите тип операции '+ - * /':"); document.write (printAction(x, y, znak)); function printAction(x, y, znak){ return document.write (x + znak + y); } На что, у меня почему то выводит 1+2undefined????? Под буквой "б" - совсем беда, пробую по всякому никаких сдвигов. Может подскажите, где ошибка в "а" и с какого боку подойти в "б"???!!!

Ответить

Admin Admin 26.02.2013 21:13:12

return document.write - это зачем? Достаточно просто вернуть строку, без document.write.

Ответить

Natalisa2110 Natalisa2110 27.02.2013 11:22:59

Ура, получилось! Мелочь, а приятно! Спасибо)

Ответить

jorn jorn 24.04.2013 11:08:55

<html> <head> </head> <body> <script language = "javascript"> function threewrite() { document.write("<br>Hello World"); document.write("<br>Hello World"); document.write("<br>Hello World"); } </script> <script language = "javascript"> function threewrite(); </script> <h1>tyyyy</h1> <script language = "javascript"> function threewrite(); </script> </body> </html> Хотелось бы узнать в чем ошибка почему функция не работает. То есть не отображается в окне браузера. Больно не пинайте, так как я новичок и только пытаюсь разобратся. Зарание благодарен за помощь.

Ответить

Admin Admin 24.04.2013 11:21:49

Вызывать функцию надо без function, просто threewrite();

Ответить

jorn jorn 24.04.2013 11:45:05

ура!!!!!!! огромное спасибо!!!!!

Ответить

asoftgame asoftgame 19.07.2015 11:53:11

Здравствуйте! Михаил такой вопрос можно ли сделать так чтобы alert("привет"); Повторялось само как в php?

Ответить

bsi bsi 03.07.2013 16:09:25

Все казалось бы понятно, но вот столкнулся с проблемой. В Adobe Acrobat XI сделал форму. В форме несколько полей в которых надо привести текст к верхнему регистру. В свойствах полей есть вкладки "Действия" и "Формат", если в "Формат"-"Настройка" ставлю скрипт event.value=event.value.toUpperCase(); все работает нормально. А как написать функцию для этих действий и как ее вызвать? Код короткий можно в каждом поле прописать, но важен принцип написания и вызова функции. Всем спасибо.

Ответить

dedok41 dedok41 25.12.2013 10:18:10

Здравствуйте, Михаил! У Вас отличные статьи, удачно выбрана методика, не утомляет дозированный материал. Мой вопрос, может быть, не в тему. Но, все-таки, объясните назначение атрибута target='_blank' в кнопке и текстовой ссылке.

Ответить

tikkiwiki tikkiwiki 25.12.2013 13:38:18

target='_blank', открывает ссылку в новом окне браузера.

Ответить

dedok41 dedok41 15.01.2014 20:55:17

Во многих языках функции могут получать параметры по ссылке, и это удобно. Например, в PHP для этого при вызове функции переменной приписывается &. Но в JavaScript такой возможности не видно, да и Вы, Михаил, не пишет об этом. Значит, передавать аргументы можно только по значению. И в этом легко убедиться на числах и строках. Но, работая с массивами, обнаружил, что интерпретатор обрабатывает массивы иначе. Вот простенький код, здесь массив модифицируется как при передаче по ссылке: function test(a) { a[7] = 5; } var x= [1,2,3]; test(x); document.write(x); Конечно, я это стал повсеместно использовать, т.к. удобно: и массив модифицируется и можно возвращать оператором return дополнительную информацию. Михаил, это дырка в трансляторе или спасательный круг для программистов?

Ответить

cing cing 24.03.2014 19:28:21

А можно подробнее про последний пример и оператор 'return'? Что и куда он возвращает и почему без этой строчки пример не работает?

Ответить

dollar1306 dollar1306 21.12.2015 23:07:18

при нажатии на кнопку картинка меняетса может быть 3,5,10 картинок подскажите как сделать такои скрипт

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.