Практическое задание по теме 5
СОЗДАНИЕ ИНТЕРАКТИВНЫХ ВЕБ-ДОКУМЕНТОВ»
Учебные и воспитательные цели практического занятия:
Образовательные: подготовка обучающихся к организационно-управленческой деятельности посредством формирования у них знаний, умений и компетенций по вопросам использования экранных форм для обработки данных средствами JavaScript.
Развивающие:актуализироватьопорныезнания по дисциплине, а также межпредметные связи; для развития и активации у слушателей самостоятельного мышления, логических способностей и профессиональной лексически и терминологически грамотной речи, в процессе проведения занятия решать практические задачи с использованием компьютерных технологий.
Воспитательные и личностно-формирующие:формирование информационно-технической культуры и кругозора; стимулирование активной познавательной деятельности и мотивации, способствование выработке у слушателей убежденности в важности освоения рассматриваемых вопросов для будущей практической деятельности.
Категория обучающихся:слушатели 2 курса факультета заочного обучения
Время:2 час (90 мин).
Место проведения:компьютерный класс.
Материально-техническое обеспечение:
1. Мультимедийное оборудование (проектор, экран, ноутбук, колонки).
2. Интерактивная доска.
3. Компьютерный класс.
Программное обеспечение:
1. Операционная система: Microsoft Windows.
2. Текстовый редактор: Блокнот или Atom.
|
|
|
3. Веб-браузер: IE, Opera или Mozilla.
ПЛАН практического ЗАНЯТИЯ
| Учебные вопросы | Время, мин |
| Вступительная часть …………………………..……………………… Использование объектной модели документа для обработки данных средствами JavaScript ……………………………………………….… Выполнение практической части: Создание формы для ввода значений ………………………………… Обработка данных, введенных посредству электронной формы…… Заключительная часть ………………………………………………… | 10 20 20 30 10 |
| Всего…………………………………………………………………….. | 90 |
МЕТОДИЧЕСКИЕ УКАЗАНИЯ ПО ОТРАБОТКЕ УЧЕБНЫХ
ВОПРОСОВ
Задание №1.Создать сценарий на языке JavaScript для вывода информационного сообщения.
Пример выполнения задания:
1. В заголовок HTML-документа добавляется код со сценария.
<SCRIPT language="JavaScript">
<!--
function myFunction()
{ alert ("Пример JavaScript"); }
-->
</SCRIPT>
2. В тело документа вставляются html-форма, содержащая кнопку вызова скрипта.
<FORM>
<INPUT type="button" value="Об авторе" onClick="myFunction()">
</FORM>
Задание №2.Запрограммировать гиперссылку для вывода на экран сообщения об авторе работы.
Пример выполнения задания:
|
|
|
1. В тело HTML-документа добавляется гиперссылка со скриптом:
<A HREF="JavaScript:alert ('Автор страницы - Петров');"> Об авторе</A>
Задание №3.Создать сценарий на языке JavaScript для открытия нового окна (функция openNew ) и его закрытия (функция closeNew) с помощью двух кнопок управления. В окне будет отображаться содержимое файла st.html.
Пример выполнения задания:
1. В заголовок HTML-документа добавляется код с описанием сценария.
<SCRIPT language="JavaScript">
<!--
function openNew()
{ WinExample= open("st.html","displayWindow",
"height=100, status=no, toolbar=no, menubar=no");}
function closeNew() {
WinExample.close();}
// -->
</SCRIPT>
В тело документа вставляются строки для описания двух кнопок управления, с помощью которых окно будет открываться и закрываться. Результат работы сценария приведен на рис. 1.
<FORM>
<INPUT type="button" value="Открыть новое окно" onClick="openNew()"><br>
<INPUT type=button value="Закрыть новое окно" onClick ="closeNew()"><br>
</FORM>
Задание №4.Запрограммировать гиперссылку для открытия html-документа в новом окне браузера.
Пример выполнения задания:
1. В тело HTML-документа добавляется гиперссылка со скриптом:
<A href="javascript:window.open('index.html','example','scrollbars'); void(0) ">
|
|
|
Открыть окно
</A>
Если не использовать функцию void(0), то произойдет замещение текста HTML-документа в окне.
Задание №5.Создать сценарий на языке JavaScript для замены одного изображения другим и изменения фона документа. При его выполнении изображение из файла picture1.jpg заменяется на изображение из файла picture2.jpg и обратно.
Пример выполнения задания:
1. В заголовок HTML-документа добавляется код с описанием сценария.
<SCRIPT language="JavaScript">
<!--
function change1() {
document.myImage.src='picture1.jpg';
}
function change2() {
document.myImage.src='picture2.jpg';
}
// -->
</SCRIPT>
2. В тело документа вставляются строки для описания реакции изображения на перемещение указателя мыши в область изображения и обратно:
<img src="picture2.jpg" name="myImage" onMouseOver="change1()"
onMouseOut="change2()">
Задание №6.Запрограммировать гиперссылки для изменения фона документа.
Пример выполнения задания:
1. В тело HTML-документа добавляется три гиперссылки со скриптом:
<a href="" onMouseover="document.bgColor='red' "> Красный </a><br>
<a href="" onMouseover="document.bgColor='yellow' "> Желтый </a><br>
<a href="" onMouseover="document.bgColor='green' "> Зеленый</a><br>
Задание №7.Создать сценарий на языке JavaScript для регистрации пользователя (функция login). В текстовое поле пользователь должен ввести свое имя, например, kursant. Если он этого не сделает, то появится сообщение с напоминанием; если введет не верно – сообщение об ошибке.
|
|
|
Пример выполнения задания:
1. В заголовок ранее созданного HTML-документа добавляется код со сценария.
<SCRIPT language="JavaScript">
<!--
function login()
{
var user= myForm.n1.value;
if (user== "")
alert("Пожалуйста, заполните поле формы!");
if (user == "kursant")
alert("Добрый день, "+user+" !! Регистрация прошла успешно!")
}
// -->
</SCRIPT>
2. В тело документа вставляются html-форма, содержащая кнопку вызова скрипта и поля ввода логина и пароля.
<FORM name="myForm">
Имя
<INPUT type="text" name="n1" value="">
<P>
<INPUT type="button" value="РЕГИСТРАЦИЯ" onClick="login()">
</FORM>
Задание №8.Создать сценарий на языке JavaScript для тестирования знаний. При его выполнении подсчитывается количество правильных ответов и выдается результат. Внешний вид электронной формы с тремя группами переключателей и одной кнопкой управления приведен на рис. 1.
Рисунок 1
Пример выполнения задания:
1. В заголовок HTML-документа добавляется код со сценария.
<SCRIPT>
var
i=0;
</SCRIPT>
2. В тело документа вставляются html-форма, содержащая кнопку вызова скрипта и элементы графического интерфейса для ввода данных.
<FORM>
<H3> Графика с представлением изображения в виде совокупности точек называется...</H3>
<INPUT type="radio" name='v1' > фрактальной
<INPUT type="radio" name='v1' >векторной
<INPUT type="radio" name='v1'onclick="i++" >растровой
<H3> HTML является...</H3>
<INPUT type="radio" name='v2' >языком программирования
<INPUT type="radio" name='v2' >браузером
<INPUT type="radio" name='v2' onclick="i++" >языком разметки
<H3> Для воспроизведения HTML-кода используется ...</H3>
<INPUT type="radio" name='v3' > CorelDRAW
<INPUT type="radio" name='v3' onclick="i++"> Internet Explorer
<INPUT type="radio" name='v3' > Microsoft PowerPoint
<P>
<INPUT type="button" value="Результат"onclick="alert('Ваши очки - '+i)" >
<FORM>
Контрольные вопросы:
1. Возможности тэга <FORM> при для обработки данных средствами JavaScript;
2. Возможности тэга <INPUT> при для обработки данных средствами JavaScript;
3. Возможности тэга <SELECT> при для обработки данных средствами JavaScript;
4. Возможности тэга <TEXTAREA> при для обработки данных средствами JavaScript
5. Возможности ввода данных, которые будут передаваться для обработки скрипту JAVASCRIPT;
6. Объектная модель документа HTML;
7. Объектная модель языка сценариев JavaScript
Задание на самостоятельную работу:
Задание 1. Измените html-форму задания №7 таким образом, чтобы варианты ответов были представлены различными элементами графического интерфейса.
Задание 2. Измените JavaScript задания №7 таким образом, чтобы в случае неоднократно введенных правильных ответов на вопрос теста засчитывался бы лишь один балл.
Дата добавления: 2018-08-06; просмотров: 290; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!