Лекция 1: Назначение и применение JavaScript, общие сведения

Способ 2: обработчики событий

Такие программы, как обработчики событий, указываются в атрибутах контейнеров, с которыми эти события связаны. Например, при нажатии на кнопку происходит событие Click и соответственно вызывается обработчик этого события onClick:

< FORM> < INPUT TYPE=button VALUE=" Кнопка" onClick=" alert('Вы нажали кнопку'); " > < /FORM>

А в момент завершения полной загрузки документа (он связан с контейнером < BODY> ) происходит событие Load и, соответственно, будет вызван обработчик этого события onLoad:

< BODY onLoad=" alert('Приветствуем! '); " >...< /BODY>

Способ 3: подстановки

Подстановки (entity) поддерживаются только браузером Netscape Navigator 4.0. Они встречаются на Web-страницах довольно редко. Тем не менее это достаточно мощный инструмент генерации HTML-страницы на стороне браузера. Подстановки имеют формат: & {код_программы}; и используются в качестве значений атрибутов HTML-контейнеров. В следующем примере поле ввода INPUT будет иметь, в качестве значения по умолчанию, адрес текущей страницы, а размер поля будет равным количеству символов в этом адресе.

< HTML> < HEAD> < SCRIPT> function l(){ str = window.location.href; return(str.length); }< /SCRIPT> < /HEAD> < BODY> < FORM> < INPUT TYPE=text SIZE=" & {l()}; " VALUE=" & {window.location.href}; " > < /FORM> < /BODY> < /HTML>

Очевидно, что размещать в заголовке документа генерацию текста страницы бессмысленно — он не будет отображен браузером. Поэтому в заголовок помещают декларации общих переменных и функций, которые будут затем использоваться в теле документа. При этом браузер Netscape Navigator более требовательный, чем Internet Explorer. Если не разместить описание функции в заголовке, то при ее вызове в теле документа можно получить сообщение о том, что данная функция не определена.

В Internet Explorer подстановки не поддерживаются, поэтому пользоваться ими следует аккуратно. Прежде чем выдать браузеру страницу с подстановками, нужно проверить тип этого браузера. Альтернативой подстановкам в Internet Explorer можно считать динамические свойства стиля. Например, следующий фрагмент создаст поле ввода, ширина которого в пикселях (px) равна количеству символов в адресе страницы, умноженному на 10:

< INPUT TYPE=text style=" width: expression(10*location.href.length+'px')" >

Мы не будем подробно останавливаться на этом способе использования JavaScript-кода.

Способ 4: вставка (контейнер < SCRIPT> )

Контейнер SCRIPT — это развитие подстановок до возможности генерации текста документа JavaScript-кодом. В этом смысле применение SCRIPT аналогично Server Side Includes, т.е. генерации страниц документов на стороне сервера. Однако здесь мы забежали чуть вперед. При разборе документа HTML-парсер передает управление JavaScript-интерпретатору после того, как встретит тег начала контейнера < SCRIPT>. Интерпретатор получает на исполнение весь фрагмент кода внутри контейнера SCRIPT и возвращает управление HTML-парсеру для обработки текста страницы после тега конца контейнера < /SCRIPT>.

Помещать JavaScript-код на HTML-странице с помощью контейнера < SCRIPT> можно двумя способами. Первый состоит в написании текста кода непосредственно внутри этого контейнера:

< SCRIPT> a = 5; < /SCRIPT>

Второй способ состоит в том, чтобы вынести код JavaScript в отдельный файл, например, myscript.js (расширение может быть любым), и затем включить его в HTML-страницу следующим образом:

< SCRIPT SRC=" myscript.js" > < /SCRIPT>

Этот способ удобен, когда один и тот же скрипт планируется использовать на разных HTML-страницах. Обратите внимание, что при наличии атрибута SRC содержимое контейнера < SCRIPT> пусто, и это не случайно: согласно спецификации HTML, если скрипт подключается из внешнего файла, то скрипт, написанный между тэгами < SCRIPT> и < /SCRIPT>, если таковой имеется, будет проигнорирован браузером.

Здесь уместно небольшое замечание, которое позволит Вам избежать одной ошибки начинающих программистов. Между тэгами < SCRIPT> и < /SCRIPT> не должно встречаться последовательности символов < /SCRIPT> в любом контексте. Например, следующий пример работать не будет:

< SCRIPT> alert('< /script> '); < /SCRIPT>

Дело в том, что специфика разбора HTML-документа браузером такова, что он сначала определяет границы скрипта, а потом уже передает его интерпретатору JavaScript. В нашем случае браузер посчитает, что код скрипта завершился на первой же встретившейся ему последовательности символов " < /script> ", т.е. не на той, на которой было нужно нам. Чтобы пример заработал, достаточно, например, написать alert('< \/script> ') (т.к. комбинация " \/" выводит на экран символ " /" ), либо разбить строчку на две: alert('< /scr'+'ipt> ').

Контейнер SCRIPT выполняет две основные функции:

· размещение кода внутри HTML-документа;

· условная генерация HTML-разметки на стороне браузера.

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

Размещение кода внутри HTML-документа

Собственно, особенного разнообразия здесь нет. Код можно разместить либо в заголовке документа (внутри контейнера HEAD) либо в теле документа (внутри контейнера BODY).

Код в заголовке документа размещается внутри контейнера SCRIPT. В следующем примере мы декларировали функцию time_scroll() в заголовке документа, а потом вызвали ее как обработчик события Load в теге начала контейнера BODY.

< HTML> < HEAD> < SCRIPT> function time_scroll(){ var d = new Date(); window.status = d.getHours() + ': ' + d.getMinutes() + ': ' + d.getSeconds(); setTimeout('time_scroll()', 1000); }< /SCRIPT> < /HEAD> < BODY onLoad=" time_scroll()" > < H1> Часы в строке статуса< /H1> < /BODY> < /HTML>

Пример 1.2. Часы в поле статуса окна (html, txt)

Функция time_scroll() вызывается по окончании полной загрузки документа (обработчиком onLoad). Она заносит текущую дату и время (new Date) в переменную d. Затем записывает текущее время в формате ЧЧ: ММ: СС в window.status, тем самым оно будет отображаться в поле статуса окна браузера (подробнее о нем рассказано в лекции " Программируем свойства окна браузера" ). Наконец, она откладывает (setTimeout) повторный вызов самой себя на 1000 миллисекунд (т.е. 1 секунду). Таким образом, каждую секунду в поле статуса будет отображаться новое время.

Условная генерация HTML-разметки на стороне браузера

Всегда приятно получать с сервера страницу, подстроенную под возможности нашего браузера или, более того, под пользователя. Существует только две возможности генерации таких страниц: на стороне сервера или непосредственно у клиента. JavaScript-код исполняется на стороне клиента (на самом деле, серверы компании Netscape способны исполнять JavaScript-код и на стороне сервера, только в этом случае он носит название LiveWire-код; не путать с LiveConnect), поэтому рассмотрим только генерацию на стороне клиента.

Для генерации HTML-разметки контейнер SCRIPT размещают в теле документа, т.е. внутри контейнера BODY. Простой пример — встраивание в страницу локального времени:

< BODY>...< SCRIPT> d = new Date(); document.write('Момент загрузки страницы: '+ d.getHours() + ': '+ d.getMinutes() + ': '+ d.getSeconds()); < /SCRIPT>...< /BODY>

Указание языка сценария

Контейнер < SCRIPT> имеет необязательный атрибут LANGUAGE, указывающий язык, на котором написан содержащийся внутри контейнера скрипт. Значение атрибута не чувствительно к регистру. Если этот атрибут опущен, то его значением по умолчанию считается " JavaScript". Поэтому все наши примеры можно записывать следующим образом:

< SCRIPT LANGUAGE=" JavaScript" >...< /SCRIPT>

В качестве альтернативы атрибут LANGUAGE может принимать значения " JScript" (упоминавшаяся выше разновидность языка JavaScript, разработанная компанией Microsoft), " VBScript" или " VBS" (оба указывают на язык программирования VBScript, основанный на Visual Basic и тоже являющийся детищем Microsoft; поддерживается преимущественно браузером Internet Explorer) и другие. Кроме того, для JavaScript бывает необходимо указать версию языка, например, LANGUAGE=" JavaScript1.2". Потребность в этом может возникнуть, если нужно написать разные участки кода для браузеров, поддерживающих разные версии языка.

Следует также иметь в виду, что в настоящей версии языка HTML (т.е. 4.0 и выше) атрибут LANGUAGE контейнера < SCRIPT> считается устаревшим и нерекомендуемым к использованию (deprecated). Вместо него в контейнере < SCRIPT> рекомендуется использовать атрибут TYPE. Его значениями, также не чувствительными к регистру, могут быть " text/javascript" (значение по умолчанию), " text/vbscript" и другие. Например, все наши примеры можно оформлять так:

< SCRIPT TYPE=" text/javascript" >...< /SCRIPT>

Некоторые старые браузеры не понимают атрибут TYPE, поэтому можно задавать оба атрибута одновременно — LANGUAGE и TYPE. Атрибут TYPE имеет высший приоритет, т.е. если браузер распознает значение TYPE, то значение LANGUAGE игнорируется.

Регистр символов

Как Вы, наверное, знаете, язык HTML является регистро-независимым. Вследствие этого, контейнер < SCRIPT> можно писать как < script>, его атрибуты — как Type, LANGuage и src, значение атрибутов, указывающих язык, — как " JavaSCRIPT" и " TEXT/JavaScript". Разумеется, значение атрибута SRC, т.е. имя файла, следует писать точно так, как файл назван в операционной системе.

Напротив, язык же JavaScript — регистро-зависимый. Это означает, что все переменные, функции, ключевые слова и т.п. должны набираться в том же регистре, в каком они заданы в языке или в программе пользователя. Например, если Вы объявили переменную var myText='Привет', то в дальнейшем ее можно использовать только как myText, но не MyText. В этом кроется частая ошибка, которую допускают программисты на JavaScript. Она усугубляется еще и тем, что JavaScript не требует явно декларировать переменные, и встретив MyText, интерпретатор может решить, что это новая (но не объявленная) переменная.

Названия событий, такие как Click (щелчок мышью), DblClick (двойной щелчок мышью), Load (окончание загрузки документа) и т.п. сами по себе не являются элементами синтаксиса. Обработчики же соответствующих событий могут появляться в двух контекстах:

· внутри кода JavaScript — в этом случае регистр имеет значение. Например, чтобы при возникновении события Load вызывалась функция myFunction, мы должны написать: window.onload = myFunction. Названия обработчиков событий onload, onmouseover и т.п. в таком контексте должны быть написаны маленькими буквами;

· как атрибут какого-либо HTML-контейнера — в этом случае регистр не важен. Например, чтобы обработчик события onLoad вызывал функцию myFunction, мы можем написать в HTML-исходнике: < BODY onLoad=" myFunction()" > либо < BODY ONLOAD=" myFunction()" >.

Литералы

Литералом называют данные, которые используются в программе непосредственно. При этом под данными понимаются числа или строки текста. Все они рассматриваются в JavaScript как элементарные типы данных. Приведем примеры литералов:

числовой литерал: 10

числовой литерал: 2.310

числовой литерал: 2.3e+2

строковый литерал: 'Это строковый литерал'

строковый литерал: " Это строковый литерал"

Литералы используются в операциях присваивания значений переменным или в операциях сравнения:

var a=10;

var str = 'Строка';

if(x=='test') alert(x);

Оператор присваивания (переменная = выражение) возвращает результат вычисления выражения, поэтому ничто не мешает полученное значение присвоить еще и другой переменной. Таким образом, последовательность операторов присваивания выполняется справа налево:

result = x = 5+7;

Два варианта строковых литералов необходимы для того, чтобы использовать вложенные строковые литералы. Если в строковом литерале требуется использовать одинарную кавычку, то сам литерал можно заключить в двойные кавычки: " It's cool! ". Верно и обратное. Но если есть необходимость использовать в строковом литерале оба вида кавычек, то проще всего всех их " экранировать" символом обратной косой черты \, при этом саму строку можно заключить в любую пару кавычек. Например:

команда:

document.write(" It\'s good to say \" Hello\" to someone! " );

выдаст:

It's good to say " Hello" to someone!

Помимо строковых литералов (последовательностей символов, заключенных в кавычки) есть еще строковые объекты; они создаются конструктором: var s = new String(). У этого объекта существует много методов (об объектах и методах пойдет речь в следующей лекции). Следует понимать, что строковый литерал и строковый объект — далеко не одно и то же. Но зачастую мы этого не замечаем, т.к. при применении к строчным литералам методов строчных объектов происходит преобразование первых в последние.

Например, можно сначала присвоить var s='abra-kadabra', а затем применить метод: var m=s.split('b'), который неявно преобразует строковый литерал s в строковый объект и затем разбивает строку в тех местах, где встречается подстрока 'b', возвращая массив строк-кусков: массив m будет состоять из строк 'a', 'ra-kada' и 'ra' (массивы рассматриваются ниже).

Переменные

Переменная — это область памяти, имеющая свое имя и хранящая некоторые данные. Переменные в JavaScript объявляются с помощью оператора var, при этом можно давать или не давать им начальные значения:

var k;

var h='Привет! ';

Можно объявлять сразу несколько переменных в одном операторе var (тем самым уменьшая размер кода), но тогда их надо писать через запятую. При этом тоже можно давать или не давать начальные значения:

var k, h='Привет! ';

var t=37, e=2.71828;

Тип переменной определяется по присвоенному ей значению. Язык JavaScript — слабо типизирован: в разных частях программы можно присваивать одной и той же переменной значения различных типов, и интерпретатор будет " на лету" менять тип переменной. Узнать тип переменной можно с помощью оператора typeof():

var i=5; alert(typeof(i));

i= new Array(); alert(typeof(i));

i= 3.14; alert(typeof(i));

i= 'Привет! '; alert(typeof(i));

i= window.open(); alert(typeof(i));

Переменная, объявленная оператором var вне функций, является глобальной — она " видна" всюду в скрипте. Переменная, объявленная оператором var внутри какой-либо функции, является локальной — она " видна" только в пределах этой функции. Подробнее о функциях будет рассказано в следующем разделе этой лекции.

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

function f()

{ var k=5; }

 

f(); alert(k);

Если имеется глобальная переменная k, а внутри функции объявляется локальная переменная с тем же именем (оператором var k), то это будет другая переменная, и изменение ее значения внутри функции никак не повлияет на значение глобальной переменной с тем же именем. Например, этот скрипт выдаст 7, поскольку вызов функции f() не затронет значения глобальной переменной k:

var k=7;

 

function f()

{ var k=5; }

 

f(); alert(k);

То же касается и аргументов при описании функций (с той лишь разницей, что перед ними не нужно ставить var): если имеется глобальная переменная k, и мы опишем функцию function f(k) {...}, то переменная k внутри {...} никак не связана с одноименной глобальной переменной. В этом плане JavaScript не отличается от других языков программирования.

Примечание. Объявлять переменные можно и без оператора var, просто присваивая переменной начальное значение. Так зачастую делают с переменными циклов. В следующем примере, даже если переменная i не была объявлена ранее, все будет работать корректно:

for(i=0; i< 8; i++) {... }

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

function f()

{ var i=5; k=7; }

 

f(); alert(k);

В приведённом примере после i=5 стоит точка с запятой (а не запятая). Значит, k=7 — это отдельное объявление переменной, уже без оператора var. Поэтому переменная k " видна" снаружи и ее значение (7) будет выведено оператором alert(k). Чтобы скрыть переменную k, нужно было после i=5 поставить запятую.

Рассмотрим другой пример, показывающий, к каким неожиданным последствиям может привести отсутствие var при описании переменной:

function f(i)

{ k=7;

if(i==3) k=5;

else { f(3); alert(k); }

}

f(0);

Мы вызываем f(0), переменной присваивается значение k=7, далее выполнение функции идет по ветке else — и оператор alert(k) выдает 5 вместо ожидавшегося 7. Причина в том, что вызов f(3) в качестве " побочного эффекта" изменил значение k. Чтобы такого не произошло, нужно перед k=7 поставить var. Тогда переменная k будет локальной и вызов f(3) не сможет ее изменить, так как при вызове функции создаются новые копии всех ее локальных переменных.

При написании больших программ подобные ошибки трудно отследить, поэтому настоятельно рекомендуется все переменные объявлять с оператором var, особенно внутри функций.

Массивы

Массивы делятся на встроенные (document.links[], document.images[] и т.п. — их еще называют коллекциями) и определяемые пользователем (автором документа). Для массивов определено несколько методов: join(), reverse(), sort() и другие, а также свойство length, которое позволяет получить число элементов массива.

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

a = new Array(); // пустой массив (длины 0) b = new Array(10); // массив длины 10 c = new Array(10, 'Привет'); // массив из двух элементов: числа и строки d = [5, 'Тест', 2.71828, 'Число e']; // краткий способ создать массив из 4 элементов

Элементы массива нумеруются с нуля. Поэтому в последнем примере значение d[0] равно 5, а значение d[1] равно 'Тест'. Как видим, массив может состоять из разнородных элементов. Массивы не могут быть многомерными, однако ничто не мешает завести массив, элементами которого будут тоже массивы.

Метод join()

Метод join() позволяет объединить элементы массива в одну строку. Он является обратным к методу split(), который разрезает объект типа String на куски и составляет из них массив. Кстати, метод split() демонстрирует тот факт, что массив можно получить и без конструктора массива.

Рассмотрим пример преобразования локального URL в глобальный URL, где в качестве адреса сервера будет выступать www.intuit.ru. Пусть в переменной localURL хранится локальный URL некоторого файла:

localURL = " file: ///C: /department/internet/js/2/2.html"

Разрежем строку в местах вхождения комбинации символов ": /", выполнив команду: b = localURL.split(': /'). Получим массив:

b[0] = " file"; b[1] = " //C"; b[2] = " department/internet/js/2/2.html";

Заменяем 0-й и 1-й элементы на требуемые:

b[0] = " http: "; b[1] = " /www.intuit.ru";

Наконец, склеиваем полученный массив, вставляя косую черту в местах склейки: globalURL = b.join(" /" ). В итоге мы получаем требуемый глобальный URL — значение globalURL будет равно: http: //www.intuit.ru/department/internet/js/2/2.html.

Метод reverse()

Метод reverse() применяется для изменения порядка элементов массива на противоположный. Предположим, массив упорядочен по возрастанию:

a = new Array('мать', 'видит', 'дочь');

Упорядочим его в обратном порядке, вызвав метод a.reverse(). Тогда новый массив a будет содержать:

a[0]='дочь'; a[1]='видит'; a[2]='мать';

Метод sort()

Метод sort() интерпретирует элементы массива как строковые литералы и сортирует массив в алфавитном (т.н. лексикографическом) порядке. Обратите внимание: метод sort()меняет массив. В предыдущем примере, применив a.sort(), мы получим на выходе:

a[0]='видит'; a[1]='дочь'; a[2]='мать';

Однако, это неудобно, если требуется отсортировать числа, поскольку согласно алфавитному порядку 40 идет раньше чем 5. Для этих целей у метода sort() имеется необязательный аргумент, являющийся именем функции, согласно которой требуется отсортировать массив, т.е. в этом случае вызов метода имеет вид: a.sort(myfunction). Эта функция должна удовлетворять определенным требованиям:

· у нее должно быть ровно два аргумента;

· функция должна возвращать число;

· если первый аргумент функции должен считаться меньшим (большим, равным) чем второй аргумент, то функция должна возвратить отрицательное (положительное, нуль) значение.

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

function compar(a, b){ if(a < b) return -1; if(a > b) return 1; if(a == b) return 0; }

Теперь, если у нас есть массив b = new Array(10, 6, 300, 25, 18);, то можно сравнить результаты сортировки без аргумента и с функцией compar в качестве аргумента:

document.write(" Алфавитный порядок: < BR> " ); document.write(b.sort()); document.write(" < BR> Числовой порядок: < BR> " ); document.write(b.sort(compar));

В результате выполнения этого кода получим следующее:

Алфавитный порядок: 10, 18, 25, 300, 6Числовой порядок: 6, 10, 18, 25, 300

Обратите внимание: метод sort() интерпретирует элементы массива как строки (и производит лексикографическую сортировку), но не преобразует их в строки. Если в массиве были числа, то они числами и останутся. В этом легко убедиться, если в конце последнего примера выполнить команду document.write(b[3]+1): результат будет 26 (т.е. 25+1), а не 251 (т.е." 25" +1).

Операторы языка

В этом разделе будут рассмотрены операторы JavaScript. Основное внимание при этом мы уделим операторам декларирования и управления потоком вычислений. Без них не может быть написана ни одна JavaScript-программа.

Общий перечень этих операторов выглядит следующим образом (сразу оговоримся, что этот список неполный):

· {...}

· if... else...

· ()?

· while

· for

· break

· continue

· return

{...}

Фигурные скобки определяют составной оператор JavaScript — блок. Основное назначение блока — определение тела цикла, тела условного оператора или функции.

if... else...

Условный оператор применяется для ветвления программы по некоторому логическому условию. Есть два варианта синтаксиса:

if (логическое_выражение) оператор_1; if (логическое_выражение) оператор_1; else оператор_2;

Логическое выражение — это выражение, которое принимает значение true или false. В первом варианте синтаксиса: если логическое_выражение равно true, то выполняется указанныйоператор. Во втором варианте синтаксиса: если логическое_выражение равно true, то выполняется оператор_1, если же оно равно false оператор_2. Пример использования (об объектеnavigator читай лекцию " Программируем свойства окна браузера" ):

if (navigator.javaEnabled()) alert('Ваш браузер поддерживает Java'); else alert('Ваш браузер НЕ поддерживает Java');

()?

Этот оператор, называемый условным выражением, выдает одно из двух значений в зависимости от выполнения некоторого условия. Синтаксис его таков:

(логическое_выражение)? значение_1: значение_2

Если логическое_выражение равно true, то возвращается значение_1, в противном случае значение_2. Условное выражение легко имитируется оператором if...else, однако оно позволяет сделать более компактным и легко воспринимаемым код программы. Например, следующие два фрагмента равносильны:

TheFinalMessage = (k> 5)? 'Готово! ': 'Подождите...'; if(k> 5) TheFinalMessage = 'Готово! '; else TheFinalMessage = 'Подождите...';

While

Оператор while задает цикл. Определяется он в общем случае следующим образом:

while (условие_продолжения_цикла) тело_цикла;

Тело цикла может быть как простым, так и составным оператором. Составной оператор, как всегда, заключается в фигурные скобки. Рекомендуется и простой оператор заключать в них, чтобы программу можно было легко модифицировать. Условие_продолжения_цикла является логическим выражением. Тело исполняется до тех пор, пока верно логическое условие. Формально, цикл while работает следующим образом:

1. проверяется условие_продолжения_цикла:

o если оно ложно (false), цикл закончен,

o если же истинно (true), то продолжаем далее;

2. выполняется тело_цикла;

3. переходим к пункту 1.

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

var s=''; while (s.length< 6){ s=prompt('Введите строку длины не менее 6: ', ''); }alert('Ваша строка: ' + s + '. Спасибо! ');

For

Оператор for — это еще один оператор цикла. В общем случае он имеет вид:

for (инициализация_переменных_цикла; условие_продолжения_цикла; модификация_переменных_цикла) тело_цикла;

Тело цикла может быть как простым, так и составным оператором (составной необходимо заключать в фигурные скобки). Операторы инициализация_переменных_цикла имодификация_переменных_цикла могут состоять из нескольких простых операторов, в этом случае простые операторы должны быть разделены запятой. Условие_продолжения_циклаявляется логическим выражением. Цикл for работает следующим образом:

1. выполняется инициализация_переменных_цикла;

2. проверяется условие_продолжения_цикла:

o если оно ложно (false), цикл закончен,

o если же истинно (true), то продолжаем далее;

3. выполняется тело_цикла;

4. выполняется модификация_переменных_цикла;

5. переходим к пункту 2.

Рассмотрим типичный пример использования этого оператора:

document.write('Кубы чисел от 1 до 100: '); for (n=1; n< =100; n++) document.write('< BR> '+n+'< sup> 3< /sup> = '+ Math.pow(n, 3));

Здесь Math — встроенный объект, предоставляющий многочисленные математические константы и функции, а Math.pow(n, m) вычисляет степенную функцию n^m. Результат работы скрипта получите самостоятельно.

Break

Оператор break позволяет досрочно покинуть тело цикла. Возвращаясь к нашему примеру с кубами чисел, распечатаем только кубы, не превышающие 5000.

document.write('Кубы чисел, меньшие 5000: '); for (n=1; n< =100; n++){ s=Math.pow(n, 3); if(s> 5000) break; document.write('< BR> '+n+'< sup> 3< /sup> = '+s); }

Несмотря на то, что переменную n мы заставили пробегать от 1 до 100, т.е. заведомо с запасом, реально же цикл выполнится для значений n от 1 до... получите сами!

Continue

Оператор continue позволяет перейти к следующей итерации цикла, пропустив выполнение всех нижестоящих операторов в теле цикла. Если нам нужно вывести кубы чисел от 1 до 100, превышающие 10 000, то мы можем составить такой цикл:

document.write('Кубы чисел от 1 до 100, большие 10 000: '); for (n=1; n< =100; n++){ s=Math.pow(n, 3); if(s < = 10000) continue; document.write('< BR> '+n+'< sup> 3< /sup> = '+s); }

Проверьте самостоятельно, кубы каких чисел будут выведены скриптом. Разумеется, для большей гибкости можно использовать в циклах оба оператора break и continue.

Return

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

function sign(n){ if (n> 0) return 1; if (n< 0) return -1; return 0; } alert( sign(-3) );

Обратите внимание: оператор return не только указывает, какое значение должна вернуть функция, но и прекращает выполнение дальнейших операторов в теле функции.

При использовании в обработчиках событий оператор return позволяет отменить или не отменять действие по умолчанию, которое совершает браузер при возникновении данного события. Отменить его, однако, можно не для всех событий. Рассмотрим пример:

< FORM ACTION=" newpage.html" METHOD=post> < INPUT TYPE=submit VALUE=" Отправить? " onClick=" alert('Не отправим! '); return false; " > < /FORM>

В этом примере без оператора return false пользователь увидел бы окно предупреждения " Не отправим! " и далее был бы перенаправлен на страницу newpage.html. Оператор же return false позволяет отменить отправку формы, и пользователь лишь увидит окно предупреждения.

Аналогично, чтобы отменить действие по умолчанию для событий onClick, onKeyDown, onKeyPress, onMouseDown, onMouseUp, onSubmit, onReset, нужно использовать return false. Для события onMouseOver с этой же целью нужно использовать оператор return true. Для некоторых же событий, например onMouseOut, onLoad, onUnload, отменить действие по умолчанию невозможно.

 

Лекция: Функции и объекты

Мы объединили описание функций и объектов в одной лекции по причине того, что они тесно взаимосвязаны. Каждая функция является не только именем для группы операторов, но одновременно и объектом. Объекты же (пользовательские) создаются с помощью функций (конструкторов).

Функции

Язык программирования не может обойтись без механизма многократного использования кода программы. Такой механизм обеспечивается процедурами или функциями. В JavaScript функция выступает в качестве одного из основных типов данных. Одновременно с этим в JavaScript опреде–лен класс объектов Function.

В общем случае любой объект JavaScript определяется через функцию. Для создания объекта используется конструктор, который в свою очередь вводится через Function. Таким образом, с функциями в JavaScript связаны следующие ключевые вопросы:

· функция как тип данных;

· функция как объект;

· функция как конструктор объектов.

Именно эти вопросы мы и рассмотрим в данном разделе.

Функция как тип данных

Определяют функцию при помощи ключевого слова function:

function f(arg1, arg2,...){/* тело функции */}

Здесь следует обратить внимание на следующие моменты. Во-первых, function определяет переменную с именем f. Эта переменная имеет тип function:

document.write('Тип переменной f: '+ typeof(f)); // Будет выведено: Тип переменной f: function

Во-вторых, эта переменная, как и любая другая, имеет значение — свой исходный текст:

var i=5; function f(a, b, c){ if (a> b) return c; } document.write('Значение переменной i: '+ i.valueOf()); // Будет выведено: // Значение переменной i: 5 document.write('Значение переменной f: < BR> '+ f.valueOf()); // Будет выведено: // Значение переменной f: // function f(a, b, c)// {// if (a> b) return c; // }

Как видим, метод valueOf() применим как к числовой переменной i, так и к переменной f, и возвращает их значение. Более того, значение переменной f можно присвоить другой переменной, тем самым создав " синоним" функции f:

function f(a, b, c){ if (a> b) return c; else return c+8; } var g = f; alert('Значение f(2, 3, 2): '+ f(2, 3, 2) ); alert('Значение g(2, 3, 2): '+ g(2, 3, 2) ); // Будет выведено: // Значение f(2, 3, 2): 10// Значение g(2, 3, 2): 10

Этим приемом удобно пользоваться для сокращения длины кода. Например, если нужно много раз вызвать метод document.write(), то можно ввести переменную: var W = document.write(обратите внимание — без скобок! ), а затем вызывать: W('< H1> Лекция< /H1> ').

Коль скоро функцию можно присвоить переменной, то ее можно передать и в качестве аргумента другой функции.

function kvadrat(a){ return a*a; } function polinom(a, k){ return k(a)+a+5; } alert(polinom(3, kvadrat)); // Будет выведено: 17

Все это усиливается при использовании функции eval(), которая в качестве аргумента принимает строку, которую рассматривает как последовательность операторов JavaScript (блок) и выполняет этот блок. В качестве иллюстрации приведем скрипт, который позволяет вычислять функцию f(f(...f(N)...)), где число вложений функции f() задается пользователем.

< SCRIPT> function kvadrat(a){ return a*a; } function SuperPower(){ var N = parseInt(document.f.n.value), K = parseInt(document.f.k.value), L = R = ''; for(i=0; i< K; i++) { L+='kvadrat('; R+=')'; } return eval(L+N+R); }< /SCRIPT> < FORM NAME=f> Введите аргумент (число): < INPUT NAME=n> < BR> Сколько раз возвести его в квадрат? < INPUT NAME=k> < BR> < INPUT TYPE=button value=" Возвести" onClick=" alert(SuperPower()); " > < /FORM>

Обратите внимание на запись L=R=''. Она выполняется справа налево. Сначала происходит присваивание R=''. Операция присваивания выдает в качестве результата значение вычисленного выражения (в нашем случае — пустая строка). Она-то и присваивается далее переменной L.

Поясним работу скрипта в целом. В функции SuperPower() мы сначала считываем значения, введенные в поля формы, и преобразуем их из строк в целые числа функцией parseInt(). Далее с помощью цикла for мы собираем строку L, состоящую из K копий строки " kvadrat(", и строку R, состоящую из K правых скобок " )". Теперь мы составляем выражение L+N+R, представляющее собой K раз вложенную в себя функцию kvadrat(), примененную к аргументу N. Наконец, с помощью функции eval() вычисляем полученное выражение. Таким образом, вычисляется функция (...((N)²)²...)² = N^2K.

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

У любого типа данных JavaScript существует объектовая " обертка" (wrapper), которая позволяет применять методы типов данных к переменным и литералам, а также получать значения их свойств. Например, длина строки символов определяется свойством length. Аналогичная " обертка" есть и у функций — это класс объектов Function.

Например, увидеть значение функции можно не только при помощи метода valueOf(), но и используя метод toString():

function f(x, y){ return x-y; }document.write(f.toString());

Результат распечатки:

function f(x, y) { return x-y; }

Свойства же функции как объекта доступны программисту только тогда, когда они вызываются внутри этой функции. Наиболее часто используемыми свойствами являются: массив (коллекция) аргументов функции (arguments[]), его длина (length), имя функции, вызвавшей данную функцию (caller), и прототип (prototype).

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

function my_sort(){ a = new Array(my_sort.arguments.length); for(i=0; i< my_sort.arguments.length; i++) a[i] = my_sort.arguments[i]; return a.sort(); } b = my_sort(9, 5, 7, 3, 2); document.write(b); // Будет выдано: 2, 3, 5, 7, 9

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

function s(){ document.write(s.caller+" < BR> " ); } function M(){ s(); return 5; } function N(){ s(); return 7; } M(); N();

Результат исполнения:

function M() { s(); return 5; }function N() { s(); return 7; }

Еще одним свойством объекта класса Function является prototype. Но это — общее свойство всех объектов, не только функций, поэтому и обсуждать его мы будем в следующем разделе в контексте типа данных Object. Упомянем только о конструкторе объекта класса Function:

f = new Function(arg_1,..., arg_n, body)

Здесь f — это объект класса Function (его можно использовать как обычную функцию), arg_1, ..., arg_n — аргументы функции f, а body — строка, задающая тело функции f.

Данный конструктор можно использовать, например, для описания функций, которые назначают или переопределяют методы объектов. Здесь мы вплотную подошли к вопросу конструирования объектов. Дело в том, что переменные внутри функции можно рассматривать в качестве ее свойств, а функции — в качестве методов:

function Rectangle(a, b, c, d){this.x0 = a; this.y0 = b; this.x1 = c; this.y1 = d; this.area = new Function( " return Math.abs((this.x1-this.x0)*(this.y1-this.y0))" ); } r = new Rectangle(0, 0, 30, 50); document.write(" Площадь: " +r.area()); // Будет выведено: // Площадь: 1500

Обратите внимание еще на одну особенность — ключевое слово this. Оно позволяет сослаться на текущий объект, в рамках которого происходит исполнение JavaScript-кода. В данном случае это объект класса Rectangle.

Объекты

Объект — это главный тип данных JavaScript. Любой другой тип данных имеет объектовую " обертку" (wrapper). Это означает, что прежде чем можно будет получить доступ к значению переменной того или иного типа, происходит конвертирование переменной в объект, и только после этого выполняются действия над значением. Тип данных Object сам определяет объекты.

В сценарии JavaScript могут использоваться объекты нескольких видов:

· клиентские объекты, входящие в модель DOM, т.е. отвечающие тому, что содержится или происходит на Web-странице в окне браузера. Они создаются браузером при разборе (парсинге) HTML-страницы. Примеры: window, document, location, navigator и т.п.

· серверные объекты, отвечающие за взаимодействие клиент-сервер. Примеры: Server, Project, Client, File и т.п. Серверные объекты в этом курсе рассматриваться не будут.

· встроенные объекты. Они представляют собой различные типы данных, свойства, методы, присущие самому языку JavaScript, независимо от содержимого HTML-страницы. Примеры: встроенные классы объектов Array, String, Date, Number, Function, Boolean, а также встроенный объект Math.

· пользовательские объекты. Они создаются программистом в процессе написания сценария с использованием конструкторов типа объектов (класса). Например, можно создать свои классы Cat и Dog. Создание и использование таких объектов будет рассмотрено далее в этой лекции.

With

Оператор with задает объект по умолчанию для блока операторов, определенных в его теле. Синтаксис его таков:

1234567Следующая ⇒

Поделиться: