Опубликован: 19.10.2006 | Уровень: для всех | Доступ: свободно
Лекция 4:

Функции и концепция объектов

< Лекция 3 || Лекция 4: 123 || Лекция 5 >

Давайте посмотрим на другой пример:

<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 сообщений. Более полезной функцией было бы, возможно, скрытие/вывод всех переданных функции объектов.

< Лекция 3 || Лекция 4: 123 || Лекция 5 >
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Рустам Рахимов
Рустам Рахимов

Пол часа искал в интеренете, как что работает. Такое чувство что автор пишет для людей которые уже знают js, или просто хвастается своими знаниями. Конструкция формы непонятна. И можно было бы в кратце написать, что такое событие которое используют. Сорершенно не понятно как работает форма, и как брать из нее значение. 

function Complete() {

    var x = "Имя: " + document.tutform.firstname.value;

alert(x);

} - Так брать значение из формы tutform, firstname-получаем значение из имени. 

<INPUT TYPE="button" VALUE="Готово" onClick="Complete();"> - Нужно к кнопке прописать событие, при нажатие на кнопку готово, чтобы возвращалось значение с помощью функции. А так ничего не работает, и смысла учить нету, если не знать почему не работает.