JavaScript урок 4. Javascript функции и объекты

На уроке будут рассмотрены Javascript функции, как пользовательские, так и встроенные; способы создания и вызов функций; локальные и глобальные переменные в функции, а также рекурсивный вызов функции в javascript

Сайт labs-org.ru предоставляет лабораторные задания по javaScript для закрепления теоретического материала и получения практических навыков создания динамических веб-страниц. Краткие теоретические сведения по теме позволят получить необходимый для этого минимум знаний. Решенные наглядные примеры и лабораторные задания изложены по мере увеличения их сложности, что позволит с легкостью изучить материал с нуля. Желаем удачи!

Встроенные Javascript функции

В javascript достаточно много функций, встроенных в синтаксис языка. Рассмотрим одну из них.

eval(строка)

Функция eval(строка) вычисляет выражение в указанной строке (в качестве параметра); выражение должно быть составлено по правилам языка JavaScript и не содержать тегов HTML:

eval("5 * 7 + 1 / 2")


Рассмотрим пример использования функции eval:
Пример: Рассмотреть пример работы кода с функцией eval.

1
2
3
var y = 5; // значение у равно 5
var x = "if (y==5) y*2-3"; // значение х равно строке символов
var rezult = eval(x); // rezult равно 7


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

Пользовательские Javascript функции

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

В javascript предусмотрены два варианта функций: функции, которые при их вызове выполняют какие-то действия (например, выводят сообщение), и функции, которые возвращают значение (число, строку, …).

  1. Функция в роли процедуры. Если функция выполняет какие-либо действия и не возвращает значение:
  2. Синтаксис объявления (создания) функции:

    function имя_функции(аргументы){
    	код;
    }

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

    function имя_функции(){
    	код;
    }
    


    Вызов функции:

    В javascript вызов функции в роли процедуры происходит следующим образом:

    имя_функции (аргументы); // с аргументами
    имя_функции (); // без аргументов

    Пример: Создать функцию для вывода модального окна со словом hello. Осуществить вызов функции.

    ✍ Решение:
     

    Создайте код и протестируйте его в браузере:

    function sayHello()
    {
    	alert("hello");
    }
    sayHello();
  3. Если функция возвращает значение:
  4. Синтаксис объявления:

    function имя_функции(аргументы){
    	код;
    	return результат или выражение
    }

    Важно: В javascript return — директива, которая завершает выполнение функции и возвращает значение

    Вызов функции:

    В javaScript вызов функции, возвращающей значение, происходит, например, следующим образом:

    var a = имя_функции (аргументы);
    alert(a);  // 1-й способ
    var b = a + a; // 2-й способ

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

Пример: Рассмотрите фрагмент кода и поясните, что выполняется в данном скрипте:

1
2
3
4
5
6
7
8
function sayHello()
{
	alert("1");
	return "привет!";
	alert("2");
}
var a=sayHello();
alert(a);

✍ Решение:
 

  • Рассмотрите работу функции:
  • 1
    2
    3
    4
    5
    6
    
    function sayHello()
    {
    	alert("1");// выполнится
    	return "привет!";// завершаем выполнение функции
    	alert("2");// не выполнится, т.к. после return
    }
    Как видно из примера, после return функция действительно завершает свою работу. Поэтому оператор alert("2") выполняться уже не будет.
  • Проанализируйте вызов функции:
  • var a=sayHello();
    alert(a);
    Вызов функции происходит через присваивание. Вызов в данном примере можно также организовать так: alert(sayHello()); , но это не рекомендуемый вариант.

Важно: Таким образом, директива return указывает на возвращаемое значение функции, которое будет передано переменной при следующей форме вызова:

переменная = имя_функции();

Важно: return может использоваться без значения, чтобы прекратить выполнение функции и выйти из нее:

1
2
3
4
5
function checkName() {
var name=prompt('введите имя')
if (!name) {
    return; // если имя не заполнено, то выходим из функции
 }


Задание js4_2. Дополните код согласно заданию: В переменную povtor присвоить результат выполнения функции confirm, которая выводит фразу «Пройти заполнение еще раз?» и принимает ответ пользователя (ок или отмена).

Фрагмент кода:

1
2
3
4
5
6
7
function say() {
   document.write("Вы здесь?" + "<br/>");
}
do {
   say();
   povtor = ...
} while (povtor);

функции


Задание js4_3. Создать функцию без параметров, которая вычисляет разность двух вводимых пользователем в диалоговые окна числа. Выполнить задание двумя способами: 1) функция выводит сообщение с результатом; 2) в функции выполняется разность, а сообщение с результатом выводится в основной программе.

Примерный фрагмент кода для одного из способов:

1
2
3
4
5
6
function raznost() {
  var a = ...
  var b = ...
  ...
}
...


Вопросы для самоконтроля:

  1. Для чего используются функции?
  2. Объясните в чем разница использования функции в роли процедуры и функции с классическим оформлением?
  3. Опишите синтаксис вызова функции в роли процедуры.
  4. Опишите синтаксис вызова функции с классическим оформлением.
  5. Для чего служит директива return?


Javascript функции с параметрами (аргументами) и возврат значений

Рассмотрим подробнее использование инструкции return в функции javascript на двух примерах. Кроме того, рассмотрим использование в Javascript функции с параметрами (аргументами).

⇒ 1. Функция в качестве процедуры.

Функция в качестве процедуры возвращает значение undefined, но выполняет какие-то действия:

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

✍ Решение:
 

  • Объявите функцию sayHello. В скобках аргументов функции укажите аргумент с именем userName:
  • 1
    2
    3
    4
    
    function sayHello(userName)
    {
    ...
    }
    В примере функция имеет один аргумент, указанный в скобках, т.е. userName.
  • В коде функции с помощью метода alert() выводите сообщение вместе со значением аргумента функции:
  • 1
    2
    3
    4
    
    function sayHello(userName)
    {
    	alert("Привет, " + userName);
    }
  • В основной программе дважды вызовите функцию с разными значениями:
  • 1
    2
    3
    
    ...
    sayHello("Вася");
    sayHello("Петя");
    Переменная userName примет то значение, которое указано в скобках при вызове функции — «Вася» и «Петя». Значит, при первом вызове функция выведет в диалоговое окно Привет, Вася, при втором — Привет, Петя.
  • Протестируйте результат в браузере.
⇒ 2. Функция в роли функции (классическое оформление).

Функция в классическом оформлении возвращает конкретное значение.

Пример: Написать функцию, которая принимает в качестве аргумента имя пользователя и возвращает в программу сообщение ‘Привет, имя. В основной программе выводить данное сообщение методом alert().

✍ Решение:
 

    Объявите функцию sayHello. В скобках аргументов функции укажите аргумент с именем userName:

    1
    2
    3
    4
    
    function sayHello(userName)
    {
    	...
    }
    В примере функция имеет один аргумент, указанный в скобках, т.е. userName.
  • В коде функции с помощью директивы return верните сообщение вместе со значением аргумента функции:
  • 1
    2
    3
    4
    
    function sayHello(userName)
    {
    	return "Привет, " + userName;
    }
  • В основной программе создайте переменную и присвойте ей значение вызова функции. Выведите значение переменной методом alert():
  • 1
    2
    3
    
    ...
    var a = sayHello("Вася");
    alert(a);
  • Протестируйте результат в браузере.

Важно: Обратите внимание на разницу между вызовом функции без директивы return и с директивой: в первом случае функция вызывается как оператор, возвращая значение undefined; во втором случаем функция вызывается через присваивание, либо участвуя в выражениях (см. ниже)

Задание js4_4. Что выведет на экран следующий код?

1
2
3
4
5
6
7
8
9
10
11
var a = 5, b = 10, c = 20, d = 7;
function Sum1() {
 var result = a + b;
 document.write("Sum1: " + result + "<br/>");
}
function Sum2(x1, x2) {
 var result = x1 + x2;
 document.write("Sum2: " + result);
}
Sum1();
Sum2(c, d);


Задание js4_5. Необходимо запросить у пользователя ввести возраст (метод prompt()). Вызывать функцию, которая выводит диалоговое окно с сообщением ‘Привет, малыш!’, если возраст менее 18, и ‘Здравствуйте, юноша!’, если возраст более или равен 18.

У функций могут быть необязательные аргументы:
  
Пример:

function f(x, y = 3) {
	return x + y;
}
f(2); // 5

Все способы создания пользовательских функций

  1. классический синтаксис
  2. function a1(x, y) { 
       return x + y; 
    }
  3. явное создание объекта Function
  4. //обязательным является только последний аргумент – тело функции 
    var a1 = new Function('x', 'y', 'return x + y');

    или

    var a1 = new Function('return "hello"');
  5. еще один вариант создания
  6. var a1 = function(x, y) { return x + y; };

Вызов функций во всех случаях будет:

var a = a1(3, 4);
alert(a); // вывод значения на экран

Использование выражений с функциями

Обычное использование javascript функции:

1
2
3
4
5
6
7
function sum(arg1,arg2)
{
	var a=arg1+arg2;
	return a;
}
var b=sum(1,2);
alert(b);

Функция как составная часть выражения:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function sum(arg1,arg2)
{
	var a=arg1+arg2;
	return a;
}
var b=sum(1,2);
alert(b);
 
function add()
{
	var c=1+sum(1,2);
	return c;
}
var d=add();
alert(d);
Во второй функции (add()) используется выражение, ссылающееся на первую функцию (sum(), в 11-й строке).

Задание js4_6. Создать функцию, возвращающую наибольшее из трех чисел. Аргументами функции являются сами числа.

Фрагмент кода:

function findMax(a,b,c){
   ...
   return ...
}
var max = ...
...

Другие варианты использования выражений с функциями

(только для функций, которые возвращают результат):

Рассмотрим примеры для функции:

1
2
3
4
function plRectangle(width, height){
	var S = width * height;
	return S
}

Варианты выражений:

⇒ Вызов функции как часть выражения:

1
S3 = 0.5 * plRectangle(a, b);

⇒ Вызов функции в логических выражениях:

1
2
if (plRectangle(a, b) > plRectangle(c, d))
alert("Первый прямоугольник больше второго");

⇒ Вызов javascript функции в качестве параметра другой функции:

1
2
3
var х = "25рх";
var у = 12;
var S = plRectangle(parselnt(x), у);

Задание js4_7. Используйте функцию для модернизации примера с окончанием слова про количество ворон. Откройте файл с выполненным заданием про ворон. Необходимо вызывать функцию с параметром – количество ворон.

Задание js4_8. Создайте функцию для расчета степени введенного числа.

Вопросы для самоконтроля:

  1. Что такое аргументы функции и где они указываются?
  2. Может ли на месте аргумента функции находиться вызов другой функции?


Область видимости переменных. Javascript глобальные и локальные переменные в функции

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

  1. Глобальные переменные
  2. — создаются на уровне сценария и сохраняются до конца сценария;
    — объявляются до описания javascript функции:
            var a = 1;
            function ...
            ...
    — могут быть причиной сложно находимых ошибок;
  3. Локальные переменные
  4. — создаются внутри фрагментов кода и не видны извне;
            for (var i=1;i<5;i++){  // i - локальная
               ...
            }
             if (x<5) {
                var a=5; // a - локальная
             }
    — явно объявляются в теле javascript функции;
            function findA(){  
               var a = 2*2 // a - локальная
            }
    — аргументы (параметры) функции — всегда локальные переменные;
    — лучше использовать локальные переменные, так как доступ к ним больше контролируется.

Задание js4_9. Дополните код согласно заданию:
Создать 2 переменные глобальной и локальной области видимости (то есть внутри функции func) с именами: global, local.
Переменной global присвоить текст “Привет, ”, а local“Мир”. Используя переменные, выведите их значения дважды: в основной программе и в теле функции.

function func() {
 
}
func();

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

Рассмотрим конкретные примеры области видимости переменных в javascript при использовании глобальных и локальных переменных.

  1. 1
    2
    3
    4
    5
    6
    7
    8
    
    var S = 2; // Глобальная переменная S
    function plRectangle(width, height){
    	var S = width * height;
    	return S // Локальная переменная S
    }
    z = plRectangle(2, 3);
    alert(z);
    alert(S);

    Пример: Значение z равно 6, а значение S осталось равным 2, то есть значению глобальной переменной, определенной во внешней программе

  2. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    function plRectangle(width, height)
    {
    	var s = width * height; // аргументы всегда локальны
    	width = width + 10; 
    	return s
    }
    width = 2;
    height = 3;
    z = plRectangle(width, height);
    alert(z);
    alert(width);

    Пример: Значение z равно 6; значение переменной width равно 2, то есть осталось без изменений

  3. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    var S = 2; // Глобальная переменная S
    function plRectangle(width, height)
    {
    	S = width * height;
    	// заменяем глобальную переменную:
    	return S // S - глобальная переменная (т.к. без определения var)
    }
    var z = plRectangle(2, 3);
    alert(z);
    alert(S);

    Пример: Значения и z и S равны 6; S — глобальная переменная

  4. 1
    2
    3
    4
    5
    6
    7
    8
    
    function Plrectangle(width, height){
    	S = width * height; //глобальная переменная
    	return S
    }
    z = Plrectangle(2, 3);
    S=2; // изменяем глобальную переменную
    alert(z);
    alert (S);

    Пример: Значение z равно 6, а значение S равно 2, то есть значению измененной глобальной переменной, определенной во внешней программе

  5. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    function plRectangle(width, height)
    {
    var S = width * height;
    var x = 17;
    return S
    }
    z = plRectangle(2,3);
    alert(z);
    alert(x); // не определена во внешней программе
    alert (S); // не определена во внешней программе

    Пример: Значение z равно 6; переменная S во внешней программе не определена; переменная х во внешней программе не определена

Задание js4_10. Что выведет на экран следующий код?

1
2
3
4
5
6
7
var variable = "Глобальная переменная";
function f() {
  var variable = "Локальная переменная";
  document.write(variable + "<br/>");
}
f();
document.write(variable);


Вопросы для самоконтроля:

  1. Какова разница между локальными и глобальными переменными?
  2. Зачем в программировании существует необходимость деления переменных на локальные и глобальные?


Рекурсивная функция javascript

Важно: В информатике и программировании, а, соответственно, и в javascript, рекурсия — это вызов функции из самой же функции, т.е. функция в функции

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

  • начальное условие (известное значение для переменной, отправной момент рекурсии);
  • рекурсивное правило;
  • условие окончания рекурсии.


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

Показать решение:

1
2
3
4
5
6
7
8
var chislo,stepen;
function degree(chislo,stepen) { 
	for(var result = 1; stepen > 0; stepen--) {
 		result *= chislo; 
	} 
return  result;
} 
document.write(degree(2,4)); // выводит 16

Пример: Выполнить возведение числа в степень через рекурсию. Оба значения запрашивать у пользователя. Выдавать результат в виде:

2 в степени 4 = 16


✍ Решение:
 

  • Объявите глобальные переменные для числа и степени и запросите их:
  • var chislo,stepen;
    chislo = parseInt(prompt('число: '));
    stepen = parseInt(prompt('степень: '));
  • Создайте функцию с двумя аргументами для числа и степени:
  • function degree(chislo,stepen) { 
    }
  • Поскольку известно, что любое число в степени 0 равно единице, то сделаем это начальным условием. То есть если степень = 0, то функция возвращает 1:
  • function degree(chislo,stepen) { 
    	if(stepen) {} 
    	return 1; // если степень равна нулю то возвращаем 1
    }
  • Создадим рекуррентное правило: если степень не равна 0, то нужно число умножить на число в степени на единицу меньше (вызов функции со степенью на единицу меньше):
  • function degree(chislo,stepen) { 
    	if(stepen) { 
    		return chislo*degree(chislo,stepen-1); 
    	} 
    	return 1; 
    }
  • Вызовите функцию, оформив вывод:
  • document.write(chislo,' в степени ', stepen, ' = ', degree(chislo,stepen));
  • Протестируйте результат в браузере.

javascript рекурсия, возведение в степень

Задание js4_11. Что выведет на экран следующий код?

1
2
3
4
5
6
7
8
function f(counter) {
  counter--;
  document.write(counter + "<br/>");
  if (counter != 0)
    f(counter);
  document.write(counter + "<br/>");
}
f(2);


Задание js4_12. Вычислить факториал числа с использованием рекурсии, беря за образец пример вычисления факториала итерационным методом

Пример: Вычисление факториала числа итерационным методом с использованием цикла:

Показать решение:

1
2
3
4
5
6
7
8
9
10
11
var m = 2;
x = factorial(m);
document.write(x);
function factorial(n){
 if(n <= 1) return 1;
 rezult = 2; // result - переменная для результата
 for (i = 3; i <=n; i++) {
	rezult = rezult*i;
 }
return result;
}

javascript рекурсия, факториал числа

Вопросы для самоконтроля:

  1. Что такое рекурсия?
  2. Назовите основные условия организации рекурсии, как вы их понимаете?

Стрелочные функции или лямбда выражения в javascript

В javascript возможно использование так называемых лямбда выражений: функции, которые сокращают запись выражения. В записи такой функции используется стрелочка =>, отсюда и название «стрелочные функции». Стрелочку можно трактовать, как «такое, что»:
  
Пример стрелочной функции с одним аргументом:

var f = x => x + 1;
alert(f(5))

Расшифровываем так:
функция f равна значению x, такое, что x = x + 1.
То есть в результате в окно выведется 6.


Пример стрелочной функции с двумя аргументами:

var g = (x, y) => x + y;
alert(g(5,3))

✍ Решение:
 

Результатом работы скрипта будет вывод числа 8.

Пример: Написать стрелочную функцию для вычисления факториала числа. Функция должна быть рекурсивной.

✍ Решение:
 

  • Назовем функцию factorial.
  • Определим рекурсивные правила:
  • n = factorial(n-1), при n > 0
    n = 1, при n = 1
    
  • Теперь данные правила опишем в самой рекурсивной функции в скрипте. Для написания функции будем использовать тернарный оператор:
  • var factorial = n => (n > 0) ? n * factorial(n-1) : 1;
  • Выведем значение, например, для 4!:
  • alert(factorial(4))
  • Протестируйте функцию на других значениях.

Пример: Написать стрелочную функцию для вычисления первых n чисел ряда Фибоначчи. Функция должна быть рекурсивной.

✍ Решение:
 

  • Назовем функцию fib.
  • Определим рекурсивные правила:
  • fib = fib(n-1) + fib(n-2), при n > 2
    fib = 1, при n <= 2
    
  • Теперь данные правила опишем в самой рекурсивной функции в скрипте. Для написания функции будем использовать тернарный оператор:
  • var fib = n => (n > 2) ? fib(n-1) + fib(n-2) : 1;
  • Выведем значение, например, для первых 6 чисел ряда (результат: 5 + 3 = 8):
  • alert(fib(6))
  • Протестируйте функцию на других значениях.

Задание js4_13:
Написать лямбда-выражение для вычисления квадрата числа.

Например:

alert(kvadr(5))
// результат должен быть 25 


Задание js4_14:
Используя стрелочную функцию, создайте последовательность 1 3 9 27 81 243 729 2187 6561 19683

Вопросы для самоконтроля:

  1. Какие функции называются стрелочными функциями?
  2. Есть ли разница между стрелочными функциями и лямбда выражениями в javascript?
  3. Каков синтаксис стрелочных функций?

Поделитесь уроком с коллегами и друзьями:
5 комментариев

    Den

    В вашем задание ответ неправильный. Ответ будет 6 и 6. Попробуйте сами запустить этот код function Plrectangle(width, height){
    S = width * height;
    return S
    }
    S=2;
    z = Plrectangle(2, 3);
    alert(z);
    alert (S);
    Пример: Значение z равно 6, а значение S осталось равным 2, то есть значению глобальной переменной, определенной во внешней программе

      admin

      Да нет, всё верно

        Dmitriy

        Всё же не верно. S — глобальная переменная, и в теле функции S изменяется. Результат 6 и 6. Чтобы было верно, надо в в функции поставить var S=…

        Coder

        Я тоже проверил через консоль, значения будут совпадать

          admin

          Да, вы правы. Имелось в виду:
          function Plrectangle(width, height){
          S = width * height;
          return S
          }
          z = Plrectangle(2, 3);
          S=2;
          alert(z);
          alert (S);

          В таком случае всё верно. Спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*


Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить