Внешние скрипты

Комментарии до и после скриптов

В старых руководствах и книгах иногда рекомендуют использовать HTML-комментарии внутри SCRIPT, чтобы спрятать Javascript от браузеров, которые не поддерживают его.

Выглядит это примерно так:

<script type="text/javascript"><!--

 

...

 

//--></script>

Браузер, для которого предназначались такие трюки, очень старый Netscape, давно умер. Поэтому в этих комментариях нет нужды.

Если JavaScript-кода много — его выносят в отдельный файл, который подключается в HTML:

<script src="/path/to/script.js"></script>

Здесь /path/to/script.js - это абсолютный путь к файлу, содержащему скрипт (из корня сайта).

Браузер сам скачает скрипт и выполнит.

Например:

<html>

 

<head>

 

<meta charset="utf-8">

 

<script src="/files/tutorial/browser/script/rabbits.js"></script>

 

</head>

 

 

 

<body>

 

<script>

 

count_rabbits();

 

</script>

 

</body>

 

 

 

</html>

Содержимое файла /files/tutorial/browser/script/rabbits.js:

function count_rabbits() {

 

for(var i=1; i<=3; i++) {

 

alert("Кролик номер "+i)

 

}

 

}

Можно указать и полный URL, например:

<script src="http://code.jquery.com/jquery.js"></script>

Вы также можете использовать путь относительно текущей страницы, например src="script.js"если скрипт находится в том же каталоге, что и страница.

Чтобы подключить несколько скриптов, используйте несколько тегов:

<script src="/js/script1.js"></script>

 

<script src="/js/script2.js"></script>

 

...

Как правило, в HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл.

Благодаря этому один и тот же скрипт, например, меню или библиотека функций, может использоваться на разных страницах.

Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего кэша.

Если указан атрибут src, то содержимое тега игнорируется.

В одном теге SCRIPT нельзя одновременно подключить внешний скрипт и указать код.

Вот так не cработает:

<script src="file.js">

 

alert(1); // если указан src, то внутренняя часть скрипта игнорируется

 

</script>

Нужно выбрать: либо SCRIPT идёт с src, либо содержит код. Тег выше следует разбить на два: один — с src, другой с кодом:

показать чистый исходник в новом окнеСкрыть/показать номера строкпечать кода с сохранением подсветки

<script src="file.js"></script>

 

<script>

 

alert(1);

 

</script>

 

Для доступа к элементам страницы без использования имен элементов может быть использована объектная модель документа HTML. При анализе документа браузер создает иерархическую структуру объектов, каждый из которых имеет свои свойства, методы и реагирует на определенный набор событий. Большинство объектов – это объектные представления элементов HTML. Например, для каждого элемента IMG создается соответствующий объект Image, для каждого элемента APPLET – свой соответствующий объект.

Имеется несколько объектов верхнего уровня, с помощью которых может осуществляться управление всем документом HTML. Объект navigator представляет используемый браузер. С помощью этого объекта можно получить информацию об имени и версии браузера, языке браузера, платформе, на которой выполняется браузер.

Клиентский сценарий - это программа, которая может сопровождать документ HTML или непосредственно быть внедренной в него. Эта программа выполняется на клиентской машине при загрузке документа или в другое время, например, когда активизируется ссылка. Существует несколько языков сценариев, однако единственным языком, который понимают все современные браузеры, является JavaScript.

Сценарии предлагают авторам средства усиления интерактивности документов HTML. Например:

  • Сценарии могут обрабатываться во время загрузки документа и динамически изменять содержимое документа.
  • Сценарии могут использоваться в форме для обработки вводимых данных. Они могут проверять, попадают ли введенные данные в предопределенный диапазон значений, соответствие полей и т.д.
  • Сценарии могут включаться событиями, оказывающими влияние на документ, например, загрузкой, выгрузкой, фокусом элемента, перемещением мыши и т.д.
  • Сценарии могут связываться с управляющими элементами формы (например, с кнопками) для представления элементов пользовательского интерфейса.

Авторы могут прикреплять к документу HTML два типа сценариев:

  • Сценарии, выполняющиеся один раз при загрузке документа. Сценарии, описанные в элементе SCRIPT, выполняются при загрузке документа. Для агентов пользователя, не обрабатывающих сценарии, авторы могут определить альтернативное содержимое с помощью элемента NOSCRIPT.
  • Сценарии, выполняемые каждый раз, когда происходит определенное событие. Эти сценарии могут назначаться ряду элементов с помощью атрибутов внутренних событий.

Элемент SCRIPT может находиться в любом месте HTML-документа – как в HEAD, так и в BODY. Наличие начального и конечного тега обязательно. Основные атрибуты:

src - определяет местоположение внешнего сценария.

type - задает язык сценария содержимого элемента и имеет приоритет над языком сценария, заданным по умолчанию. (язык сценария по умолчанию может быть установлен с помощью элемента META: <META http-equiv="Content-Script-Type" content="text/javascript">). Язык сценария указывается как тип содержимого (например, "text/javascript"). Значение по умолчанию для этого атрибута не задано.

defer. Если этот логический атрибут установлен, он обеспечивает для агента пользователя подсказку о том, что сценарий не будет генерировать содержимое документа (например, "document.write" в javascript).

Как отмечалось, выполнение сценариев начинается в разное время, в зависимости от того, как они написаны. Например:

<HTML>

<HEAD>

<meta http-equiv=Content-Type content="text/html; charset="UTF-8">

<script type="text/javascript">

var txt="тестовая страница";

</script>

</HEAD>

<BODY bgcolor="#FFFFFF">

Строка, идущая перед словами "тестовая страница"<BR>

<script type="text/javascript">

document.write(txt+"<BR>");

</script>Строка, идущая за словами “тестовая страница”

</BODY>

</HTML>

Содержимое этой страницы будет состоять из трех строк, причем вторая строка (тестовая страница) будет сгенерировано с помощью сценария в процессе его выполнения при загрузке страницы.

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

Все операторы сценария, содержащиеся в теле функции, интерпретируются, однако запуск функции не происходит до тех пор, пока она не будет вызвана каким-то событием. Операторы, находящиеся за пределами функции, выполняются после загрузки документа в браузер, но во время визуализации документа. Например, написанный выше документ эквивалентен следующему:

<HTML>

<HEAD>

<meta http-equiv=Content-Type content="text/html; charset="UTF-8">

<script type="text/javascript">

function test(txt) {

document.write(txt+"<BR>");

}

</script>

</HEAD>

<BODY bgcolor="#FFFFFF">

Строка, идущая перед словами "тестовая страница"<BR>

<script type="text/javascript">

test("тестовая страница");

</script>

Строка, идущая за словами "тестовая страница"

</BODY>

</HTML>

Второй способ вызвать сценарий – это привязать его к некоторому внутреннему событию. Практически для каждого элемента HTML существует список событий, этим элементом поддерживаемый:

onload - событие происходит, когда агент пользователя заканчивает загружать окно или все фреймы элемента FRAMESET. Может использоваться в элементах BODY и FRAMESET.

onunload - событие происходит, когда агент пользователя удаляет документ из окна или фрейма. Может использоваться в элементах BODY и FRAMESET.

onclick - событие происходит при однократном щелчке кнопки указующего устройства на элементе.

ondblclick - событие происходит при двойном щелчке клавиши указующего устройства на элементе.

onmousedown - событие происходит при нажатии кнопки указующего устройства на элементе.

onmouseup - событие происходит при отпускании кнопки указующего устройства на элементе.

onmouseover - событие происходит при перемещении указующего устройства на элемент.

onmousemove - событие происходит при перемещении указующего устройства, когда оно находится на элементе.

onmouseout - событие происходит при перемещении указующего устройства за пределы элемента.

onfocus - событие происходит при получении элементом фокуса с помощью указующего устройства или последовательности перехода. Может использоваться со следующими элементами: LABEL, INPUT, SELECT, TEXTAREA и BUTTON.

onblur - событие происходит при переходе фокуса с этого элемента с помощью указующего устройства или последовательности перехода. Оно может использоваться с теми же элементами, что и onfocus.

onkeypress - событие происходит при нажатии и отпускании клавиши на элементе.

onkeydown - событие происходит при нажатии клавиши на элементе.

onkeyup - событие происходит при отпускании клавиши на элементе.

onsubmit - событие происходит при отправке формы. Оно используется только в элементе FORM.

onreset - событие происходит при сбросе формы. Оно используется только в элементе FORM.

onselect - событие происходит при выделении пользователем некоторого текста в текстовом поле. Может использоваться с элементами INPUT и TEXTAREA.

onchange - событие происходит при потере управляющим элементом фокуса ввода, если его значение было изменено с момента получения фокуса. Этот атрибут используется со следующими элементами: INPUT, SELECT и TEXTAREA.

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

<HTML>

<HEAD>

<meta http-equiv=Content-Type content="text/html; charset="UTF-8">

<META http-equiv="Content-Script-Type" content="text/javascript">

<SCRIPT>

function validUserName(val) {

if (val.length ==0) {

alert("Поле обязательно для заполнения");

}

}

function validform() {

if ((userForm.userName.value =="") || (userForm.userPassword.value="")) {

alert("Не заполнены поля формы");

return false;

}

}

</SCRIPT>

</HEAD>

<BODY>

<form name="userForm" method="post" action="handleform.php" onsubmit="return validform()" enctype="multipart/form-data">

Имя: <INPUT TYPE="TEXT" NAME="userName"onblur="validUserName(this.value)"><br>

Пароль: <INPUT TYPE="PASSWORD" NAME="userPassword" onblur="validUserName(this.value)" >

<INPUT TYPE="SUBMIT" value="Послать форму">

</form>

</BODY>

</HTML>

Из данного сценария видно, что для доступа к методам какого-либо элемента используется атрибут name (при условии его уникальности). Аналогично ему может быть использован атрибут id.

Для доступа к элементам страницы без использования имен элементов может быть использована объектная модель документа HTML. При анализе документа браузер создает иерархическую структуру объектов, каждый из которых имеет свои свойства, методы и реагирует на определенный набор событий. Большинство объектов – это объектные представления элементов HTML. Например, для каждого элемента IMG создается соответствующий объект Image, для каждого элемента APPLET – свой соответствующий объект.

Имеется несколько объектов верхнего уровня, с помощью которых может осуществляться управление всем документом HTML. Объект navigator представляет используемый браузер. С помощью этого объекта можно получить информацию об имени и версии браузера, языке браузера, платформе, на которой выполняется браузер.

Окружение: DOM, BOM и JS

Браузер дает доступ к иерархии объектов, которые мы можем использовать для разработки.

На рисунке схематически отображена структура основных браузерных объектов.

На вершине стоит window, который еще называют глобальным объектом.

Все остальные объекты делятся на 3 группы.

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

Доступна через document. Дает доступ к содержимому страницы.

На странице W3C DOM вы можете найти стандарты DOM, разработанные самим W3C. На данный момент существует 3 уровня DOM. Современные браузеры также поддерживают некоторые возможности, которые называются DOM 0 и которые остались еще с той эпохи, когда не было W3C.

Объектная модель браузера (BOM)

BOM - это объекты для работы с чем угодно кроме документа.

Доступ к фреймам, запросы к серверу, функции alert/confirm/prompt —- все это BOM.

Большинство возможностей BOM стандартизированы в HTML5, но браузеры любят изобрести что-нибудь своё, особенное.