 |
Изучение основ языка Javascript.
|
|
|
|
МЕТОДИЧЕСКИЕ УКАЗАНИЯ
ПО выполнению
Лабораторных работ
по дисциплине
КОМПЬЮТЕРНЫЕ ТЕХНОЛОГИИ
Направление подготовки:
10.03.01 «Информационная безопасность»
Профиль подготовки:
«Организация и технология защиты информации»
Квалификация выпускника:
бакалавр
Форма обучения:
очная, очно-заочная
Тула 2017
Методические указания к лабораторным работам составлены доцентом С.Ю. Борзенковой и обсуждены на заседании кафедры ИБ института ПМКН
Протокол № _____ от «_____» _____________ 20____ г.
Зав. кафедрой _____________________ А.А. Сычугов
Методические указания к лабораторным работам пересмотрены и утверждены на заседании кафедры ИБ института ПМКН
Протокол № _____ от «_____» _____________ 20____ г.
Зав. кафедрой _____________________ А.А. Сычугов
Содержание
ЛАБОРАТОРНАЯ РАБОТА № 1. СОЗДАНИЕ СТРАНИЦЫ HTML......................................... 4
................................................................................................................................................................
ЛАБОРАТОРНАЯ РАБОТА № 2. ИЗУЧЕНИЕ ОСНОВ ЯЗЫКА JAVASCRIPT...................... 6
................................................................................................................................................................
ЛАБОРАТОРНАЯ РАБОТА № 3. СОЗДАНИЕ СЦЕНАРИЕВ С ИСПОЛЬЗОВАНИЕМ УСЛОВНЫХ ОПЕРАТОРОВ И ОПЕРАТОРОВ ЦИКЛА................................................................................... 7
................................................................................................................................................................
ЛАБОРАТОРНАЯ РАБОТА № 4. СОЗДАНИЕ СЦЕНАРИЕВ С ИСПОЛЬЗОВАНИЕМ МАССИВОВ 11
................................................................................................................................................................
ЛАБОРАТОРНАЯ РАБОТА № 5. СОЗДАНИЕ СЦЕНАРИЕВ С ИСПОЛЬЗОВАНИЕМ ПЕРЕКЛЮЧАТЕЛЕЙ..................................................................................................................... 12
|
|
|
................................................................................................................................................................
ЛАБОРАТОРНАЯ РАБОТА № 6. СОЗДАНИЕ СЦЕНАРИЕВ С ИСПОЛЬЗОВАНИЕМ ФЛАЖКОВ 14
................................................................................................................................................................
ЛАБОРАТОРНАЯ РАБОТА № 7. СОЗДАНИЕ СЦЕНАРИЕВ С ИСПОЛЬЗОВАНИЕМ СПИСКОВ 15
................................................................................................................................................................
ЛАБОРАТОРНАЯ РАБОТА № 8. СОЗДАНИЕ СЦЕНАРИЕВ С ИСПОЛЬЗОВАНИЕМ ФРЕЙМОВ 16
................................................................................................................................................................
ПРИЛОЖЕНИЕ 1............................................................................................................................ 20
ЛАБОРАТОРНАЯ РАБОТА № 1
СОЗДАНИЕ СТРАНИЦЫ HTML.
Цель работы: Ознакомление с особенностями форматирования документов HTML и их отображения при помощи обозревателя. Изучение разметки абзацев. Создание документа, содержащего гиперссылки, графику, текст. Изучение атрибутов тегов.
Теоретическая часть:
Все документы HTML имеют одну и ту же структуру, определяемую определенным набором тегов. Теговую модель можно представить в следующем виде:
<имя элемента, список атрибутов> содержание элемента </имя элемента>
Например, применим тег <p> (новый параграф в тексте):
<p align=center>Это новый параграф</p>
В рассмотренном примере
p — это имя тега;
align=center — атрибут тега, указывающий на то, что текст внутри параграфа необходимо разместить по центру;
Это новый параграф — содержание параграфа;
/p — закрывающий тег, указывающий на конец параграфа;
Гипертекстовая ссылка определяется при помощи парного тега <a>. Обязательным атрибутом является href=. В качестве значения атрибута используется адрес URL документа, на который указывает ссылка, ссылка может быть локальной.
Примеры: <a href="http://osu.cctpu.edu.ru">Сайт кафедры </a>
<a href="http://osu.cctpu.edu.ru/index.html#point"> Ссылка на второй абзац внутри документа "Новости"</a>.
|
|
|
Для представления графики используют форматы файлов gif и jpeg. Для вставки рисунка используется текстовый элемент, задаваемый непарным тегом <img>. Тег <img> должен содержать обязательный атрибут SCR=, задающий адрес URL файла с изображением.
Пример: <img src="http://osu.cctpu.edu.ru/images/logo.gif">
Любой гипертекстовый документ состоит из двух частей: заголовка документа (head) и тела документа (body)
<html>
<head><title> Содержание заголовка </title></head>
<body> Содержание тела документа
<form> Элементы формы
</form>
</body>
</html>
Ход работы:
Создание простейшей Web-страницы.
1. Запустите текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).
2. Введите следующий документ:
<html>
<head><title>заголовок документа</title></head>
<body> содержание документа </body>
</html>
Примечание: В качестве заголовка и содержания документа студент может вводить любой произвольный текст.
3. Сохраните этот документ под любым именем с расширением.html Перед сохранением убедитесь, что сброшен флажок Скрывать расширения для зарегистрированных типов файлов" (Пуск > Настройка > Панель управления > Свойства папки > Вид). В противном случае редактор Блокнот может автоматически добавить в конец имени расширение.ТХТ
4. Запустите программу Internet Explorer (Пуск > Программы > Internet Explorer).
5. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл
Изучение приемов форматирования абзацев.
1. Откройте созданный файл или через программу Блокнот или через контекстное меню (пункт просмотр кода).
2. Удалите весь текст, находящийся между тегами <body> и </body>. Текст, который будет вводиться, необходимо поместить после тега <body>, а его конкретное содержание может быть любым.
3. Введите заголовок первого уровня, заключив его между тегами <h1> и </h1>.
4. Введите заголовок второго уровня, заключив его между тегами <h2> и </h2>.
5. Введите отдельный абзац текста, начав его с тега <p>. Пробелы и символы перевода строки можно использовать внутри абзаца произвольно.
6. Введите тег горизонтальной линейки <hr>.
7. Введите еще один абзац текста, начав его с тега <p>.
|
|
|
8. Сохраните этот документ под другим именем.
9. Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer) и откройте файл.
Создание гиперссылок.
1. Откройте созданный файл в программе Блокнот.
2. Текст, который будет вводиться в последующих пунктах, необходимо поместить после тега <body>.
3. Введите фразу: Текст до ссылки.
4. Введите тег: <a href="имя первого файла.html">.
5. Введите фразу: Ссылка.
6. Введите закрывающий тег </а>.
7. Введите фразу: Текст после ссылки.
8. Сохраните документ
9. Просмотрите документ
10. Щелкните на ссылке и убедитесь, что при этом загружается документ, на который указывает ссылка.
11. Используя кнопку Назад можете вернуться к исходному файлу.
Создание изображения и использование его на Web-странице.
1. Откройте программу Paint (Пуск > Программы > Стандартные > Paint). Задайте размеры нового рисунка, например 150х150 точек (Рисунок > Атрибуты).
2. Создайте рисунок
3. Сохраните этот рисунок под любым именем с расширением.gif (в формате GIF).
4. Внесите изменения в рисунок и сохраните рисунок еще раз под другим именем в формате GIF и закройте программу Paint.
5. Откройте ранее созданный файл.
6. Введите произвольный текст (протяженностью 4-5 строк) и установите текстовый курсор в его начало.
7. Введите Ter <img src="имя первого файла.gif" align="center">.
8. Сохраните документ.
9. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов.
10. Вернитесь в программу Блокнот и измените значение атрибута: align="left". Сохраните файл.
11. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов.
12. Вернитесь в программу Блокнот и добавьте в тег <img> атрибуты: hspace=40 vspace=20. сохраните файл под тем же именем.
13. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов.
14. Вернитесь в программу Блокнот и измените имя рисунка: src="имя второго файла.gif". Сохраните файл под тем же именем.
15. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов.
|
|
|
16. Самостоятельная работа: в нести изменения в файл, создав фоновый рисунок.
Создание формы документа
1. Откройте созданный файл в программе Блокнот.
2. Между тегами <body> и </body> добавьте теги <form name=”form1”> и </form>.
3. Элементы формы документа, которые будут созданы, необходимо поместить между тегами <form name=”form1”> и </form>.
4. Создайте текстовое поле: введите <input type=”text” name=”text1” size=20>
5. Создайте кнопку сброса: введите <input type=”reset” name=”button” value=”Сброс”>
6. Сохраните документ.
7. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов.
ЛАБОРАТОРНАЯ РАБОТА № 2
ИЗУЧЕНИЕ ОСНОВ ЯЗЫКА JAVASCRIPT.
Цель работы: Изучить основные функции, предопределенные переменные и свойства объектов языка JavaScript.
Теоретическая часть:
В ходе настоящей лабораторной работы нужно создать калькулятор, который выполняет простейшие арифметические операции. Калькулятор будет содержать следующие поля:
· поле для ввода первого числа;
· поле для ввода второго числа;
· кнопку, по нажатии на которую производится сложение двух чисел, указанных в предыдущих полях;
· поле для вывода результата;
Такие элементы, как поля для ввода текста, кнопки, выпадающие списки, флажки указываются внутри тега <form></form>. Например, для того, чтобы страница содержала поле для ввода текста, в ее тело необходимо поместить следующий код: <form name="form1"> <input type="text" name="field1" size=12> </form>
В окне браузера это будет выглядеть так:
Как только вы внесли все необходимые элементы (в нашем случае это три поля для ввода текста и одна кнопка), к ним можно привязать обработчики событий, написанные на языке JavaScript.
Рассмотрим пример.
<html>
<head>
<title>New Page 1</title>
Программа простейшего калькулятора
</head>
<script language="JavaScript">
function calc (obj) {
var a=1*obj.a1.value;
var b=1*obj.b1.value;
res=a+b;
obj.res1.value=res; }
</script>
<body>
<form name="form1">
Number 1: <input type="text" size=10 name="a1" onChange="calc(form1)"><br>
Number 2: <input type="text" size=10 name="b1" onChange="calc(form1)"><br>
Result: <input type="text" size=10 name="res1"><br>
<br>
<input type="reset" value="Cancel">
</form>
</body>
</html>
Ход работы:
1. Откройте Блокнот, сохраните текущую страницу как calc.html
2. На странице создайте четыре гиперссылки: Сложение, Вычитание, Умножение, Деление
3. Создайте четыре html – файла с гиперссылками на главную страницу (файл calc.html).
4. Включите их в созданные гиперссылки.
5. Для каждого файла создайте форму и сценарий для выполнения арифметических операций. Вначале сформировать тело страницы - в разделе body создайте форму, назовите ее form1. Внутри формы укажите три текстовых поля. После текстовых полей разместите кнопки Вычислить, Обновить.
|
|
|
6. В созданные файлы внесите сценарии, соответствующие выполняемым операциям.
7. Сохраните созданные документы, откройте их в браузере и проверьте работоспособность.
ЛАБОРАТОРНАЯ РАБОТА № 3
|
|
|
