Возможности Языка JavaScript
Возможности Языка JavaScript
ПЕДАГОГИЧЕСКИЙ ИНСТИТУТ
КУРСОВАЯ РАБОТА
по дисциплине “Информатика”
на тему “Возможности языка JavaScript”
2
Славянск-на-Кубани
Введение...................................................................................................................................... 8
Глава 1. Теоретическая основы темы «Возможности JavaScript».........................................9
1. Назначение и применение JavaScript, общие сведения.............................................9
1.2 Понятие объектной модели применительно к JavaScript.............................................10
1.3 Размещение кода на HTML-странице.............................................................................13
1.4 URL-схема JavaScript.........................................................................................................15
1.5 Обработчики событий......................................................................................................17
1.6 Подстановки..................................................................................................................... 17
1.7 Вставка (контейнер SCRIPT - принудительный вызов интерпретатора).......................19
Глава 2. Практическая часть «Разработка приложений с применением JavaScript»........19
2. Тест на JavaScript................................................................................................................ 19
2.1 Программный код..........................................................................................................24
2.2 Описание 1-го блока......................................................................................................26
2.3 Описание 2-го блока......................................................................................................27
3
Введение
события.
Объектную модель можно представить как способ связи между
страницами и браузером. Объектная модель - это представление объектов,
методов, свойств и событий, которые присутствуют и происходят в
программном обеспечении браузера, в виде, удобном для работы с ними кода
HTML и исходного текста сценария на странице. Мы можем с ее помощью
сообщать наши пожелания браузеру и далее - посетителю страницы. Браузер
выполнит наши команды и соответственно изменит страницу на экране.
Объекты с одинаковым набором свойств, методов и событий
объединяются в классы однотипных объектов. Классы - это описания
возможных объектов. Сами объекты появляются только после загрузки
документа браузером или как результат работы программы. Об этом нужно
всегда помнить, чтобы не обратиться к объекту, которого нет.
Cвойства
Многие HTML-контейнеры имеют атрибуты. Например, контейнер
якоря <A ...>...</A> имеет атрибут HREF, который превращает его в
гипертекстовую ссылку:
<A HREF=intuit.htm>intuit</A>
document.links[0].href="intuit.htm";
Не у всех атрибутов можно изменять значения. Например, высота и
ширина графической картинки определяются по первой загруженной в
момент отображения страницы картинке. Все последующие картинки,
которые заменяют начальную, масштабируются до нее. Справедливости ради
7
function hello()
{
id=window.open("","example","width=400, height=150");
id.focus(); id.document.open();
id.document.write("<H1>Привет!</H1>");
id.document.write("<HR><FORM>");
id.document.write("<INPUT TYPE=button VALUE='Закрыть окно' ");
id.document.write("onClick='window.opener.focus();
window.close();'>");
id.document.close();
}
В этом примере метод open() открывает поток записи в документ,
метод write() осуществляет эту запись, метод close() закрывает поток записи в
документ. Все происходит так же, как и при записи в обычный файл. Если у
окна есть поле статуса (обычно в нем отображается уровень загрузки
документа), то при незакрытом потоке записи в документ в нем будет
"метаться" прямоугольник продолжения записи, как это происходит при
загрузке документа.
8
События
Кроме методов и свойств объекты характеризуются событиями.
Собственно, суть программирования на JavaScript заключается в написании
обработчиков этих событий. Например, с объектом типа button (контейнер
INPUT типа button - "Кнопка") может происходить событие click, т.е.
пользователь может нажать на кнопку. Для этого атрибуты контейнера
INPUT расширены атрибутом обработки события click - onClick. В качестве
значения этого атрибута указывается программа обработки события, которую
должен написать на JavaScript автор HTML-документа:
<A HREF="JavaScript:JavaScript_код">...</A>
<IMG SRC="JavaScript:JavaScript_код">
1.6 Подстановки
<SCRIPT>
function l()
{
str = window.location.href;
return(str.length);
}
</SCRIPT>
<FORM><INPUT VALUE="&{window.location.href};" SIZE="&{l()};">
</FORM>
<SCRIPT>
<!-- Это комментарий ...JavaScript-код...// -->
</SCRIPT>
<BODY>
... Тело документа ...
</BODY>
12
</HTML>
<HTML>
<HEAD>
<SCRIPT>
function time_scroll()
{
var d = new Date();
window.status = d.getHours() +":"+d.getMinutes() +":"+
d.getSeconds();
setTimeout('time_scroll();',500);
}
13
</SCRIPT>
</HEAD>
<BODY onLoad=time_scroll()>
<CENTER>
<H1>Часы в строке статуса</H1>
В Internet Explorer 4.0 подстановки не поддерживаются, поэтому
пользоваться ими следует аккуратно. Прежде чем выдать браузеру страницу
с подстановками, нужно проверить тип этого браузера.
В случае подстановки интерпретатор получает управление в момент
разбора браузером (компонент парсер) HTML-документа. Как только парсер
встречает конструкцию &{..} у атрибута контейнера, он передает управление
интерпретатору JavaScript, который, в свою очередь, после исполнения кода
это управление возвращает парсеру. Таким образом данная операция
аналогична подкачке графики на HTML-страницу.
1.7 Вставка (контейнер 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()>
15
</FORM>
</CENTER>
</BODY>
</HTML>
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();
}
16
<BODY>
...
<SCRIPT>
17
d = new Date();
document.write("<BR>");
document.write("Момент загрузки страницы:
"+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());
document.write("<BR>");
</SCRIPT>
...
</BODY>
2. Тест на JavaScript
Тест показан на Рис 2.1 где можно увидеть все то, что приведено выше.
19
<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>
21
</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>
26
</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).
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.3 Описание 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"
28