<SCRIPT language="Javascript"> <!-- код //--> </SCRIPT>В основе синтаксиса как Java как и JavaScript лежит С. Поэтому, зная синтаксис языка С не сложно программировать на JavaScript.
var i=0,k;При объявлении переменной ее значение автоматически относится к одному из типов: number-действительное или целое число; boolean; string; ob]ect.
temperature = (gradus<=10) ? "cold" : "hot";В этом примере если значение переменной gradus будет меньше 10, то temperature получит значение "cold", иначе "hot".
Как и в любом другом языке программирования очень важными являются операторы создания циклов. Циклы бывают нескольких типов: с предусловием, с постусловием и заданными параметрами. В JavaScript реализованы только два типа циклов: с предусловием и заданными параметрами.
Цикл с предусловием записывается следующим образом:
while (условие) { //..блок операторов.. };Цикл выполняет блок операторов до тех пор пока условие цикла принимает истинное значение.
i=0; while (i<10) { document.writeln("Данный пример напечатает 10 строк от "I=0" до "I=9".
i=",i); i++; };
for (нач. знач;условия;приращение) { //..блок операторов.. };Данный цикл выполняется заданное количество раз. Начальные значения переменных цикла задаются выражением нач_знач. Условия задают условия выхода из цикла и записываются в виде логических выражений. Выражение приращение задает изменение параметров цикла за одну итерацию.
for (k=1;k<10;k+=2) { document.writeln("Эти два цикла демонстрируют работу цикла с параметрами. Оба они могут быть реализованы с помощью while. Например аналогичный код для второго цикла будет следующим:
K=",k); }; for (i=0,j=2;i<10,j<5;i++,j++) { document.writeln("
I=",i," J=",j); };
i=0; j=2; while ((i<10)&&(j<5)) { document.writeln("Для более удобной работы с циклами в язык были введены операторы прерывания цикла и его продолжения. Оператор прерывания цикла записывается в виде break. Он сразу прерывает работу цикла и передает управление блоку операторов следующих за циклом. Пример:
I=",i," J=",j); i++; j++; };
i=2; while (i<10){ if (i>5) break; document.writeln("Для продолжения цикла, т.е. перехода к следующей итерации предназначен оператор continue. Пример:
I=",i); i++; };
i=2; while (i<5){ if (i==3){ i++; continue; }; document.writeln("Перед вызовом continue следует правильно изменить параметр цикла. Если этого не сделать, то при следующей итерации цикл будет работать с предыдущим значением и произойдет зацикливание. Но это только в случае с оператором while, т.к. в операторе for интерпретатор языка сам заботится об изменении параметра цикла. Оператор условного перехода позволяет разветвить программу в зависимости от какого-либо условия. Записывается он следующим образом:
I=",i); i++; };
if (условие) { // код для истинного условия } else { // код для ложного условия };Данный оператор также может быть записан более коротко без использования else:
if (условие) { // код для истинного условия };JavaScript поддерживает ряд встроенных объектов: Array, Boolean, Date, Global, Function, Math, Number, String.
имя_массива = new Array(количество_элементов);При этом создается пустой массив с требуемым количеством элементов. Например,
ar1 = new Array(5); //массив из 5 элементов
имя_массива = new Array(элемент1,элемент2,...,элементN);Создается массив из N элементов и каждому элементу присваивается соответствующее значение из списка. Например:
ar2 = new Array(123,"ABC",ar1);Элементом массива может быть символьное значение, числовое или значение содержащееся в указанной переменной. В примере последний элемент задается как массив ar1, который был создан ранее. Таким образом можно создавать многомерные массивы.
Обращаться к элементам массива можно обычным методом, указывая конкретный номер элемента массива:
ar1[0]=1; ar2[1]=ar1;У объекта Array есть несколько методов, изменяющих состояние массива:
pr = new Array(1,2,3,4,5); pr.reverse(); document.write(pr);В результате выполнения будет выведен результат:
5,4,3,2,1
pr = new Array('c',5,2,'b',3,1,4,'a'); pr.sort(); document.write(pr);Результат будет такой:
1,2,3,4,5,a,b,c
pr = new Array(1,2,3,4,5); s1=pr.join(); s2=pr.join(" + "); document.writeln("s1 = ",s1); document.writeln("s2 = ",s2);В результате будут получены значения:
s1 = 1,2,3,4,5 s2 = 1 + 2 + 3 + 4 + 5
Размер массива хранится в свойстве length и всегда можно получить его значение. Также стоит отметить, что массивы Array могут изменять размер в процессе работы. Пример:
pr = new Array(0,1,2,3,4); document.writeln("Len = ",pr.length,", pr = ",pr); pr[7]=7; document.writeln("Len = ",pr.length,", pr = ",pr);
Результат:
Len = 5, pr = 0,1,2,3,4 Len = 7, pr = 0,1,2,3,4,,,7
var a = new Boolean(boolvalue);где boolvalue определяет начальную установку объекта, если значение параметра false, 0, null, пустая строка или вообще опущен, то принимает значение false, в противном true. Основным методом является toString(), возвращающий его строковое значение.
var a = new Number(value);
var a = new String(value);Доступ к объекту String может производиться из других фреймов. Например, если требуется получить доступ к переменной strParent из родительского окна, то это реализуется следующим образом
var str=new String(); str = parent.strParent;
anchor() | Создает экземпляр тега <A> со значением атрибута name равным строке, передаваемой методу, например,
var str = "Бросим якоря"; str=str.anchor("Example"); //Возвращает <A NAME="Example">Бросим якоря</A> | ||||
big() | Размещает парные теги <BIG> вокруг строкового объекта, например,
var str="The BIG".big(); //Возвращает <BIG> The BIG </BIG> | ||||
blink() | Размещает парные теги <BLINK> вокруг строкового объекта. | ||||
bold() | Размещает парные теги <B> вокруг строкового объекта. | ||||
charAt() | Размещает номер строки расположенной по указанному индексу. Нумерация индексов начинается с нуля.
function TestCharAt(n,str) { var s=str.charAt(n-1); return(s); } var r=TestCharAt(3,"abcdef";) //Возвращает "c" | ||||
concat() | Объединяет две строки в одну.
var str1 ="abc", str2 ="123"; s=str1.concat(str2); //Возвращает "abc123" | ||||
fixed() | Размещает парные теги <TT> вокруг строкового объекта и устанавливает шрифт фиксированной ширины. | ||||
fontcolor() | Размещает парные теги <FONT> вокруг строкового объекта с значением атрибута color равным значению параметра.
var str ="Текст"; str=str.fontcolor("red"); //Возвращает <FONT color=red> Текст </FONT> | ||||
fontsize() | Размещает парные теги <FONT> вокруг строкового объекта с значением атрибута size равным значению параметра.
var str ="Текст"; str=str.fontsize(2); //Возвращает <FONT size=2> Текст </FONT> | ||||
indexOf() | Возвращает позицию первого вхождения строки substring в объект String, начиная с позиции startindex, если этот параметр отсутствует, то поиск производится с начала строки.
indexOf(substring,startindex)
function TestIndex(str){ var pattern="AABBCCDD"; var s=pattern.indexOf(str); return(s);} var n=TestIndex("CC";) //Возвращает 4Приведем пример нахождения числа вхождений буквы "a" var pos = 0, num = -1, i = -1; var str ="Мама мыла раму" while (pos != -1){ pos=str.indexOf("a",i+1); num+=1; i=pos;} | ||||
italics() | Размещает парные теги <I> вокруг строкового объекта. | ||||
link() | Создает теги <A> со значением атрибута href, равным строке, передаваемой методу.
var str ="Текст"; str=str.link("http://www.text.com"); //Возвращает <A href= "http://www.text.com"> Текст </A> | ||||
replace() | Выполняет поиск выражения str1 и замену его на выражение str2.
var str=" This string good"; str= str.replace("good", "bad"); |
object.go(delta | location)где delta относительный номер URL (go(-1) эквивалентно back()), location -URL. Приведем пример гиперссылки возврата
Приведем основные события объекта Window
onload | При открытии окна браузера |
onresize | При изменении размеров окна браузера |
onunload | При закрытии окна браузера |
alert() | Окно сообщения |
close() | Закрывает окно |
execScript() | Выполняет сценарий |
navigate() | Устанавливает URL адрес |
open() | Открывает окно |
prompt() | Окно с полем ввода |
resizeTo() | Устанавливает заданные размеры окна |
open(URL, name,features, replace);replace- логический параметр указывающий должен ли URL загружаемого документа заменить предыдущую ссылку или нет.
fullscreen={ yes | no | 1 | 0} | Задает полноэкранный или нормальный режим |
channelmode={ yes | no | 1 | 0} | Задает способ отображения окна |
toolbar={ yes | no | 1 | 0} directories={ yes | no | 1 | 0} status={ yes | no | 1 | 0} menubar={ yes | no | 1 | 0} | Задает отображение панели инструментов |
location={ yes | no | 1 | 0} | Задает отображение адресной строки |
Scrollbars={ yes | no | 1 | 0} | Задает полосу прокрутки |
resizable={ yes | no | 1 | 0} | Устанавливает, может ли пользователь менять размеры окна |
width=number | Задает ширину окна. Минимальное значение равно 100. |
height=number | Задает высоту окна. Минимальное значение равно 100. |
top=number | Задает ординату верхнего левого угла окна |
left=number | Задает абсциссу верхнего левого угла окна |
Часто возникает необходимость вызова по гиперссылке в различные фреймы загрузить различные документы.
Для этой цели используется метод open()
. Его первый аргумент дает ссылку на загружаемый
документ, а второй - на окно, в которое загружается этот документ.
Пример загрузки различных документов в различные фреймы.
Далее рассмотрим несколько примеров работы с различными окнами.
Первый пример - Открыть окно,
<a href="javascript:window.open('JavaScript.html','example','scrollbars, resizable,width=300,height=200');void(0);"> Открыть окно</a>,В том случае, когда требуется создать активное окно содержащее сообщение, используют модальное окно About
<a href="Javascript: window.showModalDialog('main.html', '', 'dialogHeight:15; dialogTop:0; DialogLeft:0');void(0);"> About </a>Модальное окно открывается методом
showModalDialog
объекта window
.
Синтаксис showModalDialog(URL,Arguments, Mode)URL- адрес документа, загружаемого в модальное окно,
Arguments-
передает в диалоговое окно набор параметров. Передача параметров производится методом
dialogArguments
объекта window
. Возврат параметров из диалогового окна в документ реализуется
свойством returnValue
объекта window
.
Mode-
параметры внешнего вида окна
-dialogWidth, dialogHeight, dialogTop, dialogLeft и center:{yes | no | 1 | 0}
Диалоговое окно Alert
<SCRIPT language="Javascript"> <!-- function AlertIt() { alert(" Окно Alert"); } //--> </SCRIPT> <font color=blue size=4> <i onclick="AlertIt()">Alert<i></font>Диалоговое окно Confirm
<SCRIPT language="Javascript"> <!-- function ConIt() { if (window.confirm("Закрываем окно confirm?")){window.alert("Да");} else {window.alert("Нет");}; } --> </SCRIPT> <font color=blue size=4> <i onclick="ConIt()">Confirm</i></font>Диалоговое окно Prompt
<SCRIPT language="Javascript"> <!-- function PromptIt() { var ans= window.prompt("Введите свое имя",""); if (ans==null) { alert("Отмена"); return; } var str =new String(ans); if (str.length==0) {alert("Имя не введено");} else { alert("Привет,"+ str); } } --> </SCRIPT> <font color=blue size=4> <i onclick="PromptIt()">Prompt</i></font>
Основные события объекта document.
onafterupdate | После обновления документа |
onbeforeupdate | Перед обновлением документа |
onclick | щелчок мыши |
ondblclick | двойной щелчок мыши |
onmouseout | при выходе указателя мыши за пределы документа |
onreadystatechange | При изменении состояния загружаемого документа. |
Основные методы объекта document.
clear() | Закрывает поток данных и очищает экран |
close() | Закрывает поток данных и обновляет экран |
elementFromPoint() | Возвращает элемент документа, находящийся в точке с указанными координатами |
execCommand() | Выполняет указанную команду |
open() | Открывает документ |
write() | Записывает строку в документ |
writeln() | Записывает строку в документ и переводит указатель на начало новой строки (в пределах тега <pre>). |
<a href="http://www.dnepr.org.ua" onmouseover="document.bgColor='red'" onmouseout="document.bgColor='#F5F5DC '">DnePR</a>.
имя_переменной = new Date(значение_времени);Значение времени можно задать несколькими способами:
today = new Date();
date1 = new Date("May 23, 2001 23:12:57"). d1 = new Date("2003 jan 23 10:20");Значение месяца задается на английском языке в полной или сокращенной форме. Порядок следования месяца, года, дня и времени может быть изменен. Самое главное, чтобы месяц был задан своим названием, а во времени использовалось двоеточие для разделения часов и минут, тогда можно будет точно "декодировать" формат :) Значение секунд или времени вообще можно опустить, тогда секунды или время полностью примут нулевые значения.
d2 = new Date(2001,4,9,13,30,00); document.writeln(d2);Отсчет месяцев в таком случае ведется с 0 (нуля), а дней с 1.
Для работы со временем существуют еще два метода, которые действуют не на уже созданный объект, а просто используются как функции подсчета. Эти функции подсчитывают количество миллисекунд прошедших от полуночи 1 января 1970 года на основе даты:
Date.parse("2003 jan 23 10:20"); d2 = new Date(); Date.parse(d2.toGMTString());
Date.UTC(2002,4,9,13,30,00); Date.UTC(2003,0,3,9,30);
<center> <SCRIPT language="Javascript"> <!-- now=new Date(); document.write("<h2> Время: " +now.getHours()+ ":"+now.getMinutes()+ ":" +now.getSeconds()+ "</h2>"); document.write("<h2> Дата : " +(now.getMonth()+1)+ "/"+now.getDate()+ "/" +now.getYear()+ "</h2>"); --> </SCRIPT> </center>
setInterval()
задает таймер, который выполняет код через указанный временной интервал.
Синтаксис
setInterval(code,msec[,language])Здесь
code
исполняемый код, msec - временной интервал в миллисекундах.
Метод clearInterval()
прекращает работу таймера и выгружает его из памяти.
Синтаксис
clearInterval(intervalID)Здесь
intervalID
идентификатор таймера, возвращаемый методом setInterval.
Метод setTimeout()
задает таймер, который выполняет код только один раз по истечении заданного времени.
Синтаксис
setTimeout(code,msec[,language])Здесь
code
исполняемый код, msec - временной интервал в миллисекундах.
Метод clearTimeout()
прекращает работу таймера и выгружает его из памяти.
Синтаксис
clearTimeout(intervalID)Здесь
intervalID
идентификатор таймера, возвращаемый методом setTimeout.
Приведем пример кода часов.
<script language="JavaScript"> var timer=null; var timerrun=false; function stoptime() { if(timerrun) clearTimeout(timer); timerrun=false; } function starttime() { stoptime(); showtime(); } function showtime() { var all=new Date(); var hours=all.getHours(); var minutes=all.getMinutes(); var seconds=all.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.next.value=timevalue; timer=setTimeout('showtime()',1000); timerrun=true; } </script> <body bgcolor=ffffff text=ff0000 onLoad="starttime()"> <center> <form name=clock> <input type=text name=next size=12 value=' '> </center> </form>
Из всего документа браузер создает несколько массивов объектов:
Каждый такой массив содержит в себе все соответствующие элементы документа. Нумерация в массивах начинается с 0. Например, доступ к самому первому изображению в документе имеет имя:
document.images[0]
Чтобы узнать номер объекта, следует использовать атрибут alt.
Для облегчения доступа к объектам в html существует атрибут тега name. Например, если
<img src=1.gif name=ris1 alt="images[1]">
то можно обращаться к изображению 1.gif двумя способами:
document.images[1] document.ris1Рассмотрим пример работы с массивом форм.
<html> <body> <form action="http://www.mysite/cgi-bin/1.cgi" method=POST name=form_1> <input type=text> <input type=submit> </form> </body> </html>В этом случае к форме можно обращаться как к document.forms[0] или document.form_1.
document.forms[0].action; document.form_1.action;Для вывода содержимого этого атрибута надо написать:
<script> document.writeln(document.forms[0].action); </script>
Содержимое атрибутов action, method, encoding и target можно менять внутри сценария. Вот как можно, например, поменять параметр action:
document.form_1.action="http://www.new_site/cgi-bin/2.cgi";"Начинка" формы содержится в двух массивах. Массив elements хранит все элементы формы для облегчения доступа к ним, а для опций элементов формы типа <select> предназначен массив options.
<html> <form action=1.cgi method=get name=forma1> E-Mail: <input type=text name=email> <input type=submit> </form> </html>Доступ к элементам массива можно осуществлять несколькими способами. Например для доступа к элементу формы с именем email можно использовать следующие конструкции
document.forms[0].elements[0]; document.forms[0].elements["email"]; document.forms[0].email; document.forma1.email;Количество элементов в массиве можно узнать стандартным для всех массивов способом с помощью свойства length:
document.forma1.elements.length;К любому атрибуту можно обратиться по его имени. Например, к атрибуту value тегов <input> можно обратиться следующим образом:
document.forma1.email.value="mail@ukr.net";Аналогично можно поступать с любыми другими атрибутами элемента, кроме атрибутов type и name, которые задают тип элемента на этапе создания формы.
Как было отмечено выше, создается еще один массив options. Он предназначен для определения выделенности пунктов меню в теге <select muptiple>. Если пункт меню выделен, то атрибут selected принимает значение true, если не выделено, то false. Например,
<html> <form name=f> <select multiple name=s> <option value=1>1 <option value=2 selected>2 <option value=3>3 <option value=4>4 </select> </form> <script> document.writeln(document.f.s.options[0].selected); document.writeln(document.f.s.options[1].selected); document.writeln(document.f.s.options[2].selected); </script> </html>В данном случае скрипт выведет такой результат:
false true falseЗакладки и ссылки являются ключевыми элементами html. Все закладки собраны в массив anchors. Ссылки содержатся в массиве links. Любая закладка, которая кроме имени name имеет еще и гипер-ссылку href автоматически добавляется и в массив anchors и в массив links.
Для каждого элемента массива links существуют свойства hash, host, hostname, href, pathname, port, protocol, search, target. Например, применим к документу следующий скрипт:
for (i=0;i<document.links.length;i++){ document.writeln("<dt><b>",document.links[i].href,"</b>"); document.writeln("<dd>Hash: ",document.links[i].hash); document.writeln("<dd>Host: ",document.links[i].host); document.writeln("<dd>Hostname: ",document.links[i].hostname); document.writeln("<dd>Port: ",document.links[i].port); document.writeln("<dd>Protocol: ",document.links[i].protocol); document.writeln("<dd>Target: ",document.links[i].target); document.writeln("<dd>Pathname: ",document.links[i].pathname); document.writeln("<dd>Search: ",document.links[i].search); };В результате получим все свойства массива links.
Таким образом эти свойства декодируют содержимое ссылки href. Свойство hash возвращает название закладки в вызываемом документе, которое указывается после #. Свойства host и hostname возвращают название хоста в интернете, при этом к значению свойства host добавляется значение порта, которое может быть получено при помощи свойства port. Надо еще отметить, что значение port меняется в зависимости от значения protocol. Например, для протокола FTP значения этих свойств будут следующими: protocol="ftp:", port="21". Свойство pathname возвращает путь к вызываемому документу. search содержит все, что после знака ?. В target будет название фрейма.
У каждого элемента массива изображений все названия свойств, аналогичны всем атрибутам тега <img>.
Приведем простой пример.
С помощью следующего сценария можно посмотреть значения всех наиболее важных свойств изображений:
<SCRIPT language=Javascript> <!-- for (i=0;i<document.images.length;i++){ document.writeln("<dt><b>",document.images[i].src,"</b>"); document.writeln("<dd>Width: ",document.images[i].width); document.writeln("<dd>Height: ",document.images[i].height); document.writeln("<dd>Border: ",document.images[i].border); document.writeln("<dd>Alt: ",document.images[i].alt); }; </SCRIPT>Результат применения этого скрипта имеет вид
document.images[1].width=123; document.images[0].border++;
Событие | Обработчик | Описание |
---|---|---|
Abort | onAbort | Выполняет код JavaScript, когда пользователь прерывает загрузку изображения. |
Blur | onBlur | Выполняет код JavaScript, когда элемент формы теряет фокус ввода или когда окно или фрэйм теряют фокус. |
Change | onChange | Выполняет код JavaScript, когда поля Select, Text или Textarea теряют фокус, а их значения были изменены. |
Click | onClick | Выполняет код JavaScript, когда произведён щелчок по объекту формы. |
DblClick | onDblClick | Выполняет код JavaScript, когда пользователь дважды щёлкнул по элементу формы или по гиперссылке. |
DragDrop | onDragDrop | Выполняет код JavaScript, когда пользователь отпустил (мышью) объект в окне браузера, как при перетаскивании файлов. |
Error | onError | Выполняет код JavaScript, когда загрузка документа или изображения вызвала ошибку. |
Focus | onFocus | Выполняет код JavaScript, когда окно, фрэйм или набор фрэймов получает фокус или когда элемент формы получает фокус ввода. |
KeyDown | onKeyDown | Выполняет код JavaScript, когда пользователь нажимает клавишу клавиатуры. |
KeyPress | onKeyPress | Выполняет код JavaScript, когда пользователь нажимает клавишу клавиатуры и удерживает её в нажатом состоянии. |
KeyUp | onKeyUp | Выполняет код JavaScript, когда пользователь отпускает клавишу клавиатуры. |
Load | onLoad |
Выполняет код JavaScript, когда браузер закончил загрузку документа или всех фрэймов тэга FRAMESET. |
MouseDown | onMouseDown | Выполняет код JavaScript, когда пользователь нажал клавишу мыши. |
MouseMove | onMouseMove | Выполняет код JavaScript, когда пользователь перемещает курсор мышью. |
MouseOut | onMouseOut |
Выполняет код JavaScript, когда указатель мыши покидает область клиентской карты изображений или ссылки. |
MouseOver | onMouseOver |
Выполняет код JavaScript, когда указатель мыши проходит над объектом или областью. |
MouseUp |
onMouseUp | Выполняет код JavaScript, когда пользователь отпускает нажатую клавишу мыши. |
Move | onMove | Выполняет код JavaScript, когда пользователь или скрипт перемещают окно или фрэйм. |
Reset | onReset |
Выполняет код JavaScript, когда пользователь восстанавливает значения полей формы (щёлкает кнопку Reset). |
Resize | onResize |
Выполняет код JavaScript, когда пользователь или скрипт изменяют размеры окна или фрэйма. |
Select | onSelect |
Выполняет код JavaScript, когда пользователь выделяет некоторый текст в поле text или textarea. |
Submit | onSubmit | Выполняет код JavaScript, когда пользователь отправляет форму на сервер. |
Unload | onUnload |
Выполняет код JavaScript, когда пользователь выходит из документа. |
<SCRIPT language=JavaScript> function getListValue(list) { var listValue = ""; if (list.selectedIndex != -1) { listValue = list.options[list.selectedIndex].value; } return (listValue); } function getProperties(obj) { var properties = ""; properties = '<HTML><BODY><TABLE BORDER="2" WIDTH="90%" COLS="2">'; properties += '<TR ALIGN="left" BGCOLOR="lightgrey"><TH>Property</TH><TH>Value</TH></TR>'; for (var propName in obj) { properties +="<TR><TD>"+propName+"</TD><TD>"+obj[propName]+" </TD></TR>"; } properties +="</TABLE></BODY></HTML>"; return properties; } function whichObject(list) { var object = ""; var listValue = getListValue(list); var newWindow = window.open("","","HEIGHT=400,WIDTH=350,status=1,resizable=1,scrollbars=1"); newWindow.document.write("<HTML><HEAD><TITLE>"+listValue+"</TITLE></HEAD></HTML>") switch (listValue) { case "Window": object = window; break; case "Document": object = window.document; break; case "Form": object = window.document.propForm; break; case "Image": object = window.document.someImage; break; case "Link": object = window.document.links; break; case "Navigator": object = navigator; break; } newWindow.document.write(getProperties(object)); newWindow.document.close(); } </SCRIPT> <FORM name=propForm>Oбъект: <SELECT name=objectList> <OPTION value=Window selected>Window <OPTION value=Document>Document <OPTION value=Form>Form <OPTION value=Image>Image <OPTION value=Link>Link <OPTION value=Navigator>Navigator </OPTION></SELECT> <INPUT onclick=whichObject(this.form.objectList) type=button value="Свойства объекта"></FORM> <P> <center> <IMG height=138 alt="ToDay" src="Images/today.jpg" width=171 name=someImage> </CENTER><BR>
<SCRIPT language=javascript> <!-- function firstClc() { alert("First button"); document.frm_Btn.button2.click(); } function secondClc() { alert("Second button"); } //--> </SCRIPT> <FORM name=frm_Btn> <INPUT type="button" value="Первая кнопка" name=button1 onclick="firstClc()"> <INPUT type="button" value="Вторая кнопка" name=button2 onclick="secondClc()"> </FORM>
<SCRIPT language="Javascript"> <!-- function clickIt() { alert("Hello!"); } //--> </SCRIPT> <FORM> <INPUT align=center name=btHello title="Нажми кнопку Hello" type =button value="Hello" onclick="clickIt()"> </FORM>
<SCRIPT language="Javascript"> <!-- function Hi() { var name = frmMy.txtName.value; if (name == "") { alert("Введите имя"); frmMy.txtName,focus; } else {alert("Hello, "+ name + "!");} } //--> </SCRIPT> <FORM name=frmMy> <TABLE cellPadding=1 cellSpacing=1"> <TR> <TD><FONT color=red><STRONG>Введите имя </STRONG></FONT></TD> <TD><INPUT name=txtName></TD> </TR> <TR> <TD><INPUT name=cmdHi onclick="Hi()" value="Жми" type=button> </TD> <TD></TD> </TR> </TABLE> </FORM>
<SCRIPT language="Javascript"> <!-- var counter=0; function show(f) { msg=open ("","","toolbar=no,scrollbars=yes") msg.document.write(f.storage.value) } --> </SCRIPT> <FORM> <INPUT type="hidden" name ="storage" value="<html><head><title>Число нажатий </title></head><body>"> <input type ="button" value ="Нажми клавишу" onclick="counter++;this.form.storage.value += '<H1> Щелчок ' + counter +'</h1>'"> <input type="button" value="info" onclick="show(this.form)"> </form>
Пример
<SCRIPT language="Javascript"> <!-- function flag_result() { var msg=""; if(document.form_flag.Sports.checked) { msg+="Спорт "; } if(document.form_flag.News.checked) { msg+="Новости "; } if(document.form_flag.Weather.checked) { msg+="Погода "; } if(msg=="") { alert("Выбор не сделан"); } else { msg="Вы выбрали " + "\n" + msg; alert(msg); } } //--> </SCRIPT> <FORM name="form_flag" id=frm> <TABLE border=1 width=70%> <TR> <TD width=20%><INPUT type=checkbox id=Sports> Спорт <TD width=20%><INPUT type=checkbox id=News> Новости <TD width=20%><INPUT type=checkbox id=Weather> Погода </TR> </TABLE><BR> <INPUT class=submit type="button" value="Submit" id=btn onclick="flag_result()"> </FORM>
<SCRIPT language="Javascript"> <!-- function per_result() { alert("Вы выбрали " + output_item("Radio_Choose")); } function output_item(name) { for (var i=0;i<3;i++) { if (document.form_per.item(name,i).checked) { return document.form_per.item(name,i).value; } } } //--> </SCRIPT> <FORM name="form_per" > <TABLE border=1 width=70%> <TR> <TD width=20%><INPUT type= radio checked name="Radio_Choose" value ="Sports"> Спорт <TD width=20%><INPUT type= radio checked name="Radio_Choose" value="News"> Новости <TD width=20%><INPUT type= radio checked name="Radio_Choose" value="Weather"> Погода </TR> </TABLE><BR> <INPUT class=submit type="button" value="Submit" id=btn onclick="per_result()"> </FORM>
<SCRIPT language="Javascript"> <!-- function Select_result() { var msg=""; var n=form_Select.punkt.length; for(var i=0;i<n;i++) { if(form_Select.punkt.options[i].selected) { msg+=form_Select.punkt.options[i].value + ";" +form_Select.punkt.options[i].text; } } alert(msg); } //--> </SCRIPT> <FORM name="form_Select" > <SELECT name="punkt" multiple size=3> <OPTION value =1 >Спорт <OPTION value =2 >Новости <OPTION value =3 >Погода </SELECT> <INPUT type="button" value="Выбор" onclick="Select_result()"> </FORM>
<SCRIPT language="Javascript"> <!-- function Multi_Select_result() { var idx=form_Multi.punkt1.selectedIndex; alert("Вы выбрали "+form_Multi.punkt1.options[idx].text); } //--> </SCRIPT> <FORM name="form_Multi" > Сделайте свой выбор <br> <SELECT name="punkt1" size="1" onchange="Multi_Select_result()"> <OPTION selected value ="Sports" >Спорт</OPTION> <OPTION selected value ="News" >Новости </OPTION> <OPTION selected value ="Weather" >Погода </OPTION> </SELECT> </FORM>
Синтаксис <TEXTAREA accesskey=key align=absbotton | absmiddle | baseline | bottom | left | middle | right | texttop | top class=classname cols=n datafld=colname datasrc=#id disabled id=value lang=language language=javascript | jscript | vbscript name=name readonly rows=n style tabindex=n title=string wrap= off | phisical | virtual evant =script >Здесь name -имя элемента управления, cols и rows ширина и высота многострочного поля ввода в символах, wrap - признак переноса слов. Допустимые значения off (не переносятся, используется по умолчанию), phisical (слова переносятся как на экране, так и при передаче данных серверу), virtual (слова переносятся только на экране).
<SCRIPT language="Javascript"> <!-- function clear_Area() { document.form_area.textarea.value =""; } function Input_Area() { var str = document.form_area.text.value + "\n"; document.form_area.textarea.value =document.form_area.textarea.value+str; } //--> </SCRIPT> <FORM name="form_area" > <INPUT type="text" name="text"> <INPUT type ="button" value="Добавить" onclick="Input_Area()"> <INPUT type ="button" value="Очистить" onclick="clear_Area()"> <BR> <TEXTAREA name="textarea" cols=20 rows=5 disabled> </TEXTAREA> </FORM>
<SCRIPT language="Javascript"> <!-- function DatePasswort() { if (document.form_pass.password.value == "Пароль") alert("Заходи"); else alert("Пароль не верен"); } //--> </SCRIPT> <FORM name="form_pass" > <INPUT type="password" name=password> <INPUT type ="button" value="Ввод" onclick="DatePasswort()"> </FORM>
Имя | ||
Полученные данные |
<SCRIPT language="Javascript"> <!-- function sendIt() { var send=txtName.value; var receive=window.showModalDialog('Input.html', send, 'dialogHeight:12; dialogWidth:20'); txtReceive.value=""; txtReceive.value=receive; } //--> </SCRIPT> <TABLE> <TR> <TD>Имя <TD><INPUT id=txtName type=TextBox> <TD><INPUT type=button id=cmdInput onclick="sendIt()" value="Ввод"> </TR> <TR>Код страницы Input.html следующий
<html> <head> <title> Окно ввода </title> <script language=JavaScript> <!-- function init() { frmInput.txtName.value=window.dialogArguments; } function sendItBack() { var goBack=frmInput.txtEMail.value; goBack +="\n"+ frmInput.txtMessage.value; if (goBack != null) { window.returnValue=goBack } window.event.returnValue=false window.close() } //--> </script> </head> <body style="background: lightgray"; align: left" onLoad="init()"> <form id=frmInput> <table> <tr> <td>Имя <td><input id=txtName> </tr> <tr> <td>E-mail <td><input id=txtEMail> </tr> <tr> <td> Сообщение <td><textarea id=txtMessage></textarea> </tr> <tr> <td> <td><input type= button value=" OK " onclick="sendItBack()"> </tr> </table> </form> </body> </html>
При переходе на новую страницу возможна передача данных, которая может быть реализована синтаксисом тега <A>
<A href="pagename.html?param1=value1 & param2=value2 & ...">где param1,param2 имена передаваемых параметров, value1,value2 их значения. Получить передаваемые значения можно свойством search объекта location, которое возвращает передаваемую строку по гиперссылке.
Пример. Первый вариант и Второй вариант Вызывающая строка имеет вид
<A href="main.html?color='silver'">Первый вариант</A> и <A href="main.html?color='lightgreen'">Второй вариант</A>Скрипт в вызываемой странице.
<SCRIPT language="Javascript"> <!-- var query = new String(document.location.search); var n = query.length; query =query.substring(8,n-1); document.writeln(query); document.bgColor=query; document.close(); //--> </SCRIPT>
fileObjectName = new File("path");Здесь fileObjectName это имя, по которому обращаемся к файлу, а path это полный путь к файлу. Этот path должен быть в формате серверной файловой системы, а не URL.
result = fileObjectName.open("mode");Это метод возвращает true, если операция прошла успешно, и false в ином случае. Если файл уже открыт, операция терпит неудачу, и оригинальный файл остаётся открытым. Параметр mode это строка, специфицирующая режим открытия файла.
Режим | Описание |
---|---|
r | Открывает файл, если он существует, как текстовый файл для чтения и возвращает true. Если файл не существует, возвращает false. |
w | Открывает файл как текстовый файл для записи. Создает новый (первоначально пустой) текстовый файл, независимо от того, существует файл или нет. |
a | Открывает файл как текстовый файл для дополнения (записи в конец файла). Если файл ещё не существует, создает его. |
r+ | Открывает файл как текстовый файл для чтения и записи. Чтение и запись начинаются в начале файла. Если файл существует, возвращает true. Если не существует, возвращает false. |
w+ | Открывает файл как текстовый файл для чтения и записи. Создает новый (первоначально пустой) текстовый файл, независимо от того, существует файл или нет. |
a+ | Открывает файл как текстовый файл для чтения и записи. Чтение и запись начинаются в конце файла. Если файл не существует, создает его. |
b | Если присоединен к одному из вышеуказанных режимов, открывает файл как бинарный/двоичный файл, а не как текстовый. Применяется только для операционных систем Windows. |
Когда приложение заканчивает использование файла, оно может закрыть его, вызвав метод close. Если файл не открыт, close терпит неудачу. Этот метод возвращает true при успехе и false - в противном случае. Часто доступ ко многим приложениям могут выполнять одновременно многие пользователи. Вообще разные пользователи не должны пытаться одновременно вносить изменения в файлы, поскольку это может привести к непредсказуемым ошибкам. Чтобы предотвратить модификацию файла одновременно несколькими пользователями, можно использовать один из механизмов блокирования. Например, у нас создан файл myFile. Затем можно использовать его следующим образом:
if ( project.lock() ) { myFile.open("r"); // ... файл используется ... myFile.close();> project.unlock(); }Таким образом, только один пользователь приложения может изменять файл в данный момент времени. Для более тонкого управления блокировкой можно создать собственный экземпляр класса Lock для управления доступом к данному файлу.
Класс File имеет несколько методов, которые можно использовать после открытия файла:
Метод setPosition позиционирует указатель в файле, возвращая true при успехе и false - в ином случае.
fileObj.setPosition(position); fileObj.setPosition(position, reference);Здесь fileObj это File -объект, position это целое число, указывающее позицию указателя, а reference указывает относительную точку для position таким образом:
Метод getPosition возвращает текущую позицию в файле, где первый байт файла это всегда байт 0. Этот метод возвращает -1, если имеется ошибка.
fileObj.getPosition();Метод eof возвращает true, если указатель находится в конце файла, и false - в ином случае. Этот метод возвращает true после первой операции чтения, которая пытается прочесть после конца файла.
fileObj.eof();
Метод read читает специфицированное количество байтов из файла и возвращает строку.
fileObj.read(count);Здесь fileObj это File -объект, а count это целое число, специфицирующее количество байтов для чтения. Если count специфицирует больше байтов, чем осталось в файле, метод читает до конца файла.
Метод readln читает следующую строку файла и возвращает её как строку.
fileObj.readln();Здесь fileObj это File -объект. Символы-разделители строк (\r\n в Windows или просто \n в Unix или Macintosh) не включаются в строку. Символ \r пропускается; \n определяет действительный конец строки. Этот компромисс даёт осмысленное поведение на всех платформах.
Метод readByte читает следующий байт из файла и возвращает числовое значение следующего байта или -1.
fileObj.readByte();
Метод write записывает строку в файл. В случае успеха операции возвращает true и false - в ином случае.
fileObj.write(string);Здесь fileObj это File -объект, в string это строка JavaScript.
Метод writeln записывает сроку в файл и вводит последующие \n (\r\n в текстовом режиме Windows). Возвращает true при успешном выполнении записи и false - в ином случае.
fileObj.writeln(string);Метод writeByte записывает байт в файл. Возвращает true в случае успеха и false - в противном случае.
fileObj.writeByte(number);Здесь fileObj это File -объект, а number это число.
Когда используются один из этих методов, содержимое файла внутренне буферизуется. Метод flush записывает буфер в файл на диске. Этот метод возвращает true в случае успеха и false - в противном случае.
fileObj.flush();Есть два основных формата файлов : ASCII-текст и бинарный. Методы byteToString и stringToByte класса File конвертируют данные этих форматов.
Метод byteToString конвертирует число в односимвольную строку. Это static-метод. Вы можете использовать класс File сам по себе, а не его экземпляр, для вызова этого метода.
File.byteToString(number);Если аргумент - не число, метод возвращает пустую строку.
Метод stringToByte конвертирует первый символ своего аргумента, строку, в число.
File.stringToByte(string);Метод возвращает числовое значение первого символа или 0.
Можно использовать несколько методов класса File для получения информации о файлах и работы с error-статусом.
Метод getLength возвращает число символов в текстовом файле или количество байтов в любом другом файле. Возвращает -1, если возникла ошибка.
fileObj.getLength();Метод exists возвращает true, если файл существует, и false - в ином случае.
fileObj.exists();Метод error возвращает статус ошибки или -1, если файл не открыт или не может быть открыт. Статус ошибки/error status это ненулевое значение, если ошибка возникла, и 0 в ином случае (нет ошибки).
Следующий код создаёт экземпляр класса File, открывает его для чтения и генерирует HTML, отражающий строки файла, с разделительной линией после каждой строки.
x = new File("\tmp\names.txt"); fileIsOpen = x.open("r"); if (fileIsOpen) { write("file name: " + x + "<BR>"); while (!x.eof()) { line = x.readln(); if (!x.eof()) write(line+"<br>"); } if (x.error() != 0) write("error reading file" + "<BR>"); x.close(); }
В данном разделе рассмотрим объекты обеспечивающие JScript возможность работы с файловой системой.
Отметим, что для создания нового объекта ActiveXObject его нужно связать с объектной переменной
var ExcelSheet; ExcelApp = new ActiveXObject("Excel.Application"); ExcelSheet = new ActiveXObject("Excel.Sheet");
Данный код создает объект (в данном случае лист Microsoft Excel) и обеспечивает доступ к нему.
// Установить видимым Excel используя объект Application. ExcelSheet.Application.Visible = true; // Запись текста в первую ячейку первого листа ExcelSheet.ActiveSheet.Cells(1,1).Value = "Это столбец A, строка 1"; // Сохранение листа ExcelSheet.SaveAs("C:\\TEST.XLS"); // Закрывает Excel используя метод Quit посредством объекта Application. ExcelSheet.Application.Quit();Создание объекта на удаленном сервере может только выполнено когда режим "безопасность Internet" выключен. Можно создать объект на удаленном сетевом компьютере передавая имя компьютера в аргумент servername ActiveXObject. Например, в случае сетевой папки названной "\\myserver\public", servername - "myserver". Кроме того, можно определить servername используя формат DNS или адрес IP.
Пример function GetAppVersion() { var XLApp = new ActiveXObject("Excel.Application", "MyServer"); return(XLApp.Version); }
function ShowFreeSpace(drvPath) { var fso, d, s; fso = new ActiveXObject("Scripting.FileSystemObject"); d = fso.GetDrive(fso.GetDriveName(drvPath)); s = "Drive " + drvPath + " - " ; s += d.VolumeName + "
"; s += "Free Space: " + d.FreeSpace/1024 + " Kbytes"; return(s); }
Обеспечивает доступ ко всем свойствам папки.
function ShowFolderInfo(folderspec) { var fso, folder, s; fso = new ActiveXObject("Scripting.FileSystemObject"); folder = fso.GetFolder(folderspec); s = folder.DateCreated; return(s); }
Название | Индекс |
---|---|
папка Windows | 0 |
Системная папка | 1 |
Временные файлы | 2 |
var fso, tempfile; fso = new ActiveXObject("Scripting.FileSystemObject"); function CreateTempFile() { var tfolder, tfile, tname, fname, TemporaryFolder = 2; tfolder =fso.GetSpecialFolder(
TemporaryFolder)
; tname = fso.GetTempName(); tfile = tfolder.CreateTextFile(tname); return(tfile); } tempfile = CreateTempFile(); tempfile.writeline("Hello World"); tempfile.close();
Обеспечивает доступ ко всем свойствам файла.
function ShowFileInfo(filespec) { var fso, f, s; fso = new ActiveXObject("Scripting.FileSystemObject"); f = fso.GetFile(filespec); s = f.DateCreated; return(s); }
function GetBuildPath(path) { var fso, newpath; fso = new ActiveXObject("Scripting.FileSystemObject"); newpath = fso.BuildPath(path, "New Folder"); return(newpath); }
function ShowParentFolderName(filespec) { var fso, s = ""; fso = new ActiveXObject("Scripting.FileSystemObject"); s += fso.GetParentFolderName(filespec); return(s); }
Предположим, текущая директория - c:\mydocuments\reports, следующая таблица иллюстрирует поведение метода GetAbsolutePathName.
pathspec | Возвращаемый путь |
---|---|
"c:" | "c:\documents\reports" |
"c:.." | "c:\documents" |
"c:\\" | "c:\" |
"c:*.*\\examples" | "c:\documents\reports\*.*\examples" |
"docs" | "c:\documents\reports\docs" |
"c:\\..\\..\\mydocuments" | "c:\documents" |
function ShowAbsolutePath(path) { var fso, s= ""; fso = new ActiveXObject("Scripting.FileSystemObject"); s += fso.GetAbsolutePathName(path); return(s); }
function ShowFileAccessInfo(filespec) { var fso, f, s; fso = new ActiveXObject("Scripting.FileSystemObject"); f = fso.GetFile(filespec); s = f.Path.toUpperCase() + "
"; s += "Created: " + f.DateCreated + "
"; s += "Last Accessed: " + f.DateLastAccessed + "
"; s += "Last Modified: " + f.DateLastModified return(s); }
var fso = new ActiveXObject("Scripting.FileSystemObject"); var a = fso.CreateTextFile("c:\\testfile.txt", true); a.WriteLine("This is a test."); a.Close();В коде примера, объект ActiveXObject назначен на FileSystemObject (fso). Метод CreateTextFile создает файл как объект TextStream (a), и метод WriteLine записывает строку текста в созданный текстовый файл. Закрытие метода сбрасывает буфер и закрывает файл.
function ReportFileStatus(filespec) { var fso, s = filespec; fso = new ActiveXObject("Scripting.FileSystemObject"); if (fso.FileExists(filespec)) s += " exists."; else s += " doesn't exist."; return(s); }
var fso = new ActiveXObject("Scripting.FileSystemObject"); var a = fso.CreateTextFile("c:\\testfile.txt", true); a.WriteLine("This is a test."); a.Close();
iomode argument может принимать значения:
ForReading 1 Открыт только для чтения.
ForWriting 2 Открыт для записи. Если файл с таким именем существует, то перезаписывается.
ForAppending 8 Открыт для дозаписи в конец файла.
format argument:
Default -2 Системный файл.
True -1 Unicode.
False 0 ASCII.
function TextStreamTest( ) { var fso, f, ts, s; var ForReading = 1, ForWriting = 2, ForAppending = 8; var TristateUseDefault = -2, TristateTrue = -1, TristateFalse = 0; fso = new ActiveXObject("Scripting.FileSystemObject"); fso.CreateTextFile( "test1.txt" ); // Создать файл. f = fso.GetFile("test1.txt"); ts = f.OpenAsTextStream(ForWriting, TristateUseDefault); ts.Write( "Hello World" ); ts.Close( ); ts = f.OpenAsTextStream(ForReading, TristateUseDefault); s = ts.ReadLine( ); ts.Close( ); return(s); }
Properties AtEndOfLine| AtEndOfStream | Column | Line Methods Close | Read | ReadAll| ReadLine| Skip | SkipLine | Write| WriteBlankLines| WriteLineВ следующем коде - объект TextStream возвращанный методом CreateTextFile на FileSystemObject:
var fso = new ActiveXObject("Scripting.FileSystemObject"); var a = fso.CreateTextFile("c:\\testfile.txt", true); a.WriteLine("This is a test."); a.Close();Свойство AtEndOfLine относится только к файлам TextStream открытым для чтения. Возвращается true если файловый указатель позиционируется перед концом строки в файле TextStream и false в противном случае.
function GetALine(filespec) { var fso, a, s, ForReading; ForReading = 1, s = ""; fso = new ActiveXObject("Scripting.FileSystemObject"); a = fso.OpenTextFile(filespec, ForReading, false); while (!a.AtEndOfLine) { s += a.Read(1); } a.Close( ); return(s); }Свойство AtEndOfStream относится только к файлам TextStream, которые открыты для чтения. Возвращается верно если файловый указатель - в конце файла TextStream и ложь в противном случае.
function GetALine(filespec) { var fso, f, s, ForReading; ForReading = 1, s = ""; fso = new ActiveXObject("Scripting.FileSystemObject"); f = fso.OpenTextFile(filespec, ForReading, false); while (!f.AtEndOfStream) s += f.ReadLine( ); f.Close( ); return(s); }Свойство Column возвращает номер столбца текущей символьной позиции в файл TextStream. Line Property возвращает текущий номер строки.
function GetLine() { var fso, f, r var ForReading = 1, ForWriting = 2; fso = new ActiveXObject("Scripting.FileSystemObject") f = fso.OpenTextFile("c:\\textfile.txt", ForWriting, true) f.WriteLine("Hello world!"); f.WriteLine("JScript is fun"); f.Close(); f = fso.OpenTextFile("c:\\textfile.txt", ForReading); r = f.ReadAll(); return(f.Line); }
Строка записывается без разделителей. Для записи строки с символом окончания строки следует использовать WriteLine.
function WriteDemo() { var fso, f, r var ForReading = 1, ForWriting = 2; fso = new ActiveXObject("Scripting.FileSystemObject") f = fso.OpenTextFile("c:\\testfile.txt", ForWriting, true) f.Write("Hello world!"); f.Close(); f = fso.OpenTextFile("c:\\testfile.txt", ForReading); r = f.ReadLine(); return(r); }
var fso, f; fs*o = new ActiveXObject("Scripting.FileSystemObject"); f = fso.CreateTextFile("c:\\testfile.txt", true); f.WriteLine("This is a test."); f.Close();
function WriteBlanksDemo() { var fso, f, r; var ForReading = 1, ForWriting = 2; fso = new ActiveXObject("Scripting.FileSystemObject"); f = fso.OpenTextFile("c:\\testfile.txt", ForWriting, true); f.Write("Hello world!"); f.WriteBlankLines(2); f.Write("JScript is fun!"); f.Close(); f = fso.OpenTextFile("c:\\testfile.txt", ForReading); r = f.ReadAll(); return(r); }
function GetHeader() { var fso, f; var ForReading = 1, ForWriting = 2; fso = new ActiveXObject("Scripting.FileSystemObject"); f = fso.OpenTextFile("c:\\testfile.txt", ForWriting, true); f.Write("Header"); f.Write("1234567890987654321"); f.Close(); f = fso.OpenTextFile("c:\\testfile.txt", ForReading); return(f.Read(6)); }
function GetLine() { var fso, f, r; var ForReading = 1, ForWriting = 2; fso = new ActiveXObject("Scripting.FileSystemObject"); f = fso.OpenTextFile("c:\\testfile.txt", ForWriting, true); f.WriteLine("Hello world!"); f.WriteLine("JScript is fun"); f.Close(); f = fso.OpenTextFile("c:\\testfile.txt", ForReading); r = f.ReadLine(); return(r); }
function SkipLineDemo() { var fso, f, r var ForReading = 1, ForWriting = 2; fso = new ActiveXObject("Scripting.FileSystemObject") f = fso.OpenTextFile("c:\\testfile.txt", ForWriting, true) f.WriteLine("Hello world!"); f.WriteLine("JScript is fun"); f.Close(); f = fso.OpenTextFile("c:\\testfile.txt", ForReading); f.SkipLine(); r = f.ReadLine(); return(r); }Приведем пример JScripta, регистрирующего дату и время последнего нажатия клавиши. Информация о последнем нажатии сохраняется в файле tmp.txt, находящегося в корневом каталоге диска D.
<SCRIPT Language="Jscript"> <!-- function JSInputPage() { window.location.href="RWFJS.html"; } //--> </SCRIPT> <FORM NAME="InputPage"> <INPUT TYPE="button" VALUE="Нажми" onClick="JSInputPage()"> </FORM>Файл RWFJS.html
<html> <head> <title>Использование файловой системы </Title> <SCRIPT language="JScript"> <!-- var ForReading = 1, ForWriting = 2, f,r; var fso = new ActiveXObject("Scripting.FileSystemObject"); if (fso.FileExists("d:\\tmp.txt")) { f = fso.OpenTextFile("d:\\tmp.txt", ForReading); r = f.ReadLine(); f.Close(); }; else { r= "Файл не существует"; f = fso.CreateTextFile("d:\\tmp.txt", true); } document.write(r); r = " Последнее нажатие кнопки <b>" + new Date()+ "</b>"; f = fso.OpenTextFile("d:\\tmp.txt", ForWriting, true); f.Write(r); f.Close(); //--> </SCRIPT> </head> </html>
<script language="JScript"> function WindowsDir() { var fso, e, file; fso = new ActiveXObject("Scripting.FileSystemObject"); e = new Enumerator(fso.GetFolder("c:\\windows").files); for (e.moveFirst(); ! e.atEnd(); e.moveNext()) { file = e.item(); document.write(file.name+'<br>'); } } </script> <FORM name=WinDir> <INPUT type="button" value="Список файлов в папке Windows" name=button onclick="WindowsDir()"> </FORM>
<html> <head> <SCRIPT language="Jscript"> <!-- var tmr; var count=0; var step = 1; function startGlow() { tmr=window.setInterval("Glow()",100); } function destroy() { clearInterval(tmr); } function Glow() { msgGlow.filters.Glow.strength=count; count+=step; if ((count<=0)||(count>=10)){step=-step;} } //--> </SCRIPT> </head> <body bgColor=aqua onload="startGlow()" onbeforeunload="destroy()"> <div id="msgGlow" style="position:absolute; top:0; left:0; font-size:60px;font-weight:bold;color:snow; filter:Glow(Color=#FF0000,strength=3)"> Ореол </div></body> </html>Параметр
filter
атрибута style
позволяет реализовать эффекты плавной смены изображений, растворение одного изображения в другом и др.
Синтаксис
{filter: revealTrans(duration=n)}с указанием параметра
Transition
.
duration
временной интервал перехода имеющий формат seconds.milliseconds (0.000).
transition
-целое число от 0 до 23 задающее тип эффекта.
0 | Box in. | Прямоугольник внутрь. |
1 | Box out. | Прямоугольник наружу. |
2 | Circle in. | Окружность внутрь. |
3 | Circle out. | Окружность наружу. |
4 | Wipe up. | Стирание вверх. |
5 | Wipe down. | Стирание вниз. |
6 | Wipe right. | Стирание вправо. |
7 | Wipe left. | Стирание влево. |
8 | Vertical blinds. | Вертикальные жалюзи. |
9 | Horizontal blinds. | Горизонтальные жалюзи. |
10 | Checkerboard across. | Клетки поперек. |
11 | Checkerboard down. | Клетки вниз. |
12 | Random dissolve. | Случайное растворение. |
13 | Split vertical in. | Задергивающие вертикальные шторы. |
14 | Split vertical out. | Открывающиеся вертикальные шторы. |
15 | Split horizontal in. | Задергивающие горизонтальные шторы. |
16 | Split horizontal out. | Открывающиеся горизонтальные шторы. |
17 | Strips left down. | Углом влево вниз. |
18 | Strips left up. | Углом влево вверх. |
19 | Strips right down. | Углом вправо вниз. |
20 | Strips right up. | Углом вправо вверх. |
21 | Random bars horizontal. | Случайные горизонтальные полосы. |
22 | Random bars vertical. | Случайные вертикальные полосы. |
23 | Random. | Случайно. |
Приведем пример использования такого рода эффектов.
<img id="Bild" src="Images/yesterday.jpg" style="filter:revealTrans(Duration=3)" width=100 height=86> <p> <div id="eggs"></div> <script language="JavaScript"> <!-- x=new Array(10); x[0]="Images/yesterday.jpg"; x[1]="Images/today.jpg"; var n = 0,t,tr=1; function MyFilter() { Bild.filters.revealTrans.Apply(); Bild.src = x[n]; Bild.filters.revealTrans.Transition=tr; Bild.filters.revealTrans.Play(); eggs.innerHTML="Transition= "+tr; if(tr<23)tr++; else tr=0; if(n<1)n++; else n=0; t=setTimeout("MyFilter()",3000); } MyFilter(); //--> </script>
Для реализации эффекта растворения рисунка или текста служит параметр blendTrans
. Приведем пример.
<img id="BildFilter" src="Images/yesterday.jpg" style="filter:blendTrans(Duration=1)" width=100 height=86> <div id="Text" align=center style="width:200px; font-size:24pt; filter:blendTrans(Duration=0.6)"> </div> <script language="JavaScript"> <!-- x=new Array(10); x[0]="Images/yesterday.jpg"; x[1]="Images/today.jpg"; x[2]="Images/tomorrow.jpg"; y=new Array(10); y[0]="Вчера"; y[1]="Сегодня "; y[2]="Завтра"; var m = 0; function ImText() { BildFilter.filters.blendTrans.Apply(); BildFilter.src = x[m]; BildFilter.filters.blendTrans.Play(); Text.filters.blendTrans.Apply(); Text.innerText = y[m]; Text.filters.blendTrans.Play(); if(m<2)m++; else m=0; t=setTimeout("ImText()",3000); } ImText(); //--> </script>