HTML-документ, загруженный в браузер, можно изменять с помощью сценариев. Поскольку речь идет не о файле на диске, а о его образе в браузере в оперативной памяти компьютера, то говорят о динамическом изменении документа. Существует три основных способа динамических изменений:
• с помощью метода write();
• путем изменения значений свойств, соответствующих атрибутам HTML-тегов и параметрам каскадных таблиц стилей;
• путем изменения значений свойств innerText, outerText, innerHTML, outerHTML ,
которые имеют почти все объекты, заданные с помощью тегов. Здесь:
innerText — весь внутренний текст, содержащийся в контейнере;
outerText — весь текст, содержащийся в контейнере, включая и его внешние теги;
innerHTML — строка, содержащая HTML-код, заключенный между открывающим и закрывающим тегами элемента;
outerHTML аналогично свойству innerHTML, но содержит весь HTML-код, включая внешние открывающий и закрывающий теги элемента.
Приведенный ниже HTML-код формирует документ, содержащий две кнопки. Сценарий обрабатывает событие onclick — щелчок мышью. Он привязан к элементу, заданному тегом <body>. Щелкнуть можно на любой кнопке, а также на незанятом месте окна браузера. В любом случае событие onclick будет обработано сценарием (функцией changetext()), поскольку кнопки заданы внутри тега <body>. Сценарий заменит текст, который находится внутри тега элемента, инициировавшего событие. Какой именно элемент инициировал событие, определяется с помощью свойства srcElement, а замена текста осуществляется посредством свойства innerText. Обратите внимание, что результат зависит от того, где находился указатель мыши в момент щелчка.
Пример. Динамическое изменение документа
<html>
<body onclick = "changetext()">
<button>Первая кнопка</button>
<button>Вторая кнопка</button>
</body>
<script>
function changetext() {
х = window.event.srcElement
x.innerText = "Уже щелкнули"
}
</script>
</html>
Метод write (принимает в качестве параметра строку, содержащую HTML-код и/или просто текст. Выполнение в сценарии выражения document.write(строка) приводит к дописыванию в текущий HTML-документ содержимого параметра строка и немедленной его интерпретации браузером. В результате документ и его объектная модель обновляются, а файл с исходным HTML-кодом остается без изменения. Если требуется полностью заменить текущий документ, то сначала применяют метод очистки документа
document.clear(),
а затем
document.write(строка).
В объектной модели документа тегам элементов соответствуют объекты, а атрибутам — свойства этих объектов. В большинстве случаев названия свойств объектов совпадают с названиями атрибутов, но в отличие от последних записываются в нижнем регистре. Это же относится и к параметрам таблиц стилей. Например, тегу графического изображения
<img id = "myimg" src = "picture.jpg">
соответствует объект document.all.myimg, а атрибуту src — свойство document.all.myimg.src, значением которого является имя (URL-адрес) файла с изображением. С помощью сценария можно присвоить этому свойству новое значение, и в HTML-документе произойдет замена графического элемента.
Чтобы изменить в сценарии параметры стиля элемента, следует присвоить новые значения соответствующим свойствам объекта style:
document.all.myimg.style.top = 30
document.all.myimg.style.top = 100
document.all.myimg.style.zindex = -2
Параметр z-index в таблице стилей, указывающий слой (относительное положение выше-ниже) для элемента, в объектной модели представляется свойством zindex.
Для организации периодического (через заданный интервал времени) выполнения некоторого выражения или функции служит метод setInterval() объекта window. Этот метод имеет следующий синтаксис:
setInterval(выражение, период [, язык])
Первый параметр — строкa, содержащая выражение (вызов функции). Второй параметр — целое число, указывающее временную задержку в миллисекундах перед последующими выполнениями выражения. Третий, необязательный параметр указывает язык, на котором написано выражение; по умолчанию — JavaScript.
Метод setInterval()возвращает число — идентификатор временного интервала, который может быть использован в дальнейшем для прекращения выполнения процесса, запущенного с помощью данного метода (метод clearInterval()).
Пусть, например, требуется, чтобы некоторая функция myfunc() выполнялась периодически через 0,5 с. Тогда в сценарии следует записать следующее выражение:
setInterval("myfunc()", 500)
В следующем примере показано, как передать методу setInterval() функцию с двумя параметрами, paraml и param2, значения которых определены в другом месте сценария:
var xstr = "myfunc(" + paraml + "," + param2 + " ) "
setInterval(xstr, 500)
Остановка запущенного временного процесса:
var myproc = setInterval("myfunc()", 100)
clearInterval (myproc)
Чтобы выполнить выражение с некоторой временной задержкой, используется метод setTimeout(). Этот метод объекта window имеет следующий синтаксис:
setTimeout(выражение, задержка[, язык])
Метод setTimeout() возвращает целое число — идентификатор временного интервала, который может быть использован в дальнейшем для отмены задержки выполнения (метод clearTimeout()).
Запуск функции myfunc() спустя 1 с:
setTimeout("myfunc()", 1000)
Для хранения небольших объемов информации на диске компьютера пользователя в браузере предусмотрен так называемый механизм cookie. Обычно он используется для хранения имени пользователя и пароля, который вводится в поле формы защищенного веб-сайта, а также информации о предыдущем посещении сайта.
Данные в cookie-файлах организованы в виде записей.
Функция writeCookie() позволяет создать или обновить cookie-запись:
function writeCookie(name, value, expires, path, domain, secure){
/* запись cookie */
document.cookie =
name + "=" + escape(value) +
((expires) ? ":expires=" + expires.toGMTString() : "") +
((path) ? ":path=" + path : "") +
((domain) ? ":domain=" + domain : "") +
((secure) ? ":secure" : "")
}
Запись данных в cookie-файл заключается в присвоении строки, содержащей cookie-данные, свойству document.cookie. Запись непосредственно в файл выполняется при завершении работы браузера.
Эта функция принимает следующие параметры:
• name — строка, содержащая имя cookie-записи (обязательный параметр);
• value — строка, содержащая значение cookie (обязательный параметр);
• expires —срок хранения cookie-записи (объект Date); если отсутствует, то после завершения работы браузера cookie-запись удаляется;
• path — строка, содержащая путь cookie-записи; если не указан, то используется путь вызванного документа (текущая папка на сайте);
Чтобы получить доступ к файловой системе, необходимо создать для нее объект FileSystemObject (экземпляр FSO). Если программа на JavaScript будет выполняться браузером как сценарий в HTML-документе, то для создания FSO можно использовать только следующее выражение:
var fso = new ActiveXObject ("Scripting.FileSystemObject")
После того как объект файловой системы создан, можно применить методы для создания и удаления папок и файлов, копирования и перемещения файлов, а также получения информации о дисках, папках и файлах. Существуют и другие методы, такие как открытие и закрытие файла, запись данных в файл и т. п. Общий синтаксис таков:
- ссылка на объект файловой системы (FSO) для доступа к ее объектам
var fso = new ActiveXObject ("Scripting.FileSystemObject")
- методы доступа к существующим объектам и методы создания новых объектов
var x = fso.методОбъекта(параметры)
- свойства и методы конкретного объекта — диска, папки или файла
var у = х.свойство(параметры)
var z = х.метод(параметры)
Открыть файл можно осуществить следующими способами:
var fso = new ActiveXObject
("Scripting.FileSystemObject")
var myfile = fso.OpenTextFile(filepath, mode)
var fso = new ActiveXObject
("Scripting.FileSystemObject")
var fileobj = fso.GetFile(filepath)
var myfile = fileobj.OpenAsTextStream(mode)
Здесь filepath — имя файла, возможно, с указанием пути к нему; mode — режим открытия файла: 1 — только для чтения; 2 — для записи; 8 — для добавления.
Приведём несколько примеров записи и чтения данных.
var filepath = "С:\\Мои документы\\TextFile.htm"
var fso = new ActiveXObject
("Scripting.FileSystemObject")
var myfile = fso.CreateTextFile(filepath, true)
// создание в режиме записи
myf11e.WriteLine("<html>")
myfile.WriteLine("<hl>Привeт всем!</h1>")
myfile.Write("<script> alert('Какое-нибудь
сообщение')</script>")
myfile.WriteBlankLines(2) // две пустые строки
myfile.Close() // закрываем файл
var fso = new ActiveXObject
("Scripting.FileSystemObject")
var myfile = fso.OpenTextFile(filepath,8)
/* открываем в режиме добавления */
myfile.Write("</html>") // дописываем
myfile.Close() // закрываем файл
var fso = new ActiveXObject
("Scripting.FileSystemObject")
var myfile = fso.OpenTextFile(filepath,1)
// открываем в режиме чтения
myfile.Read(6) // читаем 6 байтов: "<html>"
myfile.SkipLine() // пропускаем строку
var x = myfile.ReadLine() /* читаем третью
строку:"<h1>Привет Bceм!</hl> */
Для запуска приложений служит метод Run() объекта Wscript.Shell. Командная строка запуска приложения (обычно это просто полное имя файла программы) передается методу в качестве строкового параметра.
Примеры
var Myshell = new ActiveXObject("WScript.Shell")
Форма объединяет такие элементы HTML-документа, как поля ввода данных, текстовые области, переключатели и флажки, раскрывающиеся списки и кнопки. В HTML форма создается с помощью контейнерного тега <form>, внутри которого располагаются теги элементов этой формы. В объектной модели документа каждой форме соответствует свой объект, входящий в коллекцию forms. Заметим, что любой из перечисленных выше элементов можно использовать вне всякой формы. Однако форма — не просто контейнер, а контейнер и объект, предназначенные главным образом для организации отправки на сервер всех данных, имеющихся в элементах этой формы (например, введенных пользователем). Для отправки данных на сервер сценарий не обязателен.
Чтобы отправить данные, достаточно в теге <form> указать атрибут action, а в самой форме установить кнопку типа Submit. Щелчок на этой кнопке инициализирует отправку данных. Если атрибут action не указан или его значение пусто, данные формы не будут отправлены, даже если вы щелкнете на кнопке типа Submit.
Значение атрибута action — это URL-адрес файла или CGI-программы, которая получает и обрабатывает отправленные данные. Например,
action = "http://www.myserver/cgi/myprog.pl".
Если надо отправлять данные формы по электронной почте, то значением action является строка вида: mailto:адрес_е-mail
Значением атрибута action может быть и обработчик JavaScript, то есть просто функция.
Кроме атрибута action в теге <form> следует указать еще два атрибута: method (рекомендуется задавать его в виде method=post) и enctype (в виде
enctype = "text/plain").
Если не указать атрибут enctype, то сообщение будет представлено в неудобочитаемом (закодированном) виде.
Атрибут hidden (Скрытое поле) представляет собой элемент формы, который невидим для человека, заполняющего форму. Скрытые поля можно использовать для передачи Web-серверу дополнительных пар имя/значение помимо данных, введенных посетителем сайта.
Доступ к файловой системе с помощью языков на основе сценариев, таких как JavaScript и VBScript, в Windows обеспечивается через объект FileSystemObject (FSO — объект файловой системы). Программы на JavaScript и VBScript, использующие этот объект, могут интерпретироваться браузером IE5+, а также системой Windows Scripting Host (WSH), встроенной в ОС Windows (ее также называют Windows Based Script Host).
В целях безопасности рекомендуется использовать FSO не на клиентском компьютере, а на сервере (технология Active Server Pages, ASP). WSH, в отличие от браузера, позволяет свободно использовать FSO на локальном компьютере: вы просто создаете программу на JavaScript в текстовом файле с расширением js и выполняете ее с помощью так называемого сервера сценариев Windows (файл wscript.exe, расположенный в папке Windows). Эта программа устанавливается по умолчанию как приложение для открытия (выполнения) файлов с расширением js. Аналогичная программа для запуска сценариев через командную строку MS DOS представлена файлом cscript.exe.