Введение в JavaScript

Иерархия объектов JavaScript

Основные функции и правила составления программ

Разбираем примеры.

Введение в JavaScript

JavaScript - это язык программирования, разработанный фирмой Netscape на базе языка Java корпорации Sun. С самого начала он рассматривался как язык написания сценариев для HTML-страниц, чем существенно отличается от своего прародителя - Sun's Java, поскольку обходится без компиляции и реализует свои возможности только с помощью браузеров. Однако, здесь существуют определенные проблемы, такие, например, как межбраузерная совместимость.

Дело заключается в том, что другой крупнейший разработчик браузеров - фирма Microsoft в своем детище - браузере Microsoft Internet Explorer поначалу сделала ставку на продвижение собственного языка, ужек опробированного в оффисных приложения Microsoft Word, Microsoft Excel и других. Речь идет о языке Visual Basic и о его скриптовой версии - VBScript. Понятно, что сдавать свои позиции без боя фирма Microsoft не собиралась. Из-за этого в мире WEB-дизайна установилось двлевластие, когда каждая из соперничающих сторон доказывала другой и всем остальным, что ее продукт наилучшим образом соответствует стандартам консорциума W3C.

В конце концов фирма Microsoft под давлением антимонопольного расследования была вынуждена включить поддержку JavaScript в свои версии браузера Microsoft Internet Explorer. Однако, отличия все же имеют место, поэтому принято поддерживаемую в Microsoft Internet Explorer версию называть JScript. Ниже приведена таблица соответствия версий JavaScript версиям поддерживающих их браузеров двух основных фирм-конкурентов:

Версия JavaScript Версия Netscape Navigator Версия Microsoft Internet Explorer
JavaScript 1.0Navigator 2.0Internet Explorer 3.x
JavaScript 1.1Navigator 3.0 
JavaScript 1.2Navigator 4.0-4.05Internet Explorer 4.x-5.x
JavaScript 1.3Navigator 4.5-4.6 

Как видим из таблицы, однозначного соответствия в поддержке браузерами JavaScript нет. Но даже в рамках одной версии в поддерживаемых командах есть существенные различия, например, в действиях со слоями. Это создает дополнительные сложности для WEB-дизайнера, которому по сути приходится дублировать некоторые блоки программ, используя команды, поддерживаемые либо одним, либо другим браузерами. Браузеры третьих фирм могут вообще не поддерживать JavaScript или поддерживать его старые версии с более узким набором команд.

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

Основные элементы языка

В основу языка JavaScript положены действия, выполняемые над объектами HTML, то есть над тэгами и контейнерами. Кроме того, JavaScript имеет собственные объекты, такие, например, как Array, Data, Math, String и другие.

Каждый объект обладает свойствами, то есть некоторым набором характеристик. С этим мы уже встречались, рассматривая HTML-контейнеры. Действительно, в открывающем тэге контейнера зачастую перечисляются устанавливаемые значения для его свойств. Например, тэг <BODY> может быть дополнен указанием значений цвета фона BGCOLOR , фонового рисунка BACKGROUND, цвета для гиперссылок LINK, ALINK, VLINK и т. д.

Поскольку в JavaScript присутствуют определенные объекты со своими свойствами, то должен быть и механизм задания и изменения этих свойств. Он включает в себя методы, как набор действий, приводящих в изменению свойств объектов. При этом для каждого объекта применимы определенные действия. Кстати, в помощью методов JavaScript можно также изменять свойства и объектов HTML, но обратное действие невозможно.

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

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

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

Алфавит языка JavaScript.

Переменные.

Как и в любом языке, в JavaScript используются переменные. Для именования переменных нужно следовать таким правилам:

  1. Длина имени переменной практически не ограничена.

  2. В имена переменных могут включаться буквы латинского алфавита (строчные и заглавные), цифры, а также знак "_"", но первым символом в имени обязательно должна быть буква (иногда допускается знак $).

  3. В именах различаются строчная и заглавная буквы.

  4. Имя переменной не должно включать пробела.

  5. В качестве имен нельзя использовать зарезервированные слова, список которых приведен ниже:

abstractdeleteinnerWidthPackargesstatus
alertdoinstanceofpageXOffsetstatusbar
argumentdocumentintpageYOffsetstop
ArraydoubleinterfaceparentString
blurelseisFiniteparseFloatsuper
booleanenumisNaNparseIntswitch
Booleanescapejavapersonalbarsynchronized
breakevallengthprintthis
byteexportlocationprivatethrow
calleeextendslocationbarpromptthrows
callerfinallongprotectedtoolbar
captureEventsfinallyMathprototypetop
casefindmenubarpublictoString
catchfloatmoveByRegExptransient
charfocusmoveToreleaseEventstry
classfornameresizeBytypeof
clearIntervalframesNaNresizeTounescape
clearTimeoutFunctionnativereturnunwatch
closefunctionnetscaperouteEventvalueOf
closedgotonewscrollvar
confirmhistorynullscrollbarsvoid
consthomeNumberscrollBywatch
constructorifObjectscrollTowhile
continueimplementsopenselfwindow
DateimportopenersetIntervalwith
debuggerinouterHeightsetTimeoutFALSE
defaultinfinityouterWidthshortTRUE
defaultStatusinnerHeightpackagestatic 

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

var a;		- объявление переменной без присвоения значения
var b=1;		- объявление числовой переменной с присвоение ей значения;
var c="Hello";	- объявление символьной переменной с присвоением ей значения;
var d=new Array(10);	- объявление массива из 11 элементов (считая от 0).

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

	gamma=alpha+beta;
	t="Java"+"Script";

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

	var x = 5;
	x = "five";
Константы.

Числовые константы в языке JavaScript указываются следующим образом:

Знаки математических операций.

Для обозначения арифметических действий используются следующие знаки:
+ - сложение;
- - вычитание;
* - умножение;
/ - деление;
% - остаток от деления;
++ - инкремент (приращение);
-- - декремент (уменьшение).

Операции сравнения обозначаются так:
< - меньше чем;
> - больше чем;
<= - меньше чем или равно;
>= - больше чем или равно;
== - равно;
!= - не равно;

Для обозначения логических операций используются символы:
&& - логическое "И";
|| - логическое "ИЛИ";
! - логическое "НЕ";
<< - логический сдвиг влево;
>> - логический сдвиг вправо;
& - побитовое "И";
| - побитовое "ИЛИ";
^ - побитовое "Исключающее ИЛИ".

Операции обновления значения переменных являются комбинацией операции присваивания и арифметической или логической операции. В результате ее переменной сразу присваивается обновленное значение:
= - простое присваивание;
+= - обновление с инкрементом;
-= - обновление с декрементом;
*= - обновление с умножением;
/= - обновление с делением;
%= - обновление с вычислением остатка;
<<= - обновление со сдвигом влево;
>>= - обновление со сдвигом вправо;
&= - обновление с побитовым "И";
|= - обновление с побитовым "ИЛИ";
^= - обновление с побитовым "Исключающее ИЛИ".

Служебные символы.

К служебным символам, допустимым в языке Javascript относятся:
( ) - круглые скобки;
[ ] - квадратные скобки;
{ } - фигурные скобки;
. - точка;
, - запятая;
; - точка с запятой;
" - кавычки;
' - апостроф;
_ - подстрочный символ.

Использование символов кириллицы (русских и украинсих букв) допустимо только в виде значений символьных переменных, когда они заключены в кавычки.

Арифметические выражения.

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

Порядок выполнения действий определяется приоритетом знака математической операции, объединяющей отдельные составляющие арифметического выражения:
( ) - выражение в круглых скобках;
++ - инкремент;
-- - декремент;
! - отрицание;
* - умножение;
/ - деление;
+ - сложение;
- - вычитание;
логические операции.

При равном приоритете операций они выполняются по порядку слева направо. Действия, заключенные в скобки имеют наивысший приоритет.

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

Комментарии.

В программу на языке JavaScript могут быть включены комментарии. Они должны начинаться с символов //. Эти символы означают, что все содержимое строки, стоящее за ними будет проигнорировано интерпретатором JavaScript, поэтому комментарии либо должны замыкать строку и стоять после команд, либо располагаться вообще в отдельной строке.

	var a=1,b=3,c=0; //пример объявления трех переменных с присвоением им значений

Если комментарии занимают несколько строк, то они должны открываться сочетанием символов /* в первой строке и закрываться символами */ в последней строке.

Специальные символы.

Специальными символами или, так называемыми, Backslash-последовательностями являются последовательности, заменяющие символы, которые либо невозможно набрать с помощью клавиш клавиатуры, либо являются служебными, и по этой причине не могут быть в явном виде включены в текст программы. Ниже приведен перечень таких символов:
\b - символ пробела;
\f - переход на следующую страницу;
\n - переход на следующую строку;
\r - возврат каретки принтера;
\t - символ табуляции;
\' - апостроф;
\" - кавычки.

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

			text = "Click\nme"

Иерархия объектов JavaScript

Как уже отмечалось выше объекты JavaScript выстроены в иерхическую структуру. Элементами этой структуры являются элементы рабочей области браузера, а также известные нам контейнеры HTML. Представим эту иерархическую структуру в виде следующей схемы:

Как видно из схемы высшую ступень в иерархии занимает объект window, который отождествляется с окном браузера. Ему подчиняются все объекты, размещенные в окне. Среди них - элементы рабочей области браузера - location, history, внутренние окна и фреймы, которые могут размещаться в площади основного окна, а также объект document, который обозначает текущую HTML-страницу.

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

Каждый вид форм (текстовые поля, кнопки, списки и т.д.) подчиняется объекту form и наследует его свойства и методы.

Но для управлениями объектами необходимо знать, каким образом получить к ним доступ. Есть два основных приема для доступа к объектам-потомкам: по номеру и по имени.

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

На рисунке все объекты пронумерованы в пределах своих классов. Все они являются потомками объекта document и в пределах данной HTML-страницы образуют следующую иерархическую структуру:

Для обращения к любому объекту необходимо вначале перечислить его родительские объекты, начиная с самого верхнего уровня иерархии, то есть с объекта document. Разделителем в этом списке является точка, а номер объекта в своем классе указывается в квадратных скобках, подобно элементу массива.

Например, для доступа к рисунку, обозначенному как images[1], нужно записать

				document.images[1],
а для доступа к кнопке, которая обозначена как объект elements[2] необходимо указать:
				document.forms[0].elements[2]

Свойства кнопки, например содержание надписи на ней, которое, как известно, называется value, теперь будет указываться так:

				document.forms[0].elements[2].value

Как видим, при такой системе нумерации ничего сложного нет, но можно легко запутаться в номерах, да еще они могут в одночасье измениться, если в середину документа понадобиться вставить еще один рисунок.

Поэтому более удобно присвоить каждому объекту свое уникальное имя с помощью атрибута name, а затем его использовать при записи. Пусть, например, форма и кнопка получают свои имена:

				<form name="MyForm">
					. . .
				<INPUT TYPE="button" name="MyButton">
					. . .
				</form>

Теперь для размещения на кнопке какой-либо надписи достаточно указать:

				document.MyForm.MyButton.value="Нажми меня!"

Основные функции и правила составления программ

Встраивание JavaScript-программы в HTML-документ.

Программа на языке JavaScript может быть включена в текст HTML-страницы четырьмя основными способами:

  1. Команды на языке JavaScript непосредственно указываются в тэге HTML. Этот прием используется в случае, когда по какому-либо событию выполняется какая-либо команда Javascript. Например:

    		<form>
    		<input type="button" value="Нажми сюда" onClick="alert ( 'Привет!' )">
    		</form>
    

    В приведенном фрагменте создается форма с кнопкой, при нажатии на которую на экране появляется окно с указанным в команде текстом - Привет!.

  2. Команда на языке JavaScript также включается прямо в тэг HTML, но здесь она непосредственно не связана с каким-либо событием:

    		<a href="javascript:window.alert('Привет!')">Нажми сюда</a> 
    Нажми сюда

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

  3. Также, как и предыдущем способе в разделе HEAD внутри контейнера Script описывается функция, но связь ее с местом применения осуществляется с помощью атрибутов FOR и EVENT. Первый из них связывает функцию с тэгами, где к ней обращаются по имени элемента ID, а второй назначает событие, по которому происходит выполнение функции:

    	<SCRIPT FOR=MyLink EVENT=onmouseover LANGUAGE="JavaScript">
    		alert("Привет!");
    	</SCRIPT>
    		. . .
    		. . .
    		. . .
    	<IMG ID=MyLink SRC="sample.gif">
    	<IMG ID=MyLink SRC="sample1.gif">
    	<IMG ID=MyLink SRC="sample2.gif">
    	<IMG ID=MyLink SRC="sample3.gif">
    
    первая вторая третья четвертая
  4. Этот способ наиболее часто используется в программах. Он заключается в том, что для выполнения различных действий с помощью языка JavaScript, формируются функции пользователя, играющие роль подпрограмм. Эти функции территориально чаще всего размещаются в контейнере HEAD, который выполняет здесь роль раздела описаний функций. Иногда функции помещают в контейнер BODY, но только в случае их однократного исполнения. Все строки, которые написаны на языке JavaScript, должны быть заключены в специальный HTML-контейнер:

    			<script language="JavaScript">
    			<!--
    				 	  .  .  .
    					функции
    					на языке
    					JavaScript
    					  .  .  .
    			// -->
    			</script>
    

    Обратите внимание, что в открывающем тэге <script> указан атрибут "language". Он становится обязательным с момента появления VBScript, которого не понимает браузер Netscape Navigator. Зачастую в атрибуте "language" также указывают версию JavaScript.

    Далее в тексте присутствует контейнер HTML-комментария, в который включен сам текст JavaScript. Тэги комментария необходимы для старых версий браузеров, чтобы предотвратить вывод текста JavaScript на экран.

    В разделе BODY в данном случае находятся команды вызова данных функций по каким-либо событиям:

    			  .  .  .
    		<HEAD>
    			  .  .  .
    		   <script language="JavaScript1.2">
    			var text="Привет!";
    			function welcome() {
    			   window.alert(text);
    			}
    			  .  .  .
    		   </script>
    			  .  .  .
    		</HEAD>
    		<BODY onload="javascript: welcome()">
    		   		  .  .  .
    		   <form>
    		   <input type="button" value="Нажми сюда" onClick="welcome()">
    		   </form>
    			  .  .  .
    		   <a href="" onMouseOver="welcome()">Проведи здесь</a>
    			  .  .  .
    		</BODY>
    

    Проверим теперь это на примере:

    Проведи здесь
  5. Последний способ включения программы на языке JavaScript в HTML-документ по сути является вариантом предыдущего, но описания функций террирориально размещены не в тексте того документа, где они используются, а в отдельном файле. Такой прием позволяет создавать библиотеки наиболее часто используемых в сайте функций JavaScript с возможностью обращения к ним как из данного WEB-узла, так и из другого (наподобие таблицам каскадных стилей CSS).

    Файл с библиотекой функций на языке JavaScript строится как обычный текстовый файл и содержит только описания функций без каких-либо тэгов HTML. Единственное требование предъявляется к расширению имени данного файла - оно должно быть "js"

    Для подключения файла с библиотекой функций JavaScript для использования в данном HTML-файле необходимо в контейнере <HEAD> указать:

    	<script language="JavaScript SRC="(имя файла).js"></script> 

    Если данная библиотека открывается для использования в данном документе однократно, то вышеуказанный контейнер помещается в то место раздела <BODY>, где выполняются функции из внешней библиотеки.

Стандартные функции для управления вычислениями.

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

Операторы для ветвления программы.

Эти операторы применяются тогда, когда порядок выполнения команд в программе зависит от какого-либо условия.

if . . . else

Условный оператор, исполняющий первый набор выражений если значение condition равно "true", и второй набор если condition равно "false" (второй набор не является обязательным). Условие condition обязательно заключается в круглые скобки.

Операторы if . . . else могут быть вложены друг в друга без ограничений. Если набор выражений состоит из одного оператора, фигурные скобки можно опустить.

			if (condition) {
			. . . строки кода . . .
			} [else {
			. . . строки кода . . .
			} ]

Следующий пример преобразует значение минут текущего времени в двузначное число для использования в программе "Часы"

			function makeMinutes ( ) {
			var minString = " ";
			var now = new Date());
			var min = Date.getMinutes ();
				if (min < 10) {
					minString += ": 0" + min; }
				else {
					minString += ":" + min; }
			return minString
			}

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

			if ((x==1)&&(y==3)){
				sum = y -x;
			}
Тернальный оператор

Этот оператор является укороченным вариантом оператора if ... else и используется тогда, когда необходимо в зависимости от истинности или ложности условия присвоить переменной одно из двух значенией. Общая констукция оператора:

				( условие  ? значение1 : значение2 )

Таким образом, если условие истинно, то выбирается первое значение, если ложно - второе. Например:

				var direct = (direct ? false : true ) 

В данном примере происходи изменение значения двоичной переменной на противоположное.

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

switch ... case

Если необходимо организовать ветвление программы, когда количество ветвей больше, чем две, то целесообразнее применять оператор переключения switch ... case. В этом случае программа получится менее громоздкой, чем если многократно использовать оператор if ... else:

			switch(n){
				case 1:
				. . .
				break;
				case 2:
				. . .
				break;
				. . .
				. . .
				default;
				. . .
				break;
			}

Как видим из приведенного примера, оператор имеет единственный парамер - переменную n, числовое значение которой указывает на номер ветви программы. Последним оператором в каждой ветви должен быть оператор break, обеспечивающий выход из ветви (о нем будет рассказываться ниже). Если же числовое значение переменной n не будет соответствовать ни одной ветви, то выполняется последовательность операторов, расположенная в ветви default.

Операторы для организации цикла.
for, break

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

			for (initialExpression; condition;updateExpression) {
						...строки кода...
			}

Выражение initialExpression служит для инициализации переменной счетчика, которую можно создать с помощью оператора var.

Выражение condition вычисляется на каждой итерации цикла. Если значение выражения condition равно "true", выполняются инструкции в теле цикла. Если выражение condition пропущено, оно считается равным "true", тогда цикл продолжается до ошибки или до оператора break.

Выражение updateExpression служит для изменения значения переменной счетчика. Оно тоже не является обязательным. В этом случае можно обновлять значение переменной счетчика в телецикла.

В следующем примере элемент добавляется к форме в предположении, что все элементы содержат числовые значения. Если встречается значение, равное "0", то цикл прекращается.

		function checkValues(form) {
		var total
			for (I=0; I<=form.elements.length; I++) {
			if (element[ I ] .value = "0") {
				break; }
			else {
				total += I;
				document.write ("Текущая строка: "+total);  }
			}
		 return total
		}
while

Повторяет цикл, пока значение condition равно "true". Если condition меняет значение на "false", управление передается первому оператору после фигурной скобки, закрывающей тело цикла while.

			while (condition) {
			. . . строки кода . . .
			}

Следующий пример проверяет наличие в строке определенного символа и прекращает поиск по окончании перебора всех символов строки или после того, как находит искомый символ.

			var found =false;
			n = 0;
			while (n <= searchString.length || ! found) {
				if (searchString.charAt[n] == "?")
					found=true;
				else
					n++;
			}
continue

Передает управление оператору проверки истинности условия в цикле while и оператору обновления значения счетчика в цикле for. Важное отличие от оператора break заключается в том, что оператор continue не прерывает цикл.

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

			function checkValues(form) {
			var total
				for (I=0; I<=form. elements.length; I++) {
					if (element[I].value < 0) {
						continue; }
					else {
						total +=I;
						document.write("Текущая сумма +total); }
				}
			return total
			}
for . . . in

Присваивает переменной поочередно все свойства объекта. Для каждого свойства цикл for . . . in выполняет операторы, содержащиеся в теле цикла:

				for (objectVariable) {
				. . .строки кода . . .
				}

Цикл for. . .in является полезным средством для отладки, благодаря своей способности вывести на экран все свойства объекта в одном цикле.

				function objectDisplay (obj)  {
				var displayLine;
					for (var prop in obj) {
						displayLine = obj.name + "." + prop + " = " + obj [prop];
						document.write(dispiayLine + "
") } document.write("End of object " + obj.name) }
Операторы для работы с функциями.

Стандартные функции JavaScript или методы являются очень важной частью при разработке программ. Но большую гибкость при программировании придают функции, созданные самим пользователем. Расмотрим теперь принципы и правила их создания.

function

Оператор function объявляет функцию языка JavaScript. Требует указания имени и списка параметров:

				function name ((parameter [. . . ,parameter] ] ) {
						. . . строки кода . . .
				{

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

				var total;
				function sum_two (a,b) {
					var sum= a + b;
					return sum;
				}
				function mainProgram ( ) {
					var x=5, y=3;
					total = sum_two (x,y);
					alert (total);
				}

В данном примере функция "sum_two" иммет два параметра: a и b, а также возвращает значение их суммы. Функция "mainProgram", наоборот, вообще не имеет параметров и не возвращает никаких значений. Все действия выполняются внутри нее:

Переменные x и y, которые объявлены внутри функции "mainProgram" существуют тоже только в ее пределах. Переменная total, является глобальной, поскольку объявлена за пределами функций.

return
x, y

Указывает возвращаемое функцией значение.

					return expression;

Следующий пример объединяет значения трех строковых переменных вместе, используя в качестве разделителя запятую:

				function stringAssemble (stringi, string2, string3) {
					return string1 + ", " + string2 + ", " + string3
				}
Оператор with.

Устанавливает объект по умолчанию для набора последующих операторов. При этом любые ссылки на свойства без явного указания объекта предполагают объект по умолчанию.

				with (object) {
				. . . строки кода . . .
				}

Оператор with особенно полезен при ссылках на объект Маth в процессе вычислений. Например:

				with (Math)  {
				var Value1 = cos(angle);
				var Value2 = sin(angle);
				}
что эквивалентно следующим операторам:
				var Value1 =  Math.cos(angle);
				var Value2 = Math.sin(angle);

Объект "Math".

Хотя об объектах JavaScript у нас пойдет речь на следующем занятии, но объект "Math" есть смысл рассмотреть уже сейчас. Этот объект предназначен для выполнения математических расчетов. Его свойства содержат значения различных математических констант:
СвойствоОписаниеВерсия
EЧисло Эйлера (примерно 2,718)1.0
LN10Натуральный логорифм 10 (примерно 2,302)1.0
LN2Натуральный логорифм 2 (примерно 0,693)1.0
LOG10EЛогорифм E по основанию 10 (примерно 0,434)1.0
LOG2EЛогорифм E по основанию 2 (примерно 1,442)1.0
PIЧисло "Пи" (примерно 3,1415926)1.0
SQRT1_2Квадратный корень из 1/2 (примерно 0,707)1.0
SQRT2Квадратный корень из 2 (примерно 1,414)1.0

Методы объекта Math позволяют реализовать некоторые математические функции:
МетодОписаниеВерсия
absВозваращает модуль числа1.0
acosВозвращает арккосинус числа (в радианах)1.0
asinВозвращает арксинус числа (в радианах)td>1.0
atanВозвращает арктангенс числа (в радианах)1.0
atan2Возвращает арктангенс частного от деления аргументов (в радианах) 1.0
cellВозвращает число, округленное до целего1.0
cosВозвращает косинус числа1.0
expВозвращает экспоненту числа1.0
floorВозвращает целую часть числа1.0
logВозвращает натуральный логорифм числа1.0
maxВозвращает наибольшее из двух чисел1.0
minВозвращает наименьшее из двух чисел1.0
powВозвращает результат возведения в степень1.0
randomВозвращает псевдослучайное число между 0 и 11.0
roundВозвращает число, округленное до ближайшего целого1.0
sinВозвращает синус числа1.0
sqrtВозвращает квадратный корень числа1.0
tanВозвращает тангенс числа1.0

Так как назначением объекта Math является предоставление средств для математических операций, >нет необходимости создавать другие объекты Math. Если в программе активно используется методы объекта Math, то применяется сокращенная форма записи с помощью оператора with. Сравните эти два примера, из которых первый построен традиционным использованием методов Math, а другой - с применением оператора with:

 
function Hard ( ) {
	circleArea = Math. PI* (radius^) ;
	radians = (degrees/360)*Math.PI;
	result = Math.cos(radians);
}
function Easy ( ) {
	with Math {
	   circleArea= PI*(radius^2);
	   radians = (degrees/360)*PI;
	   result = cos(radians);
	   }
}

Разбираем примеры

Подведем теперь итог первого занятия, рассмотрев пример, где проиллюстрированы приемы определения и изменения свойств объектов:

Исходный код скрипта:
<html>
<head>
<title>Objects</title>

<script language="JavaScript">
<!-- hide

function first() { 	//выводит текст, введенный в текстовое поле формы

  alert("Содержимое текстового поля: " + 
    document.MyForm.MyText.value);
}

function second() { 	//проверяет состояние поля "Checkbox"

  var MyString= "Поле 'checkbox' ";

  if (document.MyForm.MyCheckbox.checked)
      MyString+= "выбрано"
  else
      MyString+= "не выбрано";
  alert(MyString);
}

// -->
</script>
</head>
<body bgcolor=lightblue>

<form name="MyForm">
<input type="text" name="MyText" value="Пример текста">
<input type="button" name="button1" value="Кнопка 1"
  onClick="first()">
<br>
<input type="checkbox" name="MyCheckbox" CHECKED>
<input type="button" name="button2" value="Кнопка 2"
  onClick="second()">
</form>

<p><br><br>

<script language="JavaScript">
<!-- hide

document.write("Цвет фона: ");
document.write(document.bgColor + "<br>");

document.write("На нижней кнопке помещен текст: ");
document.write(document.MyForm.button2.value);

// -->
</script>

</body>
</html>

В разделе HEAD размещены две функции:

  1. Функция first( ) выводит на экран окно с сообщением, которое содержит текст, находящийся в текстовом поле MyText формы MyForm. Текст рассматривается как свойство value текстового поля формы.

  2. Функция second( ) позволяет определить состояние переключателя MyCheckbox, находящегося в той же форме MyForm. Здесь также состояние рассматривается как свойство checked, которое принимает значение true или false. В зависимости от значения этого свойства выполняется ветвление программы с помощью оператора if ... else, и формируется текстовое сообщение для вывода на экран.

В разделе BODYразмещен контейнер формы, внутри которого находятся тэги, создающие текстовое поле, переключатель и две кнопки.

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

Таким образом, в данном примере показано, что свойства объекта могут быть как просмотрены, так и изменены с помощью операторов JavaScript.

Сайт управляется системой uCoz