2к1с Создание интерактивных приложений для интернет - КР / 1632974168_Созд интеракт прил
.pdfБалаковский инженерно-технологический институт – филиал федерального государственного автономного образовательного учреждения высшего образования
«Национальный исследовательский ядерный университет «МИФИ»
Факультет атомной энергетики и технологий Кафедра «Информационные системы и технологии»
РАБОЧАЯ ПРОГРАММА
по дисциплине «Создание интерактивных приложений для интернет»
Направления подготовки/специальность
«09.03.02 Информационные системы и технологии»
Основная профессиональная образовательная программа
«Информационные системы и технологии»
Квалификация выпускника
Бакалавр
Форма обучения
Заочная
Балаково 2021
Цель освоения дисциплины
Целями освоения дисциплины «Создание интерактивных приложений для интернет» в соответствии с общими целями ООП ВО и требованиями профессиональных стандартов (Профессиональный стандарт «Программист», утвержденный Министерством труда и социальной защиты Российской Федерации от 18.11.2013 г. № 879н) являются: формализация и алгоритмизация поставленных задач; написание программного кода с использованием языков программирования, определения и манипулирования данными; проверка и отладка программного кода; проверка работоспособности программного обеспечения; анализ требований к программному обеспечению.
Место дисциплины в структуре ООПВО
Необходимыми условиями для освоения дисциплины являются знания, умения и практические навыки по предшествующим дисциплинам и практикам в соответствии с требованиями освоения следующих компетенций:
Языки программирования ОПК-6
Знания, умения и практические навыки, полученные при освоении дисциплины, необходимы при изучении следующих дисциплин и прохождения практик:
Инструментальные средства информационных систем Современные технологии управления базами данных Архитектура информационных систем Интеллектуальные системы и технологии Объектно-ориентированное программирование
Современные технологии объектно-ориентированного программирования Современные технологии интернет-программирования
Технологии создания web –ресурсов / Основы web-программирования Учебная практика Производственная практика (проектно-технологическая)
Государственная итоговая аттестация При освоении данной дисциплины студент сможет частично
продемонстрировать следующие обобщенные трудовые функции: Планирование проекта в соответствии с полученным заданием, Организация исполнения работ проекта в соответствии с полученным планом.
Компетенции |
обучающегося, |
формируемые |
в |
результате |
||
освоениядисциплины |
|
|
|
|
|
|
В процессе освоения данной дисциплины у студента формируются следующие |
||||||
компетенции: |
|
|
|
|
|
|
общепрофессиональные |
|
|
|
|
||
|
|
|
|
|
||
Код компетенции |
|
Наименование |
|
Индикаторы достижения |
||
|
компетенции |
|
|
компетенции |
||
|
|
|
|
|||
ОПК-6 |
|
Способен разрабатывать |
|
З-ОПК-6 |
|
|
|
|
алгоритмы и программы, |
|
Знать: методы алгоритмизации, языки и |
||
|
|
|
|
|
|
|
|
пригодные для практического |
технологии программирования; |
|
применения в области |
библиотеки программных модулей; |
|
информационных систем и |
шаблоны, классы объектов, |
|
технологий |
используемые при разработке |
|
|
программного обеспечения |
|
|
У-ОПК-6 |
|
|
Уметь: создавать блок-схемы |
|
|
алгоритмов функционирования |
|
|
разрабатываемых программных |
|
|
продуктов; использовать выбранную |
|
|
среду программирования для написания |
|
|
программного кода |
|
|
В-ОПК-6 |
|
|
Владеть: языками и средами |
|
|
программирования для разработки |
|
|
алгоритмов и программ |
|
|
|
Структура и содержание учебнойдисциплины
Дисциплина преподается студентам на заочной форме обучения в 3-ом семестре. Общая трудоемкость дисциплины составляет 3 зачетных единицы, 108 ак. часа.
Календарный план
№ |
№ |
Наименование раздела |
|
Виды учебной деятельности |
Аттестация |
Макс |
|||||||
Р |
Т |
(темы) дисциплины |
|
|
(в часах) |
|
|
раздела |
и |
||||
а |
е |
|
|
|
|
|
|
|
|
|
|
(форма) |
маль- |
|
|
|
|
|
|
|
|
|
|
||||
з |
м |
|
|
|
|
|
|
|
|
|
|
|
ный |
д |
ы |
|
|
|
|
|
Всего |
Лекции |
Лабораторные |
Практические |
СРС |
|
балл |
е |
|
|
|
|
|
|
|
за |
|||||
|
|
|
|
|
|
|
|
|
|
|
|
||
л |
|
|
|
|
|
|
|
|
|
|
|
|
разде |
а |
|
|
|
|
|
|
|
|
|
|
|
|
л |
|
|
|
|
|
|
|
|
|
|
||||
1 |
Реализация сценариев JavaScript |
|
|
|
|
|
КИ |
25 |
|||||
|
|
|
|
|
|
|
|
|
|
||||
|
1 |
Типы данных и переменные, |
26 |
2 |
- |
2 |
22 |
|
|
||||
|
|
типы данных, глобальные и |
|
|
|
|
|
|
|
||||
|
|
локальные переменные |
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
||
|
2 |
Арифметические |
|
операторы, |
26/2 |
2 |
- |
2/2 |
22 |
|
|
||
|
|
операторы |
|
присваивания, |
|
|
|
|
|
|
|
||
|
|
операторы |
инкремента |
и |
|
|
|
|
|
|
|
||
|
|
декремента, |
|
операторы |
|
|
|
|
|
|
|
||
|
|
сравнения, |
|
|
логические |
|
|
|
|
|
|
|
|
|
|
операторы, цикл for, цикл while, |
|
|
|
|
|
|
|
||||
|
|
вложенный цикл |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
2 |
Реализация сценариев jQuery |
|
|
|
|
|
|
КИ |
25 |
||||
|
|
|
|
|
|
|
|
|
|
|
|||
|
4 |
Методы jQuery, |
манипуляции |
30/3 |
1/1 |
- |
4/2 |
25 |
|
|
|||
|
|
HTML-элементами, чтение и |
|
|
|
|
|
|
|
||||
|
|
изменение CSS-свойств, классов |
|
|
|
|
|
|
|
||||
|
|
и атрибутов, обход DOM и |
|
|
|
|
|
|
|
||||
|
|
выборка html-элементов |
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
||
|
5 |
jQuery |
анимация, |
методы |
26/1 |
1/1 |
- |
2 |
23 |
|
|
||
|
|
объекта |
windows, |
события |
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
jQuery, селекторы jQuery |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Вид промежуточной аттестации |
|
|
|
|
|
З |
50 |
|||
|
|
|
|
|
|
|
|
|
||
Итого |
|
108/6 |
6/2 |
- |
10/4 |
92 |
|
100 |
||
|
|
|
|
|
|
|
|
|
|
|
|
* - занятия в интерактивной форме |
|
|
|
|
|
||||
|
Сокращенное наименование форм текущего контроля и аттестации разделов: |
|
||||||||
|
|
|
|
|
|
|
||||
Обозначение |
Полное наименование |
|
|
|
|
|
||||
|
|
|
|
|
|
|
||||
КИ |
Контроль по итогам |
|
|
|
|
|
||||
|
|
|
|
|
|
|
||||
З |
Зачет |
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
Содержание лекционного курса
|
Темы лекции. |
Всего |
Учебно- |
|
методическоеобе |
||
|
Вопросы, отрабатываемые на лекции |
часов |
|
|
спечение |
||
|
|
|
|
|
|
|
|
|
1 |
2 |
3 |
|
|
|
|
Лекция 1. Типы данных и переменные, типы данных, глобальные и |
2 |
1-8 |
|
локальные переменные |
|
|
|
1. |
Подключение сценариев к HTML-документу |
|
|
2. |
Типы данных и переменные в JavaScript |
|
|
3. |
Переменные в JavaScript |
|
|
4. |
Типы данных переменных. |
|
|
5. |
Глобальные и локальные переменные. |
|
|
|
|
|
|
Лекция 2. Арифметические операторы, операторы присваивания, |
2 |
1-8 |
|
операторы инкремента и декремента, операторы сравнения, логические |
|
|
|
операторы, цикл for, цикл while, вложенный цикл. |
|
|
|
1. |
Арифметические операторы. Операторы присваивания. |
|
|
2. |
Операторы инкремента и декремента. Операторы сравнения. |
|
|
3. |
Логические операторы. Побитовые операторы. |
|
|
4. |
Строковые операторы. Специальные операторы. Коментарии в |
|
|
JavaScript. |
|
|
|
5. |
Цикл for. Цикл for...in. Цикл while. Цикл do...while. |
|
|
6. |
Бесконечный цикл. Вложенный цикл. Управление циклом. |
|
|
|
|
|
|
Лекция 3. Методы jQuery, манипуляции HTML-элементами, чтение и |
1 |
1-8 |
|
изменение CSS-свойств, классов и атрибутов, обход DOM и выборка html- |
|
|
|
элементов. |
|
|
|
1. |
Методы jQuery. |
|
|
2. |
Добавление содержимого на страницу. |
|
|
3. |
Добавление элементов. |
|
|
4. |
Замена и удаление элементов. |
|
|
5. |
Добавление и удаление класса. Изменение атрибутов элементов. |
|
|
6. |
Изменение свойств элемента. Получение и изменение размеров т |
|
|
координат элемента. |
|
|
|
7. |
Обход DOM и выборка html-элементов. |
|
|
|
|
|
|
Лекция 4. jQuery анимация, методы объекта windows, события jQuery, |
1 |
1-8 |
|
селекторы jQuery. |
|
|
|
1. |
Создание эффектов с помощью .animate(). |
|
|
2. |
Анимационные эффекты jQuery |
|
|
3. |
Управление очередью анимации. |
|
|
|
|
|
|
4. Управление анимацией через свойства объекта jQuery.
5. События мыши.
6. События клавиатуры.
Перечень практических занятий
Тема практического занятия. Вопросы, |
Всего |
Учебно- |
|
методическоеобе |
|||
отрабатываемые на практическом занятии |
часов |
||
спечение |
|||
|
|
||
|
|
|
|
Основы взаимодействия с web-документами в JavaScript |
2 |
1-6 |
|
|
|
|
|
Операции с циклами. Введение в объектную модель в JavaScript |
4 |
1-6 |
|
|
|
|
|
Принципы работы с формами, иерархией объектов web-страницы |
4 |
1-6 |
|
|
|
|
Перечень лабораторных работ – не предусмотрены учебным планом Задания для самостоятельной работы студентов
|
|
|
|
Всего |
Учебно- |
|
Вопросы для самостоятельного изучения (задания) |
методическоеобе |
|||||
часов |
||||||
|
|
|
|
спечение |
||
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
1 |
|
2 |
3 |
|
|
|
|
||||
Справочники и спецификации. Редакторы кода. Консоль |
22 |
1-8 |
||||
разработчика. Строгий режим - "use strict". Переменные. Типы |
|
|
||||
данных. Взаимодействие alert, propt, confirm. Базовые операторы, |
|
|
||||
математика, операторы сравнения. Условное ветвление if, '?'. |
|
|
||||
Логические операторы, оператор объединения с null '??'. |
|
|
||||
|
|
|
||||
Конструкция "switch". Функции, Function Expression. Функции- |
22 |
1-8 |
||||
стрелки. Отладка в браузере. Автоматическое тестирование с |
|
|
||||
использованием фреймворка Mocha. Полифилы. Объекты, |
|
|
||||
копирование объектов и ссылки, сборка мусора, методы объекта |
|
|
||||
"this", конструкторы, создание объекта через "new", опциональная |
|
|
||||
цепочка '?'. Тип данных Symbol. Преобразование объектов в |
|
|
||||
примитивы. Методы у примитивов, числа, строки, массивы, методы |
|
|
||||
массивов, |
перебираемые |
объекты, |
деструктурирующее |
|
|
|
присваивание, дата и время, рекурсия и стек, остаточные параметры |
|
|
||||
и оператор расширения, замыкание, устаревшее слово "var", |
|
|
||||
глобальный объект, объект функции NFE, синтаксис "newFunction", |
|
|
||||
привязка контекста к функции. |
|
|
|
|
||
|
|
|
||||
Класс: базовый синтаксис, промисы, цепочка промисов, |
48 |
1-8 |
||||
промисификация, наследование классов, статические свойства и |
|
|
||||
методы, приватные и защищённые методы и свойства. Расширение |
|
|
||||
встроенных классов, примеси. Обработка ошибок "try..catch", |
|
|
||||
пользовательские ошибки. |
|
|
|
|
||
|
|
|
|
|
|
|
Расчетно-графическая работа не предусмотрена учебным планом
Курсовая работа не предусмотрена учебнымпланом
Образовательные технологии
При реализации учебного материала курса используются различные образовательные технологии, способствующие созданию атмосферы свободной и творческой дискуссии как между преподавателем и студентами, так и в студенческой группе. Целью при этом является выработка у студентов навыков и компетенций, позволяющих самостоятельно вести исследовательскую и научнопедагогическуюработу.
Практическая подготовка при реализации учебной дисциплины организуется путем проведения практических занятий, предусматривающих участие обучающихся в выполнении отдельных элементов работ, связанных с будущей профессиональной деятельностью.
Практическая подготовка также включает в себя занятия лекционного типа, которые предусматривают передачу учебной информации обучающимся, необходимой для последующего выполнения работ, связанных с будущей профессиональной деятельностью.
Аудиторные занятия проводятся в виде лекций, практических занятий с использованием ПК и компьютерного проектора. Самостоятельная работа студентов проводится под руководством преподавателей, с оказанием консультаций и помощи при подготовке к практическим занятиям.
Фонд оценочных средств
Фонд оценочных средств по дисциплине обеспечивает проверку освоения планируемых результатов обучения (компетенций и их индикаторов) посредством мероприятий текущего, рубежного и промежуточного контроля по дисциплине.
Связь между формируемыми компетенциями и формами контроля их освоения представлена в следующей таблице:
|
|
Код и наименование |
|
|
№ п/п |
Наименование контролируемых |
индикатора |
Наименование |
|
разделов (темы) |
достижения |
оценочного средства |
||
|
||||
|
|
компетенций |
|
|
|
|
|
|
|
|
Входной контроль |
|
||
|
|
|
|
|
1 |
Входной контроль |
|
Вопросы входного контроля |
|
|
(письменно) |
|||
|
|
|
||
|
|
|
|
|
|
Аттестация разделов, текущий контроль успеваемости |
|||
|
|
|
|
|
2 |
Реализация сценариев JavaScript |
З-ОПК-6, У-ОПК-6, |
Тестирование (письменно) |
|
|
|
В-ОПК-6 |
||
|
|
|
||
|
|
|
|
|
3 |
Реализация сценариев jQuery |
З-ОПК-6, У-ОПК-6, |
Тестирование (письменно) |
|
|
|
В-ОПК-6 |
|
|
|
|
|
|
|
|
Промежуточная аттестация |
|
||
|
|
|
|
|
4 |
Зачет |
З-ОПК-6, У-ОПК-6, |
тест (письменно) |
|
|
|
В-ОПК-6 |
|
|
|
|
|
|
|
Входной контроль предназначен для выявления пробелов в знаниях студентов и готовности их к получению новых знаний. Оценочные средства для входного контроля представляют собой вопросы, которые задаются студентам в письменной форме.
Перечень вопросов входного контроля
1.Основные этапы в развитии HTML.
2.Теговая модель и базовая структура HTML-документов.
3.Основные требования к заглавной части HTML.
4.Дерево элементов HTML. Родственные связи между элементами. Принципы наследования.
5.Основные элементы HTML для форматирования текста.
6.Дополнительные (вспомогательные) элементы HTML для форматирования текста.
7.Основные элементы HTML для вставки изображений и создания гиперссылок.
8.Основные элементы HTML для работы со списками.
9.Основные элементы HTML для работы с таблицами.
10.Блочные и строчные элементы HTML. Определения и основные особенности.
11.Универсальные элементы HTML. Назначение и принципы использования.
12.Атрибуты элементов HTML. Принципы наследования. Универсальные атрибуты.
13.Адресация в HTML. Варианты и примеры абсолютной и относительной адресации.
14.Каскадные таблицы стилей CSS. Предпосылки появления и история развития.
15.Основы синтаксиса CSS. Назначение и особенности использования.
16.Методы определения CSS. Встраивание, вложение и связывание.
17.Методы определения CSS. Принципы каскадирования и наследования стилей.
18.Единицы измерения в CSS. Перечень абсолютных и относительных единиц измерения.
19.Способы задания цвета в CSS. Цветовые таблицы (палитры). Принципы подбора цвета.
20.Шрифтовое оформление в CSS. Гарнитуры. Семейство и тип шрифта. Понятие о «безопасных» шрифтах.
21.Шрифтовое оформление в CSS. Настройка типа, размера, начертания и модификации
шрифта.
22.Собирательное шрифтовое оформление.
23.Оформление текста в CSS. Выравнивание, отступы и промежутки, трансформация,
интервалы
24.и декорация.
25.Базовый синтаксис CSS. Селекторы тегов.
26.Базовый синтаксис CSS. Классы и идентификаторы.
27.Базовый синтаксис CSS. Контекстные, соседние и дочерние селекторы.
28.Базовый синтаксис CSS. Селекторы атрибутов.
29.Блочная модель CSS. Рамки, поля и отступы.
30.Блочная модель CSS. Позиционирование элементов.
31.Блочная модель CSS. Многослойность, выравнивание и обтекание.
Текущий контроль – это непрерывно осуществляемый мониторинг уровня усвоения знаний и формирования умений и навыков в течение семестра. Текущий контроль знаний, умений и навыков студентов осуществляется в ходе учебных (аудиторных) занятий, проводимых по расписанию. Формами текущего контроля выступают используются коллоквиум, выполнение практических контрольных заданий.
Перечень вопросов коллоквиума
1.Как создать объект?
2.Что такое прототипы?
3.В чем разница между Call, Apply и Bind?
4.Что такое JSON и какие у него есть методы?
5.Что делает метод Array.slice()?
6.Что делаем метод Array.splice()?
7.В чем разница между slice() и splice()?
8.Как сравниваются объекты (objects) и карты (maps)?
9.В чем разница между операторами "=="и "==="?
10.Что такое лямбдаили стрелочные функции?
11.Почему функции называют объектами первого класса?
12.Что такое функция первого порядка?
13.Что такое функция высшего порядка?
14.Что такое унарная функция?
15.Что такое каррирование (currying)?
16.Что такое чистая функция?
17.Для чего используется ключевое слово «let»?
18.В чем разница между let и var?
19.Почему в качестве ключевого слова было выбрано слово «let»?
20.Как переопределить переменную в блоке switch?
21.Что такое временная мертвая зона?
22.Что такое немедленно вызываемое функциональное выражение (IIFE, Immediately Invoked Function Expression)?
23.В чем заключаются преимущества использования модулей?
24.Что такое запоминание или мемоизация?
25.Что такое поднятие переменных (hoisting)?
26.Что такое класс?
27.Что такое замыкание?
28.Что такое модуль?
29.Зачем нужны модули?
30.Что такое область видимости?
31.Что такое сервис-воркер (service worker)?
32.Как взаимодействовать с объектной моделью документа (Document Object Model, DOM) с помощью сервис-воркеров?
33.Как повторно использовать информацию при перезапуске сервис-воркера?
34.Что такое индексированная база данных (IndexedDB)?
35.Что такое веб-хранилище (Web Storage)?
36.Что такое postMessage?
37.Как использовать jquery для изменения или удаления отдельных параметров из выбора?
38.Какие преимущества jQuery?
39.Чем отличается JavaScript от jQuery?
40.Является ли jQuery стандартом W3C?
41.Что означает символ доллара ($) в jQuery?
42.Можем ли мы иметь несколько DOCUMENT.READY() на одной и той же странице?
43.Что такое jQuery.NoConflict?
44.Какая разница между jQuery.js и jQuery.min.js?
45.Что такое селектор в jQuery, какие типы селекторов вы знаете?
46.Какие селекторы в jQuery самые быстрые?
47.Как выбрать все элементы с id = idname?
48.Как выбрать все элементы div с id = idname?
49.Как выбрать все элементы с class = classname?
50.Как выбрать все элементы div с class = classname?
51.Как выбрать предыдущий элемент от найденного?
Перечень практических заданий
1.Написать функцию, которая принимает два числа и возвращает результат их умножения
2.Написать функцию, которой передаем, имя, фамилия и возраст, и получаем строку "Привет Иван Петров с возрастом 17 лет" (только здесь данные, которые были переданы в функцию)
3.Написать функцию, которая принимает пол человека ('M','F') в виде строки, результат функции возвращает строку "Ваш пол мужской" (или женский) или же "Ваш пол не определен"
4.Сделайте функцию, которая принимает параметром число от 1 до 7, а возвращает день недели на русском языке.
5.Написать функцию, которая принимает строку (в этом тексте 3-5 предложений), верните каждое первое слово в каждом предложении, через запятую.
6.Написать функцию, которой передаем имя, и она возвращает приветствие в зависимости от времени суток (Доброе утро\день\вечер\ночи Иван)
7.Вывести числа от 1 до 100 в столбец. К каждой цифре подписать состояние возраста (1-17 ребенок, 18-30 - молодой, 30-55 - зрелый, от 55 - старый). Например. 33 - зрелый
8.Создай новую функцию, в которую передаешь имя и возраст человека и получаешь сообщение (Иван имеет возраст 44 и он зрелый). А также вызови внутри своей функции, функцию из прошлого задания
9.Сделай функцию, которая принимает массив любых целых чисел, которая возвращает истину, если все элементы четные, если бы хотя бы один элемент не четный, то false.
10.Сделай функцию, которая принимает массив любых целых чисел, которая возвращает истину, если хотя бы один элемент нечетный, если все четные, то false.
11.Сделай функцию, которая принимает массив любых целых чисел, которая возвращает новый массив, где все элементы кратны пяти. ([1,2,5,12,15,21] вернет [5,15])
12.Написать функцию, которая принимает массив чисел, например [1,2,3,4,5] и функция возвращает среднее арифметическое, (округлить результат до десятых)
13.Написать функцию, которая принимает массив чисел, например [1,2,3,4,5], и переносит первый элемент массива в конец (например можно засунуть первый элемент в конец, затем удалить первый элемент), попробуй несколькими способами сделать, если догадаешься
Аттестация раздела по дисциплине проводится в форме тестирования. Тест содержит от 10 вопросов. На выполнение задания отводится от 20 минут. Тест – это форма контроля, направленная на проверку уровня освоения контролируемого теоретического и практического материала по дидактическим единицам дисциплины (терминологический аппарат, основные методы).
Примерный перечень тестовых заданий:
Тестовые задания 1. (Т1)
1. Чему равна переменная name
a)дудкин.
b)дупкин.
c)пупкин.
d)ляпкин-тяпкин.
2.Чему равно 0 || "" || 2 || undefined || true || falsе ? a) 0
b) «» c) 2
d) Undefined e) True
f) Falce
3.Чему равна сумма [] + 1 + 2?
a)1
b)NaN
c)Undefined
d)12
e)Другое
4. Что делает код:
a)Ломает интерпретатор javascript.
b)Выходит из текущего блока цикла или switch на метку «me».
c)Выдает ошибку.
5. Что делает оператор ===?
a)Сравнивает по ссылке, а не по значению.
b)Сравнивает без приведения типа.
c)Нет такого оператора.
6. Что выведет этот код? Посмотрите на него очень внимательно, в этом вопросе есть подвох.
a)[object Array]
b)[object Object]
c)1,2
d)Будет ошибка.
7. Есть ли различия между проверками:
a)Да, существует значение x, для которого они работают по-разному.
b)Нет, они полностью взаимозаменяемы.
c)Зависит от браузера.
8. Что выведет этот код?
a)2
b)10
c)20
d)NaN
e)В коде ошибка.
9. Какой результат будет у выражения ниже?
a)0
b)1
c)2
d)undefined
e)NaN
10. Что выведет alert?