функции в JavaScript

Функции в JavaScript

Начнём с того что язык JavaScript поддерживает концепцию ООП (объектное ориентированное программирование). Это концепция состоит в том, что существуют такие элементы как объекты и у этих объектов есть различные свойства и методы(функции), которые позволяют управлять ими.

Функция — это отдельный блок кода, который состоит из одного или больше операторов. Оно имеет своё собственное(уникальное) название и может принимать различные параметры, в зависимости от которых может выполнит ту или иную операцию.

Метод — это тоже функция, но, он принадлежит уже какому-то классу или объекту.

Для того чтобы вызывать какой-то метод, необходимо сначала написать название объекта, потом через точку написать название метода. Исключением этого правила является вызов методов alert(), confirm() и prompt() объекта window. Их можно вызывать без того чтобы указать название объекта. С этими методами мы уже познакомились в этой статье Описание методов alert, confirm и prompt.

Также, в предыдущих статьях мы познакомились с методом вывода document.write(), который принадлежит объекту document.

Так вот, в программировании есть очень важная возможность, которая состоит в том, что можно создавать свои собственные функции.

Синтаксис функции выглядит таким образом:

Синтаксис функции JavaScript

Для примера создадим простую функцию, которая добавит переданный текст в абзац и выведет его. И ещё сделает его жирным и курсивным.

function writeText(text){
    //Добавляем текст в абзаце и выводим его
    document.write('<p><strong><em>' + text + '</em></strong></p>');
}

//Вызов созданной функции
writeText('Здравствуйте!');

Сохраняем документ и открываем его в браузере.

как создать и вызвать функцию в JavaScript

Замечание! При объявлении функции, фигурные скобки должны быть обязательно, в независимости от того сколько там операторов.

Для чего нужны функции в программировании?

Основным плюсом использования функции это сокращение размера исходного кода скрипта.

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

//объявляем три массива
var arr1 = [7, 8, 'k', 'v', 3.2, 4];
var arr2 = ['b', 5, 9.2, 'h', 8, 2];
var arr2 = [81, 20, 'm', 'p', 3, 7.4];

for(var i = 0; i < arr1.length; i++){
    document.write('<p>Элемент массива arr1, с индексом <strong><em>' + i + '</em></strong> равен: '+ arr1[i] +'</p>');
}

for(var i = 0; i < arr2.length; i++){
    document.write('<p>Элемент массива arr2, с индексом <strong><em>' + i + '</em></strong> равен: '+ arr2[i] +'</p>');
}

for(var i = 0; i < arr3.length; i++){
    document.write('<p>Элемент массива arr3, с индексом <strong><em>' + i + '</em></strong> равен: '+ arr3[i] +'</p>');
}

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

function printArr(arr){
    for(var i = 0; i < arr.length; i++){
        document.write('<p>Элемент массива, с индексом <strong><em>' + i + '</em></strong> равен: '+ arr[i] +'</p>');
    }
}

//объявляем три массива
var arr1 = [7, 8, 'k', 'v', 3.2, 4];
var arr2 = ['b', 5, 9.2, 'h', 8, 2];
var arr2 = [81, 20, 'm', 'p', 3, 7.4];

//Вызываем созданную функцию, для перебора каждого массива
printArr(arr1);
printArr(arr2);
printArr(arr3);

Параметры функции

Функция может принять любое количество параметров, от одного до бесконечности. Либо же, она может быть совсем без параметров.

Давайте создадим функцию без параметров, которая просто выведет на экран, классическую фразу 'Hello world'.

function helloWorld(){
    document.write('Hello World');
}

//Вызываем функцию без параметров, helloWorld
helloWorld();

Любой параметр функции, может иметь своё значение по умолчанию. Это значит, что если при вызове функции мы не передадим какое-то значение данному параметру, то он использует своё значение, которая задано по умолчанию.

Для примера создадим функцию, которая сложит две переданные числа. Если мы передадим только одно число, то, по умолчанию, второе число будет равна 4.

function summa(number1, number2 = 4){
    document.write('<p> Сумма чисел ' + number1 + '(Первый параметр) и ' + number2 + '(Второй параметр) равна: ' + (number1 + number2) + '</p>');
}

//Вызываем функцию, которая, по умолчанию выведет результат сложения переданного числа, с цифрой 4.
summa(5); // Результат: 9

//Если предадим и второй параметр, то функция выведет результат сложения чисел из обоих параметров.
summa(5, 20 ); // Результат: 25

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

Для примера, вызовем первую созданную нами функцию writeText() внутри предыдущей функции summa(). Функции writeText() передадим результат сложения чисел. В таком случае код функции summa() будет выглядеть уже так:

function summa(number1, number2 = 4){
    writeText(number1 + number2);
}

//Вызываем функцию summa
summa(5); // Результат: 9
summa(5, 20 ); // Результат: 25

Функции которые возвращают какое-то значение

До сих пор мы писали функции, которые выводят результат на экран сразу.

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

Для того чтобы лучше понять о чем идёт речь, вспомним такие методы как prompt() и confirm(). Эти методы именно возвращают значение, полученное от пользователя, а не выводят его.

Для примера создадим свою собственную функцию, которая будет возвращать последний элемент массива, переданного в качестве параметра.

function lastElement(arr){
    //Возвращаем последний элемент переданного массива
    return arr[arr.length - 1 ];
}

//Объявляем массив
var otherArr = ['iphone', 'asus', 2000, 9.8, 'twix'];

//Вызываем созданную функцию lastElement и в качестве параметра передаем ей созданный массив otherArr
var lastEl = lastElement(otherArr);

//Выводим полученный последний элемент массива
alert(lastEl); 

В результате мы получим слово ‘twix’, так как именно это слово и есть последний элемент массива otherArr.

Метод alert() ничего не возвращает. То есть если мы попытаемся выводить переменную которая типа содержит результат вызова метода alert(), то увидим значение undefined. Это тоже самое как попытаться выводить значение пустой переменной.

Для примера возьмём результат последнего вызова alert() из предыдущего примера, помещаем его в переменную resAlert и используя созданную нами функцию writeText, попытаемся вывести полученный результат.

//Выводим полученный последний элемент массива
var resAlert = alert(lastEl);
var test;

writeText(resAlert); //undefined
writeText(test); //undefined

Как видим в обоих случаях получили значение undefined.

Глобальные и локальные переменные

Глобальные переменные — это те переменные, которые объявлены за пределами функции. То есть все те переменные, которые не объявлены внутри самой функции, являются глобальными. Они видны (действительны) во всем документе.

Локальные переменные — это те переменные, которые объявлены внутри самой функции. И они действительны только внутри данной функции. За её пределами, локальные переменные уже не будут работать.

Локальные и глобальные переменные никак не связаны между собой.

область видимости переменных javascript

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

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

Вызываем функцию other(), и если теперь попробуем вывести значение переменной x, то в результате увидим цифру 4.

Чтобы обратиться изнутри функции к глобальной переменной, не нужно нечего делать, надо просто использовать её. Изменения, производимые с глобальными переменными, будут видны за пределами функции.

var x = 8;

function increment(){
    x++;
}

//Вызываем функцию increment()
increment();

alert(x); //Результат: 9

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

var g = 100;

function func(){
    var g = 14;
    g *= 2; // Это тоже самое что g = g * 2
    alert(g);//Результат: 28
}

//Вызываем функцию.
func();

alert(g);//Результат: 100

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

Как я написал в начале статьи функции являются очень важными элементами, поэтому вы должны знать их на отлично.

Задачи

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

Похожие статьи:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Delivered by FeedBurner

Поддержите пожалуйста мой проект!

<< Предыдущая статьяСледующая статья >>

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: 2016-10-21 00:30:37