М
ИНИСТЕРСТВО
ОБРАЗОВАНИЯ КАЛИНИНГРАДСКОЙ ОБЛАСТИ
государственное бюджетное учреждение Калининградской области
профессиональная образовательная организация
«Гусевский политехнический техникум»
(ГБУ КО ПОО «ГПТ»)
КУРСОВАЯ РАБОТА
На тему: «Разработка с использованием JavaScript»
Выполнил:
Гуляев Сергей Сергеевич
Группа: ПИ 3\14
Руководитель работы: Гарцуева Татьяна
Генадьевна
Гусев 2017
Введение 7
Глава 1. Теоретическая основы темы «Возможности JavaScript» 8
1. Назначение и применение JavaScript, общие сведения 8
1.2 Понятие объектной модели применительно к JavaScript 10
1.3 Размещение кода на HTML-странице 13
1.4 URL-схема JavaScript 14
1.5 Обработчики событий 16
1.6 Подстановки 17
1.7 Вставка (контейнер SCRIPT - принудительный вызов интерпретатора) 19
Глава 2. Практическая часть «Разработка приложений с применением JavaScript» 23
2. Тест на JavaScript 24
Поставлена задача разработать приложения с использованием JavaScript. Для этого нам необходимо создать HTML страницу, в ней создать форму тестовых заданий (Вопрос – вариант ответа). Выбор варианта ответа будет производиться с помощью компонента RadioBox. 24
<h3>Информацию, не зависящую от личного мнения или суждения, называют 2</h3>// Создаем заголовок из вопроса 24
<div align="left"><p style="margin-left: 100"><strong>// Положение RadioBox 24
<input name="q2" type="radio" value="21">понятной<br> 24
<input name="q2" type="radio" value="22">полезной<br> - Варианты ответа 24
<input name="q2" type="radio" value="23">объективной<br> 24
<input name="q2" type="radio" value="24">актуальной<br> 24
Так же на тестовой странице присутствуют кнопки, их устанавливаем с помощью компонента button. С помощью кнопок будет производиться подсчет правильных вариантов ответов и очистки формы теста. 24
24
Тест показан на Рис 2.1 где можно увидеть все то, что приведено выше. 24
25
25
Форма теста. Рис.2.1 25
2.1 Программный код 25
Ниже приведен программный код данного теста. 25
<HTML> 26
<HEAD> 26
<TITLE>Тема:"Информация"</TITLE> 26
<script language="JavaScript"> 26
<!-- Hide JavaScript from Java-Impaired Browsers 26
function dataBase(test) { 26
var counter=0; 26
if (test.q1[0].checked) {counter++;} 26
if (test.q2[2].checked) {counter++;} 26
if (test.q3[3].checked) {counter++;} 26
if (test.q4[3].checked) {counter++;} 26
if (test.q5[1].checked) {counter++;} 26
if (test.q6[2].checked) {counter++;} 26
if (test.q7[1].checked) {counter++;} 26
if (test.q8[1].checked) {counter++;} 26
if (test.q9[1].checked) {counter++;} 26
if (test.q10[3].checked) {counter++;} 26
if (test.q11[2].checked) {counter++;} 26
if (test.q12[2].checked) {counter++;} 26
if (test.q13[1].checked) {counter++;} 26
if (test.q14[3].checked) {counter++;} 26
if (test.q15[2].checked) {counter++;} 26
document.test.display.value = counter; 26
} 26
// End Hiding Script --> 26
</script> 26
</HEAD> 26
<BODY bgcolor=#23781> 26
<center> 26
<form action="remove_it?subject=Answer on test questions" method="post" name="test"> 27
<!--ENCTYPE="text/plain"--> 27
<H2>Тема:"Информация"</H2> 27
<HR width=75%> 27
<h3>Информацию, изложенную на доступном для получателя языке, называют 1</h3><div align="left"><p style="margin-left: 100"><strong> 27
<input name="q1" type="radio" value="11">понятной<br> 27
<input name="q1" type="radio" value="12">достоверной<br> 27
<input name="q1" type="radio" value="13">актуальной<br> 27
<input name="q1" type="radio" value="14">полезной<br> 27
</strong></p> 27
</div><hr> 27
<h3>Информацию, не зависящую от личного мнения или суждения, называют 2</h3><div align="left"><p style="margin-left: 100"><strong> 27
<input name="q2" type="radio" value="21">понятной<br> 27
<input name="q2" type="radio" value="22">полезной<br> 27
<input name="q2" type="radio" value="23">объективной<br> 27
<input name="q2" type="radio" value="24">актуальной<br> 27
</strong></p> 27
</div><hr> 27
<h3>Информацию, отражающую истинное положение дел, называют: 3</h3><div align="left"><p style="margin-left: 100"><strong> 27
<input name="q3" type="radio" value="31">полезной<br> 27
<input name="q3" type="radio" value="32">полной<br> 27
<input name="q3" type="radio" value="33">объективной<br> 27
<input name="q3" type="radio" value="34">достоверной<br> 27
</strong></p> 27
</div><hr> 27
<h3>Информацию, существенную и важную в настоящий момент, называют 4</h3><div align="left"><p style="margin-left: 100"><strong> 28
<input name="q4" type="radio" value="41">полной<br> 28
<input name="q4" type="radio" value="42">объективной<br> 28
<input name="q4" type="radio" value="43">достоверной<br> 28
<input name="q4" type="radio" value="44">актуальной<br> 28
</strong></p> 28
</div><hr> 28
<h3>По способу восприятия человек различает следующие виды информации: 5</h3><div align="left"><p style="margin-left: 100"><strong> 28
<input name="q5" type="radio" value="51">математическую, биологическую, медицинскую, психологическую и пр.<br> 28
<input name="q5" type="radio" value="52">визуальную, звуковую, тактильную, обонятельную, вкусовую<br> 28
<input name="q5" type="radio" value="53">обыденную, производственную, техническую, управленческую<br> 28
<input name="q5" type="radio" value="54">научную, социальную, политическую, экономическую, религиозную и пр.<br> 28
</strong></p> 28
</div><hr> 28
<h3>Наибольший объём информации человек получает при помощи 6</h3><div align="left"><p style="margin-left: 100"><strong> 28
<input name="q6" type="radio" value="61">органов обоняния<br> 28
<input name="q6" type="radio" value="62">органов осязания<br> 28
<input name="q6" type="radio" value="63">органов зрения<br> 28
<input name="q6" type="radio" value="64">органов слуха<br> 28
</strong></p> 28
</div><hr> 28
<h3>Аудиоинформацией называют информацию, которая воспринимается посредством 7</h3><div align="left"><p style="margin-left: 100"><strong> 28
<input name="q7" type="radio" value="71">органов обоняния<br> 29
<input name="q7" type="radio" value="72">органов слуха<br> 29
<input name="q7" type="radio" value="73">органов зрения<br> 29
<input name="q7" type="radio" value="74">органов осязания (кожей)<br> 29
</strong></p> 29
</div><hr> 29
<h3>Звуковая информация передаётся посредством 8</h3><div align="left"><p style="margin-left: 100"><strong> 29
<input name="q8" type="radio" value="81">знаковых моделей<br> 29
<input name="q8" type="radio" value="82">звуковых волн<br> 29
<input name="q8" type="radio" value="83">световых волн<br> 29
<input name="q8" type="radio" value="84">электромагнитных волн<br> 29
</strong></p> 29
</div><hr> 29
<h3>Тактильную информацию человек получает посредством 9</h3><div align="left"><p style="margin-left: 100"><strong> 29
<input name="q9" type="radio" value="91">органов слуха<br> 29
<input name="q9" type="radio" value="92">органов осязания<br> 29
<input name="q9" type="radio" value="93">барометра<br> 29
<input name="q9" type="radio" value="94">термометра<br> 29
</strong></p> 29
</div><hr> 29
<h3>По форме представления информацию можно условно разделить на следующие виды: 10</h3><div align="left"><p style="margin-left: 100"><strong> 29
<input name="q10" type="radio" value="101">математическую, биологическую, медицинскую, психологическую и пр.<br> 29
<input name="q10" type="radio" value="102">визуальную, звуковую, тактильную, обонятельную, вкусовую<br> 29
<input name="q10" type="radio" value="103">обыденную, научную, производственную, управленческую<br> 30
<input name="q10" type="radio" value="104">текстовую, числовую, символьную, графическую, табличную и др.<br> 30
</strong></p> 30
</div><hr> 30
<h3>Примером текстовой информации может служить 11</h3><div align="left"><p style="margin-left: 100"><strong> 30
<input name="q11" type="radio" value="111">чертеж<br> 30
<input name="q11" type="radio" value="112">картина<br> 30
<input name="q11" type="radio" value="113">стихотворение в учебнике «Родная речь»<br> 30
<input name="q11" type="radio" value="114">школьный учебник<br> 30
</strong></p> 30
</div><hr> 30
<h3>Укажите «лишний» объект с точки зрения способа представления информации: 12</h3><div align="left"><p style="margin-left: 100"><strong> 30
<input name="q12" type="radio" value="121">чертеж<br> 30
<input name="q12" type="radio" value="122">картина<br> 30
<input name="q12" type="radio" value="123">телефонный разговор<br> 30
<input name="q12" type="radio" value="124">фотография<br> 30
</strong></p> 30
</div><hr> 30
<h3>К средствам хранения звуковой информации можно отнести: 13</h3><div align="left"><p style="margin-left: 100"><strong> 30
<input name="q13" type="radio" value="131">газету<br> 30
<input name="q13" type="radio" value="132">кассету с рок-музыкой<br> 30
<input name="q13" type="radio" value="133">журнал<br> 30
<input name="q13" type="radio" value="134">учебник по литературе<br> 30
</strong></p> 30
</div><hr> 31
<h3>К средствам передачи аудиоинформации можно отнести: 14</h3><div align="left"><p style="margin-left: 100"><strong> 31
<input name="q14" type="radio" value="141">газету<br> 31
<input name="q14" type="radio" value="142">плакат<br> 31
<input name="q14" type="radio" value="143">журнал<br> 31
<input name="q14" type="radio" value="144">радио<br> 31
</strong></p> 31
</div><hr> 31
<h3>Примером хранения числовой информации может служить: 15</h3><div align="left"><p style="margin-left: 100"><strong> 31
<input name="q15" type="radio" value="151">графическое изображение на экране монитора<br> 31
<input name="q15" type="radio" value="152">текст песни<br> 31
<input name="q15" type="radio" value="153">таблица значений функции<br> 31
<input name="q15" type="radio" value="154">иллюстрация в журнале<br> 31
</strong></p> 31
</div><hr> 31
<table> 31
<tr> 31
<td colspan="3"><div align="center"><p><strong><br><hr>Нажми на кнопку для завершения теста:</strong></td></div> 31
</tr> 31
<tr align="center"> 31
<td><strong><input name="check" onclick="dataBase(this.form)" type="button" 31
value=" Подсчитать баллы "></strong></td> 31
<td><strong><textarea cols="5" name="display" rows="1" wrap="VIRTUAL"></textarea></strong></td> 31
<td><strong><input type="reset" value=" Сбросить ответы "></strong></td> 31
</tr> 31
</table> 32
</form></center> 32
<p align=center><strong>Подведем итоги. Если Вы набрали:<br> 32
<center> 32
<ul> 32
Критерии оценки 32
<li>до 8 Удовлетворительно<li>9-12- Хорошо<li>ровно 13-15 Отлично</ul> 32
<br> 32
</center> 32
</strong></p> 32
<hr align="center"> 32
<center> 32
</BODY> 32
</HTML> 32
Для запуска данного теста, необходимо запустить web-документ test.html с помощью Web-браузера (Internet Explorer 4.x,Opera, Netscape). 32
2.2 Описание 1-го блока 32
<HTML> 32
<HEAD> 32
<TITLE>Тема:"Информация"</TITLE> 32
<script language="JavaScript"> 32
<!-- Hide JavaScript from Java-Impaired Browsers 32
function dataBase(test) { 32
var counter=0; 32
if (test.q1[0].checked) {counter++;} 32
if (test.q2[2].checked) {counter++;} 32
if (test.q3[3].checked) {counter++;} 32
if (test.q4[3].checked) {counter++;} 32
if (test.q5[1].checked) {counter++;} 33
if (test.q6[2].checked) {counter++;} 33
if (test.q7[1].checked) {counter++;} 33
if (test.q8[1].checked) {counter++;} 33
if (test.q9[1].checked) {counter++;} 33
if (test.q10[3].checked) {counter++;} 33
if (test.q11[2].checked) {counter++;} 33
if (test.q12[2].checked) {counter++;} 33
if (test.q13[1].checked) {counter++;} 33
if (test.q14[3].checked) {counter++;} 33
if (test.q15[2].checked) {counter++;} 33
document.test.display.value = counter; 33
} 33
// End Hiding Script --> 33
</script> 33
</HEAD> 33
<BODY bgcolor=#23781> 33
<center> 33
<form action="remove_it?subject=Answer on test questions" method="post" name="test"> 33
<!--ENCTYPE="text/plain"--> 33
В данном блоке, описываем счетчик правильных ответов. И вывод их результата. Так же тут можно указать цвет текста и фона. 33
Так же в первом блоке указываются вопросы теста и варианты ответов. 33
2.3 Описание 2-го блока 34
<td colspan="3"><div align="center"><p><strong><br><hr>Нажми на кнопку для завершения теста:</strong></td></div> 34
</tr> 34
<tr align="center"> 34
<td><strong><input name="check" onclick="dataBase(this.form)" type="button" 34
value=" Подсчитать баллы "></strong></td> 34
<td><strong><textarea cols="5" name="display" rows="1" wrap="VIRTUAL"></textarea></strong></td> 34
<td><strong><input type="reset" value=" Сбросить ответы "></strong></td> 34
</tr> 34
</table> 34
</form></center> 34
<p align=center><strong>Подведем итоги. Если Вы набрали:<br> 34
<center> 34
<ul> 34
Критерии оценки 34
<li>до 8 Удовлетворительно<li>9-12- Хорошо<li>ровно 13-15 Отлично</ul> 34
<br> 34
</center> 34
</strong></p> 34
<hr align="center"> 34
<center> 34
</BODY> 34
</HTML> 34
Во втором же блоке, описаны кнопки очистки и подведения итогов (количество правильных ответов). Так же указаны критерии оценки. 34
Список используемой литературы 35