Обратите внимание, что имеются два способа установки года в 20 столетии.
Год установлен в 1996.
theBigDay.setYear(96)Год установлен в 1996.
theBigDay.setYear(1996)Год установлен 2000.
Здесь today это Date -объект:
today.toGMTString()В этом примере метод toGMTString конвертирует дату в GMT (UTC), используя смещение часового пояса операционной системы, и возвращает строковое значение, которое имеет примерно следующую форму. (Точная форма зависит от платформы.)
Mon, 18 Dec 1995 17:28:35 GMTВ следующем примере today это Date -объект:
today = new Date(95,11,18,17,28,35) //месяц представлен числами от 0 до 11В следующем примере toLocaleString возвращает строковое значение в такой форме. (Точный формат зависит от платформы.)
12/18/95 17:28:35toString -значение объекта Date присваивается переменной myVar:
x = new Date();Следующий пример создаёт два фрэйма, каждый с одним документом. Документ первого фрэйма содержит ссылки на якоря в документе второго фрэйма. Каждый документ определяет свой цвет.
doc0.html, который определяет фрэймы, содержит следующий код:
<HTML>doc1.html, который определяет содержимое первого фрэйма, содержит следующий код:
<HTML>doc2.html, который определяет содержимое второго фрэйма, содержит следующий код:
<HTML>В этом примере устанавливается цвет активной гиперссылки с использованием строкового литерала:
document.alinkColor="aqua"Здесь устанавливается цвет активной ссылки aqua с использованием 16-ричного триплета:
document.alinkColor="00FFFF"Здесь устанавливается цвет фона документа в aqua с использованием литерала:
document.bgColor="aqua"А здесь - с использованием 16-ричного триплета:
document.bgColor="00FFFF"В этом примере в зелёный устанавливается цвет всех тэгов, использующих атрибут GreenBody CLASS:
<STYLE TYPE="text/javascript">Заметьте, что Вы можете опустить указание объекта document внутри тэга STYLE. Внутри тэга SCRIPT Вы обязаны специфицировать объект document таким образом:
<SCRIPT LANGUAGE="JavaScript1.2">В этом примере текст, появляющийся внутри одного из следующих тэгов, будет иметь зелёный цвет:
<P CLASS="GreenBody">Следующая функция вызывает document.close для закрытия потока, который был открыт методом document.open. Метод document.close форсирует отображение в окне содержимого потока.
function windowWriter1() {Пример 1. Здесь устанавливается голубой цвет текста внутри любого тэга EM, появляющегося в H1.
<STYLE TYPE="text/javascript">Обратите внимание, что можно опускать указание объекта document внутри тэга STYLE. Внутри тэга SCRIPT Вы обязаны специфицировать объект document таким образом:
<SCRIPT LANGUAGE="JavaScript1.2">В этом примере текст в тэге EM будет голубым:
<H1 CLASS="Main">The following text is <EM>blue</EM></H1>Пример 2. Этот пример устанавливает цвет элемента LI с двумя или более родительскими UL в красный.
<STYLE TYPE="text/javascript">Следующий код вставляет аудио plug-in в документ:
<EMBED SRC="train.au" HEIGHT=50 WIDTH=250>В этом примере атрибут Main CLASS устанавливается в 18-point bold green, но предоставляет исключение для тэгов, ID которых - NewTopic:
<STYLE TYPE="text/javascript">Заметьте, что Вы можете опустить указание объекта document в тэге STYLE. В тэге SCRIPT Вы обязаны специфицировать объект document таким образом:
<SCRIPT LANGUAGE="JavaScript1.2">В этом примере текст, появляющийся в следующем тэге, будет жирным, зелёным и будет иметь размер 18 пунктов:
<H1 CLASS="Main">Green head</H1>Но текст в этом тэге будет 18-point bold blue:
<H1 CLASS="Main" ID="NewTopic">Blue head</H1>Пример 1. Здесь функция вызывает document.open для открытия потока перед использованием метода write:
function windowWriter1() {Пример 2. Эта функция вызывает document.open с ключевым словом "replace" для открытия потока перед использованием методов write. Код HTML в методах write записывается в msgWindow, замещая текущее вхождение в history. Размер истории/history окна msgWindow не увеличивается.
function windowWriter2() {Следующий код создаёт окно msgWindow и вызывает функцию:
msgWindow=window.open('','',Пример 3. Здесь функция probePlugIn определяет, имеется ли у пользователя установленный Shockwave plug-in:
function probePlugIn(mimeType) {Пример 1. Цвет всех тэгов H1 устанавливается в blue:
<STYLE TYPE="text/javascript">Обратите внимание, что Вы можете опустить указание объекта document в тэге STYLE. Внутри тэга SCRIPT Вы обязаны специфицировать объект document таким образом:
<SCRIPT LANGUAGE="JavaScript1.2">Пример 2. Устанавливается универсальное левое поле документа:
document.tags.Body.marginLeft="20pt"Поскольку все тэги HTML наследуют от BODY, этот пример устанавливает левое поле для всего документа в 20 пунктов.
Здесь цвет посещённых ссылок устанавливается в aqua с использованием строкового литерала:
document.vlinkColor="aqua"А здесь - с помощью 16-ричного триплета:
document.vlinkColor="00FFFF"Здесь метод write принимает несколько аргументов, в том числе строки, числа и переменную:
var mystery = "world"В следующем примере метод write принимает два аргумента. Первый - это выражение присвоения, а второй - строковой литерал.
//Выводится Hello world...В следующем примере метод write принимает единственный аргумент, который является условным выражением. Если значение переменной age будет меньше 18, метод выведет "Minor." Если значение age будет больше или равно 18, метод выведет "Adult."
msgWindow.document.write(status = (age >= 18) ? "Adult" : "Minor")Этот пример использует объект event для предоставления типа события в предупреждающем сообщении.
<A HREF="http://home.netscape.com" onClick='alert("Link got an event: "В следующем примере объект event используется в явно вызываемом обработчике события.
<SCRIPT>В этом примере функция valueGetter использует цикл for для итерации по массиву элементов на форме valueTest. Окно msgWindow отображает имена всех элементов формы:
newWindow=window.open("http://home.netscape.com") function valueGetter() {Здесь записывается значение свойства type для каждого элемента формы.
for (var i = 0; i < document.form1.elements.length; i++) {Пример 1: Именованная форма. Создаётся форма myForm, содержащая текстовые поля для имени и фамилии. Форма содержит также две кнопки, переводящие все буквы в верхний или в нижний регистр. Функция setCase показывает, как обратиться к форме по её имени.
<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>Пример 4: Метод submit. Этот пример похож на предыдущий, за исключением того, что он отправляет форму с использованием метода submit вместо объекта Submit. Обработчик onSubmit формы не предотвращает отправку формы. Форма использует обработчик onClick кнопки для вызова функции checkData. Если значение верно, функция checkData отправляет форму, вызывая метод submit формы.
<HTML>Эта функция возвращает значение свойства method формы musicForm:
function getMethod() {Здесь отправляется форма musicChoice:
document.musicChoice.submit()Если musicChoice это первая созданная форма, Вы можете также отправить её так:
document.forms[0].submit()См. также пример для Form.
Пример 1. Эта функция возвращает строку, содержащую отформатированное представление чисел с заполнением ведущими нулями.
// Эта функция возвращает строку, заполненную ведущими нулямиСледующие операторы вызывают функцию padZeros:
result=padZeros(42,4) // возвращает "0042"Пример 2. Вы можете определить, существует ли функция, сравнив имя функции с null. В следующем примере func1 вызывается, если функция noFunc не существует; иначе вызывается функция func2. Заметьте, что требуется имя окна при обращении к функции noFunc.
if (window.noFunc == null)Пример 3. Здесь создаётся обработчики события onFocus и onBlur для фрэйма. Этот код находится в том же файле, который содержит тэг FRAMESET. Заметьте, штаа это единственный способ создания обработчиков onFocus и onBlur для фрэйма, поскольку Вы не можете специфицировать обработчики в тэге FRAME.
frames[0].onfocus = new Function("document.bgColor='antiquewhite'")Пример 1. Здесь определена функция, выполняющая конкатенацию/объединение нескольких строк. Единственным формальным аргументом функции является строка, специфицирующая символ-разделитель объединяемых строк. Функция определена так:
function myConcat(separator) {Вы можете передать этой функции любое количеств аргументов, и она создаст список из всех аргументов как элементов списка.
// возвращает "red, orange, blue, "Пример 2. Определяется функция, создающая HTML-списки. Единственным формальным аргументом этой функции является строка, которая содержит "U", если это неупорядоченный список (bulleted), или "O", если это упорядоченный список (numbered). Функция определена так:
function list(type) {Вы можете передать этой функции любое количество аргументов, и она отобразит каждый аргумент как элемент списка указанного типа. Например, следующий вызов функции
list("U", "One", "Two", "Three")даст на выходе
<UL>Следующая функция возвращает значение свойства callee этой функции.
function myFunc() {Возвращается следующее значение:
function myFunc() { return arguments.callee; }Следующий код проверяет значение свойства caller функции:
function myFunc() {Вы можете использовать call для создания цепочки конструкторов объектов, как в Java. В следующем примере конструктор объекта product определён с двумя параметрами, name и value. Другой объект, prod_dept, инициализирует свою уникальную переменную (dept) и вызывает конструктор объекта product в своём конструкторе для инициализации других переменных.
function product(name, value){Пример 1. Здесь форма myForm содержит объект Hidden и кнопку. Если пользователь щёлкает по кнопке, в значение объекта Hidden устанавливается имя формы. Обработчик события кнопки onClick использует this.form для обращения к родительской форме myForm.
<FORM NAME="myForm">Пример 2. Здесь используется ссылка на объект, а не ключевое слово this, для обращения к форме. Код возвращает ссылку на myForm, которая является контейнером для объекта myHiddenObject.
document.myForm.myHiddenObject.formПример 1. Здесь выполняется переход к URL , который был посещён пользователем в текущем окне на три шага назад.
history.go(-3)Пример 2. Вы можете использовать объект history со специфицированным окном или фрэймом. В данном примере window2 переходит назад на одну ступень назад в истории данного окна (или сессии):
window2.history.back()Пример 3. В этом примере второй фрэйм в наборе фрэйма переходит назад на один элемент:
parent.frames[1].history.back()Пример 4. В этом примере фрэйм frame1 набора фрэймов переходит назад на один шаг:
parent.frame1.history.back()Пример 5. В этом примере фрэйм frame2 в окне window2 переходит назад на один шаг:
window2.frame2.history.back()Пример 6. Этот код определяет, содержит ли первое вхождение массива history строку "NETSCAPE". Если это так, вызывается функция myFunction.
if (history[0].indexOf("NETSCAPE") != -1) {Пример 7. Здесь отображается весь список history:
document.writeln("<B>history is</B> " + history)Этот код отобразит примерно такое:
history isЭта кнопка делает переход к ближайшему вхождению из history, которое содержит строку "home.netscape.com":
<P><INPUT TYPE="button" VALUE="Go"Следующая кнопка переходит к URL, который находится на три шага назад в списке history:
<P><INPUT TYPE="button" VALUE="Go"Здесь определяется, содержит ли history.next строку "NETSCAPE.COM". Если да - вызывается функция myFunction.
if (history.next.indexOf("NETSCAPE.COM") != -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)Если Вы опускаете аргументы width и height в конструкторе Image, myImage создаётся с размерами, указанными в исходном URL..
myImage = new Image()Пример 3: Вывод изображения на основе ввода данных в форму. Здесь пользователь выбирает, какое изображение вывести. Пользователь заказывает рубашку, заполняя форму. Изображение выводится в зависимости от указанных цвета и размера рубашки. Все возможные варианты загружаются заранее, чтобы сократить время на ответ. Если пользователь щёлкает кнопку для заказа рубашки, функция allShirts выводит изображения всех рубашек.
<SCRIPT>Пример 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>См. также примеры для обработчиков onAbort, onError и onLoad.
Здесь функция valueGetter использует цикл for для итерации по массиву элементов, расположенных на форме valueTest. Окно msgWindow выводит имена всех элементов на форме:
newWindow=window.open("http://home.netscape.com") function valueGetter() {В следующем примере первый оператор создаёт окно netscapeWin. Второй оператор выводит значение "netscapeHomePage" в диалоговом окне Alert, поскольку "netscapeHomePage" является значением аргумента windowName argument окна netscapeWin.
netscapeWin=window.open("http://home.netscape.com","netscapeHomePage")Пример 1. Инстанциация (создание экземпляра) JavaArray в JavaScript.
Здесь экземпляр byteArray объекта JavaArray создаётся методом java.lang.String.getBytes, который возвращает массив.
var javaString = new java.lang.String("Hello world!");Пример 2. Инстанциация (создание экземпляра) JavaArray в JavaScript с помощью метода newInstance.
Используйте объект класса, возвращаемый java.lang.Class.forName, как аргумент для метода newInstance, как показано в следующем коде:
var dataType = java.lang.Class.forName("java.lang.String")Пример 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")Пример 3. Доступ к наследуемым методам.
Поскольку getClass является методом из Object и java.lang.String расширяет/extends Object, класс String наследует метод getClass. Соответственно, getClass является также методом из JavaObject, который инстанциирует String в JavaScript.
var theString = new java.lang.String("Hello, world")Здесь устанавливается цвет фона канвы слоя myLayer в aqua с использованием строкового литерала:
myLayer.bgColor="aqua"Следующий пример устанавливает цвет фона с использованием 16-ричного триплета:
myLayer.bgColor="00FFFF"Пример 1. Следующий пример создаёт гипертекстовую ссылку на якорь javascript_intro:
<A HREF="#javascript_intro">Introduction to JavaScript</A>Пример 2. Здесь создаётся гиперссылка на якорь numbers в файле doc3.html в окне window2. Если window2 не существует, оно создаётся.
<LI><A HREF=doc3.html#numbers TARGET="window2">Numbers</A>Пример 3. Здесь пользователь переходит на x вхождений назад в списке history:
<A HREF="javascript:history.go(-1 * x)">Click here</A>Пример 4. Здесь создаётся гиперссылка на URL. Пользователь может использовать набор радио-кнопок для выбора из трёх URL. Обработчик onClick ссылки устанавливает URL (свойство href ссылки) на основе выбранной кнопки. Ссылка также имеет обработчик onMouseOver, который изменяет свойство status окна. Как показано в примере, Вы обязаны вернуть true для установки свойства window.status в обработчике onMouseOver.
<SCRIPT>Пример 5: Массив links. В этом примере функция linkGetter использует массив links для вывода значений каждой ссылки текущего документа. Этот пример определяет также несколько ссылок и кнопку для запуска linkGetter.
function 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">Пример 8: Симуляция обработчика onClick Area-объекта через использование атрибута HREF. Следующий пример использует атрибут HREF Area-объекта для выполнения функции JavaScript. Выводимый рисунок, colors.gif, показывает два цвета. Верхняя половина рисунка имеет цвет antiquewhite, а нижняя - white. Если пользователь щёлкает по верхней или нижней половине рисунка, функция setBGColor изменяет цвет фона документа на цвет из рисунка.
<SCRIPT>Пример 1. Следующие два эквивалентных оператора устанавливают URL текущего окна - домашнюю страницу Netscape:
window.location.href="http://home.netscape.com/"Пример 2. Следующий оператор устанавливает URL фрэйма frame2 - домашнюю страницу Sun:
parent.frame2.location.href="http://www.sun.com/"См. также примеры для Anchor.
Здесь оператор window.open создаёт окно newWindow и загружает в него специфицированный URL. Операторы document.write отображают свойства newWindow.location в окне msgWindow.
newWindow=window.openЭтот пример даст на выходе:
newWindow.location.href =В этом примере оператор window.open создаёт окно newWindow и загружает в него специфицированный URL. Операторы document.write выводят свойства newWindow.location в окне msgWindow.
newWindow=window.openЭтот пример даст на выходе:
newWindow.location.href =Этот код выводит свойства type, description, suffixes и enabledPlugin для каждого MimeType-объекта на клиенте:
document.writeln("<TABLE BORDER=1><TR VALIGN=TOP>",Этот пример даст на выходе примерно следующее:
0 | audio/aiff | AIFF | aif, aiff | LiveAudio | ||||||||||||||||||||||||||||||
1 | audio/wav | WAV | wav | LiveAudio | ||||||||||||||||||||||||||||||
2 | audio/x-midi | MIDI | mid, midi | LiveAudio | ||||||||||||||||||||||||||||||
3 | audio/midi | MIDI | mid, midi | LiveAudio | ||||||||||||||||||||||||||||||
4 | video/msvideo | Video for Windows | avi | NPAVI32 Dynamic Link Library | ||||||||||||||||||||||||||||||
5 | * | Netscape Default Plugin | Netscape Default Plugin | |||||||||||||||||||||||||||||||
6 | zz-application/zz-winassoc-TGZ | TGZ | None |
Здесь определяется, установлен ли Shockwave plug-in. Если это так, клип воспроизводится.
// Можем ли мы воспроизвести Shockwave-видео?Здесь выводится значение свойства appCodeName:
document.write("The value of navigator.appCodeName is " +Для Navigator'а 2.0 и позднее будет выведено:
The value of navigator.appCodeName is MozillaЗдесь будет выведено значение свойства appName:
document.write("The value of navigator.appName is " +Для Navigator'а 2.0 и 3.0 будет выведено:
The value of navigator.appName is NetscapeПример 1. Выводится номер версии Navigator'а:
document.write("The value of navigator.appVersion is " +Для 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>Выполняется функция function1, если разрушение данных включено; иначе - выполняется function2.
if (navigator.taintEnabled()) {Выводится информация userAgent для Navigator'а:
document.write("The value of navigator.userAgent is " +Для Navigator 2.0 будет выведено следующее:
The value of navigator.userAgent is Mozilla/2.0 (Win16; I)Пример 1. Свойства объекта Number используются для присвоения значений нескольким числовым переменным:
biggestNum = Number.MAX_VALUEПример 2. Создаётся Number-объект myNum, затем добавляется свойство description во все Number-объекты. Затем значение присваивается свойству description объекта myNum.
myNum = new Number(65)Создаётся прототип Tree и объект этого типа - theTree. Затем выводится свойство constructor объекта theTree.
function Tree(name) {На выходе будет:
theTree.constructor is function Tree(name) { this.name = name; }Определяется тип объектов Dog и создаётся theDog, объект типа Dog:
function Dog(name,breed,color,sex) {Вызов метода toSource объекта theDog выводит исходный код JavaScript, определяющий этот объект:
theDog.toSource()Пример 1: Объект location. Печатается строковой эквивалент текущего location.
document.write("location.toString() is " + location.toString() + "<BR>")Вывод будет таким:
location.toString() is file:///C|/TEMP/myprog.htmlПример 2: Объект без строкового значения. Предположим, у Вас имеется Image-объект sealife, определённый так:
<IMG NAME="sealife" SRC="images\seaotter.gif" ALIGN="left" VSPACE="10">Поскольку сам по себе Image-объект не имеет специального метода toString, sealife.toString() возвращает:
[object Image]Пример 3: Параметр radix. Печатается строковые эквиваленты чисел от 0 до 9 в 10-ричном и двоичном формате.
for (x = 0; x < 10; x++) {Этот пример даст на выходе:
Decimal: 0 Binary: 0Пример 1. Здесь функция getChoice возвращает значение свойства text для выбраной опции. Цикл for вычисляет каждую опцию Select-объекта musicType. Оператор if находит выбранную опцию.
function getChoice() {Предполагается, что Select-объект таков:
<SELECT NAME="musicType">Пример 2. В следующей форме пользователь может ввести некоторый текст в первом текстовом поле, а затем ввести число от 0 до 2 (включительно) во втором текстовом поле. Когда пользователь щёлкает по кнопке, текст изменяется на номер выбранной опции, и эта опция выбирается.
Код выглядит так:
<SCRIPT>Функция JavaScript создаёт диалоговое окно Java:
function createWindow() {Здесь функция создаёт экземпляр theWindow как Packages-объект. Методы setSize, setTitle и setVisible доступны для JavaScript как public-методы из java.awt.Dialog.
Это код получает доступ к конструктору класса java.awt.Frame:
var theOwner = new Packages.java.awt.Frame();Вы можете упростить этот код, используя объект верхнего уровня java для доступа к конструктору:
var theOwner = new java.awt.Frame();Здесь функция valueGetter использует цикл for для итерации по массиву элементов на форме valueTest. Окно msgWindow отображает имена всех элементов формы:
newWindow=window.open("http://home.netscape.com")function valueGetter() {Здесь функция checkPassword проверяет правильность введённого пользователем пароля. Если пароль неверен, метод select выделяет поле, а метод focus возвращает ему фокус, так что пользователь может повторно ввести пароль.
function checkPassword(userPass) {Здесь предполагается, что Password-объект определён так:
<INPUT TYPE="password" NAME="userPass">Пример 1. Пользователь может получить список установленных plug-in'ов, выбрав меню About Plug-ins из Help. Чтобы увидеть код, используемый браузером для этого сообщения, выберите меню About Plug-ins из Help, затем выберите Page Source из View.
Пример 2. Следующий код присваивает укороченные переменные предопределённым свойствам LiveAudio.
var myPluginName = navigator.plugins["LiveAudio"].nameПример 3. Этот код выводит сообщение "LiveAudio is configured for audio/wav", если LiveAudio plug-in установлен и подключён для "audio/wav" MIME-типа:
var myPlugin = navigator.plugins["LiveAudio"]Пример 4. Следующее выражение представляет количество MIME-типов, которые Shockwave может отобразить:
navigator.plugins["Shockwave"].lengthПример 5. Этот код выводит свойства name, filename, description и length каждого Plugin-объекта на клиенте:
document.writeln("<TABLE BORDER=1><TR VALIGN=TOP>",Этот пример даст примерно такой вывод:
i | name | filename | description | # of types |
0 | QuickTime Plug-In |
d:\nettools\netscape\nav30\Program\ | QuickTime Plug-In for Win32 v.1.0.0 | 1 |
1 | LiveAudio |
d:\nettools\netscape\nav30\Program\ | LiveAudio--Netscape Navigator sound playing component | 7 |
2 | NPAVI32 Dynamic Link Library |
d:\nettools\netscape\nav30\Program\ | NPAVI32, avi plugin DLL | 2 |
3 | Netscape Default Plugin |
d:\nettools\netscape\nav30\Program\ | Null Plugin | 1 |
Пример 1. Определяется группа радио-кнопок для выбора из трёх музыкальных каталогов. Каждая радио-кнопка имеет одно имя, NAME="musicChoice", образуя группу кнопок, в которой может быть выбрана только одна кнопка этой группы. Здесь также определено текстовое поле, которая по умолчанию имеет значение выбранной радио-кнопки, но также даёт пользователю возможность ввести нестандартное имя каталога. Обработчик onClick устанавливает в поле ввода имя каталога, если пользователь щёлкает по радио-кнопке.
<INPUT TYPE="text" NAME="catalog" SIZE="20">Пример 2. В этом примере имеется форма с тремя текстовыми боксами и тремя радио-кнопками. Радио-кнопки позволяют выбирать регистр символов, в который конвертировать текст текстовых полей, или вообще не конвертировать этот текст. Каждое текстовое поле имеет обработчик события onChange, который изменяет значение поля в зависимости от того, какая кнопка нажата. Радио-кнопки для верхнего и нижнего регистров имеют обработчики onClick, конвертирующие все поля одновременно.
<HTML>См. также примеры для Link.
В этом примере переключается состояние первой радио-кнопки объекта musicType Radio на форме musicForm:
document.musicForm.musicType[0].click()А в этом примере переключается состояние бокса-переключателя newAge checkbox на форме musicForm:
document.musicForm.newAge.click()Пример 1. Следующий скрипт использует метод replace для переключения слов в строке. Для заменяющего текста скрипт использует значения свойств $1 и $2 глобального объекта RegExp. Обратите внимание, что имя объекта RegExp не предшествует свойствам $, когда они передаются как второй аргумент методу replace.
<SCRIPT LANGUAGE="JavaScript1.2">Будет выведено "Smith, John".
Пример 2. Здесь RegExp.input устанавливается событием Change. В функции getInfo метод exec использует значение RegExp.input в качестве аргумента. Обратите внимание, что RegExp присоединён к свойствам $.
<HTML><SCRIPT LANGUAGE="JavaScript1.2">Пример 1. Здесь отображается Text-объект со значением по умолчанию "CA" и кнопка reset с текстом "Clear Form" на поверхности. Если пользователь печатает аббревиатуру штата в объекте Text и щёлкает кнопку Clear Form, восстанавливается оригинальное значение "CA".
<B>State: </B><INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2">Пример 2. Здесь имеются два объекта Text, объект Select и три радио-кнопки; все эти объекты имеют значения по умолчанию. На форме имеется также кнопка reset с текстом "Defaults" на ней. Если пользователь изменяет значение любого из этих объектов и щёлкает кнопку Defaults, восстанавливаются начальные значения.
<HTML>Здесь убирается фокус с reset-кнопки userReset:
userReset.blur()Предполагается, что кнопка определена так:
<INPUT TYPE="reset" NAME="userReset">Эта функция вычисляет свойство value группы кнопок и и отображает его в окне msgWindow:
function valueGetter() {Этот пример выведет:
Query SubmitПредполагается, что кнопки были определены так:
<INPUT TYPE="submit" NAME="submitButton">Пример 1. Отображаются два списка selection. В первом списке пользователь может выбрать только один элемент; во втором списке можно выбрать несколько элементов.
Choose the music type for your free CD:Пример 2. Отображаются два списка selection, которые позволяют выбрать месяц и число. Эти списки selection инициализируются текущей датой. Пользователь может изменить месяц и число, используя списки selection или выбрав предустановленные даты радио-кнопками. Текстовые поля на форме отображают значения свойств объектов Select и указывают выбранную дату и то, является ли эта дата Cinco de Mayo.
<HTML>Пример 3. Добавление опции конструктором Option. В этом примере создаются два объекта Select, один с и другой без атрибута MULTIPLE. Сначала опции ни для одного из объектов не определены. Если пользователь щёлкает кнопку, ассоциированную с объектом Select, функция populate создаёт четыре опции для Select-объекта и выбирает первую опцию.
<SCRIPT>Пример 4. Удаление опции. Следующая функция удаляет опцию из Select-объекта.
function deleteAnItem(theList,itemNo) {Пример 1: Строковой литерал. Создаётся строковой литерал:
var last_name = "Schaefer"Пример 2: Свойства строкового литерала. Следующие операторы вычисляются в 8, "SCHAEFER" и "schaefer":
last_name.lengthПример 3: Доступ к определённым символам строки. Вы можете представить строку как массив символов. Тогда можно получить доступ к отдельным символам строки по индексу этого массива.
var myString = "Hello"Пример 4: Передача строки между скриптами в различных окнах и фрэймах. Следующий код создаёт две строковые переменные и открывает второе окно:
var lastName = "Schaefer"Если код HTML второго окна (string2.html) создаёт две строковые переменные empLastName и empFirstName, следующий код в первом окне присваивает значения переменным второго окна:
empWindow.empFirstName=firstNameА этот код в первом окне выводит значения переменных второго окна:
alert('empFirstName in empWindow is ' + empWindow.empFirstName)Пример 1. Этот пример возвращает строку "ABC".
String.fromCharCode(65,66,67)Пример 2. Свойство which событий KeyDown, KeyPress и KeyUp содержит ASCII-значение клавиши клавиатуры, нажатой при возникновении события. Если Вы хотите получить фактическую букву, число или символ клавиши, Вы можете использовать fromCharCode. Следующий пример возвращает букву, число или символ в свойстве which события KeyPress.
String.fromCharCode(KeyPress.which)Пример 1. Методы indexOf и lastIndexOf используются для локализации значений в строке "Brave new world."
var anyString="Brave new world"// Выводит 8Пример 2. В этом примере определены две строковые переменные. Они содержат одинаковые строки, но вторая строка содержит символы в верхнем регистре. Первый метод writeln выводит 19. Поскольку метод indexOf учитывает регистр символов, строка "cheddar" не найдена в строке myCapString, поэтому второй метод writeln выведет -1.
myString="brie, pepper jack, cheddar"Пример 3. Здесь в count устанавливается количество вхождений буквы x в строке str:
count = 0;Пример 1. Здесь match используется для поиска подстроки 'Chapter' с последующим одним или более цифровыми символами, с последующей десятичной точкой и цифровыми символами 0 или более раз. Регулярно выражение включает флаг i, поэтому регистр символов игнорируется.
<SCRIPT>Возвращает массив, содержащий Chapter 3.4.5.1,Chapter 3.4.5.1,.1
'Chapter 3.4.5.1' это первое совпадение и первое значение, запомненное из (Chapter \d+(\.\d)*).
'.1' это второе значение, запомненное из (\.\d).
Пример 2. Здесь демонстрируется использование флагов global и ignore case вместе с match.
<SCRIPT>Возвращаемые массив содержит D, d.
Пример 1. Здесь регулярное выражение содержит флаги global и ignore case с разрешением методу replace замещать каждое вхождение 'apples' на 'oranges'.
<SCRIPT>Будет напечатано "oranges are round, and oranges are juicy."
Пример 2. В этом примере регулярное выражение определено в методе replace и содержит флаг игнорирования регистра.
<SCRIPT>Будет напечатано "Twas the night before Christmas..."
Пример 3. Этот скрипт переключает слова в строке. Для замещающего текста используются значения свойств $1 и $2.
<SCRIPT LANGUAGE="JavaScript1.2">Будет напечатано "Smith, John".
Пример 4. Здесь градусы по Фаренгейту замещаются эквивалентом по Цельсию. Градусы по Фаренгейту должны быть числом с конечной F. Функция возвращает число по Цельсию с конечной С. Например, если введено 212F, функция возвращает 100C. Если введено 0F, функция возвращает -17.77777777777778C.
Регулярное выражение test проверяет числа с конечной буквой F. Число по Фаренгейту доступно для Вашей функции через параметр $1. Функция устанавливает число по Цельсию на основе значения по Фаренгейту, передаваемого в строке функции f2c. Затем f2c возвращает число по Цельсию. Эта функция напоминает флаг s///e из Perl.
function f2c(x) {Пример 1. определена функция, которая разделяет строку на массив строк с использованием специфицированного сепаратора. После разделения строки, функция выводит сообщения, указывающие строку-оригинал (до разделения), используемый сепаратор, количество элементов массива и отдельные элементы массива.
function splitString (stringToSplit,separator) {Этот пример даст на выходе:
The original string is: "Oh brave new world that has such people in it."Пример 2. Рассмотрим следующий скрипт:
<SCRIPT LANGUAGE="JavaScript1.2">С использованием LANGUAGE="JavaScript1.2" это скрипт даст:
"She", "sells", "seashells", "by", "the", "seashore"Без LANGUAGE="JavaScript1.2" этот скрипт разделит только по одиночным пробельным символам:
"She", "sells", , , , "seashells", "by", , , "the", "seashore"Пример 3. В этом примере split ищет 0 или более пробелов, с последующим символом ; и с последующими 0 или более пробелов и, если это найдено, удаляет пробелы из строки.
nameList это массив, возвращаемый как результат работы split.
Будут напечатаны две строки; первая - строка-оригинал, вторая - результирующий массив.
Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
Harry Trump,Fred Barney,Helen Rigby,Bill Abel,Chris Hand
Пример 4. Здесь split ищет 0 или более пробелов в строке и возвращает первые три найденные разделения .
<SCRIPT LANGUAGE="JavaScript1.2">Скрипт выведет:
["Hello", "World.", "How"]Пример 1. Здесь substring используется для отображения символов их строки "Netscape":
var anyString="Netscape"// Выводит "Net"Пример 2. Заменяется подстрока в строке. Заменяются отдельные символы и подстроки. Вызов функции в конце примера изменяет строку "Brave New World" на "Brave New Web".
function replaceString(oldS,newS,fullS) {Пример 3. В JavaScript 1.2, используя LANGUAGE="JavaScript1.2", следующий скрипт выдаёт ошибку времени выполнения (out of memory).
<SCRIPT LANGUAGE="JavaScript1.2">Без LANGUAGE="JavaScript1.2" вышеприведённый скрипт напечатает следующее:
Net Net
Во втором write числа-индексы меняются местами.
Пример 1. Создаётся Text-объект длиной 25 символов. Текстовое поле расположено сразу справа от слов "Last name:". При загрузке формы текстовое поле очищено.
<B>Last name:</B> <INPUT TYPE="text" NAME="last_name" VALUE="" SIZE=25>Пример 2. Создаются два Text-объекта на форме. Каждый объект имеет значение по умолчанию. Объект city имеет обработчик onFocus, который выделяет весь текст в поле, когда пользователь переходит в это поле с помощью табуляции. Объект state имеет обработчик onChange, который переводит значение в верхний регистр.
<FORM NAME="form1">См. также примеры для onBlur, onChange, onFocus и onSelect.
Пример 1. Форма myForm содержит Text-объект и кнопку. если пользователь щёлкает по кнопке, в Text-объект устанавливается значение имени формы. Обработчик onClick кнопки использует this.form для обращения к текущей форме myForm.
<FORM NAME="myForm">Пример 2. Показана форма с несколькими элементами. Если пользователь щёлкает кнопку button2, функция showElements выводит диалог alert, содержащий имена всех элементов формы myForm.
function showElements(theForm) {Диалог alert выведет следующий текст:
JavaScript Alert:Пример 3. Здесь используется ссылка объекта, а не ключевое слово this, для обращения к форме. Код возвращает ссылку на myForm, которая является формой, содержащей элемент myTextObject.
document.myForm.myTextObject.formПример 1. Создаётся объект Textarea размером 6 рядов на 55 столбцов. Поле textarea расположено ниже слова "Description:". Когда форма загружается, Textarea-объект содержит несколько строк данных, включая одну пустую строку.
<B>Description:</B>Пример 2. Сроковая переменная содержит символы новой строки для различных платформ. Если пользователь щёлкает кнопку, Textarea-объект заполняется значением из строковой переменной. В результате получаются три строки текста в Textarea-объекте.
<SCRIPT>Пример 1. Здесь показана форма с несколькими элементами. Если пользователь щёлкает кнопку button2, функция showElements отображает диалог alert с именами всех элементов формы myForm.
function showElements(theForm) {Диалог alert выведет:
JavaScript Alert:Пример 2. Здесь используется ссылка объекта, а не ключевое слово this, для ссылки на форму. Код возвращает ссылку на myForm, которая является формой - контейнером объекта myTextareaObject.
document.myForm.myTextareaObject.formПример 1. Окна, открывающие другие окна. Здесь документ верхнего окна открывает второе окно window2 и определяет push-кнопки, которые открывают окно с сообщением, записывает в окно сообщения, закрывает его и закрывает window2. Обработчики onLoad и onUnload документа, загруженного в window2, выводят предупреждающие сообщения при открытии и закрытии окна.
win1.html, который определяет фрэймы для первого окна, содержит следующий код:
<HTML>win2.html, который определяет содержимое окна window2, содержит следующий код:
<HTML>Пример 2. Создание фрэймов. Создаются два окна, каждое из 4 фрэймов. В первом окне первый фрэйм содержит кнопки, которые изменяют цвет фона фрэймов в обоих окнах.
framset1.html, где определяются фрэймы первого окна, содержит следующий код:
<HTML>framset2.html, где определяются фрэймы второго окна, содержит следующий код:
<HTML>framcon1.html, где определяется содержимое первого фрэйма первого окна, содержит следующий код:
<HTML>framcon2.html, где определяется содержимое остальных фрэймов, содержит следующий код:
<HTML>framcon3.html, на который ссылается объект Link в framcon1.html, содержит следующий код:
<HTML>Пример 1. Любая из следующих строк закрывает текущее окно:
window.close()Пример 2: Закрытие главного окна браузера.
top.opener.close()Пример 3. Здесь закрывается окно messageWin:
messageWin.close()Предполагается, что окно было открыто примерно в такой манере:
messageWin=window.open("")Пример 1. Следующий код открывает окно win1, затем позже проверяет, было ли оно закрыто. Вызываемая функция зависит от того, закрыто ли окно win1.
win1=window.open('opener1.html','window1','width=300,height=300')Пример 2. Определяется, закрыто ли окно, открывшее текущее окно, и вызывается соответствующая функция.
if (window.opener.closed)Функция checkPassword подтверждает, что пользователь ввёл верный пароль. Если введён неправильный пароль, метод focus возвращает фокус объекту Password, а метод select выделяет его, чтобы пользователь мог повторно ввести пароль.
function checkPassword(userPass) {Предполагается, что объект Password определён так:
<INPUT TYPE="password" NAME="userPass">Следующая кнопка выполняет то же действие, что и кнопка Forward браузера:
<P><INPUT TYPE="button" VALUE="< Go Forth"Следующий пример создаёт окно "chromeless" (в окне chromeless отсутствуют панель утилит, полосы прокрутки, статусные области и т.д., как в диалоговом окне), пряча большую часть панелей пользовательского интерфейса:
self.menubar.visible=false;Пример 1. Функция windowOpener открывает окно и использует методы write для вывода сообщения:
function windowOpener() {Пример 2. Это обработчик onClick, который открывает новое клиентское окно, выводя содержимое, специфицированное в файле sesame.html. Окно открывается со специфицированными установками опций; все другие опции будут false, поскольку не специфицированы.
<FORM NAME="myform">Пример 1: Закрытие opener'а. Этот код закрывает окно, которое открыло текущее окно. Если opener-окно закрывается, opener остаётся без изменений. Однако window.opener.name вычисляется теперь в undefined.
window.opener.close()Пример 2: Закрытие главного окна браузера.
top.opener.close()Пример 3: Вычисление имени opener'а. Окно может определить имя своего opener'а так:
document.write("<BR>opener property is " + window.opener.name)Пример 4: Изменение значения opener. Этот код изменяет значение свойства opener в null. После выполнения этого кода вы не сможете закрыть opener-окно так, как это делается в Примере 1.
window.opener=nullПример 5: Изменение значения свойства через opener. Изменяется цвет фона окна, специфицированного свойством opener.
window.opener.document.bgColor='bisque'Чтобы сделать окно шириной 225 пикселов и высотой 200 пикселов, используйте этот оператор:
self.resizeTo(225,200); // абсолютное позиционированиеСледующий пример делает окно, на которое ссылаются, "chromeless" (в chromeless-окнах нет панелей toolbar, полос прокрутки, статусной области и т.д., что делает их похожими на диалоговые окна), пряча большинство из панелей интерфейса пользователя:
self.menubar.visible=false;Пример 1: Прокрутка текущей области просмотра. Для прокрутки окна к левой границе и на 20 пикселов вниз от верха окна, используйте этот оператор:
self.scrollTo(0,20); // абсолютное позиционированиеПример 2: Прокрутка другой области просмотра. Это код, расположенный в одном фрэйме, прокручивает область просмотра другого фрэйма. Два объекта Text дают пользователю возможность специфицировать координаты x и y. если пользователь щёлкает по кнопке Go, документ в frame2 прокручивается на специфицированные координаты.
<SCRIPT>Пример 1. Сообщение alert выводится через 5 секунд (5,000 миллисекунд) после щелчка пользователя по кнопке. Если пользователь щёлкает вторую кнопку до вывода сообщения, таймаут отменяется и alert не отображается.
<SCRIPT LANGUAGE="JavaScript">Пример 2. Выводится текущее время в объекте Text. Функция showtime, вызываемая рекурсивно, использует метод setTimeout для обновления значения каждую секунду.
<HEAD>Предположим, Вы создали функцию JavaScript под названием pickRandomURL, которая даёт возможность выбрать произвольный URL. Вы можете использовать обработчик onClick в якоре для динамического специфицирования значения атрибута HREF этого якоря и обработчик onMouseOver - для специфицирования специального сообщения для окна - в свойстве status:
<A HREF=""Здесь свойство status окна присваивается свойству self окна таким образом: self.status.
Следующий пример делает окно, на которое ссылаются, "chromeless" (в chromeless-окнах нет панелей toolbar, полос прокрутки, статусной области и т.д., что делает их похожими на диалоговые окна), пряча большинство из панелей интерфейса пользователя:
self.menubar.visible=false;Оператор top.close() закрывает самое верхнее окно иерархии окон .
Оператор top.length специфицирует количество фрэймов, содержащихся внутри самого верхнего окна. Если самый верхний предок определён так, top.length возвращает 3:
<FRAMESET COLS="30%,40%,30%">Следующий пример устанавливает цвет фона фрэйма myFrame в red.
myFrame это потомок самого верхнего окна-предка.
top.myFrame.document.bgColor="red"Печатает содержимое окна.
Метод из | window |
Реализован в | JavaScript 1.2 |
Выводит диалог Prompt с сообщением и полем для ввода.
Метод из | window |
Реализован в | JavaScript 1.0 |
Строка, специфицирующая начало URL до двоеточия включительно.
Свойство из | Link |
Реализовано в | JavaScript 1.0 |
Строка, специфицирующая начало URL до первого двоеточия включительно.
Свойство из | Location |
Реализовано в | JavaScript 1.0 |