Лабораторные работы / Методические указания к ЛР по ОАИП (09.02.07)
.pdf
86 |
font-family: 'Gill Sans', 'Gill Sans MT', |
Calibri, 'Trebuchet MS', sans-serif; |
|
87 |
font-style: normal; |
88 |
font-weight: 300; |
89 |
font-size: 16px; |
90 |
line-height: 22px; |
91 |
display: flex; |
92 |
align-items: center; |
93 |
text-align: center; |
94 |
color: #FFFDFD; |
95 |
} |
96 |
#frame2 |
97 |
{ |
98 |
/*Стили блока Адрес из Figma*/ |
99 |
} |
100 |
#frame3 |
101 |
{ |
102 |
position: absolute; |
103 |
width: 442px; |
104 |
height: 100px; |
105 |
left: 924px; |
106 |
top: 0px; |
107 |
} |
108 |
#frame4 |
109 |
{ |
110 |
/*Стили блока Автор сайта из Figma*/ |
111 |
} |
112 |
#submenu1text |
113 |
{ |
114 |
position: absolute; |
115 |
width: 119px; |
116 |
height: 33px; |
117 |
left: 174px; |
118 |
top: 9px; |
119 |
font-family: 'Gill Sans', 'Gill Sans MT', |
Calibri, 'Trebuchet MS', sans-serif; |
|
120 |
font-style: normal; |
121 |
font-weight: 300; |
122 |
font-size: 24px; |
123 |
line-height: 33px; |
124 |
display: flex; |
125 |
align-items: center; |
126 |
text-align: center; |
127 |
color: #FFFFFF; |
291
128 |
} |
129 |
#submenu2text |
130 |
{ |
131 |
/*Стили блока Преподавателю из Figma*/ |
132 |
} |
133 |
#submenu3text |
134 |
{ |
135 |
/*Стили блока Контакты из Figma*/ |
136 |
} |
Все контекстные селекторы были взяты из сгенерированных таблиц стилей для фреймов, созданных в сервисе Figma.
3. GitHub Pages
Git — распределённая система контроля версий, которая даёт возможность разработчикам отслеживать изменения в файлах и работать над одним проектом совместно с коллегами.
Подход Git к хранению данных похож на набор снимков миниатюрной файловой системы. Каждый раз, когда вы сохраняете состояние своего проекта в Git, система запоминает, как выглядит каждый файл в этот момент, и сохраняет ссылку на этот снимок.
GitHub — сервис онлайн-хостинга репозиториев, обладающий всеми функциями распределённого контроля версий и функциональностью управления исходным кодом.
Git-репозиторий, загруженный на GitHub, доступен с помощью интерфейса командной строки Git и Git-команд. Также есть и другие функции: документация,
запросы на принятие изменений (pull requests), история коммитов, интеграция со множеством популярных сервисов, email-уведомления, эмодзи, графики, вложенные списки задач, система @упоминаний, похожая на ту, что в Twitter, и т.д.
Системы контроля версий (СКВ, VCS, Version Control Systems) позволяют разработчикам сохранять все изменения, внесённые в код. При возникновении проблем они могут просто откатить код до рабочего состояния и не тратить часы на поиски ошибок.
СКВ также позволяют нескольким разработчикам работать над одним проектом и сохранять внесённые изменения независимо друг от друга. При этом каждый участник команды видит, над чем работают коллеги.
292
Если ваш сайт — это статические HTML-страницы, то необязательно приобретать хостинг, можно воспользоваться сервисом GitHub Pages. Для этого у вас должен быть аккаунт на Гитхабе. Как зарегистрироваться можно посмотреть здесь6.
Для создания репозитория заходим на сайт Гитхаба и в блоке Your repositories
нажимаем кнопку New repository.
Теперь нам нужно заполнить параметры нового репозитория. Важно, чтобы название репозитория было в виде «username.github.io», где username — имя вашего аккаунта на Гитхабе. В нашем примере это будет «Zaid97-kai.github.io». Обязательно установим галочку Initialize this repository with a README. А затем нажмём кнопку
Create repository.
Рисунок 16.10
Репозиторий создан, теперь нужно загрузить файлы. Для этого необязательно клонировать репозиторий к себе на компьютер или постигать другие нюансы работы с Гитом — можно воспользоваться интерфейсом Гитхаба. Давайте нажмём кнопку
Upload files.
6 https://htmlacademy.ru/blog/boost/tools/register-on-github-work-with-console
293
Рисунок 16.11
Затем перетащим файлы в появившееся поле для загрузки.
Рисунок 16.12 - Загрузка файлов в репозиторий
Добавим комментарий к нашему коммиту и нажмём кнопку Commit changes.
Рисунок 16.13 - Интерфейс репозитория в Гитхабе с загруженными файлами
294
Чтобы проверить работу сайта, достаточно перейти по адресу username.github.io,
в нашем случае это Zaid97-kai.github.io7.
Рисунок 16.14 – Рабочий сайт
ЗАДАНИЕ НА ЛАБОРАТОРНУЮ РАБОТУ Разработать веб-интерфейс для главной страницы информационной системы
согласно индивидуальному варианту 12-14 лабораторных работ.
Главная страница должна включать в себя следующие блоки:
1.Шапка с элементами фирменного стиля организации, контактной информацией, окном регистрации, авторизации и восстановления пароля.
2.Блок меню. О нас, Новости, Наши услуги ... (Перечень пунктов меню подбирается с учетом специфики предметной области информационной системы).
3.Зона контента.
4.Футер (юридический адрес организации, ссылки на социальные сети…).
Опционально можно добавлять к вышеперечисленному списку новые блоки.
Для разработки главной страницы использовать лишь язык гипертекстовой разметки HTML 5 и язык описания внешнего вида документа CSS 3.
Для демонстрации веб-сайта необходимо его выложить на хостинг (можно использовать инструмент GitHub Pages).
7 Ссылка на репозиторий проекта https://github.com/Zaid97-kai/Zaid97-kai.github.io.git
295
ЛАБОРАТОРНАЯ РАБОТА №17
Тема: «Разработка алгоритмов шифрования на языке программирования
JavaScript»
ЦЕЛЬ РАБОТЫ
Получение навыков разработки простейших алгоритмов шифрования на
интерпретируемом языке программирования.
ХОД РАБОТЫ
1. Решение алгоритмических задач с использованием языка программирования
JavaScript
Постановка задачи:
Разработать простой тест: на экране по очереди появляются вопросы (вопросы выбираются студентом), с вариантами ответов. В конце работы программа выдает количество заработанных баллов по результатам ответа.
Для начала спроектируем веб-интерфейс с помощью языка гипертекстовой разметки HTML. Страница с необходимым контентом представлена на рисунке 17.1.
Рисунок 17.1 – Разметка веб-страницы с тестом
296
Код верстки страницы представлен в листинге 17.1.
|
|
|
Листинг 17.1 – Разметка веб-страницы теста |
|||
|
|
|
|
|
|
|
1 |
<!DOCTYPE html> |
|
|
|
|
|
2 |
<html lang="en"> |
|
|
|
|
|
3 |
<head> |
|
|
|
|
|
4 |
<meta charset="UTF-8"> |
|
|
|
||
5 |
<title>Тест</title> |
|
|
|
|
|
6 |
<script src="script.js"></script> |
|
|
|||
7 |
</head> |
|
|
|
|
|
8 |
<body> |
|
|
|
|
|
9 |
<div id="question0"> |
|
|
|
|
|
10 |
<p><b>Введите свое имя</b></p> |
|
|
|||
11 |
<p><input |
type="text" |
name="name" |
|
||
id="inputname"></p> |
|
|
|
|
||
12 |
</div> |
|
|
|
|
|
13 |
<div id="question1"> |
|
|
|
|
|
14 |
<p><b>1. Как называется изучаемый предмет</b></p> |
|
||||
15 |
<input |
type="radio" |
name="subject" |
value="pp"> |
|
|
Прикладное программирование<br> |
|
|
||||
16 |
<input |
type="radio" |
name="subject" |
value="oaip"> |
|
|
Основы алгоритмизации и программирования<br> |
|
|
||||
17 |
<input |
type="radio" |
name="subject" |
value="evm"> |
|
|
Элементы высшей математики<br> |
|
|
||||
18 |
</div> |
|
|
|
|
|
19 |
<div id="question2"> |
|
|
|
|
|
20 |
<p><b>2. Как зовут преподавателя?</b></p> |
|
||||
21 |
<input |
type="radio" |
name="teacher" |
value="pp"> |
|
|
Заид Зульфатович<br> |
|
|
|
|
||
22 |
<input |
type="radio" |
name="teacher" |
value="oaip"> |
|
|
Зульфат Заидович<br> |
|
|
|
|
||
23 |
<input |
type="radio" |
name="teacher" |
value="evm"> |
|
|
Заид Мингалиевич<br> |
|
|
|
|
||
24 |
</div> |
|
|
|
|
|
25 |
<div id="question3"> |
|
|
|
|
|
26 |
<p><b>3. Какой язык используется для разметки веб- |
|
||||
страниц?</b></p> |
|
|
|
|
||
27 |
<input |
type="radio" |
name="prlang" |
value="pp"> |
|
|
CSS<br> |
|
|
|
|
|
|
28 |
<input |
type="radio" |
name="prlang" |
value="oaip"> |
|
|
C++<br> |
|
|
|
|
|
|
29 |
<input |
type="radio" |
name="prlang" |
value="evm"> |
|
|
HTML<br> |
|
|
|
|
|
|
30 |
</div> |
|
|
|
|
|
297
31<br>
32<div id="submit">
33 |
<input type="submit" value="Проверить" onclick=" |
"> |
|
34 |
</div> |
35 |
<div id=result></div> |
36 |
</body> |
37 |
</html> |
В строке 9-12 создается первый блок div, в котором размещается текстовое поле
(строка 11) для ввода имени тестируемого.
В строке 13-18 создается второй блок для текста формулировки первого вопроса
(строка 14) и трех вариантов ответов (строка 15-17), выбор которых происходит посредством радиокнопок. По аналогии создаются второй (строка 19-24) и третий
(строка 25-30) вопросы.
Встроке 35 объявлен пустой блок div, в котором будет появляться результат прохождения теста после нажатия кнопки Отправить.
Встроке 33 создается кнопка для отправки ответов теста. При нажатии на кнопку срабатывает событие onclick, при возникновении которого выполняется метод
countResult(), реализованный в файле script.js.
Код программы, реализованный в файле script.js, представлен в листинге 17.2.
|
Листинг 17.2 – Файл script.js |
|
|
|
|
1 |
function countResult() |
|
2 |
{ |
|
3 |
var res = document.getElementById('result'); |
|
4 |
var rad1 = document.getElementsByName('subject'); |
|
5 |
var rad2 = document.getElementsByName('teacher'); |
|
6 |
var rad3 = document.getElementsByName('prlang'); |
|
7 |
var counter = 0; |
|
8 |
if(rad1[1].checked) |
|
9 |
{ |
|
10 |
counter++; |
|
11 |
} |
|
12 |
if(rad2[0].checked) |
|
13 |
{ |
|
14 |
counter++; |
|
15 |
} |
|
16 |
if(rad3[2].checked) |
|
17 |
{ |
|
298
18 |
counter++; |
|
|
19 |
} |
|
|
20 |
var |
str |
= |
|
String(document.getElementById('inputname').value) + " ваш |
||
|
результат " + String(counter); |
|
|
21 |
res.innerHTML = str; |
|
|
22 |
} |
|
|
Переменная res после выполнения команды хранит узел документа с id result.
В нашем случае – это блок div, куда будет выводится результат прохождения теста.
После выполнения команды getElementsByName переменные rad1, rad2, rad3
содержат массив элементов radiobutton. rad1 хранит массив радиокнопок с именем subject, rad2 – массив радиоточек с именем teacher, rad3 – массив радиоточек с именем prlang. Именно поэтому дальнейшая работа с данной переменной должна вестись как с массивом.
Переменная counter является счетчиком количества правильных ответов.
В строке 8-19 ведется проверка правильности выбранных ответов. Свойство checked возвращает значение true, если радиокнопка выбрана.
После выполнения проверки правильности ответов в переменную str
сохраняется строка с именем тестируемого, которое было введено в текстовое поле с id
равным inputname.
С помощью свойства innerHTML в строке 21 мы устанавливаем для элемента res
HTML разметку, которая хранится в переменной str.
Результат работы программы представлен на рисунке 17.2.
299
Рисунок 17.2 – Результат работы программы
2.Алгоритмы шифрования
2.1.Система шифрования Цезаря
Шифр Цезаря является частным случаем шифра простой замены. Свое название этот шифр получил по имени римского императора Гая Юлия Цезаря, который использовал этот шифр при переписке с Цицероном (около 50 г. до н.э.).
При шифровании исходного текста методом Цезаря, каждая буква открытого текста заменяется на букву того же алфавита по следующему правилу. Заменяющая буква определяется путем смещения по алфавиту от исходной буквы на K букв
(позиций). При достижении конца алфавита выполняется циклический переход к его началу. Смещение K в данном случае определяет ключ шифрования. Совокупность возможных подстановок для больших букв английского алфавита и K=3 представлена в таблице 17.1.
Таблица 17.1. Таблица подстановок
A |
|
D |
|
H |
|
K |
|
O |
|
R |
|
V |
|
Y |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
B |
|
E |
|
I |
|
L |
|
P |
|
S |
|
W |
|
Z |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
C |
|
F |
|
J |
|
M |
|
Q |
|
T |
|
X |
|
A |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
D |
|
G |
|
K |
|
N |
|
R |
|
U |
|
Y |
|
B |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
E |
|
H |
|
L |
|
O |
|
S |
|
V |
|
Z |
|
C |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
300