Размещение кода внутри HTML-документа
Собственно, особенного разнообразия здесь нет. Код можно разместить либо в заголовке документа, внутри контейнера HEAD, либо внутри BODY. Последний способ и его особенности будут рассмотрены в разделе "Условная генерация HTML-разметки на стороне браузера". Поэтому обратимся к заголовку документа.
Код в заголовке размещается внутри контейнера SCRIPT:
<HTML>
<HEAD>
<SCRIPT>
function time_scroll()
{
d = new Date();
window.status = d.getHours() +":"+d.getMinutes() +":"
+d.getSeconds();
setTimeout('time_scroll();',500);
}
</SCRIPT>
</HEAD>
<BODY onLoad=time_scroll()>
<CENTER>
<H1>Часы в строке статуса</H1>
<FORM>
<INPUT TYPE=button VALUE="Закрыть окно" onClick=window.close()>
</FORM>
</CENTER>
</BODY>
</HTML>
В этом примере мы декларировали функцию time_scroll() в заголовке документа, а потом вызвали ее как обработчик события load в теге начала контейнера BODY (onLoad=time_scroll()) .
В качестве примера декларации переменной рассмотрим изменение статуса окна-потомка из окна-предка: cоздадим дочернее окно с помощью следующей функции, продекларировав ее, а затем и вызвав:
function sel()
{
id = window.open("","example","width=500,height=200,status,menu");
id.focus();
id.document.open();
id.document.write("<HTML><HEAD>");
id.document.write("<BODY>");
id.document.write("<CENTER>");
id.document.write("<H1>Change text into child window.</H1>");
id.document.write("<FORM NAME=f>");
id.document.write("<INPUT TYPE=text NAME=t SIZE=20
MAXLENGTH=20 VALUE='This is the test'>");
id.document.write("<INPUT TYPE=button VALUE='Close the window'
onClick=window.close()></FORM>");
id.document.write("</CENTER>");
id.document.write("</BODY></HTML>");
id.document.close();
}
<INPUT TYPE=button VALUE="Изменить поле статуса в окне примера"
onClick="id.defaultStatus='Привет'; id.focus();">
Открывая окно-потомок, мы поместили в переменную id указатель на объект окно id=window.open(). Теперь мы можем использовать ее как идентификатор объекта класса Window. Использование id.focus() в нашем случае обязательно. При нажатии на кнопку "Изменить поле статуса в окне примера" происходит передача фокуса в родительское окно. Оно может иметь размер экрана. При этом изменения будут происходить в окне-потомке, которое будет скрыто родительским окном. Для того чтобы увидеть изменения, надо передать фокус. Переменная id должна быть определена за пределами каких-либо функций, что и сделано. В этом случае онстановится свойством окна. Если мы поместим ее внутри функции открытия дочернего окна, то не сможем к ней обратиться из обработчика события click.
Условная генерация HTML-разметки на стороне браузера
Всегда приятно получать с сервера страницу, подстроенную под возможности нашего браузера или, более того, под пользователя. Существует только две возможности генерации таких страниц: на стороне сервера или непосредственно у клиента. JavaScript-код исполняется на стороне клиента (на самом деле, серверы компании Netscape способны исполнять JavaScript-код и на стороне сервера, только в этом случае он носит название LiveWire-код; не путать с LiveConnect), поэтому рассмотрим только генерацию на стороне клиента.
Для генерации HTML-разметки контейнер SCRIPT размещают в теле документа. Простой пример - встраивание в страницу локального времени:
<BODY>
...
<SCRIPT>
d = new Date();
document.write("<BR>");
document.write("Момент загрузки страницы:
"+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());
document.write("<BR>");
</SCRIPT>
...
</BODY>
Глава 2. Практическая часть «Разработка приложений с применением JavaScript»
Тест на JavaScript
Поставлена задача разработать приложения с использованием JavaScript. Для этого нам необходимо создать HTML страницу, в ней создать форму тестовых заданий (Вопрос – вариант ответа). Выбор варианта ответа будет производиться с помощью компонента RadioBox.
<h3>Информацию, не зависящую от личного мнения или суждения, называют 2</h3>// Создаем заголовок из вопроса
<div align="left"><p style="margin-left: 100"><strong>// Положение RadioBox
<input name="q2" type="radio" value="21">понятной<br>
<input name="q2" type="radio" value="22">полезной<br> - Варианты ответа
<input name="q2" type="radio" value="23">объективной<br>
<input name="q2" type="radio" value="24">актуальной<br>
Так же на тестовой странице присутствуют кнопки, их устанавливаем с помощью компонента button. С помощью кнопок будет производиться подсчет правильных вариантов ответов и очистки формы теста.
Тест показан на Рис 2.1 где можно увидеть все то, что приведено выше.
Форма теста. Рис.2.1
Программный код
Ниже приведен программный код данного теста.
<HTML>
<HEAD>
<TITLE>Тема:"Информация"</TITLE>
<script language="JavaScript">
<!-- Hide JavaScript from Java-Impaired Browsers
function dataBase(test) {
var counter=0;
if (test.q1[0].checked) {counter++;}
if (test.q2[2].checked) {counter++;}
if (test.q3[3].checked) {counter++;}
if (test.q4[3].checked) {counter++;}
if (test.q5[1].checked) {counter++;}
if (test.q6[2].checked) {counter++;}
if (test.q7[1].checked) {counter++;}
if (test.q8[1].checked) {counter++;}
if (test.q9[1].checked) {counter++;}
if (test.q10[3].checked) {counter++;}
if (test.q11[2].checked) {counter++;}
if (test.q12[2].checked) {counter++;}
if (test.q13[1].checked) {counter++;}
if (test.q14[3].checked) {counter++;}
if (test.q15[2].checked) {counter++;}
document.test.display.value = counter;
}
// End Hiding Script -->
</script>
</HEAD>
<BODY bgcolor=#23781>
<center>
<form action="remove_it?subject=Answer on test questions" method="post" name="test">
<!--ENCTYPE="text/plain"-->
<H2>Тема:"Информация"</H2>
<HR width=75%>
<h3>Информацию, изложенную на доступном для получателя языке, называют 1</h3><div align="left"><p style="margin-left: 100"><strong>
<input name="q1" type="radio" value="11">понятной<br>
<input name="q1" type="radio" value="12">достоверной<br>
<input name="q1" type="radio" value="13">актуальной<br>
<input name="q1" type="radio" value="14">полезной<br>
</strong></p>
</div><hr>
<h3>Информацию, не зависящую от личного мнения или суждения, называют 2</h3><div align="left"><p style="margin-left: 100"><strong>
<input name="q2" type="radio" value="21">понятной<br>
<input name="q2" type="radio" value="22">полезной<br>
<input name="q2" type="radio" value="23">объективной<br>
<input name="q2" type="radio" value="24">актуальной<br>
</strong></p>
</div><hr>
<h3>Информацию, отражающую истинное положение дел, называют: 3</h3><div align="left"><p style="margin-left: 100"><strong>
<input name="q3" type="radio" value="31">полезной<br>
<input name="q3" type="radio" value="32">полной<br>
<input name="q3" type="radio" value="33">объективной<br>
<input name="q3" type="radio" value="34">достоверной<br>
</strong></p>
</div><hr>
<h3>Информацию, существенную и важную в настоящий момент, называют 4</h3><div align="left"><p style="margin-left: 100"><strong>
<input name="q4" type="radio" value="41">полной<br>
<input name="q4" type="radio" value="42">объективной<br>
<input name="q4" type="radio" value="43">достоверной<br>
<input name="q4" type="radio" value="44">актуальной<br>
</strong></p>
</div><hr>
<h3>По способу восприятия человек различает следующие виды информации: 5</h3><div align="left"><p style="margin-left: 100"><strong>
<input name="q5" type="radio" value="51">математическую, биологическую, медицинскую, психологическую и пр.<br>
<input name="q5" type="radio" value="52">визуальную, звуковую, тактильную, обонятельную, вкусовую<br>
<input name="q5" type="radio" value="53">обыденную, производственную, техническую, управленческую<br>
<input name="q5" type="radio" value="54">научную, социальную, политическую, экономическую, религиозную и пр.<br>
</strong></p>
</div><hr>
<h3>Наибольший объём информации человек получает при помощи 6</h3><div align="left"><p style="margin-left: 100"><strong>
<input name="q6" type="radio" value="61">органов обоняния<br>
<input name="q6" type="radio" value="62">органов осязания<br>
<input name="q6" type="radio" value="63">органов зрения<br>
<input name="q6" type="radio" value="64">органов слуха<br>
</strong></p>
</div><hr>
<h3>Аудиоинформацией называют информацию, которая воспринимается посредством 7</h3><div align="left"><p style="margin-left: 100"><strong>
<input name="q7" type="radio" value="71">органов обоняния<br>
<input name="q7" type="radio" value="72">органов слуха<br>
<input name="q7" type="radio" value="73">органов зрения<br>
<input name="q7" type="radio" value="74">органов осязания (кожей)<br>
</strong></p>
</div><hr>
<h3>Звуковая информация передаётся посредством 8</h3><div align="left"><p style="margin-left: 100"><strong>
<input name="q8" type="radio" value="81">знаковых моделей<br>
<input name="q8" type="radio" value="82">звуковых волн<br>
<input name="q8" type="radio" value="83">световых волн<br>
<input name="q8" type="radio" value="84">электромагнитных волн<br>
</strong></p>
</div><hr>
<h3>Тактильную информацию человек получает посредством 9</h3><div align="left"><p style="margin-left: 100"><strong>
<input name="q9" type="radio" value="91">органов слуха<br>
<input name="q9" type="radio" value="92">органов осязания<br>
<input name="q9" type="radio" value="93">барометра<br>
<input name="q9" type="radio" value="94">термометра<br>
</strong></p>
</div><hr>
<h3>По форме представления информацию можно условно разделить на следующие виды: 10</h3><div align="left"><p style="margin-left: 100"><strong>
<input name="q10" type="radio" value="101">математическую, биологическую, медицинскую, психологическую и пр.<br>
<input name="q10" type="radio" value="102">визуальную, звуковую, тактильную, обонятельную, вкусовую<br>
<input name="q10" type="radio" value="103">обыденную, научную, производственную, управленческую<br>
<input name="q10" type="radio" value="104">текстовую, числовую, символьную, графическую, табличную и др.<br>
</strong></p>
</div><hr>
<h3>Примером текстовой информации может служить 11</h3><div align="left"><p style="margin-left: 100"><strong>
<input name="q11" type="radio" value="111">чертеж<br>
<input name="q11" type="radio" value="112">картина<br>
<input name="q11" type="radio" value="113">стихотворение в учебнике «Родная речь»<br>
<input name="q11" type="radio" value="114">школьный учебник<br>
</strong></p>
</div><hr>
<h3>Укажите «лишний» объект с точки зрения способа представления информации: 12</h3><div align="left"><p style="margin-left: 100"><strong>
<input name="q12" type="radio" value="121">чертеж<br>
<input name="q12" type="radio" value="122">картина<br>
<input name="q12" type="radio" value="123">телефонный разговор<br>
<input name="q12" type="radio" value="124">фотография<br>
</strong></p>
</div><hr>
<h3>К средствам хранения звуковой информации можно отнести: 13</h3><div align="left"><p style="margin-left: 100"><strong>
<input name="q13" type="radio" value="131">газету<br>
<input name="q13" type="radio" value="132">кассету с рок-музыкой<br>
<input name="q13" type="radio" value="133">журнал<br>
<input name="q13" type="radio" value="134">учебник по литературе<br>
</strong></p>
</div><hr>
<h3>К средствам передачи аудиоинформации можно отнести: 14</h3><div align="left"><p style="margin-left: 100"><strong>
<input name="q14" type="radio" value="141">газету<br>
<input name="q14" type="radio" value="142">плакат<br>
<input name="q14" type="radio" value="143">журнал<br>
<input name="q14" type="radio" value="144">радио<br>
</strong></p>
</div><hr>
<h3>Примером хранения числовой информации может служить: 15</h3><div align="left"><p style="margin-left: 100"><strong>
<input name="q15" type="radio" value="151">графическое изображение на экране монитора<br>
<input name="q15" type="radio" value="152">текст песни<br>
<input name="q15" type="radio" value="153">таблица значений функции<br>
<input name="q15" type="radio" value="154">иллюстрация в журнале<br>
</strong></p>
</div><hr>
<table>
<tr>
<td colspan="3"><div align="center"><p><strong><br><hr>Нажми на кнопку для завершения теста:</strong></td></div>
</tr>
<tr align="center">
<td><strong><input name="check" onclick="dataBase(this.form)" type="button"
value=" Подсчитать баллы "></strong></td>
<td><strong><textarea cols="5" name="display" rows="1" wrap="VIRTUAL"></textarea></strong></td>
<td><strong><input type="reset" value=" Сбросить ответы "></strong></td>
</tr>
</table>
</form></center>
<p align=center><strong>Подведем итоги. Если Вы набрали:<br>
<center>
<ul>
Критерии оценки
<li>до 8 Удовлетворительно<li>9-12- Хорошо<li>ровно 13-15 Отлично</ul>
<br>
</center>
</strong></p>
<hr align="center">
<center>
</BODY>
</HTML>
Для запуска данного теста, необходимо запустить web-документ test.html с помощью Web-браузера (Internet Explorer 4.x,Opera, Netscape).
Описание 1-го блока
<HTML>
<HEAD>
<TITLE>Тема:"Информация"</TITLE>
<script language="JavaScript">
<!-- Hide JavaScript from Java-Impaired Browsers
function dataBase(test) {
var counter=0;
if (test.q1[0].checked) {counter++;}
if (test.q2[2].checked) {counter++;}
if (test.q3[3].checked) {counter++;}
if (test.q4[3].checked) {counter++;}
if (test.q5[1].checked) {counter++;}
if (test.q6[2].checked) {counter++;}
if (test.q7[1].checked) {counter++;}
if (test.q8[1].checked) {counter++;}
if (test.q9[1].checked) {counter++;}
if (test.q10[3].checked) {counter++;}
if (test.q11[2].checked) {counter++;}
if (test.q12[2].checked) {counter++;}
if (test.q13[1].checked) {counter++;}
if (test.q14[3].checked) {counter++;}
if (test.q15[2].checked) {counter++;}
document.test.display.value = counter;
}
// End Hiding Script -->
</script>
</HEAD>
<BODY bgcolor=#23781>
<center>
<form action="remove_it?subject=Answer on test questions" method="post" name="test">
<!--ENCTYPE="text/plain"-->
В данном блоке, описываем счетчик правильных ответов. И вывод их результата. Так же тут можно указать цвет текста и фона.
Так же в первом блоке указываются вопросы теста и варианты ответов.
Описание 2-го блока
<td colspan="3"><div align="center"><p><strong><br><hr>Нажми на кнопку для завершения теста:</strong></td></div>
</tr>
<tr align="center">
<td><strong><input name="check" onclick="dataBase(this.form)" type="button"
value=" Подсчитать баллы "></strong></td>
<td><strong><textarea cols="5" name="display" rows="1" wrap="VIRTUAL"></textarea></strong></td>
<td><strong><input type="reset" value=" Сбросить ответы "></strong></td>
</tr>
</table>
</form></center>
<p align=center><strong>Подведем итоги. Если Вы набрали:<br>
<center>
<ul>
Критерии оценки
<li>до 8 Удовлетворительно<li>9-12- Хорошо<li>ровно 13-15 Отлично</ul>
<br>
</center>
</strong></p>
<hr align="center">
<center>
</BODY>
</HTML>
Во втором же блоке, описаны кнопки очистки и подведения итогов (количество правильных ответов). Так же указаны критерии оценки.
Список используемой литературы
1. Дэвид Флэнаган - JavaScript: The Definitive Guide
2. Николас Закас – JavaScript для профессиональных веб-разработчиков
3. Энциклопедический сайт – с ссылкой на статью о JavaScript: https://ru.wikipedia.org/wiki/JavaScript