По учебной дисциплине ИНФОРМАТИКА И ИКТ
ОДп.02.
Информатика и ИКТ
Автомеханик
УРОК № 8 2
Группа: 2
Дата: 25.01.2022 г.
Преподаватель: Л.Н.Иванова
Тема урока: ПРАКТИЧЕСКАЯ РАБОТА № 24. СОЗДАНИЕ ДИНАМИЧЕСКИХ ЭЛЕМЕНТОВ НА ВЕБ-СТРАНИЦАХ.
Цель: изучить создание динамических элементов на веб-страницах.
ТЕОРЕТИЧЕСКАЯ ЧАСТЬ
Что такое динамический Web-сайт?
Каждая отображаемая страница динамических Web-сайтов основана на шаблонной странице, в которую вставляется постоянно меняющееся информационное наполнение, которое обычно хранится в базе данных. Когда пользователь запрашивает страницу, соответствующая информация извлекается из базы, вставляется в шаблон, образуя новую Web-страницу, и пересылается Web-сервером в пользовательский браузер, который и отображает ее должным образом. Кроме информационного наполнения, динамически могут создаваться также и элементы навигации по Web-сайту. Таким образом, если вам нужно обновить содержимое своего сайта, вы просто добавляете текст для новой страницы, который затем вставляется в базу данных с помощью определенного механизма. В результате получается, что Web-сайт как бы сам себя обновляет.
Почему динамические сайты лучше
Сразу после того как динамический сайт создан и запущен в работу, начинают проявляться его преимущества. Теперь в вашем распоряжении имеется сравнительно небольшое количество шаблонных страниц, с помощью которых генерируются сотни, а может быть, и тысячи Web-страниц. Вид (дизайн) сайта может быть легко изменен с помощью модификации этих шаблонов. Изменение содержимого базы данных можно производить через Web-интерфейс с использованием HTML-формы, не вторгаясь при этом в технические детали каждой специфической СУБД.
|
|
|
Динамический контент (Основы синтаксиса).
Шаг 1: для того, чтобы редактировать ранее созданный сайт и добавить пустую страницу на него выполните следующие: 1) найти и нажмите на кнопку "Новый", 2) выберете "CSHTML" как тип файла, 3) введите название страницы и нажмите кнопку "OK" (рисунок 1).
Рисунок 1 – Окно создания нового файла
Шаг 2: Как только вы это сделаете - вам автоматически будет представлено содержимое вновь созданной страницы. Чтобы продолжить, замените разметку на приведенную в листинге 1.
Листинг 1 – Вывод считалочки с помощью динамической страницы
@{ var n = 100; var s = Request["n"]; if (s!=null) { n=int.Parse(s); } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title> Считалочка</title> </head><body> <h1>@n сонных птичек</h1> <ul> @for (int i=n;i>0;i--) { <li>@i сонных птичек сидели на стене… А будет @(i-1) сонных птичек, сидящих на стене! </li>} </ul></body></html>Данная программа реализует считалочку. По умолчанию количество птиц на стене равно 10. Для ввода своего количества птиц в строке адреса после адреса страницы необходимо ввести «?n=число»
|
|
|
Шаг 3: Когда вы закончили, наступило самое время, чтобы увидеть вашу веб-страницу в действии! Нажмите на "Run" в стандартной панели инструментов, или нажмите клавишу F12 на клавиатуре для запуска страницы в браузере. То что вы увидите, должно соответствовать изображение, показанное на рисунке 2.
Рисунок 2 – Результат работы
Переменные
Переменные - средства для хранения значений в памяти (например, числа, строки, даты и т.д.) и для работы на них. При работе с переменными, вы объявите их с помощью оператора "Var", предшествующего переменной (для неявного типа) или предопределенного типа (для явного типа), который может быть одним из широко известных типов данных, включая : целый, дробный, бинарный, строка, логический… Инициализация происходит так же просто, как и использование оператора присваивания: "=" и следующим за ним значением (для числовых данных) с последующей запятой либо двойными кавычками (для текстовых данных).
В листинге 2 показан пример вычисления ряда 
, в котором значение x меняется в промежутке [-1;1] с шагом 
, n вводится динамически, по умолчанию n=100.
|
|
|
Листинг 2 – Вычисления ряда с помощью динамической страницы
@{
var n = 100;
var s = Request["n"];
double sum = 0;
double summ=0;
double xn = -1;
double xh = 1;
double h=0;
if (s!=null) { n=int.Parse(s); }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> попытка № 112</title>
</head>
<body>
<H1> вывод цикла</H1>
@{
h=(xn+xh)/10; for (int i=1;i<n;i++) {
sum= Math.Pow((-1),xn)*(Math.Pow(xn,(2*i+1))/(2*i+1));
summ=summ+sum;
xn=xn+h;
<p> шаг @i </p>
<p> Итерация равна @Math.Round(sum,5)</p> }
}
<p> общая сумма равна @Math.Round(summ,5) </p>
</body>
</html>
ПРАКТИЧЕСКАЯ ЧАСТЬ
Задание 1. Создать страницу CSHTML.
Задание 2. Согласно варианту напишите код.
Задание 3. Создать ссылку на главной странице на динамическую страницу.
Задание 4. Организуйте вывод с помощью таблицы стилей, созданной на лабораторной работе №1.
Задание 5. Результаты выполнения практического задания запишите в отчет.
КОНТРОЛЬНЫЕ ВОПРОСЫ
1. Что такое «динамическая страница»?
2. На каких языках программирования может программироваться динамическая страница?
A. HTML B. HTML, C#
C. Только C# D. На множестве различных языков
3. Как правильно передать в страницу параметр через URL?
|
|
|
A. http://site.ru/index.html(param,x) B. http://site.ru/index.html->param=x
C. http://site.ru/index.html¶m=x D. http://site.ru/index.html?param=x
4. Как вставить внутрь странички index.cshtml код на C#?
A. С помощью конструкции @{ … } B. С помощью конструкции @.... @
C. С помощью тега <div runat=”server”> D. С помощью тега <csharp>
5. Мы делаем страничку ”Привет, Вася.. ”, которая сможет приветствовать любого пользователя в зависимости от параметра name, напр. http://server.ru/hello.cshtml?name=Вася. Как будет выглядеть печать имени в этом случае?
A. <p>Привет, @name</p> B. <p>Привет, $name</p>
C. <p>Привет, @$name</p> D. <p>Привет, @Request[“name”]</p>
После выполнения практической работы и ответов на контрольные вопросы, вам необходимо ответить на тесты дифференцированного зачета по учебной дисциплине. Тест состоит из 30 заданий. К каждому заданию приводятся варианты ответов, один из которых верный.
ДИФФЕРЕНЦИРОВАННЫЙ ЗАЧЕТ
по учебной дисциплине ИНФОРМАТИКА И ИКТ
ТЕСТ
1) Монитор – это устройство …
1. ввода информации в компьютер
2. передачи информации
3. вывода информации на экран
4. вывода информации на бумагу
2) Клавиатура нужна для …
1. ввода информации в графической форме
2. ввода информации в символьной форме
3. вывода информации из компьютера
4. вывода информации в символьной форме
3) Микропроцессор входит в состав …
1. материнской платы
2. внутренней памяти
3. монитора
4. оперативной памяти
4) Основной функцией центрального процессора является:
1. выполнение математических расчетов
2. выполнение обмена информацией
3. обработка всей информации
4. работа с устройствами
5) Характеристикой процессора не является:
1. тактовая частота
2. разрядность
3. ядерность
4. разрешение
6) Видеокарта располагается …
1. в мониторе
2. на материнской плате
3. в постоянном запоминающем устройстве
4. в оперативной памяти
7) Звуковая карта находится …
1. в колонках
2. в процессоре
3. на материнской плате
4. в оперативном запоминающем устройстве
8) Перед отключением компьютера информацию можно сохранить…
1. в оперативной памяти
2. на дисководе
3. в постоянном запоминающем устройстве
4. во внешней памяти
9) Устройство, не используемое для долговременного хранения информации…
1. оперативное запоминающее устройство
2. CD-диски
3. жесткие диски
4. флэш-карты
10) Сканер – это устройство …
1. вывода информации на экран
2. передачи информации
3. вывода информации на бумагу
4. ввода информации в компьютер
11) Принтер необходим для …
1. вывода информации на экран
2. передачи информации
3. вывода информации на твердый носитель
4. ввода информации в компьютер
12) Материнская плата служит для:
1. включения ПК
2. размещения и согласования работы устройств ПК
3. того, чтобы вставлять процессор
4. чтобы подключать другие платы
13) Чем выше тактовая частота процессора, тем…
1. быстрее обрабатывается информация
2. медленнее обрабатывается информация
3. больше двоичных разрядов могут передаваться и обрабатываться процессором
одновременно
4. меньше двоичных разрядов могут передаваться и обрабатываться процессором одновременно
14) Объем оперативной памяти …
1. не влияет на скорость её работы
2. влияет на способ подключения
3. чем больше, тем больше производительность ПК
4. влияет на объем адресуемой памяти
15) Чтобы подключить компьютер к локальной сети необходимо иметь:
1. модем
2. сетевую карту
3. тактовый генератор
4. Wi-fi
16) В целях сохранения информации магнитный диск необходимо оберегать от воздействия:
1. холода
2. света
3. механических ударов
4. повышенного атмосферного давления
Дата добавления: 2022-06-11; просмотров: 23; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!