baranov dmitry, 2000

for MSIE 5.0 only

"Если дьявол - обезьяна Бога,
то JScript - обезьяна Javascript"

Наоборот!!!

JScript и DHTML. Конспект.

DHTML посвящено уже немало сайтов в сети. К сожалению, Netscape в последнее время сильно сдал свои позиции, поэтому подавляющее большинство скриптов, описанных здесь, под ним, а также под другими броузерами, за исключением IE 5, работать не будет, поэтому c Netscape на этом сайте делать нечего.

Сайт состоит из двух основных разделов. В разделе JScript reference рассматривается несколько вопросов, посвященных языку JScript. Все остальное - вопросы DHTML. Рассмотрим здесь несколько основных объектов и несколько частных вопросов. Разобравшись, вы сможете сделать свои странички гораздо более привлекательными и эффективными.

Внимание! Рассматривается версия языка JScript v.5.5. При использовании броузеров, отличных от MSIE 5.0 и выше рекомендуется отключать опцию "уведомление об ошибках сценариев" в настройках броузера. При возникновении сообщения "... продолжить выполнение сценариев на этой странице?" нажимать кнопку "Да".

Не в моих планах забрасывать этот сайт! Заходите почаще, обязуюсь обновлять и дополнять материал раз в неделю, как минимум.

Иногда я намеренно опускал некоторые редко используемые свойства и методы некоторых объектов. Дополнительную информацию вы найдете в MSDN.

Просьба - нашли ошибки - напишите javascriptpro@narod.ru.  К рассмотрению принимаются все вопросы, непосредственно имеющие отношение к делу.

В планах:

- выложить материал по совместимости HTML-документов для различных броузеров, а также различиям в версиях языков сценариев.
- сделать некое подобие конференции, если найдется хороший халявный хостер.
- перевод спецификации HTML 4
- перевод-конспект документации по XML
- взаимодействие JS и ActiveX

На сегодня у нас:

JScript language referense

1) Объекты

2) Функции

  • GetObject
  • ScriptEngine
  • ScriptEngineBuildVersion
  • ScriptEngineMajorVersion
  • ScriptEngineMinorVersion

 

Dynamic HTML

1) Объекты

2) События

3) Фильтры

4) Готовые решения и примеры

5) Наборы all, children, создание новых наборов, иерархия элементов, позиционирование, доступ к свойствам

6) Объектная модель документа

 

Что рекомендуется для работы с DHTML? Во-первых, MS Frontpage - потому что у него есть какой-никакой встроенный сервер, позволяющий имитировать реальный сервер на локальном компьютере. Во-вторых, HomeSite вместе с TopStyle (специальная программа для создания каскадных таблиц стилей), потому что у него очень удобный интерфейс, редактор кода не имеет глюков FrontPage c его произвольным   форматированием. А наилучший вариант - использовать HomeSite вместе c Personal Web Server от Microsoft или Internet Information Server в поставке Windows NT Server. Можно посоветовать Visual Interdev, а также любой графический редактор (ну, например, Photoshop>=5, 3DStudioMax...).

(прикиньте цену этого всего легального ПО:)))

 

Для чего нужен  DHTML. Возможности. CSS и JScript.

(почитайте еще тут и тут)

Итак, вы, наверное, знаете, что HTML документ в текстовом виде представляет собой набор открывающих и закрывающих тэгов; броузер интерпретирует их и представляет документ в графическом виде. Кроме тэгов, в документе могут встречаться конструкции, заключенные в тэги <script> и <style>. О них-то и будет идти речь.

Возникают сложности в терминологии, так как JS - это и не процедурный язык, так как в нем присутствуют классы, и не объектно-ориентированный, так как новые классы явно создавать нельзя, вследствие этого отсутствует наследование и т.д. Да и нет такого зарезервированного слова - class, а в документации Microsoft используется слово object. Это не язык, а действительно - скрипт.

Объекты HTML и объекты JScript - это разные вещи. Объектная модель JScript описана в JScript Language reference, к объектам JScript относятся: ActiveXObject, Array, Boolean , Date , Dictionary, Enumerator ,Error , FileSystemObject , Function, Global, Math, Number, Object, RegExp, Regular Expression, String. Объекты HTML описаны в спецификации HTML, как привычные нам тэги. К свойствам объектов HTML можно обращаться напрямую из JScript, но не наоборот.

Любой тег (синоним - элемент) в документе НТМL с точки зрения JS представляет собой объект, свойства и методы которого можно изменять при помощи JS. Рассмотрим пример.

<h1>Это заголовок</h1>
В данном случае произойдет вывод на экран заголовка шрифтом по умолчанию.

<h1 align="center" style="font-family:arial, color:red">Это заголовок</h1>
А здесь заголовок выводится шрифтом Arial, красного цвета, выровненный по центру. В данном случае мы обратились к свойствам объекта и изменили их.

Эти два примера демонстрируют статический HTML. Для того, чтобы веб-страницы не выглядели уныло, придумали динамический HTML - DHTML, материальной основой которого являются CSS - каскадные таблицы стилей, и скрипты-интерпретаторы (javascript, perlscript, VBscript).

...А также java-апплеты, CGI, ASP, ActiveX и т.д. Проблема в том, что CGI, ISAPI, NSAPI, ASP, PHP и т.д. используют взаимодействие с сервером, что невыгодно во временном аспекте, нагружает сервер и т.п. Апплеты очень тормозные, хотя и работают на стороне клиента. JScript может не все, но это наиболее рацональный инструмент, если необходимо придать динамизм и не трогать бедный сервер, так как интерпретируются скрипты по сравнению, скажем, с апплетами, очень бодро, и выполняются они на стороне клиента.

На CSS останавливаться не буду - замечу, что это синтаксические конструкции, позволяющие задать объектам одного класса одинаковые свойства. Приведу пример:

<style>
p
{
font-family: courier;
font-size: 12pt;
}
</style>

В итоге весь текст документа, заключенный в <p></p> будет отображен шрифтом courier 12 пикселей. CSS можно вынести в отдельный файл, как правило, с расширением css, в таком случае несколько документов могут к нему обращаться и будут выглядеть как солдаты в бане - однообразно.

<style rel="stylesheet"   href="style.css" type="text/css"> - это пишут в шапке документа в тэгах <head></head>

А можно задавать стиль непосредственно в теге элемента, как выше в примере с заголовком.

А скрипты нужны для оживления и некоторой интеллектуальности документа - чтобы в нем все двигалось и бегало как максимум и для удобного интерфейса как минимум. Не следует ими злоупотреблять, так как а) парсеры и интерпретаторы броузеров разных производителей их не понимают или понимают по-разному б) суета в документе вызывает раздражение.

JScript - микрософтовский отпрыск, значительно превосходящий javascript. Страницы, написанные под javascript, выглядят гораздо более убого.Но Netscape не сдается.

Итак, из скрипта можно обратиться к свойствам и методам практически любого объекта и соответственно их изменять. Изменять можно все что угодно: цвет, шрифт, размер, источник, границы, положение... Пример:

<script>
window.document.location.href="http://msdn.microsoft.com/";
document.body.bgColor="...";
</script>

Нечто Java-подобное. Найти подробную иерархию классов в документации я так и не смог. Очевидно, что в данном примере у window есть свойство document, y document - body, у body есть свойство bgColor... Я так и не смог найти более-менее приемлемую иерархию объектов, поэтому привожу кусок из документации Netscape, которая уже сто лет как устарела.

navigator 

window 
  |
  +--parent, frames, self, top 
  |
  +--location 
  | 
  +--history
  |
  +--document
       |
       +--forms
       |    |
       |  elements (text fields, textarea, checkbox, password
       |            radio, select, button, submit, reset)   
       +--links
       |
       +--anchors

Кого интересует - архив на буржуйском языке 96 года -   здесь. Многие объекты HTML имеют одинаковые свойства и методы, что и неудивительно. Итак, как написать скрипт?
1) В тэгах <script></script> вы задаете функции и переменные:
<script language="JScript>
var a;
var b=1;
var c="Hello";
var d=new Array(10);
function load()
{
  window.alert(c);
}
</script>

Затем в тэгах почти любого элемента мы можем присвоить обработчику эту новую функцию:
<body onload="javascript:load()">
<input type="button" onclick="load()">
<a onmouseover="load()">Гиперссылка</a>

То есть, окошко с приветствием будет появляться при загрузке документа, при нажатии на кнопку, при проведении курсором над гиперссылкой. Подробнее о событиях - здесь. Слово "javascript:" можно опускать.

2) Можно прямо задать обработчик в тэгах, не описывая ту или иную функцию:
<a href onmouseover="javascript:this.style.color='red'" onmouseover="this.style.color='blue'">Link</a>,

В данном примере с помощью this обрабатывается сам объект, вызвавший событие.

3) Можно каждому объекту присвоить ID (или множеству объектов - одинаковый ID) и писать так:

<body>
<p ID="OBJID">Hello</p>
<h1 ID="OBJID">welcome</h1>
</body>

<script for="OBJID" event="onmouseover">
style.color="yellow";
</script>

<script for="OBJID" event="onmouseout">
style.color="black";
</script>

Hello

welcome

А здесь всем объектам документа с одинаковым ID назначен одинаковый обработчик события - при проведении над ними мышью они - желтеют, при mouseout - чернеют

4) Можно весь текст скрипта вынести в отдельный файл с расширением .js и создать нечто вроде универсальной библиотеки, в которую можно вынести функции, ведающие динамическим созданием объектов в период выполнения, и т.п. Такие функции и библиотеки должны претендовать на универсальность, поэтому редко кто их создает, но результаты окупаются сторицей. В дальнейшем, в том месте документа, где должна выполниться библиотека, вставляют

<script src='script.js>
</script>

Это так называемые инлайн-скрипты.

Есть еще и 5) и 6), но пока хватит.

Ежели мы написали скрипт для объекта, который не существует, или для свойства, которое не существует, будет выдано сообщение об ошибке. В последних версиях JS появился механизм обработки исключительных ситуаций, но о нем - позже.

Можно смело сказать, что для создания динамических страниц львиная доля обращений из скрипта будет направлена к свойству style объекта. Вот где соприкасаются JS и CSS. Например, в CSS мы написали так:

<h1 style="text-decoration:overline">DEMO</h1>

при изменении этого свойства в период выполнения, надо написать так:
<script>
var a=false;
function nounderline()
{
  document.all.tags("h1")[0].style.textDecoration="overline";
}
function underline()
{
  document.all.tags("h1")[0].style.textDecoration="underline";
}
function buttonclick()
{
a=!a;
a==false?nounderline():underline();
}
</script>

То есть мы видим, что у каждого свойства CSS есть созвучное свойство объекта при обращении к нему из JS. Подробнее о свойстве (объекте?)  style - здесь.

Ну, в заключение, какие вообще есть объекты (большими буквами - тэги документа, маленькими - объекты документа, к которым мы обращаемся из сценария. Но например, тег <BODY>   соответствует объекту document.body, к которому мы обращаемся из скрипта. Вообще, ко всем объектам HTML мы можем обратиться из сценария, непосредственно, как в примере с BODY, так и косвенно, через наборы all, filters, frames и т.д.)

A ACRONYM ADDRESS all APPLET applets anchors AREA areas B BASE BASEFONT BGSOUND BIG BLOCKQUOTE BODY BR BUTTON CAPTION cells CENTER children CITE CODE COL COLGROUP COMMENT DD DEL DFN DIR DIV DL document DT elements EM EMBED embeds event external FIELDSET filters FONT FORM forms FRAME frames FRAMESET H1 H2 H3 H4 H5 H6 HEAD history HR HTML I IFRAME images IMG INPUT INS KBD LABEL LEGEND LI LINK links LISTING location MAP MARQUEE MENU META navigator NEXTID OBJECT OL OPTION options P PLAINTEXT plugins PRE Q rows rules S SAMP screen SCRIPT scripts SELECT selection SMALL SPAN STRIKE STRONG STYLE style styleSheet styleSheets SUB SUP TABLE TBODY TD TEXTAREA TextRange TFOOT TH THEAD TITLE TR TT U UL userProfile VAR window XMP

Контролы - те же самые объекты, выглядят как элементы управления Windows.

button checkbox file hidden image password radio reset submit text

Совет на ближайшее будущее: скачайте какую - нибудь страницу из сети, учитесь на ней, привыкайте к структуре HTML, пытайтесь понять, что там автором наскриптовано, ставьте себе задачи и решайте их сами.

Ну что, если чего не понятно - пишите, если нашли ошибки - тоже пишите.
javascriptpro@narod.ru

 

 

 

Hosted by uCoz