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>
Массивы объектов в Javascript.
Из всего документа браузер создает несколько массивов объектов:
- Массив форм документа - forms.
- Массив элементов формы - elements.
- Массив элементов для выбора тега <select> - options.
- Массив изображений документа - images.
- Массив якорей документа - anchors.
- Массив гиперссылок документа - links.
Каждый такой массив содержит в себе все соответствующие элементы документа. Нумерация в массивах начинается с 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.
Каждая форма содержит много параметров, например, method, name, action, encoding, target. Ко всем этим параметрам можно обращаться из сценария JavaScript. Для этого следует дописать к полному имени формы название этого параметра.
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++;
Обработчики событий JavaScript
В следующей таблице дано резюме по обработчикам событий. Имя обработчика события состоит из имени события с предшествующим "on." Например, обработчик для события focus называется onFocus.
| Событие | Обработчик | Описание |
|---|---|---|
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>
Программная генерация событий
В JavaScript имеется группа методов (blur(), click(), focus(),scrollInfoView(),select()), позволяющие программно обрабатывать события. Например,событие onclick, генерируемое нажатием кнопки, можно вызвать методом click(). Например
<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>
Использование JavaScript в элементах управления.
Всплывающая подсказка
<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>
Использование скрытого поля ввода
Значение атрибута type=hidden позволяет создать скрытое поле ввода для хранения промежуточной информации. В следующем примере используя скрытое поле ввода, программы вычисляет число нажатий кнопки.
<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>
Флажок
Основным свойством флажка является checked, которое возвращает true при установленном флажке и false при сброшенном.Пример
<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>
Переключатель
Для того чтобы реализовать возможность выбора одного элемента из группы, их следует объединить с одним и тем же значением атрибута name. Различаться они будут либо по значению атрибута id, либо по порядковому номеру в группе, начиная с нуля. Значение возвращаемое выбранным переключателем устанавливается атрибутом value. Для определения выбранного переключателя лучше использовать цикл, а для использования конкретного переключателя использовать свойство item([name] [, index]), которое возвращает элемент с указанным значением атрибута name и данным значением индекса.
<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> создает многострочное поле ввода.
Синтаксис
<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>
Поле ввода пароля
Поле ввода пароля создается при помощи тега <INPUT> при значении атрибута type=passport. Замечу, что реально пароли не включаются в код страницы, лежат в базе сервера.
<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>
Обмен данными
Метод prompt() позволяет вводить простую информацию, для больших массивов этот метод плохо подходит. С этой целью с помощью модального окна создают пользовательское окно ввода. При этом следует обеспечить обмен данными между основным окном и пользовательским окном данных.| Имя | ||
| Полученные данные |
<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>
Работа с файлами в JavaScript 1.4
JavaScript 1.4 (если используется IE (не поддерживающий расширенные возможности JavaScript 1.4), то для работы с файлами можно использовать аналогичные функции VBScript или JScript) предоставляет класс File, который даёт приложению возможность записывать в файловой системе сервера. Это используется для генерации постоянных HTML-файлов и хранения информации без использования сервера БД. Одним из важнейших преимуществ хранения информации в файле вместо JavaScript-объектов является то, что информация сохраняется даже при отказе сервера. Чтобы создать экземпляр класса File, используйте стандартный синтаксис JavaScript для создания объекта:fileObjectName = new File("path");
Здесь fileObjectName это имя, по которому обращаемся к файлу, а path
это полный путь к файлу. Этот path должен быть в формате серверной файловой
системы, а не URL.
После создания File -объекта можно использовать метод open для открытия файла и чтения и записи. Метод open имеет следующий синтаксис:
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, getPosition, eof. Это методы для установки и получения текущей позиции указателя в файле и для определения, не находится ли указатель в конце файла.
- Чтение из файла: read, readln, readByte.
- Запись в файл: write, writeln,writeByte, flush.
- Конвертация двоичного и текстового форматов: byteToString, stringToByte. Конвертируют одно число в символ и наоборот.
- Информационные методы: getLength, exists,error, clearError. Для получения информации о файле и для получения и очистки error-статуса.
Позиционирование внутри файла
Физический файл, ассоциированный с File -объектом, имеет указатель текущей позиции в файле. Когда Вы открываете файл, указатель находится в начале либо в конце файла, в зависимости от режима, использованного при открытии файла. В пустом файле начало и конец файла это одна точка.Метод setPosition позиционирует указатель в файле, возвращая true при успехе и false - в ином случае.
fileObj.setPosition(position); fileObj.setPosition(position, reference);Здесь fileObj это File -объект, position это целое число, указывающее позицию указателя, а reference указывает относительную точку для position таким образом:
- 0: относительно начала файла
- 1: относительно текущей позиции
- 2: относительно конца файла
- Иное (или unspecified): относительно начала файла
Метод getPosition возвращает текущую позицию в файле, где первый байт файла это всегда байт 0. Этот метод возвращает -1, если имеется ошибка.
fileObj.getPosition();Метод eof возвращает true, если указатель находится в конце файла, и false - в ином случае. Этот метод возвращает true после первой операции чтения, которая пытается прочесть после конца файла.
fileObj.eof();
Чтение из файла
Для этого используются методы read, readln и readByte для чтения из файла.Метод 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, writeln, writeByte и flush.Метод 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
Как было отмечено выше, возможности JavaScript 1.4 не реализованы в полном объеме фирмой Microsoft при разработке Internet Explorer. Вместо этого, в Internet Explorer реализована версия JavaScript с расширенными возможностями -JScript.В данном разделе рассмотрим объекты обеспечивающие JScript возможность работы с файловой системой.
ActiveXObject Object
Создает ссылку на объект ActiveX newObj = new ActiveXObject(servername.typename[, location])Arguments
newObj - имя переменной поставленной в соответствие ActiveXObject.
servername - имя приложения.
typename -тип или класс создаваемого объекта.
location (не обязательный аргумент) имя сетевого сервера, на котором будет создан объект.
Отметим, что для создания нового объекта 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);
}
Drive Object
Обеспечивает доступ к свойствам дисковода.
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);
}
Folder Object
PropertiesAttributes | DateCreated | DateLastAccessed | DateLastModified | Drive | Files | IsRootFolder | Name | ParentFolder | Path | ShortName | ShortPath | Size | SubFolders | Type
Обеспечивает доступ ко всем свойствам папки.
function ShowFolderInfo(folderspec)
{
var fso, folder, s;
fso = new ActiveXObject("Scripting.FileSystemObject");
folder = fso.GetFolder(folderspec);
s = folder.DateCreated;
return(s);
}
GetSpecialFolder Method
Метод позволяет определять путь к специальным папкам.
| Название | Индекс |
|---|---|
| папка 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();
File Object
PropertiesAttributes | DateCreated | DateLastAccessed | DateLastModified | Drive | Name | ParentFolder | Path | ShortName | ShortPath | Size | Type
Обеспечивает доступ ко всем свойствам файла.
function ShowFileInfo(filespec)
{
var fso, f, s;
fso = new ActiveXObject("Scripting.FileSystemObject");
f = fso.GetFile(filespec);
s = f.DateCreated;
return(s);
}
BuildPath Method
Определяет путь к файлу.object.BuildPath(path, name)
function GetBuildPath(path)
{
var fso, newpath;
fso = new ActiveXObject("Scripting.FileSystemObject");
newpath = fso.BuildPath(path, "New Folder");
return(newpath);
}
GetParentFolderName Method
Возвращает строку с именем родительской директории последнего компонента. Если родительской папки нет, возвращает строку нулевой длины "".object.GetParentFolderName(path)
function ShowParentFolderName(filespec)
{
var fso, s = "";
fso = new ActiveXObject("Scripting.FileSystemObject");
s += fso.GetParentFolderName(filespec);
return(s);
}
GetAbsolutePathName Method
Возвращает полный путь.object.GetAbsolutePathName(pathspec)
Предположим, текущая директория - 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);
}
GetFile Method
Возвращает путь к файлуobject.GetFile(filespec)
Arguments
object Required. Всегда FileSystemObject.
filespec файл
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);
}
FileSystemObject Object
Обеспечивает доступ к файловой системе. Следующий кода иллюстрирует как FileSystemObject может быть использован, чтобы возвращать объект TextStream, для чтения или записи
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 записывает строку текста в
созданный текстовый файл. Закрытие метода сбрасывает буфер и закрывает файл.
FileExists Method
Проверяет наличие заданного файла.object.FileExists(filespec)
Arguments
object Всегда имя FileSystemObject.
filespec имя файла
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);
}
CreateTextFile Method
Создает файловое имя и возвращает TextStream object для чтения или записи.object.CreateTextFile(filename[, overwrite[, unicode]])
Arguments
object - всегда имя FileSystemObject или Folder object.
filename - строка имени файла.
overwrite (дополнительный аргумент) - тип Boolean. Указывает может ли существующий файл быть перезаписан (true0 может, false- нет)
unicode - Boolean (True- Unicode, False - ASCII). По умолчанию стоит ASCII.
var fso = new ActiveXObject("Scripting.FileSystemObject");
var a = fso.CreateTextFile("c:\\testfile.txt", true);
a.WriteLine("This is a test.");
a.Close();
OpenAsTextStream Method
Открывает файл для чтения, записи и дозаписи.object.OpenAsTextStream([iomode, [format]])
Arguments
object - Всегда имя File object.
iomode - Режим. Может принимать значения: ForReading, ForWriting, или ForAppending.
format (дополнительный) по умолчанию ASCII.
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);
}
TextStream Object
Обеспечивает последовательный доступ к файлу. TextStream.{property | method( )}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);
}
Write Method
object.Write(string)Записывает строку string в файл TextStream.
object - Всегда имя объекта TextStream.
Строка записывается без разделителей. Для записи строки с символом окончания строки следует использовать 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);
}
WriteLine Method
object.WriteLine([string])Производит запись строки с символом окончния строки в TextStream файл.
var fso, f;
fs*o = new ActiveXObject("Scripting.FileSystemObject");
f = fso.CreateTextFile("c:\\testfile.txt", true);
f.WriteLine("This is a test.");
f.Close();
WriteBlankLines Method
object.WriteBlankLines(lines)Записывает симвод окончания строки в определенную строку
Arguments
object - всегда TextStream object.
lines -номер строки, в которую ставится символ окончания строки
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);
}
Read Method
Чтение указанного символа из TextStream файла.object.Read(characters)
Arguments
object - имя TextStream object.
characters - номер символа который следует прочитать из файла.
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));
}
ReadLine Method
Чтение строки из TextStream file.object.ReadLine( )
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);
}
SkipLine Method
Переход к следующей строчке при чтении TextStream file.object.SkipLine( )
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>
Объект Enumerator.
Объект Enumerator. Обеспечивает перечисление членов совокупности.Синтаксис
new Enumerator(collection)
Параметр collection - любой объект совокупности. Совокупности отличаются от массивов тем, что члены совокупности не доступны непосредственно. Вместо использования индексации, как в массивах, можно только перемещать текущий указатель на элемент к первому или следующему элементу коллекции.
Объект Enumerator имеет следующие методы
- Метод moveFirst сбрасывает текущий элемент совокупности на первый элемент. Если в совокупности нет элементов, то текущий элемент устанавливается как undefined.
- Метод item возврщает текущий элемент. Если совокупность пустая или элемент не определен, возвращается значение undefined.
- Метод moveNext устанавливает текущий элемент на следующий элемент совокупности. Если перечислитель находится в конце совокупности или совокупность пуста, значение текущего элемента устанавливается как undefined.
- Метод atEnd возвращает true, если текущий элемент является последним в совокупности, совокупность является пустой, или текущий элемент неопределен. Иначе возвращается false.
<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>
Использование фильтров для создания визуальных эффектов
В случае, если Web-страничка нуждается в каком-нибудь эффектном "излишестве", можно использовать возможности JavaScript для динамической реализации возможностей HTML, заложенных в теге <FILTER>. Один из таких примеров был приведен в разделе HTML для иллюстрации ореола.Приведем код этого примера.
<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>
Назад Содержание Вперед