Код функций в JavaScript начинает выполнение после их вызова.
ТвитнутьФункции являются одним из наиболее важных строительных блоков кода в JavaScript.
Функции состоят из набора команд и обычно выполняют какую-то одну определенную задачу (например суммирование чисел, вычисление корня и т.д.).
Код помещенный в функцию будет выполнен только после явного вызова этой функции.
1. Синтаксис:
//Объявление функции
function имяФункции(пер1, пер2){
Код функции
}
//Вызов функции
имяФункции(пер1,пер2);
2. Синтаксис:
//Объявление функции
var имяфункции=function(пер1, пер2){Код функции}
//Вызов функции
имяфункции(пер1,пер2);
имяфункции задает имя функции. Каждая функция на странице должна иметь уникальное имя. Имя функции должно быть задано латинскими буквами и не должно начинаться с цифр.
пер1 и пер2 являются переменными или значениями, которые можно передавать внутрь функции. В каждую функцию может быть передано неограниченное количество переменных.
Обратите внимание: даже если в функцию не передаются переменные не забывайте вставлять круглые скобки "()" после имени функции.
Обратите внимание: имена функций в JavaScript чувствительны к регистру.
Функция messageWrite() в примере ниже будет выполнена только после нажатия на кнопку.
Обратите внимание: в этом примере используется событие onclick. События JavaScript будут подробно рассмотрены далее в данном учебнике.
Пример
<html>
<head>
<script type='text/javascript'>
// Функция выводит текст на страницу
function messageWrite() {
document.write('Данный текст был выведен на страницу с помощью JavaScript!');
}
</script>
</head>
<body>
<input type='button' value='Нажми на меня' onclick='messageWrite()' />
</body>
</html>
Вы можете передавать функциям неограниченное количество переменных.
Обратите внимание: все манипуляции над переменными внутри функций на самом деле производятся не над самими переменными а над их копией, поэтому содержимое самих переменных в результате выполнения функций не изменяется.
Пример
/* Зададим функцию, которая прибавляет к переданной переменной 10 и выводит результат на страницу */
function plus(a){
a=a+10;
document.write('Вывод функции: ' + a+'<br />');
}
var a=25;
document.write('Значение переменной до вызова функции: '+a+'<br />');
// Вызовем функцию передав ей в качестве аргумента переменную a
plus(a);
document.write('Значение переменной после вызова функции: '+a+'<br />');
Чтобы обращаться к глобальной переменной из функции, а не ее копии используйте window.имя_переменной.
Пример
function plus(a){
window.a=a+10;
}
var a=25;
document.write('Значение переменной до вызова функции: '+a+'<br />');
plus(a);
document.write('Значение переменной после вызова функции: '+a+'<br />');
С помощью команды return Вы можете возвращать из функций значения.
Пример
<html>
<head>
<script type='text/javascript'>
//Функция sum возвращает сумму переданных в нее переменных
function sum(v1,v2){
return v1+v2;
}
</script>
</head>
<body>
<script type='text/javascript'>
document.write('5+6=' + sum(5,6) + '<br />');
document.write('10+4=' + sum(10,4) + '<br />');
</script>
</body>
</html>
Помимо определяемых пользователем функций в JavaScript существуют еще и встроенные функции.
К примеру встроенная функция isFinite позволяет проверить является ли переданное значение допустимым числом.
Пример
document.write(isFinite(40)+'<br />');
document.write(isFinite(-590)+'<br />');
document.write(isFinite(90.33)+'<br />');
document.write(isFinite(NaN)+'<br />');
document.write(isFinite('Это строка')+'<br />');
Обратите внимание: полный список встроенных функций JavaScript Вы можете найти в нашем JavaScript Справочнике.
Переменные создающиеся внутри функций называются локальными переменными. Вы можете обращаться к таким переменным только внутри функций, в которых они были определены.
После завершения выполнения кода функции такие переменные уничтожаются. Это значит, что в разных функциях могут быть определены переменные с одинаковым именем.
Переменные, которые создаются вне кода функций называются глобальными переменными к таким переменным можно обращаться из любого места кода.
Если Вы объявляете переменную без var внутри функции она тоже становится глобальной.
Глобальные переменные уничтожаются только после закрытия страницы.
Пример
<html>
<head>
<script type='text/javascript'>
//Объявим глобальные переменные var1 и var2
var var1="var1 существует";
var var2;
function func1() {
//Присвоим var2 значение внутри функции func1
var var2="var2 существует";
}
//Из другой функции выведем содержимое переменной var1 и var2 на страницу
function func2() {
//Выводим содержимое переменной var1
document.write(var1 + '<br />');
//Выводим содержимое переменной var2
document.write(var2);
}
</script>
</head>
<!-- Вызовем функцию func2() после полной загрузки документа -->
<body onload='func2()'>
</body>
</html>
Обратите внимание: при выводе на экран переменная var2 будет иметь пустое значение, так как func1 оперирует с локальной "версией" переменной var2.
Функции, которые не содержат имени при объявлении называются анонимными.
Анонимные функции в основном объявляют не для последующего их вызова из кода как обычные функции, а для передачи другим функциям в качестве параметра.
Пример
function arrMap(arr,func){
var res=new Array;
for (var i=0;i<arr.length;i++)
res[i]=func(arr[i]);
return res;
}
var arr=new Array(3,5,1,4);
document.write(arrMap(arr,function(g){return g+1;})+"<br />");
Задание 1. Исправьте ошибки в коде ниже:
Задание 1
<html>
<head>
<script type='text/javascript'>
//Функция вызываемая кнопкой 1
1func1() {
alert('Вы нажали на кнопку 1.');
}
//Функция вызываемая кнопкой 2
2func2()
alert('Вы нажали на кнопку 2.');
//Функция вызываемая кнопкой 3
3func3 {
alert('Вы нажали на кнопку 3.');
}
</script>
</head>
<body>
<p>Исправьте ошибке в коде. </p>
<input type='button' value='Кнопка1' onclick='1func1()'/>
<input type='button' value='Кнопка2' onclick='func2()'/>
<input type='button' value='Кнопка3' />
</body>
</html>
Задание 2.
Задание 2
//Вызов первой секретной функции
document.write(secfunc1(4,12) + '<br />');
//Вызов второй секретной функции
document.write(secfunc2(100,10) + '<br />');
//Вызов третьей секретной функции
secfunc3(23,10);
document.write('<br />');
//Вызов четвертой секретной функции
secfunc4('п');