Клиентский JavaScript. Справочник

         

Пример


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

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



Пример


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

function valueGetter() {
var msgWindow=window.open("")
   for (var i = 0; i < document.valueTest.radioObj.length; i++) {
       msgWindow.document.write
          ("The value of radioObj[" + i + "] is " +
          document.valueTest.radioObj[i].value +"<BR>")
   }
   msgWindow.document.close()
}

Будут выведены следующие значения:

on
on
on
on

В этом примере предполагается, что кнопки были определены так:

<BR><INPUT TYPE="radio" NAME="radioObj">R&B
<BR><INPUT TYPE="radio" NAME="radioObj" CHECKED>Soul
<BR><INPUT TYPE="radio" NAME="radioObj">Rock and Roll
<BR><INPUT TYPE="radio" NAME="radioObj">Blues



Пример




Этот скрипт использует метод 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>

This displays "Smith, John".



Пример


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

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

<HTML><SCRIPT LANGUAGE="JavaScript1.2">
A = ["Frank", "Emily", "Jane", "Harry", "Nick", "Beth", "Rick",
      "Terrence", "Carol", "Ann", "Terry", "Frank", "Alice", "Rick",
      "Bill", "Tom", "Fiona", "Jane", "William", "Joan", "Beth"]function lookup() {
   firstName = /\w+/i();
   if (!firstName)
      window.alert (RegExp.input + " isn't a name!");
   else {
      count = 0;
      for (i=0; i<A.length; i++)
         if (firstName[0].toLowerCase() == A[i].toLowerCase()) count++;
      if (count ==1)
         midstring = " other has ";
      else
         midstring = " others have ";
      window.alert ("Thanks, " + count + midstring + "the same name!")
   }
}</SCRIPT>Enter your first name and then press Enter.<FORM> <INPUT TYPE:"TEXT" NAME="FirstName" onChange="lookup(this);"> </FORM></HTML>



Пример


Печатается сообщение, содержание которого зависит от успешности прохождения теста:

function testinput(re, str){
if (re.test(str))
      midstring = " contains ";
   else
      midstring = " does not contain ";
   document.write (str + midstring + re.source);
}



Пример


Выводится строка, отображающая строковое значение объекта RegExp:

myExp = new RegExp("a+b+c");
alert(myExp.toString())//    выведет "/a+b+c/"



Пример


myExp = new RegExp("a+b+c");
alert(myExp.valueOf())выведет "/a+b+c/"



Пример


В этом примере функция 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)
}



Пример


Функция создаёт строку, содержащую текущие свойства монитора:

function screen_properties() {
document.examples.results.value = "("+screen.width+" x
      "+screen.height+") pixels, "+
      screen.pixelDepth +" bit depth, "+
      screen.colorDepth +" bit color palette depth.";
} // end function screen_properties



Пример


Здесь функция 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>")
   }
}



Пример


Здесь функция getSelectedIndex возвращает индекс выбора в объекте musicType Select:

function getSelectedIndex() {
return document.musicForm.musicType.selectedIndex
}

Предполагается, что Select-объект похож на следующий:

<SELECT NAME="musicType">
   <OPTION SELECTED> R&B
   <OPTION> Jazz
   <OPTION> Blues
   <OPTION> New Age
</SELECT>



Пример


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

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



Пример


Открывается окно msgWindow и создаётся якорь для оглавления:

var myString="Table of Contents"
msgWindow.document.writeln(myString.anchor("contents_anchor"))

Предыдущий пример даст тот же результат, что и этот HTML:

<A NAME="contents_anchor">Table of Contents</A>



Пример


Используются методы работы со строками для изменения размера текста строки:

var worldString="Hello, world"document.write(worldString.small())
document.write("<P>" + worldString.big())
document.write("<P>" + worldString.fontsize(7))

Такой же вывод даст следующий HTML:

<SMALL>Hello, world</SMALL>
<P><BIG>Hello, world</BIG>
<P><FONTSIZE=7>Hello, world</FONTSIZE>



Пример


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

var worldString="Hello, world"document.write(worldString.blink())
document.write("<P>" + worldString.bold())
document.write("<P>" + worldString.italics())
document.write("<P>" + worldString.strike())

Предыдущий пример даст тот же вывод, что и следующий HTML:

<BLINK>Hello, world</BLINK>
<P><B>Hello, world</B>
<P><I>Hello, world</I>
<P><STRIKE>Hello, world</STRIKE>



Пример


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

var worldString="Hello, world"
document.write(worldString.blink())
document.write("<P>" + worldString.bold())
document.write("<P>" + worldString.italics())
document.write("<P>" + worldString.strike())

Предыдущий пример даст тот же вывод, что и следующий HTML:

<BLINK>Hello, world</BLINK>
<P><B>Hello, world</B>
<P><I>Hello, world</I>
<P><STRIKE>Hello, world</STRIKE>



Пример


Отображаются символы из различных мест строки "Brave new world":

var anyString="Brave new world"document.writeln("The character at index 0 is " + anyString.charAt(0))
document.writeln("The character at index 1 is " + anyString.charAt(1))
document.writeln("The character at index 2 is " + anyString.charAt(2))
document.writeln("The character at index 3 is " + anyString.charAt(3))
document.writeln("The character at index 4 is " + anyString.charAt(4))

На выходе будет:

The character at index 0 is B
The character at index 1 is r
The character at index 2 is a
The character at index 3 is v
The character at index 4 is e



Пример


Пример 1. Этот пример возвращает 65, Unicode-значение латинской заглавной A.

"ABC".charCodeAt(0) // возвращает 65

Пример 2. Создаётся событие для симуляции нажатия клавиши. Событие KeyPress имеет свойство which, которое представляет ASCII-значение нажатой клавиши. Если Вам известна буква, число или символ, Вы можете использовать charCodeAt для предоставления ASCII-значения в свойство which.

//создаётся Еvent-объект с нужными значениями свойств
ev = new Event()
ev.type = KeyPress
ev.layerX = 150
//присваиваются значения свойствам layerY, pageX, pageY, screenX и screenY
...
//присваивается ASCII-значение свойству which
ev.which = "v".charCodeAt(0)
//assign modifier property
ev.modifiers = <FONT COLOR="#FF0080">How do I do this?</FONT>



Пример


s1="Oh "
s2="what a beautiful "
s3="mornin'."
s4=s1.concat(s2,s3) // возвращает "Oh what a beautiful mornin'."



Пример


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

var worldString="Hello, world"
document.write(worldString.fixed())

Предыдущий пример даст тот же вывод, что и следующий HTML:

<TT>Hello, world</TT>



Пример


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

var worldString="Hello, world"document.write(worldString.fontcolor("maroon") +
" is maroon in this line")
document.write("<P>" + worldString.fontcolor("salmon") +
   " is salmon in this line")
document.write("<P>" + worldString.fontcolor("red") +
   " is red in this line")document.write("<P>" + worldString.fontcolor("8000") +
   " is maroon in hexadecimal in this line")
document.write("<P>" + worldString.fontcolor("FA8072") +
   " is salmon in hexadecimal in this line")
document.write("<P>" + worldString.fontcolor("FF00") +
   " is red in hexadecimal in this line")

Предыдущий пример даст тот же вывод, что и следующий  HTML:

<FONT COLOR="maroon">Hello, world</FONT> is maroon in this line
<P><FONT COLOR="salmon">Hello, world</FONT> is salmon in this line
<P><FONT COLOR="red">Hello, world</FONT> is red in this line<FONT COLOR="8000">Hello, world</FONT>
is maroon in hexadecimal in this line
<P><FONT COLOR="FA8072">Hello, world</FONT>
is salmon in hexadecimal in this line
<P><FONT COLOR="FF00">Hello, world</FONT>
is red in hexadecimal in this line



Пример


Метод string изменяет размер шрифта строки:

var worldString="Hello, world"document.write(worldString.small())
document.write("<P>" + worldString.big())
document.write("<P>" + worldString.fontsize(7))

Предыдущий пример даст тот же вывод, что и следующий HTML:

<SMALL>Hello, world</SMALL>
<P><BIG>Hello, world</BIG>
<P><FONTSIZE=7>Hello, world</FONTSIZE>



Пример


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

var worldString="Hello, world"document.write(worldString.blink())
document.write("<P>" + worldString.bold())
document.write("<P>" + worldString.italics())
document.write("<P>" + worldString.strike())

Предыдущий пример даст тот же вывод, что и следующий HTML:

<BLINK>Hello, world</BLINK>
<P><B>Hello, world</B>
<P><I>Hello, world</I>
<P><STRIKE>Hello, world</STRIKE>



Пример


Здесь методы 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"))



Пример


Будет выведена цифра 8 в диалоговом окне Alert:

var x="Netscape"
alert("The string length is " + x.length)



Пример


Слово "Netscape" выводится как гиперссылка, которая переводит пользователя на домашнюю страницу Netscape:

var hotText="Netscape"
var URL="http://home.netscape.com"document.write("Click to return to " + hotText.link(URL))

Предыдущий пример даст тот же вывод, что и следующий HTML:

Click to return to <A HREF="http://home.netscape.com">Netscape</A>



Пример


Печатается сообщение, содержание которого зависит от успешности прохождения теста.

function testinput(re, str){
if (str.search(re) != -1)
      midstring = " contains ";
   else
      midstring = " does not contain ";
   document.write (str + midstring + re.source);
}



Пример


Здесь slice используется для создания новой строки.

<SCRIPT>
str1="The morning is upon us. "
str2=str1.slice(3,-5)
document.write(str2)
</SCRIPT>

Будет напечатано:

morning is upon



Пример


Используются string-методы для изменения размера строки:

var worldString="Hello, world"document.write(worldString.small())
document.write("<P>" + worldString.big())
document.write("<P>" + worldString.fontsize(7))

Предыдущий пример даст тот же вывод, что и следующий HTML:

<SMALL>Hello, world</SMALL>
<P><BIG>Hello, world</BIG>
<P><FONTSIZE=7>Hello, world</FONTSIZE>



Пример


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

var worldString="Hello, world"document.write(worldString.blink())
document.write("<P>" + worldString.bold())
document.write("<P>" + worldString.italics())
document.write("<P>" + worldString.strike())

Предыдущий пример даст тот же вывод, что и следующий HTML:

<BLINK>Hello, world</BLINK>
<P><B>Hello, world</B>
<P><I>Hello, world</I>
<P><STRIKE>Hello, world</STRIKE>



Пример


Методы sub и sup используются для форматирования строки:

var superText="superscript"
var subText="subscript"document.write("This is what a " + superText.sup() + " looks like.")
document.write("<P>This is what a " + subText.sub() + " looks like.")

Предыдущий пример даст тот же вывод, что и следующий HTML:

This is what a <SUP>superscript</SUP> looks like.
<P>This is what a <SUB>subscript</SUB> looks like.



Пример


Рассмотрим такой скрипт:

<SCRIPT LANGUAGE="JavaScript1.2">str = "abcdefghij"
document.writeln("(1,2): ", str.substr(1,2))
document.writeln("(-2,2): ", str.substr(-2,2))
document.writeln("(1): ", str.substr(1))
document.writeln("(-20, 2): ", str.substr(1,20))
document.writeln("(20, 2): ", str.substr(20,2))</SCRIPT>

Этот скрипт выведет:

(1,2): bc
(-2,2): ij
(1): bcdefghij
(-20, 2): bcdefghij
(20, 2):



Пример


Методы sub и sup использованы для форматирования строки:

var superText="superscript"
var subText="subscript"document.write("This is what a " + superText.sup() + " looks like.")
document.write("<P>This is what a " + subText.sub() + " looks like.")

Предыдущий пример даст тот же вывод, что и следующий HTML:

This is what a <SUP>superscript</SUP> looks like.
<P>This is what a <SUB>subscript</SUB> looks like.



Пример


Выводится строка "alphabet":

var upperText="ALPHABET"
document.write(upperText.toLowerCase())



Пример


Отображается строковое значение String-объекта:

x = new String("Hello world");
alert(x.toString())// Выводит "Hello world"



Пример


Выводится строка "ALPHABET":

var lowerText="alphabet"
document.write(lowerText.toUpperCase())



Пример


x = new String("Hello world");
alert(x.valueOf())// Выводит "Hello world"



Пример


Создаётся объект Submit по имени submitButton. Текст "Done" отображается на поверхности кнопки.

<INPUT TYPE="submit" NAME="submitButton" VALUE="Done">

См. примеры для Form.



Пример


В этом примере показана форма с несколькими элементами. Если пользователь щёлкает на кнопке button2, функция showElements выводит alert-диалог с именами всех элементов формы myForm.

<SCRIPT>
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="submit" VALUE="Show Form Elements"
   onClick="showElements(this.form)">
</FORM>

Диалог alert выведет следующий текст:

Form Elements of form myForm:
text1
button1
button2



Пример


Здесь функция 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)
}



Пример


Следующая функция вычисляет свойство 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">



Пример


Убирается фокус с текстового элемента userText:

userText.blur()

Предполагается, что текстовый элемент определён так:

<INPUT TYPE="text" NAME="userText">



Пример


Функция вычисляет свойства defaultValue объекта на форме surfCity и отображает значения в окне msgWindow:

function defaultGetter() {
msgWindow=window.open("")
   msgWindow.document.write("hidden.defaultValue is " +
      document.surfCity.hiddenObj.defaultValue + "<BR>")
   msgWindow.document.write("password.defaultValue is " +
      document.surfCity.passwordObj.defaultValue + "<BR>")
   msgWindow.document.write("text.defaultValue is " +
      document.surfCity.textObj.defaultValue + "<BR>")
   msgWindow.document.write("textarea.defaultValue is " +
      document.surfCity.textareaObj.defaultValue + "<BR>")
   msgWindow.document.close()
}



Пример


Здесь функция 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>")
   }
}



Пример


Обработчик onClick передаёт фокус текстовому полю и выделяет весь текст :

<FORM NAME="myForm">
<B>Last name: </B><INPUT TYPE="text" NAME="lastName" SIZE=20 VALUE="Pigman">
<BR><B>First name: </B><INPUT TYPE="text" NAME="firstName" SIZE=20 VALUE="Victoria">
<BR><BR>
<INPUT TYPE="button" VALUE="Change last name"
onClick="this.form.lastName.select();this.form.lastName.focus();">
</FORM>



Пример


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

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



Пример


Следующая функция вычисляет свойства 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("myText.value is " +
      document.valueTest.myText.value + "<BR>")
   msgWindow.document.close()
}

Пример выведет:

submitButton.value is Query Submit
resetButton.value is Reset
myText.value is Stonefish are dangerous.

Предполагается, что кнопки определены так:

<INPUT TYPE="submit" NAME="submitButton">
<INPUT TYPE="reset" NAME="resetButton">
<INPUT TYPE="text" NAME="myText" VALUE="Stonefish are dangerous.">



Пример


Убирается фокус с textarea-элемента userText:

userText.blur()

Предполагается что textarea определён так:

<TEXTAREA NAME="userText">
Initial text for the text area.
</TEXTAREA>



Пример


Следующая функция вычисляет свойство defaultValue объектов на форме surfCity и выводит эти значения в окне msgWindow:

function defaultGetter() {
msgWindow=window.open("")
   msgWindow.document.write("hidden.defaultValue is " +
      document.surfCity.hiddenObj.defaultValue + "<BR>")
   msgWindow.document.write("password.defaultValue is " +
      document.surfCity.passwordObj.defaultValue + "<BR>")
   msgWindow.document.write("text.defaultValue is " +
      document.surfCity.textObj.defaultValue + "<BR>")
   msgWindow.document.write("textarea.defaultValue is " +
      document.surfCity.textareaObj.defaultValue + "<BR>")
   msgWindow.document.close()
}



Пример


Здесь функция 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>")
   }
}



Пример


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

<FORM NAME="myForm">
<B>Last name: </B><INPUT TYPE="text" NAME="lastName" SIZE=20 VALUE="Pigman">
<BR><B>First name: </B><INPUT TYPE="text" NAME="firstName" SIZE=20 VALUE="Victoria">
<BR><B>Описание:</B>
<BR><TEXTAREA NAME="desc" ROWS=3 COLS=40>An avid scuba diver.</TEXTAREA>
<BR><BR>
<INPUT TYPE="button" VALUE="Change description"
onClick="this.form.desc.select();this.form.desc.focus();">
</FORM>



Пример


Записываются значения свойства type всех элементов формы:

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



Пример


Эта функция вычисляет свойства 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("blurb.value is " +
      document.valueTest.blurb.value + "<BR>")
   msgWindow.document.close()
}

Будет выведено:

submitButton.value is Query Submit
resetButton.value is Reset
blurb.value is Tropical waters contain all sorts of cool fish,
such as the harlequin ghost pipefish, dragonet, and cuttlefish.
A cuttlefish looks much like a football wearing a tutu and a mop.

Предполагается, что кнопки были определены так:

<INPUT TYPE="submit" NAME="submitButton">
<INPUT TYPE="reset" NAME="resetButton">
<TEXTAREA NAME="blurb" rows=3 cols=60>
Tropical waters contain all sorts of cool fish,
such as the harlequin ghost pipefish, dragonet, and cuttlefish.
A cuttlefish looks much like a football wearing a tutu and a mop.
</TEXTAREA>



Пример


Функция testValue проверяет имя введённое пользователем в Text-объект формы, чтобы гарантировать, что оно имеет не более 8 символов. Этот пример использует метод alert для предупреждения пользователя.

function testValue(textElement) {
if (textElement.length > 8) {
      alert("Please enter a name that is 8 characters or less")
   }
}

Можно вызвать функцию testValue в обработчике onBlur объекта Text, как здесь:

Name: <INPUT TYPE="text" NAME="userName"
   onBlur="testValue(userName.value)">



Пример


Кодируется и декодируется строка "Hello, world".

// кодируется строка
encodedData = btoa("Hello, world");

// строка декодируется
decodedData = atob(encodedData);



Пример


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

<P><INPUT TYPE="button" VALUE="< Go Back"
onClick="history.back()">
<P><INPUT TYPE="button" VALUE="> Go Back"
   onClick="myWindow.back()">



Пример


Метод confirm в функции confirmCleanUp используется для подтверждения закрытия приложения. Если пользователь выбрал OK, специальная функция cleanUp закрывает приложение.

function confirmCleanUp() {
if (confirm("Are you sure you want to quit this application?")) {
      cleanUp()
   }
}

Вы можете вызвать функцию confirmCleanUp в обработчике onClick кнопки, как показано в этом примере:

<INPUT TYPE="button" VALUE="Quit" onClick="confirmCleanUp()">



Пример


Функция возвращает строку длиной 16 байт.

function getRandom() {
return crypto.random(16)
}



Пример


Функция statusSetter устанавливает свойства status и defaultStatus в обработчике onMouseOver:

function statusSetter() {
window.defaultStatus = "Click the link for the Netscape home page"
   window.status = "Netscape home page"
}<A HREF="http://home.netscape.com"
   onMouseOver = "statusSetter(); return true">Netscape</A>

Заметьте, что в это примере обработчик onMouseOver возвращает true. Вы обязаны возвращать true, если хотите устанавливать defaultStatus и status в обработчиках событий.



Пример


Окно может захватывать все события Click, возникающие в его фрэймах.

<SCRIPT ARCHIVE="myArchive.jar" ID="2">
function captureClicks() {
netscape.security.PrivilegeManager.enablePrivilege(
      "UniversalBrowserWrite");
   enableExternalCapture();
   captureEvents(Event.CLICK);
   ...
}
</SCRIPT>



Пример


Следующий пример создаёт окно "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;



Пример


Чтобы переместить текущее окно на 5 пикселов вверх (ось x) и на 10 пикселов вправо (ось у) от текущей позиции, используйте такой оператор:

self.moveBy(-5,10); // относительное позиционирование



Пример


Для перемещения текущего окна на 25 пикселов от верхней границы экрана (ось x) и на 10 пикселов от левого края экрана (ось y) используйте такой оператор:

self.moveTo(25,10); // абсолютное позиционирование



Пример


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

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



Пример


Этот пример возвращает x-позицию видимой страницы.

x = myWindow.pageXOffset



Пример


Этот пример возвращает у-позицию видимой страницы.

x = myWindow.pageYOffset



Пример


Следующий пример делает окно, на которое ссылаются, "chromeless" (в chromeless-окнах нет панелей toolbars, полос прокрутки, статусной области и т.д., что делает их похожими на диалоговые окна), пряча большинство из панелей интерфейса пользователя:

self.menubar.visible=false;
self.toolbar.visible=false;
self.locationbar.visible=false;
self.personalbar.visible=false;
self.scrollbars.visible=false;
self.statusbar.visible=false;



Пример


Чтобы сделать текущее окно на 5 пикселов уже и на 10 пикселов выше, используйте такой оператор:

self.resizeBy(-5,10); // относительное позиционирование



Пример


Для прокрутки текущего окна на 5 пикселов влево и на 30 пикселов вниз от текущей позиции, используйте:

self.scrollBy(-5,30); // относительное позиционирование



Пример


В этом примере self.status используется для установки свойства status текущего окна. Такое использование устраняет неоднозначность свойства status текущего окна при вызове из формы или элемента формы с названием status внутри текущего окна.

<A HREF=""
onClick="this.href=pickRandomURL()"
   onMouseOver="self.status='Pick a random URL' ; return true">
Go!</A>



Пример


Этот код отображает текущее время в объекте Text. В функции startclock вызов метода setInterval заставляет вызывать функцию showtime каждую секунду для обновления показаний часов. Заметьте, что функция startclock и метод setInterval вызываются только один раз каждый.

<SCRIPT LANGUAGE="JavaScript">
var timerID = null
var timerRunning = false

function stopclock(){
if(timerRunning)
      clearInterval(timerID)
   timerRunning = false
}
function startclock(){
   // Убедиться, что часы остановлены
   stopclock()
   timerID = setInterval("showtime()",1000)
   timerRunning = true
}

function showtime(){
   var now = new Date()
   var hours = now.getHours()
   var minutes = now.getMinutes()
   var seconds = now.getSeconds()
   var timeValue = "" + ((hours > 12) ? hours - 12 : hours)
   timeValue += ((minutes < 10) ? ":0" : ":") + minutes
   timeValue += ((seconds < 10) ? ":0" : ":") + seconds
   timeValue += (hours >= 12) ? " P.M." : " A.M."
   document.clock.face.value = timeValue
}
</SCRIPT>

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



Пример


Следующий пример делает окно, на которое ссылаются, "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;



Пример


Здесь window.status используется для установки свойства status текущего окна. Такое использование устраняет неоднозначность свойства status текущего окна при обращении к текущему окну из формы, которая называется "status", в текущем окне.

<A HREF=""
onClick="this.href=pickRandomURL()"
   onMouseOver="window.status='Pick a random URL' ; return true">
Go!</A>



Примеры


Пример 1. Якорь/anchor.

В этом примере определяется anchor для текста "Welcome to JavaScript":

<A NAME="javascript_intro"><H2>Welcome to JavaScript</H2></A>

Если вышеприведённый anchor находится в файле intro.html, ссылка в другом файле может определять переход на этот anchor таким образом:

<A HREF="intro.html#javascript_intro">Introduction</A>
Пример 2. Массив anchors.

Открываются два окна. Первое окно содержит серию кнопок, которые устанавливают location.hash во втором окне на определённый anchor. Во втором окне определены 4 якоря: "0", "1", "2" и "3." (Имена якорей в документе, следовательно, 0, 1, 2, ... (document.anchors.length-1)). Когда в первом окне нажимается кнопка, обработчик события onClick проверяет существование anchor, перед тем как установить в window2.location.hash имя специфицированного якоря.

link1.html, в котором определены первое окно и кнопки, содержит следующий код:

<HTML>
<HEAD>
<TITLE>Links and Anchors: Window 1</TITLE>
</HEAD>
<BODY>
<SCRIPT> window2=open("link2.html","secondLinkWindow",
   "scrollbars=yes,width=250, height=400")
function linkToWindow(num) {
   if (window2.document.anchors.length > num)
      window2.location.hash=num
   else
      alert("Anchor does not exist!")
}
</SCRIPT> <B>Links and Anchors</B>
<FORM>
<P>Click a button to display that anchor in window #2
<P><INPUT TYPE="button" VALUE="0" NAME="link0_button"
   onClick="linkToWindow(this.value)">
<INPUT TYPE="button" VALUE="1" NAME="link0_button"
   onClick="linkToWindow(this.value)">
<INPUT TYPE="button" VALUE="2" NAME="link0_button"
   onClick="linkToWindow(this.value)">
<INPUT TYPE="button" VALUE="3" NAME="link0_button"
   onClick="linkToWindow(this.value)">
<INPUT TYPE="button" VALUE="4" NAME="link0_button"
   onClick="linkToWindow(this.value)">
</FORM>
</BODY>
</HTML>

link2.html, где находятся якоря, содержит следующий код:

<HTML>
<HEAD>
<TITLE>Links and Anchors: Window 2</TITLE>
</HEAD>
<BODY>
<A NAME="0"><B>Some numbers</B> (Anchor 0)</A>
<UL><LI>one
<LI>two
<LI>three
<LI>four</UL>
<P><A NAME="1"><B>Some colors</B> (Anchor 1)</A>
<UL><LI>red
<LI>orange
<LI>yellow
<LI>green</UL>
<P><A NAME="2"><B>Some music types</B> (Anchor 2)</A>
<UL><LI>R&B
<LI>Jazz
<LI>Soul
<LI>Reggae
<LI>Rock</UL>
<P><A NAME="3"><B>Some countries</B> (Anchor 3)</A>
<UL><LI>Afghanistan
<LI>Brazil
<LI>Canada
<LI>Finland
<LI>India</UL>
</BODY>
</HTML>



Примеры


Запускается аплет с именем musicApp:

<APPLET CODE="musicSelect.class" WIDTH=200 HEIGHT=35
NAME="musicApp" MAYSCRIPT>
</APPLET>

Дополнительные примеры смотри в информации LiveConnect в книге "Клиентский JavaScript. Руководство по Использованию".



Примеры


Пример 1.

Следующий пример создаёт массив msgArray с размером 0, затем присваивает значения элементам msgArray[0] и msgArray[99], изменяя размер массива на 100.

msgArray = new Array()
msgArray[0] = "Hello"
msgArray[99] = "world"
// Следующий оператор является true,
// поскольку был определён элемент msgArray[99].
if (msgArray.length == 100)
myVar="The length is 100."

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

Пример 2.

Двухмерный массив. Результаты присваиваются переменной myVar.

myVar="Multidimensional array test; "
a = new Array(4)
for (i=0; i < 4; i++) {
   a[i] = new Array(4)
   for (j=0; j < 4; j++) {
      a[i][j] = "["+i+","+j+"]"
   }
}
for (i=0; i < 4; i++) {
   str = "Row "+i+":"
   for (j=0; j < 4; j++) {
      str += a[i][j]
   }
   myVar += str +"; "
}

Этот пример присваивает переменной myVar следующие строки (разрывы строк сделаны для лучшей читаемости):

Multidimensional array test;
Row 0:[0,0][0,1][0,2][0,3];
Row 1:[1,0][1,1][1,2][1,3];
Row 2:[2,0][2,1][2,2][2,3];
Row 3:[3,0][3,1][3,2][3,3];



Примеры


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

a = new Array("Wind","Rain","Fire")
myVar1=a.join()// присваивает "Wind,Rain,Fire" переменной myVar1
myVar2=a.join(", ")  // присваивает "Wind, Rain, Fire" переменной myVar1
myVar3=a.join(" + ") // присваивает "Wind + Rain + Fire" переменной myVar1



Примеры


В следующем примере функция getChoice использует свойство length для итерации по элементам массива musicType. musicType это элемент select на форме musicForm.

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
      }
   }
}

В следующем примере массив statesUS укорачивается до размера 50, если текущий его размер больше 50.

if (statesUS.length > 50) {
   statesUS.length=50
}



Примеры


В следующем примере создаётся массив myArray из трёх элементов, затем массив разворачивается.

myArray = new Array("one", "two", "three")
myArray.reverse()

Код изменяет массив myArray таким образом:

myArray[0] становится "three" myArray[1] становится "two" myArray[2] становится "one"



Примеры


Следующий код выводит массив myFish до и после удаления первого элемента. Он также отображает удалённый элемент:

myFish = ["angel", "clown", "mandarin", "surgeon"];
document.writeln("myFish before: " + myFish);
shifted = myFish.shift();
document.writeln("myFish after: " + myFish);
document.writeln("Removed this element: " + shifted);

В результате получится:

myFish before: ["angel", "clown", "mandarin", "surgeon"]
myFish after: ["clown", "mandarin", "surgeon"]
Removed this element: angel



Примеры


В следующих примерах создаются Boolean-объекты с начальным значением false:

bNoParam = new Boolean()
bZero = new Boolean(0)
bNull = new Boolean(null)
bEmptyString = new Boolean("")
bfalse = new Boolean(false)

В следующих примерах создаются Boolean-объекты с начальным значением true:

btrue = new Boolean(true)
btrueString = new Boolean("true")
bfalseString = new Boolean("false")
bSuLin = new Boolean("Su Lin")



Примеры


x = new Boolean();
myVar=x.valueOf()//присвоение false to myVar



Примеры


В следующем примере создаётся кнопка с названием calcButton. Текст "Calculate" выводится на поверхности кнопки. При щелчке по кнопке вызывается функция calcFunction.

<INPUT TYPE="button" VALUE="Calculate" NAME="calcButton"
onClick="calcFunction(this.form)">



Примеры


В этом примере фокус убирается с кнопки userButton:

userButton.blur()

Здесь предполагается, что кнопка определена так:

<INPUT TYPE="button" NAME="userButton">



Примеры


Пример 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.

<script> 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, которая является формой, содержащей кнопку myButton.

document.myForm.myButton.form



Примеры


В следующем примере функция 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 окна netscapeWin.

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



Примеры


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

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



Примеры


Пример 1.

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

<B>Specify your music preferences (check all that apply):</B>
<BR><INPUT TYPE="checkbox" NAME="musicpref_rnb" CHECKED> R&B
<BR><INPUT TYPE="checkbox" NAME="musicpref_jazz" CHECKED> Jazz
<BR><INPUT TYPE="checkbox" NAME="musicpref_blues" CHECKED> Blues
<BR><INPUT TYPE="checkbox" NAME="musicpref_newage" CHECKED> New Age
Пример 2.

Форма из 3 текстовых полей и одного переключателя. Можно использовать checkbox для конвертирования текста текстовых полей в верхний регистр. Каждое текстовое поле имеет обработчик onChange, который конвертирует значение поля в верхний регистр, если checkbox помечен. Переключатель имеет обработчик onClick, который конвертирует все поля в верхний регистр, если пользователь отметит переключатель.

<HTML>
<HEAD>
<TITLE>Checkbox object example</TITLE>
</HEAD>
<SCRIPT>
function convertField(field) {
if (document.form1.convertUpper.checked) {
      field.value = field.value.toUpperCase()}
}
function convertAllFields() {
   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()
}
</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><INPUT TYPE="checkBox" NAME="convertUpper"
   onClick="if (this.checked) {convertAllFields()}"
   > Convert fields to upper case
</FORM>
</BODY>
</HTML>



Примеры


Изменяется статус переключателя newAge формы musicForm:

document.musicForm.newAge.click()



Примеры


Функция 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)
}



Примеры


Вот примеры присвоения значений-дат:

today = new Date()
birthday = new Date("December 17, 1995 03:24:00")
birthday = new Date(95,11,17)
birthday = new Date(95,11,17,3,24,0)



Примеры


Пример 1.

Второй оператор присваивает значение 95 переменной year.

Xmas = new Date("December 25, 1995 23:15:00")
year = Xmas.getYear() // возвращает 95
Пример 2.

Второй оператор присваивает значение 100 переменной year.

Xmas = new Date("December 25, 2000 23:15:00")
year = Xmas.getYear() // возвращает 100
Пример 3.

Второй оператор присваивает значение -100 переменной year.

Xmas = new Date("December 25, 1800 23:15:00")
year = Xmas.getYear() // возвращает -100
Пример 4.

Второй оператор присваивает значение 95 переменной year, представляя 1995 год.

Xmas.setYear(95)
year = Xmas.getYear() // возвращает 95



Примеры


theBigDay.setHours(7)



Примеры


theBigDay = new Date("July 1, 1999")
sameAsBigDay = new Date()
sameAsBigDay.setTime(theBigDay.getTime())



Примеры


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



Примеры


theBigDay = new Date();
theBigDay.setUTCFullYear(1997);



Примеры


theBigDay = new Date();
theBigDay.setUTCHour(8);



Примеры


theBigDay = new Date();
theBigDay.setUTCMilliseconds(500);