Поскольку это поле ввода используется как счетчик, то нежелательно, чтобы пользователи щелкали на нем и изменяли его значение. Здесь на помощь приходит другое связывание, onfocus, которое срабатывает, когда курсор перемещается на объект. Поэтому при щелчке на поле ввода или при перемещении на поле ввода с помощью клавиши Tab вызывается onfocus.
Событие onfocus имеет очень короткий код, но он также очень важен. В нем появляется ключевое слово this, которое важно понимать в JavaScript. Ключевое слово this указывает на тот объект, на котором выполняется код. В данном примере this указывает на поле ввода. Выражение this.blur() "размывает" поле ввода, другими словами, заставляет его терять фокус ввода. Так как это происходит, как только пользователь активизирует поле ввода, то это делает "невозможным" изменение данных.
Если указатель this используется в функции, то он указывает на саму функцию. Если this используется в коде JavaScript вне функции, то он указывает на объект окна. Наиболее часто this используется для изменения свойства текущего объекта, как в примере выше, или для передачи текущего объекта функции.
Давайте посмотрим на другой пример:
<script type="text/javascript">
function showValue(obj){
alert('You Clicked On ' + obj.value);
}
</script>
<input type="radio" name="fruit" onclick="showValue(this);" value="Яблоко" > Яблоко
<input type="radio" name="fruit" onclick="showValue(this);" value="Апельсин" > Апельсин
<input type="radio" name="fruit" onclick="showValue(this);" value="Груша" > Груша
<input type="radio" name="fruit" onclick="showValue(this);" value="Банан"> Банан
Яблоко Апельсин Груша Банан
Можно видеть, что событие onclick для каждой из этих радио-кнопок одинаково. Однако, если щелкнуть на каждой из них, то будут получены разные сообщения. Это связано с использованием this. Так как this указывает на каждую отдельную радио-кнопку, то каждая радио-кнопка передается в функцию showValue по отдельности.
Вернемся к функциям и рассмотрим передачу функции аргументов. В предыдущем примере obj является аргументом. Предполагается, что obj содержит указатель на поле ввода, на котором был произведен щелчок. В функцию можно передавать любое количество аргументов. Если потребуется 10 аргументов, то функция будет выглядеть следующим образом:
function myFunction(arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10){
// здесь располагается код
}
Во многих случаях может понадобиться функция, которой требуется определенное количество аргументов, но не всегда требуются все. В JavaScript не нужно передавать все 10 аргументов в функцию, которая объявлена с 10 аргументами. Если передать только первые 3, то функция будет иметь только 3 определенных аргумента. Это необходимо учитывать при написании функций. Например, можно написать функцию, которой всегда требуются 3 первых аргумента, но следующие 7 являются необязательными:
function myFunction(arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10){
// код с arg1
// код с arg2
// код с arg3
if(arg4){
// код с arg4
}
if(arg5 && arg6 && arg7){
// код с arg5, arg6 и arg7
if(arg8){
// код с arg8
}
}
if(arg9 || arg10){
// код с arg9 или arg10
}
}
Можно видеть, что в коде выполняется простая проверка if(arg). Если аргумент не передается в функцию, то при попытке использовать этот аргумент будет получено значение undefined. При использовании undefined в качестве логического (булевого) значения (true / false), как в операторах if, оно воспринимается как false.
Поэтому, если arg4 не был передан в приведенном выше примере, то он является undefined и тело оператора if не выполняется.
Как быть, когда трудно определить, сколько потребуется аргументов? Можно иметь функцию, которая получает от 1 до n аргументов и выполняет с каждым из них одну и ту же задачу. На этот случай JavaScript имеет в каждой функции объект arguments. Объект arguments содержит все аргументы функции:
function myFunction(){
for(var i=0; i<arguments.length; i++){
alert(arguments[i].value);
}
}
Этот код сообщит значение всех переданных ему объектов. Если передать 100 объектов, то будет получено 100 сообщений. Более полезной функцией было бы, возможно, скрытие/вывод всех переданных функции объектов.
Один из наиболее интересных аспектов JavaScript - идея о том, что функции являются объектами и могут передаваться как поле ввода, изображение или что-то еще, что может быть. Посмотрите, например, следующий код:
<script type="text/javascript">
function multiply(){
var out=1;
for(var i=0; i<arguments.length; i++){
out *= arguments[i];
}
return out;
}
function add(){
var out=0;
for(var i=0; i<arguments.length; i++){
out += arguments[i];
}
return out;
}
function doAction(action){
alert(action(1, 2, 3, 4, 5));
}
</script>
<button onclick="doAction(multiply)">Test Multiply</button>
<button onclick="doAction(add)" >Test Add</button>
Test Multiply Test Add
В этом небольшом фрагменте кода происходит очень многое. Вначале просто определяют две функции: multiply и add. Функция multiply просто перемножает все переданные ей числа. Аналогично, функция add складывает все переданные ей числа. Тонкости начинаются при использовании действий onclick двух созданных кнопок. Можно видеть, что при щелчке на любой из двух кнопок в функцию doAction передается объект. Ранее мы всегда передавали переменные или объекты HTML (такие, как поля ввода в предыдущем примере). В этом примере передаются функции. Функции можно передавать таким же способом, как и любой другой объект, и когда они передаются, их можно вызывать таким же способом, как и любую другую функцию. Изменяется только ее имя.
Таким образом функция doAction получает другую функцию в качестве аргумента! Если передается функция multiply, то функция doAction передает ей значения от 1 до 5, и мы получаем в результате 120. Если в doAction передается функция add, то ей также передаются значения от 1 до 5, и в результате мы получаем значение 15.
Это в действительности одно из наиболее мощных свойств JavaScript, и оно будет более подробно рассмотрено в следующих лекциях. Пока достаточно понять общий принцип.