3022д, 3014д, 3023д, Web-программирование/Технология Web-программирования/Web-программирование комп.сети, интернет и мультимедиа технологии

 Страница в разработке!!! Материалы страницы будут дополняться


Вес тем в курсе

  • HTML - 10 баллов
  • CSS - 10 баллов
  • JavaScript - 80 баллов (Чтобы получить оценку больше 70 баллов на зачет или экзамен нужно представить и защитить "проект" (в общем случае это собственноручно написанная небольшая игра на JavaScript (не сложнее самого сложного примера на этой странице)) )
Материалы для изучения


Практические задания

HTML - 10 баллов
  • Последовательно, непропуская, изучите ступеньки учебника (до таблиц, включительно): Алленова Наталья. Первые шаги в HTML http://dit.isuct.ru/IVT/BOOKS/WEBDESIGNING/WD3/index.html
  •  Сделайте несколько страниц HTML, в которых продемонстрируйте использование не менее 10 неродственных тегов HTML.

CSS- 10 баллов

  •  Изучите учебник http://htmlbook.ru/content/osnovy-css
  • Создайте HTML-страницу в которой демонстрируется не менее 10 неродственных свойств CSS.  

 JavaScript - 80 баллов

Новые задания (3 балла за задачу для первых 5 решений в группе, 2 балла для остальных)

Задание. В документе есть зеленый DIV размерами 200х200. Написать скрипт, который будет плавно увеличивать его размеры до 400х400, а потом так же плавно уменьшать их до начального размера.

Задание. По поверхности документа от одного края до другого циклично двигается зеленый прямоугольник. (Тема "Таймер")

Задание 2302200800. По поверхности документа от одного края до другого циклично двигается зеленый прямоугольник. Движение по высоте определяется одной из математических функий с красивым графиком (Тема "Таймер") 

Задание. С помощью тегов <input> создайте кнопки, расположенные группой, как джойстик - Вверх, Вниз, Вправо, Влево. Напишите функции, которые будут с помощью этих кнопок управлять объектом на экране. Если нажата кнопка "Вверх", то герой двигается вверх, если нажата кнопка "Вниз", то герой движется вниз и т.д. (3 балла)  Дополнительное условие: объект не должен выходить за пределы видимых границ документа, т.е. должен "отталкиваться" от краев документа. Плюс "джойстик" выглядит "красиво". (+ 2 балла)  

Задание. Написать скрипт, который выведет в окне браузера таблицу 10х10. В каждой ячейке таблицы числовое значение из ряда 1,2,3 ...100. (Тема циклы и команда document.write)  

Задание. В документе есть DIV зеленого цвета. Написать скрипт со следующим поведением: щелчок мыши по DIV меняет его фотовый цвет на красный, "уход" курсора мыши с поверхности DIV меняет его фотоновый цвет на зеленый. (Тема "Обработка событий")

Задания на понимание объекта Canvas

Примеры программ (***canvas_1.html)

Учебник по командам Canvas: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial  (Используйте переводчик)

Задание 2303220905-1. Используя графические примитивы(линии, прямоугольники и т.д.) нарисуйте домик. (Cancas)

Задание 2303220905-2. Используя команду drawImage нарисуйте лес. Каждое дерево это отдельная команда drawImage.  (Cancas)

Задание 2303220905-3. С помощью команд объекта Cancas нарисуйте график любой функции (По аналогии с заданием 2302200800) (5 баллов)

Задание 2303271237-1. Внимательно изучите скрипт 3022_js_Canvas_2. Измените его таким образом, чтобы вывести на экран лабиринт размерами 25х25. Придумайте карту этого лабиринта.


Задание. Внимательно изучите скрипт Пример 3114_canvas_3.html . Модифицируйте его таким образом, чтобы в окне браузера выводился лабиринт со стенами, ящиками, и песочными дорожками. При защите приготовьтесь объяснить назначение каждой команды скрипты. В том числе массивы, циклы, ветвление и т.д. 


Задание 2304041230_1 Внимательно изучите скрипт 3216_js_canvas_3_G1. Добавьте в алгоритм скрипта команды толкания яблок по вертикали. (3 балла)


Задание 2303281130-1. 15 баллов к итоговому баллу тому (первому из любой группы), кто найдет ошибку в программе "3022_js_canvas_3_error_15ballov"  На данный момент задачу решили: Андреянов Роман (Первое решение - 15 баллов, Гузь Никита (Второе решение - 7 баллов))

Задание 2303291205-1. Доработать скрипт "Пример 3114_canvas_5". Реализовать корректное толкание яблока по вертикали, вверх и вниз.

Задание 2304050917-1 (10 баллов). Доработайте задачу 2304041230_1. Реализовать: в массиве есть элементы, отмеченные кодом 3. Это "ямы" в которые нужно сбрасывать яблоки. Если 2 (яблоко) и 3 (яма) совмещаются в одной ячейке массива получается 0, то есть яблоко и яма исчезают. Когда все яблоки в лабиринте исчезнут меняется уровень. Подсказка: смена уровня, в нашем алгоритме осуществляется простым присваиманием массиму, в котором хранится лаборинт другого массива, с другими значениями лабиринта. Пример: laborint = labirint2;

Задание 2304050917-1 (20 баллов!!!). Доработайте задачу 2304041230_1. Реализовать: в лабиринте есть яблоки и клетки для хранения яблок. Яблоки могут двигаться по этим клеткам так как будто бы это пол. При этом клетки не стираются. Когда все яблоки лабиринта будут стоять на клетках для хранения яблок уровень меняется. Подсказка: можно ввести отдельный массив для яблок или клеток для хранения яблок. Однако проще использовать дробные коды. Например "2.3" это код может означать ячейку лабиринта где находится яблоки и клетка для хранения яблока.


Задание 2310301423. Основа игры Boulder Dash Альтернативный код

  • 3 балла - добавить адекватную графику
  • 3 балл - камень не должен падать сквозь героя
  • 3 балл - реализовать съедание кристаллов
  • 4 балла - реализовать движение "бабочки"
  • 7 баллов (включает 4 балла) - "бабочка" движется по правилу правой руки (вдоль стены, поворачивая направо)
  • 3 балла - добавить в игру звук
  • 7 баллов (включает 3 балла) - добавить звук для всех действий в игре - ходьба, съедание кристаллов-земли, столкновение с "бабочкой". 
  • 4 балла - смена уровня игры
Требования к проекту (20 баллов)
Проектом может быть усовершенствованная игра Boulder Dash, однако она должна на 30% отличаться от образца преподавателя.


Старые задания (все еще принимаются для отчета и оценивания)

Задание А (5 баллов). Основы JavaScript. DIV, CSS, события, функции. (Сделать на основе образца свою программу. Добавить управление вверх-вниз, реакцию на столкновение. Можно добавить второго противника. Подумайте над сценарием - на основе данного образца можно создать игры похожие на игры 80-х годов)
Задание Б (5 баллов). Основы JavaScript. Перехват нажатий клавиш (Разберитесь как и почему работает образец программы. Добавьте управление с клавиатуры в свою программу.)
Задание В (5 баллов). Одновременное управление несколькими героями. (Внимательно изучите код программы, найдите отличия от более ранних образцов. Зачем в программе используется массив? Подготовьте ответ для устного обсуждения. Обратите внимание - данный пример можно использовать в однопользовательских играх - для управления игрой сразу несколькими клавишами)
Задание Г (5 баллов). Анимация. Вывод текста на экран. (Разберитесь как и почему работает образец программы. Добавьте анимацию в свою игру. Например можно анимировать момент столкновения объектов. Или заставить двигаться ноги и руки героя, меняя его спрайты. Вывод текста можно использовать для вывода счета игры или игровых сообщений)
Делаем Ping-Pong. Запись для 3922д

ВТОРОЙ СЕМЕСТР

PHP

Дистанционный курс "PHP для начинающих"  https://stepik.org/course/62383/info

Задание 1. Создайте два скрипта. Первый с помощью формы запрашивает размеры таблицы. Второй принимает значение параметров и рисует таблицу указанных размеров.
Оценка: 3 балла за метод POST, 2 балла за метод GET.
Дополнительное задание:
Выделите в таблице желтым фоновым цветом главную диагональ - ячейки с координатами 1,1 2,2 3,3 4,4 5,5
Оценка: 2 балла
Дополнительное задание:
Выделите в таблице синим фоновым цветом второстепенную диагональ - ячейки на линии от верхнего-правого в нижний левый угол
Оценка: 1 балл

Задание 2.1. Изучить примеры скриптов в папке BD. Добиться работы скриптов, создав в MySQL базу с правильным именем, и таблицей с правильной структурой.   
Задание 2.2. Дополнить скрипт собственными запросами SQL - удаление записей, вывод списка записей и т.д.
Оценка: 3 балла. (большей частью во всех заданиях речь идет об абсолютных баллах)

Задание 3. Изучите учебник    Правильная ссылка.
Главы "Основы"-"Cookies". Проверьте работу примеров. Дайте объяснение их работы.
В каждой главе самостоятельно выберите 1-2 задачи и решите их. 
Оценка: +2 балла к зачету за одну решенную задачу. 
Всего нужно решить не менее 20 самостоятельно выбранных задач.

Задание 4. Изучите учебник    Правильная ссылка.
Главы "Базы данных"-"Движок сайта". Проверьте работу примеров. Дайте объяснение их работы.
В каждой главе самостоятельно выберите 3-4 задачи и решите их. 
Оценка: +2 балла к зачету за одну решенную задачу. 
Всего нужно решить не менее 20 самостоятельно выбранных задач.

Задание 5. (будущее) Изучить основы AJAX. 
Изучите статью 1: http://dnzl.ru/view_post.php?id=271
Задание: продемонстрировать использование AJAX в своем проекте.
Оценка: +5 баллов


ЛИЧНЫЙ ПРОЕКТ НА PHP, SQL, AJAX (Оценка: +30 баллов к экзамену)
Базовым проектом является чат. Окончательные требования к чату будут сформулированы в процессе изучения темы. Чат должен обеспечивать сетевой диалог. Он должен обеспечивать очистку базы от старых сообщений. Выделение имен пользователей. Регистрация пользователей. 


Теоретические вопросы к Экзамену 2023-24 года 
(при ответе на теоретические вопросы нужно демонстрировать работающие примеры)

1. Назначение и логика применения HTML.  Структура HTML-документа.  HTML-тэги. 
2. Основные структурные тэги HTML-документа.  Основные оформляющие тэги HTML-документа.  Организация взаимосвязи HTML-документов. 
3. Понятие стиля и основные стили.  Каскадная таблица стилей CSS. 
4. Выражения и операции в PHP. 
5. Типы данных, массивы в PHP. 
6. Условный оператор и циклы в PHP. 
7. Функции в PHP. 
8. Обработка форм. Основы работы с формами в PHP.
9. Методы передачи данных POST и GET. 
10. Понятие и структура баз данных. 
11. Организация взаимодействия PHP с базой данных.
12. Работа с сессиями и куками в PHP.
13. Синтаксис JavaScript. 
14. JavaScript. Обработка событий.
15. Понятие Ajax и общая логика его применения.

Задачи по JavaScript
  1. Создать таблицу размером 2х6 (2 столбца, 6 строк)
    В левом столбце находятся картинки, в правом текст.
    При наведении на картинку стрелки мышки фон ячейки в правом столбце той же строки изменяется. При уходе стрелки с картинки фон правой ячейки возвращается в первоначальное состояние.
  2. В документе есть две гиперссылки и картинка. При наведении стрелки мышки на первую гиперссылку картинка увеличивается в размерах. При наведении стрелки на вторую гиперссылку картинка уменьшается.
  3. В документе есть одна картинка. Она плавно двигается влево, достигнув левого края окна, она изменяет направление движения на движение вправо. Достигнув правого края картинка снова начинает движение влево. Цикл бесконечен.
  4. В документе есть три числа. Первые два числа раз в секунду изменяются на случайные значения, третье число является суммой двух первых.
  5. В документе есть картинка. Одна двигается по экрану, периодически случайно меняя направление движения. При движении картинка не выходит за пределы экрана.
  6. В документе находится картинка. При щелчке по данной картинке ее изображение изменятся (открывается другая картинка). При повторном щелчке появляется первоначальная картинка. Цикл бесконечен.
  7. В документе находится таблица из двух столбцов. В первом столбце шесть строк. Во втором столбце одна строка (одна ячейка). В первом столбце находятся названия предметов (например автомобили), во втором столбце находится изображение. Щелчок по названию предмета приводит к смене изображения в картинке. Каждому предмету соответствует своя картинка.
  8. По документу сверху вниз двигается картинка. Достигнув нижней границы окна картинка снова появляется сверху документа в случайном положении по горизонтали.
  9. В документе находится картинка и число. Щелчок по картинке увеличивает число на единицу. Цикл бесконечен.
  10. На экране находится картинка. Она плавно увеличивается в размерах. Достигнув определенного размера она начинает плавно уменьшаться. А потом, уменьшившись до определенной величины, начинает снова увеличиваться. Цикл бесконечен.
Задачи по PHP и MySQL
  1. Написать программу которая сгенерирует HTML-документ с таблицей размером 20х20 ячеек. Фон ячеек раскрашен в шахматном порядке. Второстепенная диагональ таблицы (из правого-верхнего в левое-нижнее) выделена отдельным цветом. В каждой ячейке таблицы находится число из ряда 1, 2, 3, 4 ....
  2. Написать программу, которая полностью совпадает с задачей №1. Кроме отличия - размеры таблицы передаются через метод GET.
  3. Документ состоит из десяти гиперссылок - Таблица 2х2, Таблица 3х3, Таблица 4х4.... Щелчок по гиперссылке открывает документ содержащий таблицу заданного размера. Пояснение к решению: Гиперссылки должны передавать в скрипт методом GET размеры таблицы. Таблица должна генерироваться по переданным значениям, а не быть уже заложенной в документ. Гиперссылки так же должны генерироваться автоматически, а не быть заложенными в документ. Данная задача является аналогом решенной задачи из серии задач по базам данным - гиперссылка "Удалить" в скрипте добавления-удаления записей в базе данных.
  4. В форме есть поля: Название автомобиля, Цвет, Цена. Форма передает данные своих полей в скрипт, который сохраняет их в базе. Если автомобиль с данным названием, цветом и стоимостью уже есть в базе скрипт выводит сообщение: дублирование данных.
  5. В базе хранятся данные о людях: имя, возраст, цвет волос. В форме выбирается цвет волос. После нажатия кнопки "Отправить" на экран выводится таблица со всем людьми из базы у которых есть тот же цвет волос.
  6. В базе хранится информация о товарах: название, количество, цена. Написать скрипт который выводит таблицу со всеми товарами которые есть в базе - их наименование, количество, цену. А так же сумму - общую стоимость товара.
  7. В базе хранится информация о товарах: название, количество, цена. В форме задается число - максимальная цена. Написать скрипт который выводит таблицу со всеми товарами которые есть в базе - их наименование, количество, цену - выделяя зеленым фоном строки в которых товар стоит ниже заданной максимальной цены, и красным остальные.
  8. Написать скрипт который при запуске считывает значение из кука, выводит его в документ, увеличивает значение на единицу и записывает его в кук. (Должен получиться простейший счетчик посещений)
  9. Сделать скрипт который выводит форму, которая запрашивает имя пользователя и его пароль. При запуске скрипта он считывает предыдущие значения имени пользователя и его пароля из кука. При нажатии кнопки "Отправить" текущее значение полей записывается в кук. (Ничего более написанного делать не нужно, не нужно писать полноценную авторизацию, какие-то проверки и т.д.)
  10. Написать скрипт который генерирует HTML-документ фоновый цвет которой при каждом запуске скрипта случайный.  В документе при каждом запуске скрипта выводится случайная картинка, адрес которой берется из базы.

Комментариев нет:

Отправить комментарий

Подписаться на: Сообщения (Atom)