Упражнения

1. Разработать документ HTML, который при его загрузке в браузер спрашивает пользователя коды символов кириллицы или латиницы он хочет отобразить. После чего отображает на странице таблицу соответствующих символов и их ASCII-кодов. Для получения ASCII-кода символа воспользуйтесь методом charCodeAt(index) строки, где параметр представляет позицию символа в строке. Создайте два сценария — один с циклом for, а другой с циклом while.

2. Разработайте документ, который при загрузке в браузер через диалоговое окно, отображаемое функцией prompt(), предоставляет пользователю возможность сформировать страницу HTML и отобразить ее. Предусмотрите два варианта работы сценария: введенный пользователем в диалоговом окне код HTML сразу же отображается в браузере и пользователь вводит постепенно весь код страницы, а потом страница отображается сразу же целиком.

Урок 6. Функции

Функция – это именованная последовательность операторов, которая инициализируется и выполняется простой ссылкой на имя функции. Синтаксис задания функций в JavaScript следующий:

function имя_функции([формальные_параметры]) {

[операторы]

[return выражение]

}

Вызов в сценарии:

имя_функции(список_фактических_параметров)

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

В JavaScript не предусмотрен механизм указания способа передачи параметров. Здесь используется заранее предопределенное правило для передачи параметров разных типов. Строки, целые, вещественные и булевы значения передаются по значению. Тогда как объекты и массивы передаются по ссылке.

Функция JavaScript всегда возвращает некоторое значение. Для явного указания возвращаемого значения используется операция return. Ее операнд определяет возвращаемое функцией значение. Если в теле функции явно не задается возвращаемое значение, то по умолчанию она возвращает значение undefined. Поэтому функцию JavaScript всегда можно использовать в выражениях.

Обычно все определения функций задаются в элементе SCRIPT заголовочной части документа HTML (элемент HEAD).

Функции JavaScript могут быть рекурсивными.

Пример 7. Рекурсивный вызов функции

Реализуем сценарий вычисления факториала с использованием рекурсивного вызова функции. Это классический пример рекурсии, простой для ее понимания. Однако с точки зрения эффективности он не является наилучшим, так как факториал всегда можно вычислить, используя обычный цикл for.

В нашем сценарии пользователь через диалоговое окно, отображаемое методом prompt() объекта window, передает целое число, факториал которого следует вычислить. Осуществляется проверка введенного числа и вызывается рекурсивная функция factorial(). Полный текст сценария приводится ниже:

<script>

// определение рекурсивной функции

function factorial(n) {

// база рекурсии (окончание ее)    if ((n == 0) || (n == 1))       return 1

// рекурсивный вызов функции    else       return n * factorial(n-1) }

x = window.prompt("Введите целое число","")

if (x == Number(x)){

alert(factorial(x))

}

else

alert("Следует ввести целое число!")

</script>

Заметим, что наш сценарий не будет вычислять факториал любого числа. Во-первых, для чисел, больших 170, значением факториала будет число Infinity, так как для таких чисел факториал больше числа 1.7976931348623157∙10³⁰⁸, а во-вторых, для чисел, больших 474, будет получена ошибка переполнения стека, используемого в любом языке программирования для хранения вызовов вложенных функций.



Функции JavaScript позволяют вообще не задавать при их определении списка формальных параметров, а использовать в теле функции массив arguments, в котором хранятся все фактические параметры. Доступ к элементам массива осуществляется с помощью операции индексирования — квадратные скобки с заданным внутри них индексом элемента:

arguments[4] Индексы в массиве начинаются с нуля. Массивы в JavaScript являются объектами типа Array и у них есть свойство length, хранящее количество элементов массива. Таким образом, максимальный индекс элемента массива на единицу меньше значения его свойства length.

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

Еще раз отметим, что в массиве arguments хранятся все фактически переданные параметры — и те, которые соответствуют явно определенным формальным параметрам, и те, которые переданы дополнительно при вызове функции в сценарии.

Пример 8. Получение значений фактических параметров функции

Создадим функцию, возвращающую строку, в которой все переданные в нее фактические параметры, начиная со второго, разделены символом, заданным ее первым параметром:

function myConcat(separator) {    result="" // инициализация    // итерации по всем переданным параметрам    for (var i=1; i < arguments.length; i++) {       result += arguments[i] +

((i == arguments.length-1) ? "" : separator)    }    return result }

Теперь можно вызывать эту функцию с произвольным числом параметров. Например, следующий вызов

myConcat(", ", "red", "orange", "blue")

возвратит строку

"red, orange, blue"

Можно выполнить и такой вызов:

myConcat(":", "red", "orange", "blue", "yellow")

Результатом будет строка

"red:orange:blue:yellow"



Область видимости переменных

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

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

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

aGlob = "g" // Глобальная переменная

var bGlob = "g" // Глобальная переменная

function f(){

// изменение значения глобальной переменной

aGlob = "f"

// создание новой глобальной переменной

aFuncGlob = "f"

// создание локальной переменной

var aFunc = "f"

// создание локальной переменной с именем глобальной

var bGlob = "f"

}

После вызова функции f() значения переменных будут следующими:

aGlob = "f"

bGlob = "g"

aFuncGlob = "f"

Тогда как переменной aFunc существовать после завершения выполнения функции f() не будет.

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

Пример 9. Область видимости переменных

Поучительный пример на сказанное выше относительно создания интерпретатором переменных. Какое значение вернет функция tweak() и чему будет равно после ее выполнения значение переменной aNumber?

var aNumber = 100;

function tweak() {

var newThing = 0;

newThing = aNumber;

aNumber = 42;

if (newThing == 100){

var aNumber;

aNumber = 123;

newThing = aNumber;

}

return newThing

}

tweak();

На первый взгляд, все очевидно. При вызове функции tweak() уже существует глобальная переменная aNumber со значением 100. Функция создает локальную переменную newThing и присваивает ей значение 100 (значение глобальной переменной aNumber в момент вызова функции). После чего значение глобальной переменной aNumber меняется на 42. Выражение условия оператора if равно true и локальной переменной aNumber присваивается значение 123, которое в следующем операторе присваивается локальной переменной newThing и возвращается функцией tweak(). Итак, ответ таков: функция tweak() вернет значение 123, а после ее выполнение значение переменной aNumber будет равно 42.

Выполним этот сценарий в браузере. Результат удивит нас весьма. Функция tweak() вернет значение undefined, а переменная aNumber как имела значение 100 до выполнения функции tweak(), так и будет его иметь!

Почему? Пытаясь смоделировать выполнение программы, мы забыли, что интерпретатор до начала ее выполнения создает переменные, объявленные во всех операторах var, включая локальные переменные функций, и присваивая им значение undefined. Поэтому при входе в функцию tweak() доступа к глобальной переменной aNumber уже не будет, и первый оператор присваивания значения переменной newThing присвоит ей значение undefined. Теперь ясно, что блок оператора if выполняться не будет, и функция вернет значение undefined. По этой же причине не изменится и значение глобальной переменной aNumber, так как на самом деле значение 42 присваивается локальной переменной aNumber.

