10. Подключение JavaScript к гипертекстовой странице
Примеры
Пример 1 (JS во внешнем файле)
praxis/10/examples/01/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Пример 1</TITLE>
</HEAD>
<BODY>
<H1>Пример 1</H1>
<P id="date"></P>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной
// загрузки документа и построения объектной модели
window.onload = function ()
{
// Создать экземпляр встроенного класса Date
var d = new Date();
// Записать в d день недели по-русски
d = ["воскресенье", "понедельник", "вторник",
"среда", "четверг", "пятница", "суббота"][d.getDay()];
// При помощи свойства innerHTML заменить содержимое
// элемента id="date" указанной конкатенацией строк
document.getElementById("date").innerHTML="Сегодня: <EM>"+d+"</EM>";
// Примечание: метод getElementById(id) объекта document возвращает
// ссылку на элемент, имеющий в HTML идентификатор id
}
Пример 2 (JS в голове HTML-кода)
praxis/10/examples/02/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Пример 2</TITLE>
<SCRIPT>
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки
// документа и построения его объектной модели
window.onload = function ()
{
// Создать экземпляр встроенного класса Date
var d = new Date();
// Записать в d день недели по-русски
d = ["воскресенье", "понедельник", "вторник",
"среда", "четверг", "пятница", "суббота"][d.getDay()];
// При помощи свойства innerHTML заменить содержимое элемента id="date"
// указанной конкатенацией строк
document.getElementById("date").innerHTML = "Сегодня: <EM>" + d + "</EM>";
// Примечание: метод getElementById(id) объекта document возвращает
// ссылку на элемент, имеющий в HTML идентификатор id
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Пример 2</H1>
<P id="date"></P>
</BODY>
</HTML>
Пример 3 (JS в голове и теле HTML-кода)
praxis/10/examples/03/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Пример 3</TITLE>
<SCRIPT type="text/javascript">
// Построение списка UL из n пунктов
function putList(n)
{
var str = "<UL>";
for (var i=0; i<n; i++) str += "<LI>"+"Пункт "+Number(i+1)+"</LI>";
str += "</UL>";
return str;
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Пример 3</H1>
<H2>Первый список</H2>
<SCRIPT type="text/javascript">
// Построение списка из 5 пунктов на экране
document.write(putList(5));
</SCRIPT>
<H2>Второй список</H2>
<SCRIPT type="text/javascript">
// Построение списка из 8 пунктов на экране
document.write(putList(8));
</SCRIPT>
</BODY>
</HTML>
Конструкторы Number, String, Boolean могут вызываться без оператора new (как конструктор Number в коде, приведенном выше). В этом случае они просто преобразуют свой аргумент к соответствующему типу данных.
Пример 4 (JS как значение событийного атрибута)
praxis/10/examples/04/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Пример 4</TITLE>
</HEAD>
<BODY>
<H1>Пример 4</H1>
<BUTTON onclick="alert('Спасибо!');">Нажми меня</BUTTON>
</BODY>
</HTML>
Пример 5 (Обработчик события)
praxis/10/examples/05/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Пример 5</TITLE>
</HEAD>
<BODY>
<H1>Пример 5</H1>
<BUTTON onclick="addP();">Добавить абзац к документу</BUTTON>
</BODY>
</HTML>
Содержимое файла main.js
addP.counter = 1; // Счетчик абзацев. Переменная введена как свойство
// объекта addP, чтобы не вводить лишнее глобальное
// имя. Можно было бы с этой целью воспользоваться
// механизмом замыкания.
// Обработчик события onclick на элементе BUTTON
function addP()
{
// Создадим элемент "абзац"
var el = document.createElement("p");
// Добавим к созданному элементу потомка -- текстовый элемент
el.appendChild(document.createTextNode("Абзац номер "+(addP.counter++)+"."));
// Добавим построенный элемент к BODY -- и он сразу отобразится на экране
document.body.appendChild(el);
}
Пример 6 (Назначение обработчика в JS-файле)
praxis/10/examples/06/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Пример 6</TITLE>
</HEAD>
<BODY>
<H1>Пример 6</H1>
<BUTTON id="button">Добавить абзац к документу</BUTTON>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки
// документа и построения объектной модели
window.onload = function ()
{
// Назначить обработчик события onclick элементу с id="button"
document.getElementById("button").onclick = addP;
}
addP.counter = 1; // Счетчик абзацев. Переменная введена как свойство
// объекта addP, чтобы не вводить лишнее глобальное
// имя. Можно было также с этой целью воспользоваться
// замыканием.
// Обработчик события onclick на элементе id="button"
function addP()
{
// Создадим элемент "абзац"
var el = document.createElement("p");
// Добавим к созданному элементу потомка -- текстовый элемент
el.appendChild(document.createTextNode("Абзац номер "+(addP.counter++)+"."));
// Добавим построенный элемент к BODY -- и он сразу отобразится на экране
document.body.appendChild(el);
}
Пример 7 (JS как тело URL-адреса)
praxis/10/examples/07/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Пример 7</TITLE>
</HEAD>
<BODY>
<H1>Пример 7</H1>
<A href="javascript:
/* ; -- обязательны, // -- запрещены */
var str = '<BODY>';
str +='<H1>Новый документ</H1>';
str += '</BODY>';
str; /* значение последнего выражения -- содержимое строки */
">Построить новый документ</A>
</BODY>
</HTML>
Пример 8 (JS как тело URL-адреса)
praxis/10/examples/08/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Пример 8</TITLE>
</HEAD>
<BODY>
<H1>Пример 8</H1>
<A href="javascript:alert('Спасибо!')">Щелкни на мне</A>
</BODY>
</HTML>