Записываются значения свойства type всех
Записываются значения свойства type всех элементов формы:
for (var i = 0; i < document.form1.elements.length; i++) {
document.writeln("<BR>type is " + document.form1.elements[i].type)
}
Эта функция вычисляет свойства value
Эта функция вычисляет свойства 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 проверяет имя введённое
Функция 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()">
в функции confirmCleanUp используется для
Метод 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
Функция возвращает строку длиной 16 байт.
function getRandom() {
return crypto.random(16)
}
Функция statusSetter устанавливает свойства status
Функция 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" ( в окне 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.
Первый оператор создаёт окно 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); // относительное позиционирование
status используется для установки свойства
В этом примере 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;
status используется для установки свойства
Здесь window. status используется для установки свойства status текущего окна. Такое использование устраняет неоднозначность свойства status текущего окна при обращении к текущему окну из формы, которая называется "status", в текущем окне.
<A HREF=""
onClick="this.href=pickRandomURL()"
onMouseOver="window.status='Pick a random URL' ; return true">
Go!</A>
В этом примере определяется anchor
Пример 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>
Клиентский JavaScript. Руководство по
Запускается аплет с именем musicApp:
<APPLET CODE="musicSelect.class" WIDTH=200 HEIGHT=35
NAME="musicApp" MAYSCRIPT>
</APPLET> Дополнительные примеры смотри в информации LiveConnect в книге " Клиентский JavaScript. Руководство по Использованию".
Следующий пример создаёт массив msgArray
Пример 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 из трёх элементов, затем объединяет их в массив три раза: используя сепаратор по умолчанию, запятую и пробел, а затем знак +.
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
В следующем примере функция 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 до и после удаления первого элемента. Он также отображает удалённый элемент:
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")
присвоение false to
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">
В следующем примере форма myForm
Пример 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
В следующем примере функция 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 формы
Изменяется статус переключателя newAge формы musicForm:
document.musicForm.newAge.click()
Функция valueGetter использует цикл for
Функция 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 записывается для
Значение свойства 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)
Второй оператор присваивает значение 95
Пример 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.setHours(7)
July 1,
theBigDay = new Date(" July 1, 1999")
sameAsBigDay = new Date()
sameAsBigDay.setTime(theBigDay.getTime())
Примеры theBigDay = new Date()
theBigDay = new Date();
theBigDay.setUTCDate(20);
Примеры theBigDay.setUTCFullYear(1997)
theBigDay = new Date();
theBigDay.setUTCFullYear(1997);
Примеры theBigDay.setUTCHour(8)
theBigDay = new Date();
theBigDay.setUTCHour(8);
Примеры theBigDay.setUTCMilliseconds(500);
theBigDay = new Date();
theBigDay.setUTCMilliseconds(500);
Примеры theBigDay.setUTCMinutes(43);
theBigDay = new Date();
theBigDay.setUTCMinutes(43);
Примеры theBigDay.setUTCMonth(11);
theBigDay = new Date();
theBigDay.setUTCMonth(11);
theBigDay.setUTCSeconds(20);
theBigDay = new Date();
theBigDay.setUTCSeconds(20);
Обратите внимание, что имеются два
Обратите внимание, что имеются два способа установки года в 20 столетии.
Пример 1.
Год установлен в 1996.theBigDay.setYear(96)
Пример 2.
Год установлен в 1996.theBigDay.setYear(1996)
Пример 3.
Год установлен 2000.theBigDay.setYear(2000)
В этом примере метод toGMTString
Здесь today это Date -объект:
today.toGMTString() В этом примере метод toGMTString конвертирует дату в GMT (UTC), используя смещение часового пояса операционной системы, и возвращает строковое значение, которое имеет примерно следующую форму. (Точная форма зависит от платформы.)
Mon, 18 Dec 1995 17:28:35 GMT
В следующем примере today это
В следующем примере today это Date -объект:
today = new Date(95,11,18,17,28,35) //месяц представлен числами от 0 до 11
today.toLocaleString() В следующем примере toLocaleString возвращает строковое значение в такой форме. (Точный формат зависит от платформы.)
12/18/95 17:28:35
значение объекта Date присваивается переменной
toString - значение объекта Date присваивается переменной myVar:
x = new Date();
myVar=x.toString();//присваивается значение переменной myVar, как здесь, например:
//Mon Sep 28 14:36:22 GMT-0700 (Pacific Daylight Time) 1998
Примеры UTCstring = Today.toUTCString();
var UTCstring;
Today = new Date();
UTCstring = Today.toUTCString();
myVar=x.valueOf()
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> В этом примере текст, появляющийся внутри одного из следующих тэгов, будет иметь зелёный цвет:
<P CLASS="GreenBody">
<BLOCKQUOTE CLASS="GreenBody">
close для закрытия потока, который
Следующая функция вызывает document. close для закрытия потока, который был открыт методом document.open. Метод document.close форсирует отображение в окне содержимого потока.
function windowWriter1() {
var myString = "Hello, world!"
msgWindow.document.open()
msgWindow.document.write(myString + "<P>")
msgWindow.document.close()
}
Пример 1. Здесь устанавливается голубой
Пример 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 в документ:
<EMBED SRC="train.au" HEIGHT=50 WIDTH=250>
В этом примере атрибут Main
В этом примере атрибут 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:
<H1 CLASS="Main" ID="NewTopic">Blue head</H1>
Пример 1. Здесь функция вызывает
Пример 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. Цвет всех тэгов
Пример 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 принимает несколько
Здесь метод 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
Этот пример использует объект 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
В этом примере функция 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
Здесь записывается значение свойства type для каждого элемента формы.
for (var i = 0; i < document.form1.elements.length; i++) {
document.writeln("<BR>type is " + document.form1.elements[i].type)
}
Пример 1: Именованная форма. Создаётся
Пример 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.
<BODY onLoad="alert('You are looking at the ' + document.forms[0] + ' form!')"> Если имя формы - 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 это первая созданная
Здесь отправляется форма musicChoice:
document.musicChoice.submit() Если musicChoice это первая созданная форма, Вы можете также отправить её так:
document.forms[0].submit() См. также пример для Form.
Пример 1. Эта функция возвращает
Пример 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. Здесь определена функция,
Пример 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 для
Вы можете использовать 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
Пример 1. Здесь форма myForm содержит объект Hidden и кнопку. Если пользователь щёлкает по кнопке, в значение объекта Hidden устанавливается имя формы. Обработчик события кнопки onClick использует this.form для обращения к родительской форме myForm.
<FORM NAME="myForm">
Form name:<INPUT TYPE="hidden" NAME="h1" VALUE="Beluga">
<P>
<INPUT NAME="button1" TYPE="button" VALUE="Store Form Name"
onClick="this.form.h1.value=this.form.name">
</FORM> Пример 2. Здесь используется ссылка на объект, а не ключевое слово this, для обращения к форме. Код возвращает ссылку на myForm, которая является контейнером для объекта myHiddenObject.
document.myForm.myHiddenObject.form
Пример 1. Здесь выполняется переход
Пример 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,
Эта кнопка делает переход к ближайшему вхождению из history, которое содержит строку "home.netscape.com":
<P><INPUT TYPE="button" VALUE="Go"
onClick="history.go('home.netscape.com')"> Следующая кнопка переходит к URL, который находится на три шага назад в списке history:
<P><INPUT TYPE="button" VALUE="Go"
onClick="history.go(-3)">
Здесь определяется, содержит ли
Здесь определяется, содержит ли history.next строку "NETSCAPE.COM". Если да - вызывается функция myFunction.
if (history.next.indexOf("NETSCAPE.COM") != -1) {
myFunction(history.next)
}
Пример 1: Создание изображения тэгом
Пример 1: Создание изображения тэгом IMG. Следующий код определяет изображение тэгом IMG:
<IMG NAME="aircraft" SRC="f15e.gif" ALIGN="left" VSPACE="10"> Следующий код обращается к изображению:
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 использует цикл
Здесь функция 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)
Здесь экземпляр byteArray объекта JavaArray
Пример 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)
Этот код создаёт JavaObject theString,
Пример 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. Следующий пример создаёт
Пример 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), которая ничего не делает.
<MAP NAME="worldMap">
<AREA NAME="topWorld" COORDS="0,0,50,25" HREF="javascript:void(0)"
onMouseOver="self.status='You are on top of the world';return true"
onMouseOut="self.status='You have left the top of the world';return true">
<AREA NAME="bottomWorld" COORDS="0,25,50,50" HREF="javascript:void(0)"
onMouseOver="self.status='You are on the bottom of the world';return true"
onMouseOut="self.status='You have left the bottom of the world';return true">
</MAP>
<IMG SRC="images\globe.gif" ALIGN="top" HEIGHT="50" WIDTH="50" USEMAP="#worldMap"> Пример 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. Следующие два эквивалентных
Пример 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.
в него специфицированный URL. Операторы
Здесь оператор 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
в него специфицированный URL. Операторы
В этом примере оператор 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
// Возвращает 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,
Этот код выводит свойства 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>") Этот пример даст на выходе примерно следующее:
| 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
Здесь определяется, установлен ли 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. Выводится номер версии
Пример 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, если разрушение
Выполняется функция function1, если разрушение данных включено; иначе - выполняется function2.
if (navigator.taintEnabled()) {
function1()
}
else function2()
Выводится информация userAgent для
Выводится информация 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
Пример 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"
