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

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

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

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

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

eval(строка)

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

Рассмотрим примеры использования функции 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 имя_функции(аргументы){
    	код;
    }

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

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

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

    Пример:

    function sayHello()
    {
    	alert("hello");
    }
    //...
    sayHello();
  3. Если функция возвращает значение
  4. function имя_функции(аргументы){
    	код;
    	return результат или выражение
    }

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

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

    var a = имя_функции (аргументы);
    alert(a);
    var b = a + a;

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

    Пример:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    function sayHello()
    {
    	alert("1");// выполнится
    	return "привет!";// завершаем выполнение функции
    	alert("2");// не выполнится, т.к. после return
    }
     
    var a=sayHello();
    alert(a);

Как видно из примера, после return функция действительно завершает свою работу. Поэтому оператор alert("2") выполняться уже не будет.
Вызов же функции происходит через присваивание. Вызов в данном примере можно также организовать так: alert(sayHello()); , но это не рекомендуемый вариант.

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

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

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


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

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

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

  1. функция возвращает значение undefined, но выполняет какие-то действия:
  2. 1
    2
    3
    4
    5
    6
    
    function sayHello(userName)
    {
    	alert("Привет " + userName);
    }
    sayHello("Вася");
    sayHello("Петя");

    В примере функция имеет один аргумент, указанный в скобках. Переменная userName примет то значение, которое указано в скобках при вызове функции "Вася" и "Петя". Значит при первом вызове функция выведет в диалоговое окно Привет Вася, при втором — Привет Петя.

  3. функция возвращает конкретное значение:
  4. 1
    2
    3
    4
    5
    6
    
    function sayHello(userName)
    {
    	return "Привет " + userName;
    }
    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. Необходимо запросить у пользователя имя. Вызывать функцию для вызова диалогового окна с сообщением «Привет, имя!»

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

  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);

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

Обычное использование 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);

Во второй функции используется выражение, ссылающееся на первую функцию (в 11-й строке).

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

Рассмотрим другие варианты использования выражений с функциями (только для функций, которые возвращают результат):
Функция:

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

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

  1. Вызов функции как часть выражения:
  2. 1
    
    S3 = 0.5 * plRectangle(a, b);
  3. Вызов функции в логических выражениях
  4. 1
    2
    
    if (plRectangle(a, b) > plRectangle(c, d))
    alert("Первый прямоугольник больше второго");
  5. Вызов javascript функции в качестве параметра другой функции
  6. 1
    2
    3
    
    var х = "25рх";
    var у = 12;
    var S = plRectangle(parselnt(x), у);

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

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

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

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

  1. Глобальные переменные
  2. — создаются на уровне сценария и сохраняются до конца сценария;
    — объявляются до описания javascript функции;
    — могут быть причиной сложно находимых ошибок;
  3. Локальные переменные
  4. — создаются внутри фрагментов кода и не видны извне;
    — явно объявляются в теле javascript функции;
    — аргументы (параметры) функции — всегда локальные переменные;
    — лучше использовать локальные переменные, так как доступ к ним больше контролируется.

Задание 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);


Рекурсивная функция 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

Теперь выполним возведение числа в степень через рекурсию:

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

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 рекурсия, факториал числа

Поделитесь уроком с коллегами и друзьями:
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 для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить