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

Авторadmin / Опубликовано5 комментариев

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

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

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

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

еval(строка)

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

еval("5 * 7 + 1 / 2")

Рассмотрим пример использования функции еval:

Пример: Рассмотреть пример работы кода с функцией еval.

1
2
3

let y = 5; // значение у равно 5
let x = "if (y==5) y*2-3"; // значение х равно строке символов
let rezult = eval(x); // rezult равно 7
Задание js4_1. В скрипте запрашивать у пользователя ввести в диалоговое окно ввода математическое выражение, затем вычислить значение данного выражения и результат вывести в диалоговом окне.

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

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

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

    2. Синтаксис объявления (создания) функции:

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

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

    Другой вариант создания функции — Function Expression (Функциональное Выражение):

    let имя_функции = function() {
  тело функции;
};

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

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

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

    ✍ Решение:
     

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

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

    3. Синтаксис объявления:

    function имя_функции(аргументы){
	код;
	return результат или выражение
}
    Важно: В javascript return — директива, которая завершает выполнение функции и возвращает значение

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

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

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

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

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

1
2
3
4
5
6
7
8

function sayHello()
{
	alert("1");
	return "привет!";
	alert("2");
}
let a=sayHello();
alert(a);

✍ Решение:
 

  • Рассмотрите работу функции:
    • 1
2
3
4
5
6

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

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

1
2
3
4
5

function checkName() {
let 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() {
  let a = ...
  let 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

    ...
let a = sayHello("Вася");
alert(a);
  • Протестируйте результат в браузере.
Важно: Обратите внимание на разницу между вызовом функции без директивы return и с директивой: в первом случае функция вызывается как оператор, возвращая значение undefined; во втором случаем функция вызывается через присваивание, либо участвуя в выражениях (см. ниже)
Задание js4_4. Что выведет на экран следующий код?

1
2
3
4
5
6
7
8
9
10
11

let a = 5, b = 10, c = 20, d = 7;
function Sum1() {
 let result = a + b;
 document.write("Sum1: " + result + "<br/>");
}
function Sum2(x1, x2) {
 let 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; 
}
  2. явное создание объекта Function
    3. //обязательным является только последний аргумент – тело функции 
let a1 = new Function('x', 'y', 'return x + y');

    или

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

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

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

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

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

1
2
3
4
5
6
7

function sum(arg1,arg2)
{
	let a=arg1+arg2;
	return a;
}
let 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)
{
	let a=arg1+arg2;
	return a;
}
let b=sum(1,2);
alert(b);
 
function add()
{
	let c=1+sum(1,2);
	return c;
}
let d=add();
alert(d);
Во второй функции (add()) используется выражение, ссылающееся на первую функцию (sum(), в 11-й строке).
Задание js4_6. Создать функцию, возвращающую наибольшее из трех чисел. Аргументами функции являются сами числа.

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

function findMax(a,b,c){
   ...
   return ...
}
let max = ...
...
Другие варианты использования выражений с функциями

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

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

1
2
3
4

function plRectangle(width, height){
	let 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

let х = "25рх";
let у = 12;
let S = plRectangle(parselnt(x), у);
Задание js4_7. Используйте функцию для модернизации примера с окончанием слова про количество ворон. Откройте файл с выполненным заданием про ворон. Необходимо вызывать функцию с параметром – количество ворон.
Задание js4_8. Создайте функцию для расчета степени введенного числа.
Вопросы для самоконтроля:

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

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

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

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

    let S = 2; // Глобальная переменная S
function plRectangle(width, height){
	let 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)
{
	let 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

    let S = 2; // Глобальная переменная S
function plRectangle(width, height)
{
	S = width * height;
	// заменяем глобальную переменную:
	return S // S - глобальная переменная (т.к. без определения var)
}
let 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)
{
let S = width * height;
let 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

let variable = "Глобальная переменная";
function f() {
  let 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

let chislo,stepen;
function degree(chislo,stepen) { 
	for(let result = 1; stepen > 0; stepen--) {
 		result *= chislo; 
	} 
return  result;
} 
document.write(degree(2,4)); // выводит 16
Пример: Выполнить возведение числа в степень через рекурсию. Оба значения запрашивать у пользователя. Выдавать результат в виде:

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

✍ Решение:
 

  • Объявите глобальные переменные для числа и степени и запросите их:
    • let 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

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

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

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

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

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

✍ Решение:
 

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

✍ Решение:
 

  • Назовем функцию factorial.
  • Определим рекурсивные правила: 
    • n = factorial(n-1), при n > 0
n = 1, при n = 1
  • Теперь данные правила опишем в самой рекурсивной функции в скрипте. Для написания функции будем использовать тернарный оператор:
    • let 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
  • Теперь данные правила опишем в самой рекурсивной функции в скрипте. Для написания функции будем использовать тернарный оператор:
    • let 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

5 комментариев для “JavaScript урок 4. Javascript функции и объекты”

  1. В вашем задание ответ неправильный. Ответ будет 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, то есть значению глобальной переменной, определенной во внешней программе

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

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

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

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

Обсуждение закрыто.