Примеры

theBigDay = new Date();
theBigDay.setUTCMinutes(43);

Примеры

theBigDay = new Date();
theBigDay.setUTCMonth(11);

Примеры

theBigDay = new Date();
theBigDay.setUTCSeconds(20);

Примеры

Обратите внимание, что имеются два способа установки года в 20 столетии.

Пример 1.

Год установлен в 1996.

theBigDay.setYear(96)

Пример 2.

Год установлен в 1996.

theBigDay.setYear(1996)

Пример 3.

Год установлен 2000.

theBigDay.setYear(2000)

Примеры

Здесь today это Date -объект:

today.toGMTString()

В этом примере метод toGMTString конвертирует дату в GMT (UTC), используя смещение часового пояса операционной системы, и возвращает строковое значение, которое имеет примерно следующую форму. (Точная форма зависит от платформы.)

Mon, 18 Dec 1995 17:28:35 GMT

Примеры

В следующем примере today это Date -объект:

today = new Date(95,11,18,17,28,35) //месяц представлен числами от 0 до 11
today.toLocaleString()

В следующем примере toLocaleString возвращает строковое значение в такой форме. (Точный формат зависит от платформы.)

12/18/95 17:28:35

Примеры

toString -значение объекта Date присваивается переменной myVar:

x = new Date();
myVar=x.toString();//присваивается значение переменной myVar, как здесь, например:
//Mon Sep 28 14:36:22 GMT-0700 (Pacific Daylight Time) 1998

Примеры

var UTCstring;
Today = new Date();
UTCstring = Today.toUTCString();

Примеры

x = new Date(56,6,17);
myVar=x.valueOf()//присваивает -424713600000 переменной myVar

Примеры

Следующий пример создаёт два фрэйма, каждый с одним документом. Документ первого фрэйма содержит ссылки на якоря в документе второго фрэйма. Каждый документ определяет свой цвет.

doc0.html, который определяет фрэймы, содержит следующий код:

<HTML>
<HEAD>
<TITLE>Document object example</TITLE>
</HEAD>
<FRAMESET COLS="30%,70%">
<FRAME SRC="doc1.html" NAME="frame1">
<FRAME SRC="doc2.html" NAME="frame2">
</FRAMESET>
</HTML>

doc1.html, который определяет содержимое первого фрэйма, содержит следующий код:

<HTML>
<SCRIPT>
</SCRIPT>
<BODY
BGCOLOR="antiquewhite"
   TEXT="darkviolet"
   LINK="fuchsia"
   ALINK="forestgreen"
   VLINK="navy">
<P><B>Some links</B>
<LI><A HREF="doc2.html#numbers" TARGET="frame2">Numbers</A>
<LI><A HREF="doc2.html#colors" TARGET="frame2">Colors</A>
<LI><A HREF="doc2.html#musicTypes" TARGET="frame2">Music types</A>
<LI><A HREF="doc2.html#countries" TARGET="frame2">Countries</A>
</BODY>
</HTML>

doc2.html, который определяет содержимое второго фрэйма, содержит следующий код:

<HTML>
<SCRIPT>
</SCRIPT>
<BODY
BGCOLOR="oldlace" onLoad="alert('Hello, World.')"
TEXT="navy">
<P><A NAME="numbers"><B>Some numbers</B></A>
<UL><LI>one
<LI>two
<LI>three
<LI>four</UL>
<P><A NAME="colors"><B>Some colors</B></A>
<UL><LI>red
<LI>orange
<LI>yellow
<LI>green</UL>
<P><A NAME="musicTypes"><B>Some music types</B></A>
<UL><LI>R&B
<LI>Jazz
<LI>Soul
<LI>Reggae</UL>
<P><A NAME="countries"><B>Some countries</B></A>
<UL><LI>Afghanistan
<LI>Brazil
<LI>Canada
<LI>Finland</UL>
</BODY>
</HTML>

Примеры

В этом примере устанавливается цвет активной гиперссылки с использованием строкового литерала:

document.alinkColor="aqua"

Здесь устанавливается цвет активной ссылки aqua с использованием 16-ричного триплета:

document.alinkColor="00FFFF"

Примеры

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

document.bgColor="aqua"

А здесь - с использованием 16-ричного триплета:

document.bgColor="00FFFF"

Примеры

В этом примере в зелёный устанавливается цвет всех тэгов, использующих атрибут GreenBody CLASS:

<STYLE TYPE="text/javascript">
classes.GreenBody.all.color="green"
</STYLE>

Заметьте, что Вы можете опустить указание объекта document внутри тэга STYLE. Внутри тэга SCRIPT Вы обязаны специфицировать объект document таким образом:

<SCRIPT LANGUAGE="JavaScript1.2">
document.classes.GreenBody.all.color="green"
</SCRIPT>

В этом примере текст, появляющийся внутри одного из следующих тэгов, будет иметь зелёный цвет:

Примеры

Следующая функция вызывает document.close для закрытия потока, который был открыт методом document.open. Метод document.close форсирует отображение в окне содержимого потока.

function windowWriter1() {
var myString = "Hello, world!"
   msgWindow.document.open()
   msgWindow.document.write(myString + "<P>")
   msgWindow.document.close()
}

Примеры

Пример 1. Здесь устанавливается голубой цвет текста внутри любого тэга EM, появляющегося в H1.

<STYLE TYPE="text/javascript">
contextual(document.tags.H1, document.tags.EM).color="blue";
</STYLE>

Обратите внимание, что можно опускать указание объекта document внутри тэга STYLE. Внутри тэга SCRIPT Вы обязаны специфицировать объект document таким образом:

<SCRIPT LANGUAGE="JavaScript1.2">
document.contextual(document.tags.H1, document.tags.EM).color="blue";
</SCRIPT>

В этом примере текст в тэге EM будет голубым:

<H1 CLASS="Main">The following text is <EM>blue</EM></H1>

Пример 2. Этот пример устанавливает цвет элемента LI с двумя или более родительскими UL в красный.

<STYLE TYPE="text/javascript">
contextual(tags.UL, tags.UL, tags.LI).color="red";
</STYLE>

Примеры

Следующий код вставляет аудио plug-in в документ:

Примеры

В этом примере атрибут Main CLASS устанавливается в 18-point bold green, но предоставляет исключение для тэгов, ID которых - NewTopic:

<STYLE TYPE="text/javascript">
classes.Main.all.color="green"
   classes.Main.all.fontSize="18pt"
   classes.Main.all.fontWeight="bold"
   ids.NewTopic.color="blue"
</STYLE>

Заметьте, что Вы можете опустить указание объекта document в тэге STYLE. В тэге SCRIPT Вы обязаны специфицировать объект document таким образом:

<SCRIPT LANGUAGE="JavaScript1.2">
   document.classes.Main.all.color="green"
   document.classes.Main.all.fontSize="18pt"
   document.classes.Main.all.fontWeight="bold"
   document.ids.NewTopic.color="blue"
</SCRIPT>

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

<H1 CLASS="Main">Green head</H1>

Но текст в этом тэге будет 18-point bold blue:

Примеры

Пример 1. Здесь функция вызывает document.open для открытия потока перед использованием метода write:

function windowWriter1() {
   var myString = "Hello, world!"
   msgWindow.document.open()
   msgWindow.document.write("<P>" + myString)
   msgWindow.document.close()
}

Пример 2. Эта функция вызывает document.open с ключевым словом "replace" для открытия потока перед использованием методов write. Код HTML в методах write записывается в msgWindow, замещая текущее вхождение в history. Размер истории/history окна msgWindow не увеличивается.

function windowWriter2() {
   var myString = "Hello, world!"
   msgWindow.document.open("text/html","replace")
   msgWindow.document.write("<P>" + myString)
   msgWindow.document.write("<P>history.length is " +
      msgWindow.history.length)
   msgWindow.document.close()
}

Следующий код создаёт окно msgWindow и вызывает функцию:

msgWindow=window.open('','',
'toolbar=yes,scrollbars=yes,width=400,height=300')
windowWriter2()

Пример 3. Здесь функция probePlugIn определяет, имеется ли у пользователя установленный Shockwave plug-in:

function probePlugIn(mimeType) {
   var havePlugIn = false
   var tiny = window.open("", "teensy", "width=1,height=1")
   if (tiny != null) {
      if (tiny.document.open(mimeType) != null)
         havePlugIn = true
      tiny.close()
   }
   return havePlugIn
} var haveShockwavePlugIn = probePlugIn("application/x-director")

Примеры

Пример 1. Цвет всех тэгов H1 устанавливается в blue:

<STYLE TYPE="text/javascript">
tags.H1.color="blue"
</STYLE>

Обратите внимание, что Вы можете опустить указание объекта document в тэге STYLE. Внутри тэга SCRIPT Вы обязаны специфицировать объект document таким образом:

<SCRIPT LANGUAGE="JavaScript1.2">
document.tags.H1.color="blue"
</SCRIPT>

Пример 2. Устанавливается универсальное левое поле документа:

document.tags.Body.marginLeft="20pt"

Поскольку все тэги HTML наследуют от BODY, этот пример устанавливает левое поле для всего документа в 20 пунктов.

Примеры

Здесь цвет посещённых ссылок устанавливается в aqua с использованием строкового литерала:

document.vlinkColor="aqua"

А здесь - с помощью 16-ричного триплета:

document.vlinkColor="00FFFF"

Примеры

Здесь метод write принимает несколько аргументов, в том числе строки, числа и переменную:

var mystery = "world"
// Выводится Hello world testing 123
msgWindow.document.write("Hello ", mystery, " testing ", 123)

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

//Выводится Hello world...
msgWindow.document.write (mystr = "Hello ", "world...")

В следующем примере метод write принимает единственный аргумент, который является условным выражением. Если значение переменной age будет меньше 18, метод выведет "Minor." Если значение age будет больше или равно 18, метод выведет "Adult."

msgWindow.document.write(status = (age >= 18) ? "Adult" : "Minor")

Примеры

Этот пример использует объект event для предоставления типа события в предупреждающем сообщении.

<A HREF="http://home.netscape.com" onClick='alert("Link got an event: "
+ event.type)'>Click for link event</A>

В следующем примере объект event используется в явно вызываемом обработчике события.

<SCRIPT>
function fun1(evnt) {
alert ("Document got an event: " + evnt.type);
   alert ("x position is " + evnt.layerX);
   alert ("y position is " + evnt.layerY);
   if (evnt.modifiers & Event.ALT_MASK)
      alert ("Alt key was down for event.");
   return true;
   }
document.onmousedown = fun1;
</SCRIPT>

Примеры

В этом примере функция valueGetter использует цикл for для итерации по массиву элементов на форме valueTest. Окно msgWindow отображает имена всех элементов формы:

newWindow=window.open("http://home.netscape.com") function valueGetter() {
   var msgWindow=window.open("")
   for (var i = 0; i < newWindow.document.valueTest.elements.length; i++) {
      msgWindow.document.write(newWindow.document.valueTest.elements[i].name + "<BR>")
   }
}

Примеры

Здесь записывается значение свойства type для каждого элемента формы.

for (var i = 0; i < document.form1.elements.length; i++) {
document.writeln("<BR>type is " + document.form1.elements[i].type)
}

Примеры

Пример 1: Именованная форма. Создаётся форма myForm, содержащая текстовые поля для имени и фамилии. Форма содержит также две кнопки, переводящие все буквы в верхний или в нижний регистр. Функция setCase показывает, как обратиться к форме по её имени.

<HTML>
<HEAD>
<TITLE>Form object example</TITLE>
</HEAD>
<SCRIPT>
function setCase (caseSpec){
if (caseSpec == "upper") {
document.myForm.firstName.value=document.myForm.firstName.value.toUpperCase()
   document.myForm.lastName.value=document.myForm.lastName.value.toUpperCase()}
else {
   document.myForm.firstName.value=document.myForm.firstName.value.toLowerCase()
   document.myForm.lastName.value=document.myForm.lastName.value.toLowerCase()}
}
</SCRIPT><BODY>
<FORM NAME="myForm">
<B>First name:</B>
<INPUT TYPE="text" NAME="firstName" SIZE=20>
<BR><B>Last name:</B>
<INPUT TYPE="text" NAME="lastName" SIZE=20>
<P><INPUT TYPE="button" VALUE="Names to uppercase" NAME="upperButton"
   onClick="setCase('upper')">
<INPUT TYPE="button" VALUE="Names to lowercase" NAME="lowerButton"
   onClick="setCase('lower')">
</FORM>
</BODY>
</HTML>

Пример 2: Массив forms. Обработчик события onLoad в этом примере отображает имя первой формы в диалоговом окне Alert.

Если имя формы - musicType, диалог выведет следующее сообщение:

You are looking at the <object musicType> form!

Пример 3: Обработчик события onSubmit. В этом примере показано, как обработчик события onSubmit определяет, отправлять ли форму. Форма содержит один объект Text, где пользователь вводит три символа. onSubmit вызывает функцию checkData, которая возвращает true, если введены три символа; иначе она возвращает false. Заметьте, что обработчик onSubmit формы, а не обработчик кнопки submit onClick, вызывает функцию checkData. Также обработчик onSubmit содержит оператор return, возвращающий значение, полученное вызовом этой функции; это предотвращает отправку формы, если специфицированы неверные данные. См. также onSubmit.

<HTML>
<HEAD>
<TITLE>Form object/onSubmit event handler example</TITLE>
<TITLE>Form object example</TITLE>
</HEAD>
<SCRIPT>
var dataOK=false
function checkData (){
if (document.myForm.threeChar.value.length == 3) {
   return true}
   else {
      alert("Enter exactly three characters. " + document.myForm.threeChar.value +
         " is not valid.")
      return false}
}
</SCRIPT>
<BODY>
<FORM NAME="myForm" onSubmit="return checkData()">
<B>Enter 3 characters:</B>
<INPUT TYPE="text" NAME="threeChar" SIZE=3>
<P><INPUT TYPE="submit" VALUE="Done" NAME="submit1"
onClick="document.myForm.threeChar.value=document.myForm.threeChar.value.toUpperCase()">
</FORM>
</BODY>
</HTML>

Пример 4: Метод submit. Этот пример похож на предыдущий, за исключением того, что он отправляет форму с использованием метода submit вместо объекта Submit. Обработчик onSubmit формы не предотвращает отправку формы. Форма использует обработчик onClick кнопки для вызова функции checkData. Если значение верно, функция checkData отправляет форму, вызывая метод submit формы.

<HTML>
<HEAD>
<TITLE>Form object/submit method example</TITLE>
</HEAD>
<SCRIPT>
var dataOK=false
function checkData (){
if (document.myForm.threeChar.value.length == 3) {
   document.myForm.submit()}
   else {
      alert("Enter exactly three characters. " + document.myForm.threeChar.value +
         " is not valid.")
      return false}
}
</SCRIPT>
<BODY>
<FORM NAME="myForm" onSubmit="alert('Form is being submitted.')">
<B>Enter 3 characters:</B>
<INPUT TYPE="text" NAME="threeChar" SIZE=3>
<P><INPUT TYPE="button" VALUE="Done" NAME="button1"
   onClick="checkData()">
</FORM>
</BODY>
</HTML>

Примеры

Эта функция возвращает значение свойства method формы musicForm:

function getMethod() {
return document.musicForm.method
}

Примеры

Здесь отправляется форма musicChoice:

document.musicChoice.submit()

Если musicChoice это первая созданная форма, Вы можете также отправить её так:

document.forms[0].submit()

См. также пример для Form.

Примеры

Пример 1. Эта функция возвращает строку, содержащую отформатированное представление чисел с заполнением ведущими нулями.

// Эта функция возвращает строку, заполненную ведущими нулями
function padZeros(num, totalLen) {
var numStr = num.toString()             //инициализируется return-значение как строка
   var numZeros = totalLen - numStr.length // вычисляется количество нулей
   if (numZeros > 0) {
      for (var i = 1; i <= numZeros; i++) {
         numStr = "0" + numStr
      }
   }
   return numStr
}

Следующие операторы вызывают функцию padZeros:

result=padZeros(42,4) // возвращает "0042"
result=padZeros(42,2) // возвращает "42"
result=padZeros(5,4) // возвращает "0005"

Пример 2. Вы можете определить, существует ли функция, сравнив имя функции с null. В следующем примере func1 вызывается, если функция noFunc не существует; иначе вызывается функция func2. Заметьте, что требуется имя окна при обращении к функции noFunc.

if (window.noFunc == null)
func1()
else func2()

Пример 3. Здесь создаётся обработчики события onFocus и onBlur для фрэйма. Этот код находится в том же файле, который содержит тэг FRAMESET. Заметьте, штаа это единственный способ создания обработчиков onFocus и onBlur для фрэйма, поскольку Вы не можете специфицировать обработчики в тэге FRAME.

frames[0].onfocus = new Function("document.bgColor='antiquewhite'")
frames[0].onblur = new Function("document.bgColor='lightgrey'")

Примеры

Пример 1. Здесь определена функция, выполняющая конкатенацию/объединение нескольких строк. Единственным формальным аргументом функции является строка, специфицирующая символ-разделитель объединяемых строк. Функция определена так:

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

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

// возвращает "red, orange, blue, "
myConcat(", ","red","orange","blue") // возвращает "elephant; giraffe; lion; cheetah;"
myConcat("; ","elephant","giraffe","lion", "cheetah") // возвращает "sage. basil. oregano. pepper. parsley. "
myConcat(". ","sage","basil","oregano", "pepper", "parsley")

Пример 2. Определяется функция, создающая HTML-списки. Единственным формальным аргументом этой функции является строка, которая содержит "U", если это неупорядоченный список (bulleted), или "O", если это упорядоченный список (numbered). Функция определена так:

function list(type) {
   document.write("<" + type + "L>") // начало списка
   // итерация по arguments
   for (var i=1; i<arguments.length; i++) {
      document.write("<LI>" + arguments[i])
   }
   document.write("</" + type + "L>") // конец списка
}

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

list("U", "One", "Two", "Three")

даст на выходе

<UL>
<LI>One
<LI>Two
<LI>Three
</UL>

Примеры

Следующая функция возвращает значение свойства callee этой функции.

function myFunc() {
return arguments.callee
}

Возвращается следующее значение:

function myFunc() { return arguments.callee; }

Примеры

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

function myFunc() {
if (arguments.caller == null) {
return ("The function was called from the top!")
} else return ("This function's caller was " + arguments.caller)
}

Примеры

Вы можете использовать call для создания цепочки конструкторов объектов, как в Java. В следующем примере конструктор объекта product определён с двумя параметрами, name и value. Другой объект, prod_dept, инициализирует свою уникальную переменную (dept) и вызывает конструктор объекта product в своём конструкторе для инициализации других переменных.

function product(name, value){
this.name = name;
   if(value > 1000)
      this.value = 999;
   else
      this.value = value;
} function prod_dept(name, value, dept){
   this.dept = dept;
   product.call(this, name, value);
} prod_dept.prototype = new product(); // поскольку 5 меньше 100, значение устанавливается
cheese = new prod_dept("feta", 5, "food");// поскольку 5000 больше 1000, значение будет 999
car = new prod_dept("honda", 5000, "auto");

Примеры

Пример 1. Здесь форма myForm содержит объект Hidden и кнопку. Если пользователь щёлкает по кнопке, в значение объекта Hidden устанавливается имя формы. Обработчик события кнопки onClick использует this.form для обращения к родительской форме myForm.

Пример 2. Здесь используется ссылка на объект, а не ключевое слово this, для обращения к форме. Код возвращает ссылку на myForm, которая является контейнером для объекта myHiddenObject.

document.myForm.myHiddenObject.form

Примеры

Пример 1. Здесь выполняется переход к URL , который был посещён пользователем в текущем окне на три шага назад.

history.go(-3)

Пример 2. Вы можете использовать объект history со специфицированным окном или фрэймом. В данном примере window2 переходит назад на одну ступень назад в истории данного окна (или сессии):

window2.history.back()

Пример 3. В этом примере второй фрэйм в наборе фрэйма переходит назад на один элемент:

parent.frames[1].history.back()

Пример 4. В этом примере фрэйм frame1 набора фрэймов переходит назад на один шаг:

parent.frame1.history.back()

Пример 5. В этом примере фрэйм frame2 в окне window2 переходит назад на один шаг:

window2.frame2.history.back()

Пример 6. Этот код определяет, содержит ли первое вхождение массива history строку "NETSCAPE". Если это так, вызывается функция myFunction.

if (history[0].indexOf("NETSCAPE") != -1) {
myFunction(history[0])
}

Пример 7. Здесь отображается весь список history:

document.writeln("<B>history is</B> " + history)

Этот код отобразит примерно такое:

history is
Welcome to Netscape http://home.netscape.com/
Sun Microsystems http://www.sun.com/
Royal Airways http://www.supernet.net/~dugbrown/

Примеры

Эта кнопка делает переход к ближайшему вхождению из history, которое содержит строку "home.netscape.com":

Следующая кнопка переходит к URL, который находится на три шага назад в списке history:

Примеры

Здесь определяется, содержит ли history.next строку "NETSCAPE.COM". Если да - вызывается функция myFunction.

if (history.next.indexOf("NETSCAPE.COM") != -1) {
myFunction(history.next)
}

Примеры

Пример 1: Создание изображения тэгом IMG. Следующий код определяет изображение тэгом IMG:

Следующий код обращается к изображению:

document.aircraft.src='f15e.gif'

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

document.myForm.aircraft.src='f15e.gif'

Пример 2: Создание изображения конструктором Image. Здесь создаётся объект Image по имени myImage шириной 70 пикселов и высотой 50 пикселов. Если URL источника, seaotter.gif, не имеет размера 70x50 пикселов, он масштабируется до данного размера.

myImage = new Image(70, 50)
myImage.src = "seaotter.gif"

Если Вы опускаете аргументы width и height в конструкторе Image, myImage создаётся с размерами, указанными в исходном URL..

myImage = new Image()
myImage.src = "seaotter.gif"

Пример 3: Вывод изображения на основе ввода данных в форму. Здесь пользователь выбирает, какое изображение вывести. Пользователь заказывает рубашку, заполняя форму. Изображение выводится в зависимости от указанных цвета и размера рубашки. Все возможные варианты загружаются заранее, чтобы сократить время на ответ. Если пользователь щёлкает кнопку для заказа рубашки, функция allShirts выводит изображения всех рубашек.

<SCRIPT>
shirts = new Array()
shirts[0] = "R-S"
shirts[1] = "R-M"
shirts[2] = "R-L"
shirts[3] = "W-S"
shirts[4] = "W-M"
shirts[5] = "W-L"
shirts[6] = "B-S"
shirts[7] = "B-M"
shirts[8] = "B-L" doneThis = 0
shirtImg = new Array() // Предварительная загрузка изображений рубашек
for(idx=0; idx < 9; idx++) {
shirtImg[idx] = new Image()
   shirtImg[idx].src = "shirt-" + shirts[idx] + ".gif"
} function changeShirt(form)
{
   shirtColor = form.color.options[form.color.selectedIndex].text
   shirtSize = form.size.options[form.size.selectedIndex].text    newSrc = "shirt-" + shirtColor.charAt(0) + "-" + shirtSize.charAt(0) + ".gif"
   document.shirt.src = newSrc
} function allShirts()
{
   document.shirt.src = shirtImg[doneThis].src
   doneThis++
   if(doneThis != 9)setTimeout("allShirts()", 500)
   else doneThis = 0    return
}</SCRIPT> <FONT SIZE=+2><B>Netscape Polo Shirts!</FONT></B> <TABLE CELLSPACING=20 BORDER=0>
<TR>
<TD><IMG name="shirt" SRC="shirt-W-L.gif"></TD> <TD>
<FORM>
<B>Color</B>
<SELECT SIZE=3 NAME="color" onChange="changeShirt(this.form)">
<OPTION> Red
<OPTION SELECTED> White
<OPTION> Blue
</SELECT> <P>
<B>Size</B>
<SELECT SIZE=3 NAME="size" onChange="changeShirt(this.form)">
<OPTION> Small
<OPTION> Medium
<OPTION SELECTED> Large
</SELECT> <P><INPUT type="button" name="buy" value="Buy This Shirt!"
   onClick="allShirts()">
</FORM> </TD>
</TR>
</TABLE>

Пример 4: Анимация JavaScript. В этом примере JavaScript используется для создания анимации в объекте Image путём повторяющегося изменения значения его свойства src. Скрипт начинается с предзагрузки 10 изображений, образующих эту анимацию (image1.gif, image2.gif, image3.gif и т.д.). Если объект Image размещён в документе тэгом IMG, image1.gif выводится, и обработчик onLoad начинает анимацию, вызывая функцию animate. Заметьте, что функция animate не вызывает сама себя после изменения свойства src объекта Image. Это происходит из-за того, что при изменении свойства src обработчик onLoad изображения включается и вызывается функция animate.

<SCRIPT>
delay = 100
imageNum = 1 // Предварительная загрузка изображений анимации
theImages = new Array()
for(i = 1; i < 11; i++) {
   theImages[i] = new Image()
   theImages[i].src = "image" + i + ".gif"
} function animate() {
   document.animation.src = theImages[imageNum].src
   imageNum++
   if(imageNum > 10) {
      imageNum = 1
   }
} function slower() {
   delay+=10
   if(delay > 4000) delay = 4000
} function faster() {
   delay-=10
   if(delay < 0) delay = 0
}
</SCRIPT><BODY BGCOLOR="white"><IMG NAME="animation" SRC="image1.gif" ALT="[Animation]"
   onLoad="setTimeout('animate()', delay)"> <FORM>
   <INPUT TYPE="button" Value="Slower" onClick="slower()">
   <INPUT TYPE="button" Value="Faster" onClick="faster()">
</FORM>
</BODY>

См. также примеры для обработчиков onAbort, onError и onLoad.

Примеры

Здесь функция valueGetter использует цикл for для итерации по массиву элементов, расположенных на форме valueTest. Окно msgWindow выводит имена всех элементов на форме:

newWindow=window.open("http://home.netscape.com") function valueGetter() {
var msgWindow=window.open("")
   for (var i = 0; i < newWindow.document.valueTest.elements.length; i++) {
      msgWindow.document.write(newWindow.document.valueTest.elements[i].name + "<BR>")
   }
}

В следующем примере первый оператор создаёт окно netscapeWin. Второй оператор выводит значение "netscapeHomePage" в диалоговом окне Alert, поскольку "netscapeHomePage" является значением аргумента windowName argument окна netscapeWin.

netscapeWin=window.open("http://home.netscape.com","netscapeHomePage")
alert(netscapeWin.name)

Примеры

Пример 1. Инстанциация (создание экземпляра) JavaArray в JavaScript.

Здесь экземпляр byteArray объекта JavaArray создаётся методом java.lang.String.getBytes, который возвращает массив.

var javaString = new java.lang.String("Hello world!");
var byteArray = javaString.getBytes();

Пример 2. Инстанциация (создание экземпляра) JavaArray в JavaScript с помощью метода newInstance.

Используйте объект класса, возвращаемый java.lang.Class.forName, как аргумент для метода newInstance, как показано в следующем коде:

var dataType = java.lang.Class.forName("java.lang.String")
var dogs = java.lang.reflect.Array.newInstance(dataType, 5)

Примеры

Пример 1. Инстанциация (создание экземпляра) Java-объекта в JavaScript.

Этот код создаёт JavaObject theString, который является экземпляром класса java.lang.String:

var theString = new Packages.java.lang.String("Hello, world")

Поскольку класс String находится в пакете java, Вы можете также использовать синоним java и опустить ключевое слово Packages при инстанциации класса:

var theString = new java.lang.String("Hello, world")

Пример 2. Доступ к методам Java-объекта.

Поскольку JavaObject theString является экземпляром java.lang.String, он наследует все public-методы из java.lang.String. Следующий пример использует метод startsWith для проверки того, начинается ли theString с "Hello".

var theString = new java.lang.String("Hello, world")
theString.startsWith("Hello") // возвращает true

Пример 3. Доступ к наследуемым методам.

Поскольку getClass является методом из Object и java.lang.String расширяет/extends Object, класс String наследует метод getClass. Соответственно, getClass является также методом из JavaObject, который инстанциирует String в JavaScript.

var theString = new java.lang.String("Hello, world")
theString.getClass() // возвращает java.lang.String

Примеры

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

myLayer.bgColor="aqua"

Следующий пример устанавливает цвет фона с использованием 16-ричного триплета:

myLayer.bgColor="00FFFF"

Примеры

Пример 1. Следующий пример создаёт гипертекстовую ссылку на якорь javascript_intro:

<A HREF="#javascript_intro">Introduction to JavaScript</A>

Пример 2. Здесь создаётся гиперссылка на якорь numbers в файле doc3.html в окне window2. Если window2 не существует, оно создаётся.

<LI><A HREF=doc3.html#numbers TARGET="window2">Numbers</A>

Пример 3. Здесь пользователь переходит на x вхождений назад в списке history:

<A HREF="javascript:history.go(-1 * x)">Click here</A>

Пример 4. Здесь создаётся гиперссылка на URL. Пользователь может использовать набор радио-кнопок для выбора из трёх URL. Обработчик onClick ссылки устанавливает URL (свойство href ссылки) на основе выбранной кнопки. Ссылка также имеет обработчик onMouseOver, который изменяет свойство status окна. Как показано в примере, Вы обязаны вернуть true для установки свойства window.status в обработчике onMouseOver.

<SCRIPT>
var destHREF="http://home.netscape.com/"
</SCRIPT>
<FORM NAME="form1">
<B>Choose a destination from the following list, then click "Click me" below.</B>
<BR><INPUT TYPE="radio" NAME="destination" VALUE="netscape"
onClick="destHREF='http://home.netscape.com/'"> Netscape home page
<BR><INPUT TYPE="radio" NAME="destination" VALUE="sun"
   onClick="destHREF='http://www.sun.com/'"> Sun home page
<BR><INPUT TYPE="radio" NAME="destination" VALUE="rfc1867"
   onClick="destHREF='http://www.ics.uci.edu/pub/ietf/html/rfc1867.txt'"> RFC 1867
<P><A HREF=""
   onMouseOver="window.status='Click this if you dare!'; return true"
   onClick="this.href=destHREF">
   <B>Click me</B></A>
</FORM>

Пример 5: Массив links. В этом примере функция linkGetter использует массив links для вывода значений каждой ссылки текущего документа. Этот пример определяет также несколько ссылок и кнопку для запуска linkGetter.

function linkGetter() {
   msgWindow=window.open("","msg","width=400,height=400")
   msgWindow.document.write("links.length is " +
      document.links.length + "<BR>")
   for (var i = 0; i < document.links.length; i++) {
      msgWindow.document.write(document.links[i] + "<BR>")
   }
}<A HREF="http://home.netscape.com">Netscape Home Page</A>
<A HREF="http://www.catalog.com/fwcfc/">China Adoptions</A>
<A HREF="http://www.supernet.net/~dugbrown/">Bad Dog Chronicles</A>
<A HREF="http://www.best.com/~doghouse/homecnt.shtml">Lab Rescue</A>
<P>
<INPUT TYPE="button" VALUE="Display links"
   onClick="linkGetter()">

Пример 6: Обращение к Area-объекту через массив links. Здесь код обращается к свойству href первого Area-объекта, показанного в Примере 1.

document.links[0].href

Пример 7: Area-объект с обработчиками onMouseOver и onMouseOut. Здесь выводится изображение globe.gif. Это изображение использует карту изображений/image map, которая определяет области верхней и нижней половин рисунка. Обработчики onMouseOver и onMouseOut выводят разные сообщения в статусной строке в зависимости от того, проходит курсор мыши над верхней или нижней половиной рисунка. Атрибут HREF необходим при использовании обработчиков onMouseOver и onMouseOut, но в этом примере рисунок не должен быть гиперссылкой, поэтому атрибут HREF выполняет javascript:void(0), которая ничего не делает.

Пример 8: Симуляция обработчика onClick Area-объекта через использование атрибута HREF. Следующий пример использует атрибут HREF Area-объекта для выполнения функции JavaScript. Выводимый рисунок, colors.gif, показывает два цвета. Верхняя половина рисунка имеет цвет antiquewhite, а нижняя - white. Если пользователь щёлкает по верхней или нижней половине рисунка, функция setBGColor изменяет цвет фона документа на цвет из рисунка.

<SCRIPT>
function setBGColor(theColor) {
   document.bgColor=theColor
}
</SCRIPT>
Click the color you want for this document's background color
<MAP NAME="colorMap">
   <AREA NAME="topColor" COORDS="0,0,50,25" HREF="javascript:setBGColor('antiquewhite')">
   <AREA NAME="bottomColor" COORDS="0,25,50,50" HREF="javascript:setBGColor('white')">
</MAP>
<IMG SRC="images\colors.gif" ALIGN="top" HEIGHT="50" WIDTH="50" USEMAP="#colorMap">

Примеры

Пример 1. Следующие два эквивалентных оператора устанавливают URL текущего окна - домашнюю страницу Netscape:

window.location.href="http://home.netscape.com/"
window.location="http://home.netscape.com/"

Пример 2. Следующий оператор устанавливает URL фрэйма frame2 - домашнюю страницу Sun:

parent.frame2.location.href="http://www.sun.com/"

См. также примеры для Anchor.

Примеры

Здесь оператор window.open создаёт окно newWindow и загружает в него специфицированный URL. Операторы document.write отображают свойства newWindow.location в окне msgWindow.

newWindow=window.open
("http://home.netscape.com/comprod/products/navigator/
   version_2.0/script/script_info/objects.html#checkbox_object")msgWindow.document.write("newWindow.location.href = " +
   newWindow.location.href + "<P>")
msgWindow.document.write("newWindow.location.hostName = " +
   newWindow.location.hostName + "<P>")
msgWindow.document.close()

Этот пример даст на выходе:

newWindow.location.href =
http://home.netscape.com/comprod/products/navigator/
version_2.0/script/script_info/objects.html#checkbox_object
newWindow.location.hostName = home.netscape.com

Примеры

В этом примере оператор window.open создаёт окно newWindow и загружает в него специфицированный URL. Операторы document.write выводят свойства newWindow.location в окне msgWindow.

newWindow=window.open
("http://home.netscape.com/comprod/products/navigator/
   version_2.0/script/script_info/objects.html#checkbox_object")msgWindow.document.write("newWindow.location.href = " +
   newWindow.location.href + "<P>")
msgWindow.document.write("newWindow.location.pathname = " +
   newWindow.location.pathname + "<P>")
msgWindow.document.close()

Этот пример даст на выходе:

newWindow.location.href =
   http://home.netscape.com/comprod/products/navigator/
   version_2.0/script/script_info/objects.html#checkbox_object
newWindow.location.pathname =
   /comprod/products/navigator/version_2.0/script/
   script_info/objects.html

Примеры

//Возвращает 20
x=Math.round(20.49)//Возвращает 21
x=Math.round(20.5)//Возвращает -20
x=Math.round(-20.5)//Возвращает -21
x=Math.round(-20.51)

Примеры

Этот код выводит свойства type, description, suffixes и enabledPlugin для каждого MimeType-объекта на клиенте:

document.writeln("<TABLE BORDER=1><TR VALIGN=TOP>",
"<TH ALIGN=left>i",
   "<TH ALIGN=left>type",
   "<TH ALIGN=left>description",
   "<TH ALIGN=left>suffixes",
   "<TH ALIGN=left>enabledPlugin.name</TR>")
for (i=0; i < navigator.mimeTypes.length; i++) {
   document.writeln("<TR VALIGN=TOP><TD>",i,
      "<TD>",navigator.mimeTypes[i].type,
      "<TD>",navigator.mimeTypes[i].description,
      "<TD>",navigator.mimeTypes[i].suffixes)
   if (navigator.mimeTypes[i].enabledPlugin==null) {
      document.writeln(
      "<TD>None",
      "</TR>")
   } else {
      document.writeln(
      "<TD>",navigator.mimeTypes[i].enabledPlugin.name,
      "</TR>")
   }
}
document.writeln("</TABLE>")

Этот пример даст на выходе примерно следующее:

i type description suffixes enabledPlugin.name

0	audio/aiff	AIFF	aif, aiff	LiveAudio
1	audio/wav	WAV	wav	LiveAudio
2	audio/x-midi	MIDI	mid, midi	LiveAudio
3	audio/midi	MIDI	mid, midi	LiveAudio
4	video/msvideo	Video for Windows	avi	NPAVI32 Dynamic Link Library
5	*	Netscape Default Plugin		Netscape Default Plugin
6	zz-application/zz-winassoc-TGZ		TGZ	None

Примеры

Здесь определяется, установлен ли Shockwave plug-in. Если это так, клип воспроизводится.
// Можем ли мы воспроизвести Shockwave-видео?
mimetype = navigator.mimeTypes["application/x-director"]
if (mimetype) {
// Если да, можем ли отобразить их plug-in'ом?
   plugin = mimetype.enabledPlugin
   if (plugin)
      // Если да, показать данные in-line
      document.writeln("Here\'s a movie: <EMBED SRC=mymovie.dir HEIGHT=100 WIDTH=100>")
      else
      // Если нет, предоставить ссылку на данные
      document.writeln("<A HREF='mymovie.dir'>Click here</A> to see a movie.")
   } else {
   // Если нет, сообщить:
   document.writeln("Sorry, can't show you this cool movie.")
}

Примеры

Здесь выводится значение свойства appCodeName:
document.write("The value of navigator.appCodeName is " +
navigator.appCodeName)
Для Navigator'а 2.0 и позднее будет выведено:
The value of navigator.appCodeName is Mozilla

Примеры

Здесь будет выведено значение свойства appName:
document.write("The value of navigator.appName is " +
navigator.appName)
Для Navigator'а 2.0 и 3.0 будет выведено:
The value of navigator.appName is Netscape

Примеры

Пример 1. Выводится номер версии Navigator'а:
document.write("The value of navigator.appVersion is " +
navigator.appVersion)
Для Navigator 2.0 в Windows 95 будет выведено:
The value of navigator.appVersion is 2.0 (Win95, I)
Для Navigator 3.0 в Windows NT будет выведено:
The value of navigator.appVersion is 3.0 (WinNT, I)
Пример 2. Объект Textarea заполняется символами новой строки. Поскольку эти символы различны на разных платформах, пример тестирует свойство appVersion, чтобы определить, используется ли Windows (appVersion содержит "Win" для всех версий Windows). Если пользователь работает в Windows, символ новой строки будет \r\n; иначе - \n, то есть символ новой строки в Unix и Macintosh.

ПРИМЕЧАНИЕ: Этот код нужен только для JavaScript 1.0. Версии JavaScript от 1.1 и позднее проверяют все символы новой строки перед установкой строкового значения и транслируют их для имеющейся пользовательской платформы.
<SCRIPT>
var newline=null
function populate(textareaObject){
   if (navigator.appVersion.lastIndexOf('Win') != -1)
      newline="\r\n"
      else newline="\n"
   textareaObject.value="line 1" + newline + "line 2" + newline
   + "line 3"
}
</SCRIPT>
<FORM NAME="form1">
<BR><TEXTAREA NAME="testLines" ROWS=8 COLS=55></TEXTAREA>
<P><INPUT TYPE="button" VALUE="Populate the Textarea object"
   onClick="populate(document.form1.testLines)">
</TEXTAREA>
</FORM>

Примеры

Выполняется функция function1, если разрушение данных включено; иначе - выполняется function2.
if (navigator.taintEnabled()) {
function1()
   }
else function2()

Примеры

Выводится информация userAgent для Navigator'а:
document.write("The value of navigator.userAgent is " +
   navigator.userAgent)
Для Navigator 2.0 будет выведено следующее:
The value of navigator.userAgent is Mozilla/2.0 (Win16; I)

Примеры

Пример 1. Свойства объекта Number используются для присвоения значений нескольким числовым переменным:
biggestNum = Number.MAX_VALUE
smallestNum = Number.MIN_VALUE
infiniteNum = Number.POSITIVE_INFINITY
negInfiniteNum = Number.NEGATIVE_INFINITY
notANum = Number.NaN
Пример 2. Создаётся Number-объект myNum, затем добавляется свойство description во все Number-объекты. Затем значение присваивается свойству description объекта myNum.
myNum = new Number(65)
Number.prototype.description=null
myNum.description="wind speed"

Примеры

x = new Number();
alert(x.valueOf())//выводит 0

Примеры

Создаётся прототип Tree и объект этого типа - theTree. Затем выводится свойство constructor объекта theTree.
function Tree(name) {
this.name=name
}
theTree = new Tree("Redwood")
document.writeln("<B>theTree.constructor is</B> " +
   theTree.constructor + "<P>")
На выходе будет:
theTree.constructor is function Tree(name) { this.name = name; }

Примеры

Определяется тип объектов Dog и создаётся theDog, объект типа Dog:
function Dog(name,breed,color,sex) {
   this.name=name
   this.breed=breed
   this.color=color
   this.sex=sex
}
theDog = new Dog("Gabby","Lab","chocolate","girl")
Вызов метода toSource объекта theDog выводит исходный код JavaScript, определяющий этот объект:
theDog.toSource()
//возвращает "{name:"Gabby", breed:"Lab", color:"chocolate", sex:"girl"}

Примеры

Пример 1: Объект location. Печатается строковой эквивалент текущего location.
document.write("location.toString() is " + location.toString() + "<BR>")
Вывод будет таким:
location.toString() is file:///C|/TEMP/myprog.html
Пример 2: Объект без строкового значения. Предположим, у Вас имеется Image-объект sealife, определённый так:
<IMG NAME="sealife" SRC="images\seaotter.gif" ALIGN="left" VSPACE="10">
Поскольку сам по себе Image-объект не имеет специального метода toString, sealife.toString() возвращает:
[object Image]
Пример 3: Параметр radix. Печатается строковые эквиваленты чисел от 0 до 9 в 10-ричном и двоичном формате.
for (x = 0; x < 10; x++) {
document.write("Decimal: ", x.toString(10), " Binary: ", x.toString(2), "<BR>")
}
Этот пример даст на выходе:
Decimal: 0 Binary: 0
Decimal: 1 Binary: 1
Decimal: 2 Binary: 10
Decimal: 3 Binary: 11
Decimal: 4 Binary: 100
Decimal: 5 Binary: 101
Decimal: 6 Binary: 110
Decimal: 7 Binary: 111
Decimal: 8 Binary: 1000
Decimal: 9 Binary: 1001

Примеры

Пример 1. Здесь функция getChoice возвращает значение свойства text для выбраной опции. Цикл for вычисляет каждую опцию Select-объекта musicType. Оператор if находит выбранную опцию.
function getChoice() {
for (var i = 0; i < document.musicForm.musicType.length; i++) {
      if (document.musicForm.musicType.options[i].selected == true) {
         return document.musicForm.musicType.options[i].text
      }
   }
   return null
}
Предполагается, что Select-объект таков:
<SELECT NAME="musicType">
   <OPTION SELECTED> R&B
   <OPTION> Jazz
   <OPTION> Blues
   <OPTION> New Age
</SELECT>
Пример 2. В следующей форме пользователь может ввести некоторый текст в первом текстовом поле, а затем ввести число от 0 до 2 (включительно) во втором текстовом поле. Когда пользователь щёлкает по кнопке, текст изменяется на номер выбранной опции, и эта опция выбирается.

Код выглядит так:
<SCRIPT>
function updateList(theForm, i) {
   theForm.userChoice.options[i].text = theForm.whatsNew.value
   theForm.userChoice.options[i].selected = true
}
</SCRIPT>
<FORM>
<SELECT name="userChoice">
   <OPTION>Choice 1
   <OPTION>Choice 2
   <OPTION>Choice 3
</SELECT>
<BR>
New text for the option: <INPUT TYPE="text" NAME="whatsNew">
<BR>
Option to change (0, 1, or 2): <INPUT TYPE="text" NAME="idx">
<BR>
<INPUT TYPE="button" VALUE="Change Selection"
onClick="updateList(this.form, this.form.idx.value)">
</FORM>

Примеры

Функция JavaScript создаёт диалоговое окно Java:
function createWindow() {
var theOwner = new Packages.java.awt.Frame();
   var theWindow = new Packages.java.awt.Dialog(theOwner);
   theWindow.setSize(350,200);
   theWindow.setTitle("Hello, World");
   theWindow.setVisible(true);
}
Здесь функция создаёт экземпляр theWindow как Packages-объект. Методы setSize, setTitle и setVisible доступны для JavaScript как public-методы из java.awt.Dialog.

Примеры

Это код получает доступ к конструктору класса java.awt.Frame:
var theOwner = new Packages.java.awt.Frame();
Вы можете упростить этот код, используя объект верхнего уровня java для доступа к конструктору:
var theOwner = new java.awt.Frame();

Примеры

Здесь функция valueGetter использует цикл for для итерации по массиву элементов на форме valueTest. Окно msgWindow отображает имена всех элементов формы:
newWindow=window.open("http://home.netscape.com")function valueGetter() {
   var msgWindow=window.open("")
   for (var i = 0; i < newWindow.document.valueTest.elements.length; i++) {
      msgWindow.document.write(newWindow.document.valueTest.elements[i].name + "<BR>")
   }
}

Примеры

Здесь функция checkPassword проверяет правильность введённого пользователем пароля. Если пароль неверен, метод select выделяет поле, а метод focus возвращает ему фокус, так что пользователь может повторно ввести пароль.
function checkPassword(userPass) {
if (badPassword) {
      alert("Please enter your password again.")
      userPass.focus()
      userPass.select()
   }
}
Здесь предполагается, что Password-объект определён так:
<INPUT TYPE="password" NAME="userPass">

Примеры

Пример 1. Пользователь может получить список установленных plug-in'ов, выбрав меню About Plug-ins из Help. Чтобы увидеть код, используемый браузером для этого сообщения, выберите меню About Plug-ins из Help, затем выберите Page Source из View.

Пример 2. Следующий код присваивает укороченные переменные предопределённым свойствам LiveAudio.
var myPluginName = navigator.plugins["LiveAudio"].name
var myPluginFile = navigator.plugins["LiveAudio"].filename
var myPluginDesc = navigator.plugins["LiveAudio"].description
Пример 3. Этот код выводит сообщение "LiveAudio is configured for audio/wav", если LiveAudio plug-in установлен и подключён для "audio/wav" MIME-типа:
var myPlugin = navigator.plugins["LiveAudio"]
var myType = myPlugin["audio/wav"]
if (myType && myType.enabledPlugin == myPlugin)
document.writeln("LiveAudio is configured for audio/wav")
Пример 4. Следующее выражение представляет количество MIME-типов, которые Shockwave может отобразить:
navigator.plugins["Shockwave"].length
Пример 5. Этот код выводит свойства name, filename, description и length каждого Plugin-объекта на клиенте:
document.writeln("<TABLE BORDER=1><TR VALIGN=TOP>",
   "<TH ALIGN=left>i",
   "<TH ALIGN=left>name",
   "<TH ALIGN=left>filename",
   "<TH ALIGN=left>description",
   "<TH ALIGN=left># of types</TR>")
for (i=0; i < navigator.plugins.length; i++) {
   document.writeln("<TR VALIGN=TOP><TD>",i,
      "<TD>",navigator.plugins[i].name,
      "<TD>",navigator.plugins[i].filename,
      "<TD>",navigator.plugins[i].description,
      "<TD>",navigator.plugins[i].length,
      "</TR>")
}
document.writeln("</TABLE>")
Этот пример даст примерно такой вывод:

i
name
filename
description
# of types

0
QuickTime Plug-In
d:\nettools\netscape\nav30\Program\
plugins\NPQTW32.DLL
QuickTime Plug-In for Win32 v.1.0.0
1

1
LiveAudio
d:\nettools\netscape\nav30\Program\
plugins\NPAUDIO.DLL
LiveAudio--Netscape Navigator sound playing component
7
2
NPAVI32 Dynamic Link Library
d:\nettools\netscape\nav30\Program\
plugins\npavi32.dll
NPAVI32, avi plugin DLL
2
3
Netscape Default Plugin
d:\nettools\netscape\nav30\Program\
plugins\npnul32.dll
Null Plugin
1

Примеры

Пример 1. Определяется группа радио-кнопок для выбора из трёх музыкальных каталогов. Каждая радио-кнопка имеет одно имя, NAME="musicChoice", образуя группу кнопок, в которой может быть выбрана только одна кнопка этой группы. Здесь также определено текстовое поле, которая по умолчанию имеет значение выбранной радио-кнопки, но также даёт пользователю возможность ввести нестандартное имя каталога. Обработчик onClick устанавливает в поле ввода имя каталога, если пользователь щёлкает по радио-кнопке.
<INPUT TYPE="text" NAME="catalog" SIZE="20">
<INPUT TYPE="radio" NAME="musicChoice" VALUE="soul-and-r&b"
onClick="musicForm.catalog.value = 'soul-and-r&b'"> Soul and R&B
<INPUT TYPE="radio" NAME="musicChoice" VALUE="jazz"
   onClick="musicForm.catalog.value = 'jazz'"> Jazz
<INPUT TYPE="radio" NAME="musicChoice" VALUE="classical"
   onClick="musicForm.catalog.value = 'classical'"> Classical
Пример 2. В этом примере имеется форма с тремя текстовыми боксами и тремя радио-кнопками. Радио-кнопки позволяют выбирать регистр символов, в который конвертировать текст текстовых полей, или вообще не конвертировать этот текст. Каждое текстовое поле имеет обработчик события onChange, который изменяет значение поля в зависимости от того, какая кнопка нажата. Радио-кнопки для верхнего и нижнего регистров имеют обработчики onClick, конвертирующие все поля одновременно.
<HTML>
<HEAD>
<TITLE>Radio object example</TITLE>
</HEAD>
<SCRIPT>
function convertField(field) {
   if (document.form1.conversion[0].checked) {
      field.value = field.value.toUpperCase()}
   else {
   if (document.form1.conversion[1].checked) {
      field.value = field.value.toLowerCase()}
   }
}
function convertAllFields(caseChange) {
   if (caseChange=="upper") {
   document.form1.lastName.value = document.form1.lastName.value.toUpperCase()
   document.form1.firstName.value = document.form1.firstName.value.toUpperCase()
   document.form1.cityName.value = document.form1.cityName.value.toUpperCase()}
   else {
   document.form1.lastName.value = document.form1.lastName.value.toLowerCase()
   document.form1.firstName.value = document.form1.firstName.value.toLowerCase()
   document.form1.cityName.value = document.form1.cityName.value.toLowerCase()
   }
}
</SCRIPT>
<BODY>
<FORM NAME="form1">
<B>Last name:</B>
<INPUT TYPE="text" NAME="lastName" SIZE=20 onChange="convertField(this)">
<BR><B>First name:</B>
<INPUT TYPE="text" NAME="firstName" SIZE=20 onChange="convertField(this)">
<BR><B>City:</B>
<INPUT TYPE="text" NAME="cityName" SIZE=20 onChange="convertField(this)">
<P><B>Convert values to:</B>
<BR><INPUT TYPE="radio" NAME="conversion" VALUE="upper"
   onClick="if (this.checked) {convertAllFields('upper')}"> Upper case
<BR><INPUT TYPE="radio" NAME="conversion" VALUE="lower"
   onClick="if (this.checked) {convertAllFields('lower')}"> Lower case
<BR><INPUT TYPE="radio" NAME="conversion" VALUE="noChange"> No conversion
</FORM>
</BODY>
</HTML>
См. также примеры для Link.

Примеры

В этом примере переключается состояние первой радио-кнопки объекта musicType Radio на форме musicForm:
document.musicForm.musicType[0].click()
А в этом примере переключается состояние бокса-переключателя newAge checkbox на форме musicForm:
document.musicForm.newAge.click()

Примеры

Пример 1. Следующий скрипт использует метод replace для переключения слов в строке. Для заменяющего текста скрипт использует значения свойств $1 и $2 глобального объекта RegExp. Обратите внимание, что имя объекта RegExp не предшествует свойствам $, когда они передаются как второй аргумент методу replace.
<SCRIPT LANGUAGE="JavaScript1.2">
re = /(\w+)\s(\w+)/;
str = "John Smith";
newstr=str.replace(re, "$2, $1");
document.write(newstr)
</SCRIPT>
Будет выведено "Smith, John".
Пример 2. Здесь RegExp.input устанавливается событием Change. В функции getInfo метод exec использует значение RegExp.input в качестве аргумента. Обратите внимание, что RegExp присоединён к свойствам $.
<HTML><SCRIPT LANGUAGE="JavaScript1.2">
function getInfo() {
re = /(\w+)\s(\d+)/;
   re.exec();
   window.alert(RegExp.$1 + ", your age is " + RegExp.$2);
}
</SCRIPT>Enter your first name and your age, and then press Enter.<FORM>
<INPUT TYPE:"TEXT" NAME="NameAge" onChange="getInfo(this);">
</FORM></HTML>

Примеры

Пример 1. Здесь отображается Text-объект со значением по умолчанию "CA" и кнопка reset с текстом "Clear Form" на поверхности. Если пользователь печатает аббревиатуру штата в объекте Text и щёлкает кнопку Clear Form, восстанавливается оригинальное значение "CA".
<B>State: </B><INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2">
<P><INPUT TYPE="reset" VALUE="Clear Form">
Пример 2. Здесь имеются два объекта Text, объект Select и три радио-кнопки; все эти объекты имеют значения по умолчанию. На форме имеется также кнопка reset с текстом "Defaults" на ней. Если пользователь изменяет значение любого из этих объектов и щёлкает кнопку Defaults, восстанавливаются начальные значения.
<HTML>
<HEAD>
<TITLE>Reset object example</TITLE>
</HEAD>
<BODY>
<FORM NAME="form1">
<BR><B>City: </B><INPUT TYPE="text" NAME="city" VALUE="Santa Cruz" SIZE="20">
<B>State: </B><INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2">
<P><SELECT NAME="colorChoice">
<OPTION SELECTED> Blue
   <OPTION> Yellow
   <OPTION> Green
   <OPTION> Red
</SELECT><P><INPUT TYPE="radio" NAME="musicChoice" VALUE="soul-and-r&b"
   CHECKED> Soul and R&B
<BR><INPUT TYPE="radio" NAME="musicChoice" VALUE="jazz">
   Jazz
<BR><INPUT TYPE="radio" NAME="musicChoice" VALUE="classical">
   Classical
<P><INPUT TYPE="reset" VALUE="Defaults" NAME="reset1">
</FORM>
</BODY>
</HTML>

Примеры

Здесь убирается фокус с reset-кнопки userReset:
userReset.blur()
Предполагается, что кнопка определена так:
<INPUT TYPE="reset" NAME="userReset">

Примеры

Эта функция вычисляет свойство value группы кнопок и и отображает его в окне msgWindow:
function valueGetter() {
var msgWindow=window.open("")
   msgWindow.document.write("submitButton.value is " +
      document.valueTest.submitButton.value + "<BR>")
   msgWindow.document.write("resetButton.value is " +
      document.valueTest.resetButton.value + "<BR>")
   msgWindow.document.write("helpButton.value is " +
      document.valueTest.helpButton.value + "<BR>")
   msgWindow.document.close()
}
Этот пример выведет:
Query Submit
Reset
Help
Предполагается, что кнопки были определены так:
<INPUT TYPE="submit" NAME="submitButton">
<INPUT TYPE="reset" NAME="resetButton">
<INPUT TYPE="button" NAME="helpButton" VALUE="Help">

Примеры

Пример 1. Отображаются два списка selection. В первом списке пользователь может выбрать только один элемент; во втором списке можно выбрать несколько элементов.
Choose the music type for your free CD:
<SELECT NAME="music_type_single">
<OPTION SELECTED> R&B
   <OPTION> Jazz
   <OPTION> Blues
   <OPTION> New Age
</SELECT>
<P>Choose the music types for your free CDs:
<BR><SELECT NAME="music_type_multi" MULTIPLE>
   <OPTION SELECTED> R&B
   <OPTION> Jazz
   <OPTION> Blues
   <OPTION> New Age
</SELECT>
Пример 2. Отображаются два списка selection, которые позволяют выбрать месяц и число. Эти списки selection инициализируются текущей датой. Пользователь может изменить месяц и число, используя списки selection или выбрав предустановленные даты радио-кнопками. Текстовые поля на форме отображают значения свойств объектов Select и указывают выбранную дату и то, является ли эта дата Cinco de Mayo.
<HTML>
<HEAD>
<TITLE>Select object example</TITLE>
</HEAD>
<BODY>
<SCRIPT>
var today = new Date()
//---------------
function updatePropertyDisplay(monthObj,dayObj) {
   // Get date strings
   var monthInteger, dayInteger, monthString, dayString
   monthInteger=monthObj.selectedIndex
   dayInteger=dayObj.selectedIndex
   monthString=monthObj.options[monthInteger].text
   dayString=dayObj.options[dayInteger].text
   // Display property values
   document.selectForm.textFullDate.value=monthString + " " + dayString
   document.selectForm.textMonthLength.value=monthObj.length
   document.selectForm.textDayLength.value=dayObj.length
   document.selectForm.textMonthName.value=monthObj.name
   document.selectForm.textDayName.value=dayObj.name
   document.selectForm.textMonthIndex.value=monthObj.selectedIndex
   document.selectForm.textDayIndex.value=dayObj.selectedIndex
   // Is it Cinco de Mayo?
   if (monthObj.options[4].selected && dayObj.options[4].selected)
      document.selectForm.textCinco.value="Yes!"
   else
      document.selectForm.textCinco.value="No"
}
</SCRIPT>

<FORM NAME="selectForm">
<P><B>Choose a month and day:</B>
Month: <SELECT NAME="monthSelection"
   onChange="updatePropertyDisplay(this,document.selectForm.daySelection)">
   <OPTION> January <OPTION> February <OPTION> March
   <OPTION> April <OPTION> May <OPTION> June
   <OPTION> July <OPTION> August <OPTION> September
   <OPTION> October <OPTION> November <OPTION> December
</SELECT>
Day: <SELECT NAME="daySelection"
   onChange="updatePropertyDisplay(document.selectForm.monthSelection,this)">
   <OPTION> 1 <OPTION> 2 <OPTION> 3 <OPTION> 4 <OPTION> 5
   <OPTION> 6 <OPTION> 7 <OPTION> 8 <OPTION> 9 <OPTION> 10
   <OPTION> 11 <OPTION> 12 <OPTION> 13 <OPTION> 14 <OPTION> 15
   <OPTION> 16 <OPTION> 17 <OPTION> 18 <OPTION> 19 <OPTION> 20
   <OPTION> 21 <OPTION> 22 <OPTION> 23 <OPTION> 24 <OPTION> 25
   <OPTION> 26 <OPTION> 27 <OPTION> 28 <OPTION> 29 <OPTION> 30
   <OPTION> 31
</SELECT>
<P><B>Set the date to: </B>
<INPUT TYPE="radio" NAME="dateChoice"
   onClick="
      monthSelection.selectedIndex=0;
      daySelection.selectedIndex=0;
      updatePropertyDisplay
         document.selectForm.monthSelection,document.selectForm.daySelection)">
   New Year's Day
<INPUT TYPE="radio" NAME="dateChoice"
   onClick="
      monthSelection.selectedIndex=4;
      daySelection.selectedIndex=4;
      updatePropertyDisplay
         (document.selectForm.monthSelection,document.selectForm.daySelection)">
   Cinco de Mayo
<INPUT TYPE="radio" NAME="dateChoice"
   onClick="
      monthSelection.selectedIndex=5;
      daySelection.selectedIndex=20;
      updatePropertyDisplay
         (document.selectForm.monthSelection,document.selectForm.daySelection)">
   Summer Solstice
<P><B>Property values:</B>
<BR>Date chosen: <INPUT TYPE="text" NAME="textFullDate" VALUE="" SIZE=20">
<BR>monthSelection.length<INPUT TYPE="text" NAME="textMonthLength" VALUE="" SIZE=20">
<BR>daySelection.length<INPUT TYPE="text" NAME="textDayLength" VALUE="" SIZE=20">
<BR>monthSelection.name<INPUT TYPE="text" NAME="textMonthName" VALUE="" SIZE=20">
<BR>daySelection.name<INPUT TYPE="text" NAME="textDayName" VALUE="" SIZE=20">
<BR>monthSelection.selectedIndex
   <INPUT TYPE="text" NAME="textMonthIndex" VALUE="" SIZE=20">
<BR>daySelection.selectedIndex<INPUT TYPE="text" NAME="textDayIndex" VALUE="" SIZE=20">
<BR>Is it Cinco de Mayo? <INPUT TYPE="text" NAME="textCinco" VALUE="" SIZE=20">
<SCRIPT>
document.selectForm.monthSelection.selectedIndex=today.getMonth()
document.selectForm.daySelection.selectedIndex=today.getDate()-1
updatePropertyDisplay(document.selectForm.monthSelection,document.selectForm.daySelection)
</SCRIPT>
</FORM>
</BODY>
</HTML>
Пример 3. Добавление опции конструктором Option. В этом примере создаются два объекта Select, один с и другой без атрибута MULTIPLE. Сначала опции ни для одного из объектов не определены. Если пользователь щёлкает кнопку, ассоциированную с объектом Select, функция populate создаёт четыре опции для Select-объекта и выбирает первую опцию.
<SCRIPT>
function populate(inForm) {
   colorArray = new Array("Red", "Blue", "Yellow", "Green")   var option0 = new Option("Red", "color_red")
   var option1 = new Option("Blue", "color_blue")
   var option2 = new Option("Yellow", "color_yellow")
   var option3 = new Option("Green", "color_green")   for (var i=0; i < 4; i++) {
      eval("inForm.selectTest.options[i]=option" + i)
      if (i==0) {
         inForm.selectTest.options[i].selected=true
      }
   }   history.go(0)
}
</SCRIPT>
<H3>Select Option() constructor</H3>
<FORM>
<SELECT NAME="selectTest"></SELECT><P>
<INPUT TYPE="button" VALUE="Populate Select List" onClick="populate(this.form)">
<P>
</FORM><HR>
<H3>Select-Multiple Option() constructor</H3>
<FORM>
<SELECT NAME="selectTest" multiple></SELECT><P>
<INPUT TYPE="button" VALUE="Populate Select List" onClick="populate(this.form)">
</FORM>
Пример 4. Удаление опции. Следующая функция удаляет опцию из Select-объекта.
function deleteAnItem(theList,itemNo) {
   theList.options[itemNo]=null
   history.go(0)
}

Примеры

Пример 1: Строковой литерал. Создаётся строковой литерал:
var last_name = "Schaefer"
Пример 2: Свойства строкового литерала. Следующие операторы вычисляются в 8, "SCHAEFER" и "schaefer":
last_name.length
last_name.toUpperCase()
last_name.toLowerCase()
Пример 3: Доступ к определённым символам строки. Вы можете представить строку как массив символов. Тогда можно получить доступ к отдельным символам строки по индексу этого массива.
var myString = "Hello"
myString[0] // возвращает "H"
Пример 4: Передача строки между скриптами в различных окнах и фрэймах. Следующий код создаёт две строковые переменные и открывает второе окно:
var lastName = "Schaefer"
var firstName = "Jesse"
empWindow=window.open('string2.html','window1','width=300,height=300')
Если код HTML второго окна (string2.html) создаёт две строковые переменные empLastName и empFirstName, следующий код в первом окне присваивает значения переменным второго окна:
empWindow.empFirstName=firstName
empWindow.empLastName=lastName
А этот код в первом окне выводит значения переменных второго окна:
alert('empFirstName in empWindow is ' + empWindow.empFirstName)
alert('empLastName in empWindow is ' + empWindow.empLastName)

Примеры

Пример 1. Этот пример возвращает строку "ABC".
String.fromCharCode(65,66,67)
Пример 2. Свойство which событий KeyDown, KeyPress и KeyUp содержит ASCII-значение клавиши клавиатуры, нажатой при возникновении события. Если Вы хотите получить фактическую букву, число или символ клавиши, Вы можете использовать fromCharCode. Следующий пример возвращает букву, число или символ в свойстве which события KeyPress.
String.fromCharCode(KeyPress.which)

Примеры

Пример 1. Методы indexOf и lastIndexOf используются для локализации значений в строке "Brave new world."
var anyString="Brave new world"// Выводит 8
document.write("<P>The index of the first w from the beginning is " +
   anyString.indexOf("w"))
// Выводит 10
document.write("<P>The index of the first w from the end is " +
   anyString.lastIndexOf("w"))
// Выводит 6
document.write("<P>The index of 'new' from the beginning is " +
   anyString.indexOf("new"))
// Выводит 6
document.write("<P>The index of 'new' from the end is " +
   anyString.lastIndexOf("new"))
Пример 2. В этом примере определены две строковые переменные. Они содержат одинаковые строки, но вторая строка содержит символы в верхнем регистре. Первый метод writeln выводит 19. Поскольку метод indexOf учитывает регистр символов, строка "cheddar" не найдена в строке myCapString, поэтому второй метод writeln выведет -1.
myString="brie, pepper jack, cheddar"
myCapString="Brie, Pepper Jack, Cheddar"
document.writeln('myString.indexOf("cheddar") is ' +
   myString.indexOf("cheddar"))
document.writeln('<P>myCapString.indexOf("cheddar") is ' +
   myCapString.indexOf("cheddar"))
Пример 3. Здесь в count устанавливается количество вхождений буквы x в строке str:
count = 0;
pos = str.indexOf("x");
while ( pos != -1 ) {
   count++;
   pos = str.indexOf("x",pos+1);
}

Примеры

Пример 1. Здесь match используется для поиска подстроки 'Chapter' с последующим одним или более цифровыми символами, с последующей десятичной точкой и цифровыми символами 0 или более раз. Регулярно выражение включает флаг i, поэтому регистр символов игнорируется.
<SCRIPT>
str = "For more information, see Chapter 3.4.5.1";
re = /(chapter \d+(\.\d)*)/i;
found = str.match(re);
document.write(found);
</SCRIPT>
Возвращает массив, содержащий Chapter 3.4.5.1,Chapter 3.4.5.1,.1

'Chapter 3.4.5.1' это первое совпадение и первое значение, запомненное из (Chapter \d+(\.\d)*).
'.1' это второе значение, запомненное из (\.\d).
Пример 2. Здесь демонстрируется использование флагов global и ignore case вместе с match.
<SCRIPT>
str = "abcDdcba";
newArray = str.match(/d/gi);
document.write(newArray);
</SCRIPT>
Возвращаемые массив содержит D, d.

Примеры

Пример 1. Здесь регулярное выражение содержит флаги global и ignore case с разрешением методу replace замещать каждое вхождение 'apples' на 'oranges'.
<SCRIPT>
re = /apples/gi;
str = "Apples are round, and apples are juicy.";
newstr=str.replace(re, "oranges");
document.write(newstr)
</SCRIPT>
Будет напечатано "oranges are round, and oranges are juicy."

Пример 2. В этом примере регулярное выражение определено в методе replace и содержит флаг игнорирования регистра.
<SCRIPT>
str = "Twas the night before Xmas...";
newstr=str.replace(/xmas/i, "Christmas");
document.write(newstr)
</SCRIPT>
Будет напечатано "Twas the night before Christmas..."
Пример 3. Этот скрипт переключает слова в строке. Для замещающего текста используются значения свойств $1 и $2.
<SCRIPT LANGUAGE="JavaScript1.2">
re = /(\w+)\s(\w+)/;
str = "John Smith";
newstr = str.replace(re, "$2, $1");
document.write(newstr)
</SCRIPT>
Будет напечатано "Smith, John".
Пример 4. Здесь градусы по Фаренгейту замещаются эквивалентом по Цельсию. Градусы по Фаренгейту должны быть числом с конечной F. Функция возвращает число по Цельсию с конечной С. Например, если введено 212F, функция возвращает 100C. Если введено 0F, функция возвращает -17.77777777777778C.
Регулярное выражение test проверяет числа с конечной буквой F. Число по Фаренгейту доступно для Вашей функции через параметр $1. Функция устанавливает число по Цельсию на основе значения по Фаренгейту, передаваемого в строке функции f2c. Затем f2c возвращает число по Цельсию. Эта функция напоминает флаг s///e из Perl.
function f2c(x) {
   var s = String(x)
   var test = /(\d+(\.\d*)?)F\b/g
   return s.replace
      (test,
         myfunction ($0,$1,$2) {
            return (($1-32) * 5/9) + "C";
         }
      )
}

Примеры

Пример 1. определена функция, которая разделяет строку на массив строк с использованием специфицированного сепаратора. После разделения строки, функция выводит сообщения, указывающие строку-оригинал (до разделения), используемый сепаратор, количество элементов массива и отдельные элементы массива.
function splitString (stringToSplit,separator) {
arrayOfStrings = stringToSplit.split(separator)
   document.write ('<P>The original string is: "' + stringToSplit + '"')
   document.write ('<BR>The separator is: "' + separator + '"')
   document.write ("<BR>The array has " + arrayOfStrings.length + " elements: ")   for (var i=0; i < arrayOfStrings.length; i++) {
      document.write (arrayOfStrings[i] + " / ")
   }
}var tempestString="Oh brave new world that has such people in it."
var monthString="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec"var space=" "
var comma=","splitString(tempestString,space)
splitString(tempestString)
splitString(monthString,comma)
Этот пример даст на выходе:
The original string is: "Oh brave new world that has such people in it."
The separator is: " "
The array has 10 elements: Oh / brave / new / world / that / has / such / people / in / it. /The original string is: "Oh brave new world that has such people in it."
The separator is: "undefined"
The array has 1 elements: Oh brave new world that has such people in it. /The original string is: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec"
The separator is: ","
The array has 12 elements: Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec /
Пример 2. Рассмотрим следующий скрипт:
<SCRIPT LANGUAGE="JavaScript1.2">
str="She sells seashells \nby the\n seashore"
document.write(str + "<BR>")
a=str.split(" ")
document.write(a)
</SCRIPT>
С использованием LANGUAGE="JavaScript1.2" это скрипт даст:
"She", "sells", "seashells", "by", "the", "seashore"
Без LANGUAGE="JavaScript1.2" этот скрипт разделит только по одиночным пробельным символам:
"She", "sells", , , , "seashells", "by", , , "the", "seashore"
Пример 3. В этом примере split ищет 0 или более пробелов, с последующим символом ; и с последующими 0 или более пробелов и, если это найдено, удаляет пробелы из строки.
nameList это массив, возвращаемый как результат работы split.
<SCRIPT>
names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ";
document.write (names + "<BR>" + "<BR>");
re = /\s*;\s*/;
nameList = names.split (re);
document.write(nameList);
</SCRIPT>
Будут напечатаны две строки; первая - строка-оригинал, вторая - результирующий массив.
Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
Harry Trump,Fred Barney,Helen Rigby,Bill Abel,Chris Hand
Пример 4. Здесь split ищет 0 или более пробелов в строке и возвращает первые три найденные разделения .
<SCRIPT LANGUAGE="JavaScript1.2">
myVar = " Hello World. How are you doing? ";
splits = myVar.split(" ", 3);
document.write(splits)
</SCRIPT>
Скрипт выведет:
["Hello", "World.", "How"]

Примеры

Пример 1. Здесь substring используется для отображения символов их строки "Netscape":
var anyString="Netscape"// Выводит "Net"
document.write(anyString.substring(0,3))
document.write(anyString.substring(3,0))
// Выводит "cap"
document.write(anyString.substring(4,7))
document.write(anyString.substring(7,4))
// Выводит "Netscap"
document.write(anyString.substring(0,7))
// Выводит "Netscape"
document.write(anyString.substring(0,8))
document.write(anyString.substring(0,10))
Пример 2. Заменяется подстрока в строке. Заменяются отдельные символы и подстроки. Вызов функции в конце примера изменяет строку "Brave New World" на "Brave New Web".
function replaceString(oldS,newS,fullS) {
// заменяет oldS на newS в строке fullS
for (var i=0; i<fullS.length; i++) {
      if (fullS.substring(i,i+oldS.length) == oldS) {
         fullS = fullS.substring(0,i)+newS+fullS.substring(i+oldS.length,fullS.length)
      }
   }
   return fullS
}replaceString("World","Web","Brave New World")
Пример 3. В JavaScript 1.2, используя LANGUAGE="JavaScript1.2", следующий скрипт выдаёт ошибку времени выполнения (out of memory).
<SCRIPT LANGUAGE="JavaScript1.2">
str="Netscape"
document.write(str.substring(0,3);
document.write(str.substring(3,0);
</SCRIPT>
Без LANGUAGE="JavaScript1.2" вышеприведённый скрипт напечатает следующее:
Net Net
Во втором write числа-индексы меняются местами.

Примеры

Пример 1. Создаётся Text-объект длиной 25 символов. Текстовое поле расположено сразу справа от слов "Last name:". При загрузке формы текстовое поле очищено.
<B>Last name:</B> <INPUT TYPE="text" NAME="last_name" VALUE="" SIZE=25>
Пример 2. Создаются два Text-объекта на форме. Каждый объект имеет значение по умолчанию. Объект city имеет обработчик onFocus, который выделяет весь текст в поле, когда пользователь переходит в это поле с помощью табуляции. Объект state имеет обработчик onChange, который переводит значение в верхний регистр.
<FORM NAME="form1">
<BR><B>City: </B><INPUT TYPE="text" NAME="city" VALUE="Anchorage"
SIZE="20" onFocus="this.select()">
<B>State: </B><INPUT TYPE="text" NAME="state" VALUE="AK" SIZE="2"
   onChange="this.value=this.value.toUpperCase()">
</FORM>
См. также примеры для onBlur, onChange, onFocus и onSelect.

Примеры

Пример 1. Форма myForm содержит Text-объект и кнопку. если пользователь щёлкает по кнопке, в Text-объект устанавливается значение имени формы. Обработчик onClick кнопки использует this.form для обращения к текущей форме myForm.
<FORM NAME="myForm">
Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga">
<P>
<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name"
onClick="this.form.text1.value=this.form.name">
</FORM>
Пример 2. Показана форма с несколькими элементами. Если пользователь щёлкает кнопку button2, функция showElements выводит диалог alert, содержащий имена всех элементов формы myForm.
function showElements(theForm) {
   str = "Form Elements of form " + theForm.name + ": \n "
   for (i = 0; i < theForm.length; i++)
      str += theForm.elements[i].name + "\n"
   alert(str)
}
</script>
<FORM NAME="myForm">
Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga">
<P>
<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name"
   onClick="this.form.text1.value=this.form.name">
<INPUT NAME="button2" TYPE="button" VALUE="Show Form Elements"
   onClick="showElements(this.form)">
</FORM>
Диалог alert выведет следующий текст:
JavaScript Alert:
Form Elements of form myForm:
text1
button1
button2
Пример 3. Здесь используется ссылка объекта, а не ключевое слово this, для обращения к форме. Код возвращает ссылку на myForm, которая является формой, содержащей элемент myTextObject.
document.myForm.myTextObject.form

Примеры

Пример 1. Создаётся объект Textarea размером 6 рядов на 55 столбцов. Поле textarea расположено ниже слова "Description:". Когда форма загружается, Textarea-объект содержит несколько строк данных, включая одну пустую строку.
<B>Description:</B>
<BR><TEXTAREA NAME="item_description" ROWS=6 COLS=55>
Our storage ottoman provides an attractive way to
store lots of CDs and videos--and it's versatile
enough to store other things as well.It can hold up to 72 CDs under the lid and 20 videos
in the drawer below.
</TEXTAREA>
Пример 2. Сроковая переменная содержит символы новой строки для различных платформ. Если пользователь щёлкает кнопку, Textarea-объект заполняется значением из строковой переменной. В результате получаются три строки текста в Textarea-объекте.
<SCRIPT>
myString="This is line one.\nThis is line two.\rThis is line three."
</SCRIPT>
<FORM NAME="form1">
<INPUT TYPE="button" Value="Populate the textarea"
onClick="document.form1.textarea1.value=myString">
<P>
<TEXTAREA NAME="textarea1" ROWS=6 COLS=55></TEXTAREA>

Примеры

Пример 1. Здесь показана форма с несколькими элементами. Если пользователь щёлкает кнопку button2, функция showElements отображает диалог alert с именами всех элементов формы myForm.
function showElements(theForm) {
str = "Form Elements of form " + theForm.name + ": \n "
   for (i = 0; i < theForm.length; i++)
      str += theForm.elements[i].name + "\n"
   alert(str)
}
</script><FORM NAME="myForm">
Form name:<INPUT TYPE="textarea" NAME="text1" VALUE="Beluga">
<P>
<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name"
   onClick="this.form.text1.value=this.form.name">
<INPUT NAME="button2" TYPE="button" VALUE="Show Form Elements"
   onClick="showElements(this.form)">
</FORM>
Диалог alert выведет:
JavaScript Alert:
Form Elements of form myForm:
text1
button1
button2
Пример 2. Здесь используется ссылка объекта, а не ключевое слово this, для ссылки на форму. Код возвращает ссылку на myForm, которая является формой - контейнером объекта myTextareaObject.
document.myForm.myTextareaObject.form

Примеры

Пример 1. Окна, открывающие другие окна. Здесь документ верхнего окна открывает второе окно window2 и определяет push-кнопки, которые открывают окно с сообщением, записывает в окно сообщения, закрывает его и закрывает window2. Обработчики onLoad и onUnload документа, загруженного в window2, выводят предупреждающие сообщения при открытии и закрытии окна.

win1.html, который определяет фрэймы для первого окна, содержит следующий код:
<HTML>
<HEAD>
<TITLE>window object example: Window 1</TITLE>
</HEAD>
<BODY BGCOLOR="antiquewhite">
<SCRIPT>
window2=open("win2.html","secondWindow",
"scrollbars=yes,width=250, height=400")
document.writeln("<B>The first window has no name: "
   + window.name + "</B>")
document.writeln("<BR><B>The second window is named: "
   + window2.name + "</B>")
</SCRIPT>
<FORM NAME="form1">
<P><INPUT TYPE="button" VALUE="Open a message window"
   onClick = "window3=window.open('','messageWindow',
   'scrollbars=yes,width=175, height=300')">
<P><INPUT TYPE="button" VALUE="Write to the message window"
   onClick="window3.document.writeln('Hey there');
   window3.document.close()">
<P><INPUT TYPE="button" VALUE="Close the message window"
   onClick="window3.close()">
<P><INPUT TYPE="button" VALUE="Close window2"
   onClick="window2.close()">
</FORM>
</BODY>
</HTML>
win2.html, который определяет содержимое окна window2, содержит следующий код:
<HTML>
<HEAD>
<TITLE>window object example: Window 2</TITLE>
</HEAD>
<BODY BGCOLOR="oldlace"
   onLoad="alert('Message from ' + window.name + ': Hello, World.')"
   onUnload="alert('Message from ' + window.name + ': I\'m closing')">
<B>Some numbers</B>
<UL><LI>one
<LI>two
<LI>three
<LI>four</UL>
</BODY>
</HTML>
Пример 2. Создание фрэймов. Создаются два окна, каждое из 4 фрэймов. В первом окне первый фрэйм содержит кнопки, которые изменяют цвет фона фрэймов в обоих окнах.

framset1.html, где определяются фрэймы первого окна, содержит следующий код:
<HTML>
<HEAD>
<TITLE>Frames and Framesets: Window 1</TITLE>
</HEAD>
<FRAMESET ROWS="50%,50%" COLS="40%,60%"
   onLoad="alert('Hello, World.')">
<FRAME SRC=framcon1.html NAME="frame1">
<FRAME SRC=framcon2.html NAME="frame2">
<FRAME SRC=framcon2.html NAME="frame3">
<FRAME SRC=framcon2.html NAME="frame4">
</FRAMESET>
</HTML>
framset2.html, где определяются фрэймы второго окна, содержит следующий код:
<HTML>
<HEAD>
<TITLE>Frames and Framesets: Window 2</TITLE>
</HEAD>
<FRAMESET ROWS="50%,50%" COLS="40%,60%">
<FRAME SRC=framcon2.html NAME="frame1">
<FRAME SRC=framcon2.html NAME="frame2">
<FRAME SRC=framcon2.html NAME="frame3">
<FRAME SRC=framcon2.html NAME="frame4">
</FRAMESET>
</HTML>
framcon1.html, где определяется содержимое первого фрэйма первого окна, содержит следующий код:
<HTML>
<BODY>
<A NAME="frame1"><H1>Frame1</H1></A>
<P><A HREF="framcon3.htm" target=frame2>Click here</A>
   to load a different file into frame 2.
<SCRIPT>
window2=open("framset2.htm","secondFrameset")
</SCRIPT>
<FORM>
<P><INPUT TYPE="button" VALUE="Change frame2 to teal"
   onClick="parent.frame2.document.bgColor='teal'">
<P><INPUT TYPE="button" VALUE="Change frame3 to slateblue"
   onClick="parent.frames[2].document.bgColor='slateblue'">
<P><INPUT TYPE="button" VALUE="Change frame4 to darkturquoise"
   onClick="top.frames[3].document.bgColor='darkturquoise'"><P><INPUT TYPE="button" VALUE="window2.frame2 to violet"
   onClick="window2.frame2.document.bgColor='violet'">
<P><INPUT TYPE="button" VALUE="window2.frame3 to fuchsia"
   onClick="window2.frames[2].document.bgColor='fuchsia'">
<P><INPUT TYPE="button" VALUE="window2.frame4 to deeppink"
   onClick="window2.frames[3].document.bgColor='deeppink'">
</FORM>
</BODY>
</HTML>
framcon2.html, где определяется содержимое остальных фрэймов, содержит следующий код:
<HTML>
<BODY>
<P>This is a frame.
</BODY>
</HTML>
framcon3.html, на который ссылается объект Link в framcon1.html, содержит следующий код:
<HTML>
<BODY>
<P>This is a frame. What do you think?
</BODY>
</HTML>

Примеры

Пример 1. Любая из следующих строк закрывает текущее окно:
window.close()
self.close()
close()
Пример 2: Закрытие главного окна браузера.
top.opener.close()
Пример 3. Здесь закрывается окно messageWin:
messageWin.close()
Предполагается, что окно было открыто примерно в такой манере:
messageWin=window.open("")

Примеры

Пример 1. Следующий код открывает окно win1, затем позже проверяет, было ли оно закрыто. Вызываемая функция зависит от того, закрыто ли окно win1.
win1=window.open('opener1.html','window1','width=300,height=300')
...
if (win1.closed)
function1()
   else
   function2()
Пример 2. Определяется, закрыто ли окно, открывшее текущее окно, и вызывается соответствующая функция.
if (window.opener.closed)
   function1()
   else
   function2()

Примеры

Функция checkPassword подтверждает, что пользователь ввёл верный пароль. Если введён неправильный пароль, метод focus возвращает фокус объекту Password, а метод select выделяет его, чтобы пользователь мог повторно ввести пароль.
function checkPassword(userPass) {
if (badPassword) {
      alert("Please enter your password again.")
      userPass.focus()
      userPass.select()
   }
}
Предполагается, что объект Password определён так:
<INPUT TYPE="password" NAME="userPass">

Примеры

Следующая кнопка выполняет то же действие, что и кнопка Forward браузера:
<P><INPUT TYPE="button" VALUE="< Go Forth"
onClick="history.forward()">
<P><INPUT TYPE="button" VALUE="> Go Forth"
   onClick="myWindow.forward()">

Примеры

Следующий пример создаёт окно "chromeless" (в окне chromeless отсутствуют панель утилит, полосы прокрутки, статусные области и т.д., как в диалоговом окне), пряча большую часть панелей пользовательского интерфейса:
self.menubar.visible=false;
self.toolbar.visible=false;
self.locationbar.visible=false;
self.personalbar.visible=false;
self.scrollbars.visible=false;
self.statusbar.visible=false;

Примеры

Пример 1. Функция windowOpener открывает окно и использует методы write для вывода сообщения:
function windowOpener() {
msgWindow=window.open("","displayWindow","menubar=yes")
   msgWindow.document.write
      ("<HEAD><TITLE>Message window</TITLE></HEAD>")
   msgWindow.document.write
      ("<CENTER><BIG><B>Hello, world!</B></BIG></CENTER>")
}
Пример 2. Это обработчик onClick, который открывает новое клиентское окно, выводя содержимое, специфицированное в файле sesame.html. Окно открывается со специфицированными установками опций; все другие опции будут false, поскольку не специфицированы.
<FORM NAME="myform">
<INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!"
   onClick="window.open ('sesame.html', 'newWin',
   'scrollbars=yes,status=yes,width=300,height=300')">
</FORM>

Примеры

Пример 1: Закрытие opener'а. Этот код закрывает окно, которое открыло текущее окно. Если opener-окно закрывается, opener остаётся без изменений. Однако window.opener.name вычисляется теперь в undefined.
window.opener.close()
Пример 2: Закрытие главного окна браузера.
top.opener.close()
Пример 3: Вычисление имени opener'а. Окно может определить имя своего opener'а так:
document.write("<BR>opener property is " + window.opener.name)
Пример 4: Изменение значения opener. Этот код изменяет значение свойства opener в null. После выполнения этого кода вы не сможете закрыть opener-окно так, как это делается в Примере 1.
window.opener=null
Пример 5: Изменение значения свойства через opener. Изменяется цвет фона окна, специфицированного свойством opener.
window.opener.document.bgColor='bisque'

Примеры

Чтобы сделать окно шириной 225 пикселов и высотой 200 пикселов, используйте этот оператор:
self.resizeTo(225,200); // абсолютное позиционирование

Примеры

Следующий пример делает окно, на которое ссылаются, "chromeless" (в chromeless-окнах нет панелей toolbar, полос прокрутки, статусной области и т.д., что делает их похожими на диалоговые окна), пряча большинство из панелей интерфейса пользователя:
self.menubar.visible=false;
self.toolbar.visible=false;
self.locationbar.visible=false;
self.personalbar.visible=false;
self.scrollbars.visible=false;
self.statusbar.visible=false;

Примеры

Пример 1: Прокрутка текущей области просмотра. Для прокрутки окна к левой границе и на 20 пикселов вниз от верха окна, используйте этот оператор:
self.scrollTo(0,20); // абсолютное позиционирование
Пример 2: Прокрутка другой области просмотра. Это код, расположенный в одном фрэйме, прокручивает область просмотра другого фрэйма. Два объекта Text дают пользователю возможность специфицировать координаты x и y. если пользователь щёлкает по кнопке Go, документ в frame2 прокручивается на специфицированные координаты.
<SCRIPT>
function scrollIt(form) {
var x = parseInt(form.x.value)
   var y = parseInt(form.y.value)
   parent.frame2.scrollTo(x, y)
}
</SCRIPT>
<BODY><FORM NAME="myForm">
<P><B>Specify the coordinates to scroll to:</B>
<BR>Horizontal:
<INPUT TYPE="text" NAME=x VALUE="0" SIZE=4>
<BR>Vertical:
<INPUT TYPE="text" NAME=y VALUE="0" SIZE=4>
<BR><INPUT TYPE="button" VALUE="Go"
   onClick="scrollIt(document.myForm)">
</FORM>

Примеры

Пример 1. Сообщение alert выводится через 5 секунд (5,000 миллисекунд) после щелчка пользователя по кнопке. Если пользователь щёлкает вторую кнопку до вывода сообщения, таймаут отменяется и alert не отображается.
<SCRIPT LANGUAGE="JavaScript">
function displayAlert() {
alert("5 seconds have elapsed since the button was clicked.")
}
</SCRIPT>
<BODY>
<FORM>
Click the button on the left for a reminder in 5 seconds;
click the button on the right to cancel the reminder before
it is displayed.
<P>
<INPUT TYPE="button" VALUE="5-second reminder"
   NAME="remind_button"
   onClick="timerID=setTimeout('displayAlert()',5000)">
<INPUT TYPE="button" VALUE="Clear the 5-second reminder"
   NAME="remind_disable_button"
   onClick="clearTimeout(timerID)">
</FORM>
</BODY>
Пример 2. Выводится текущее время в объекте Text. Функция showtime, вызываемая рекурсивно, использует метод setTimeout для обновления значения каждую секунду.
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD><BODY onLoad="startclock()">
<FORM NAME="clock" onSubmit="0">
   <INPUT TYPE="text" NAME="face" SIZE=12 VALUE ="">
</FORM>
</BODY>

Примеры

Предположим, Вы создали функцию JavaScript под названием pickRandomURL, которая даёт возможность выбрать произвольный URL. Вы можете использовать обработчик onClick в якоре для динамического специфицирования значения атрибута HREF этого якоря и обработчик onMouseOver - для специфицирования специального сообщения для окна - в свойстве status:
<A HREF=""
onClick="this.href=pickRandomURL()"
   onMouseOver="self.status='Pick a random URL'; return true">
Go!</A>
Здесь свойство status окна присваивается свойству self окна таким образом: self.status.

Примеры

Следующий пример делает окно, на которое ссылаются, "chromeless" (в chromeless-окнах нет панелей toolbar, полос прокрутки, статусной области и т.д., что делает их похожими на диалоговые окна), пряча большинство из панелей интерфейса пользователя:
self.menubar.visible=false;
self.toolbar.visible=false;
self.locationbar.visible=false;
self.personalbar.visible=false;
self.scrollbars.visible=false;
self.statusbar.visible=false;

Примеры

Оператор top.close() закрывает самое верхнее окно иерархии окон .

Оператор top.length специфицирует количество фрэймов, содержащихся внутри самого верхнего окна. Если самый верхний предок определён так, top.length возвращает 3:
<FRAMESET COLS="30%,40%,30%">
<FRAME SRC=child1.htm NAME="childFrame1">
<FRAME SRC=child2.htm NAME="childFrame2">
<FRAME SRC=child3.htm NAME="childFrame3">
</FRAMESET>
Следующий пример устанавливает цвет фона фрэйма myFrame в red.

myFrame это потомок самого верхнего окна-предка.
top.myFrame.document.bgColor="red"

Print

Печатает содержимое окна.

Метод из window

Реализован в JavaScript 1.2

Prompt

Выводит диалог Prompt с сообщением и полем для ввода.

Метод из window
Реализован в JavaScript 1.0

Protocol

Строка, специфицирующая начало URL до двоеточия включительно.

Свойство из Link
Реализовано в JavaScript 1.0

Protocol

Строка, специфицирующая начало URL до первого двоеточия включительно.

Свойство из Location
Реализовано в JavaScript 1.0

i	name	filename	description	# of types
0	QuickTime Plug-In	d:\nettools\netscape\nav30\Program\ plugins\NPQTW32.DLL	QuickTime Plug-In for Win32 v.1.0.0	1
1	LiveAudio	d:\nettools\netscape\nav30\Program\ plugins\NPAUDIO.DLL	LiveAudio--Netscape Navigator sound playing component	7
2	NPAVI32 Dynamic Link Library	d:\nettools\netscape\nav30\Program\ plugins\npavi32.dll	NPAVI32, avi plugin DLL	2
3	Netscape Default Plugin	d:\nettools\netscape\nav30\Program\ plugins\npnul32.dll	Null Plugin	1

Свойство из	Link
Реализовано в	JavaScript 1.0

Свойство из	Location
Реализовано в	JavaScript 1.0