Практическая работа №1
Основы работы в HTML
Цели:
1. Ознакомиться с основными понятиями и структурой HTML-документа.
2. Создать простую HTML-страничку.
3. Ознакомиться с тегами для работы с текстом.
4. Создать гиперссылку. Ознакомиться с атрибутами. Создать гиперссылку-закладку.
Ход работы:
1. Создать папку для практической работы.
2. Внутри папки создать документ index.html.
3. Открыть его в любом удобном вам редакторе. Я буду работать в PHPStorm.
4. Внутри документа описать базовую структуру документа:
2
5. Открыть созданный файл в любом удобном браузере. У меня будет в Опере. Файл
будет пустой, это правильно. Но сверху в имени вкладки должен быть указан текст:
х
6. Возвращаемся в редактор. Добавляем текстовые теги <h1>, <h2>, <p>:
3
7. Обновляем страницу браузере, смотрим, что изменилось.
8. Возвращаемся в редактор. Добавляем парочку тегов <a>:
4
9. Создаём второй html-документ. Я назову его second.html. Внутри него я добавлю
заголовок и ссылку, которая будет вести обратно на первую страницу:
10. Далее в index.html нужно указать путь ко второму файлу, а в second.html – путь к
первому:
5
11. Обновляем страницу в браузере, тыкаем по ссылкам, смотрим, что получилось. Если
все переходы работают, радуемся, просим меня посмотреть. Если не работают,
страдаем, и просим меня посмотреть.
12. Далее нужно ответить мне на следующие вопросы:
a. Что такое тег в HTML?
b. Что делает DOCTYPE?
c. За что отвечают теги <html>, <body>, <head>, <title>, <h1>, <h2>, <p>, <a>?
d. Что такое HTML-атрибут?
e. Какие ещё атрибуты могут быть у тега <a>?
Практическая работа №2
Списки, графика
Цели:
1. Создать списки на web-странице: маркированные, нумерованные.
2. Добавить изображения в документ HTML.
3. Создать картинку в виде ссылки.
Ход работы:
1. Создаём новую папку.
2. Внутри папки создаём новый файл lists.html.
3. В файле описываем базовую структуру html-документа.
6
4. Добавляем пару тегов <p>:
5. После первого параграфа добавляем нумерованный список:
7
6. Открываем страницу в браузере, смотрим, что получилось.
7. Возвращаемся в редактор. Добавляем маркированный список после второго
параграфа:
8
8. Обновляем страницу в браузере, смотрим, что получилось.
9. Возвращаемся в редактор. Добавляем пару тегов для картинок:
9
10. Идём в гуугл, ищем картиночки.
10
11. Выбираем по вкусу. Чтобы всё встроилось правильно, тыкаем на картинку ПКМ и
жмём «Открыть изображение в новой вкладке»:
11
12. Здесь важно, чтобы в адресной строке в конце стояло расширение картинки (jpg, png,
jpeg, gif и т. п.):
12
13. Копируем целиком путь из адресной строки и вставляем в атрибут src первой
картинки:
13
14. Ищем ещё одну картинку, но в этот раз не открываем её в новой вкладке, а сохраняем
на диск через «Сохранить изображение как»:
15. Сохраняем картинку в папку с файлом lists.html.
14
16. Возвращаемся в редактор. Вставляем в атрибут src второй картинки имя скачанного
файла. У меня это «skynews-face-facebook-down_5535235.jpg», у вас будет своё:
15
17. Обновляем страницу в браузере, смотрим, что получилось.
16
18. Далее делаем ссылку в виде картинки, а не текста, как до этого. Идём в редактор, и
первую картинку оборачиваем в тег <a>. Ссылка должна будет открывать эту же
картинку:
19. Если есть 2 списка и 2 картинки, одна из которых при нажатии открывается, радуемся,
показываем мне. Если чего-то нет или не открывается, плачем, просим помочь.
20. Далее нужно ответить мне на следующие вопросы:
a. Какими тегами можно добавить списки в HTML-документ?
b. Какие атрибуты могут быть у списков?
c. Как добавить картинку в HTML-документ?
d. Какие атрибуты могут быть у картинок?
e. Какое основное правило вложенных тегов?
f. В чём отличие одиночных и парных тегов?
Практическая работа №3
Основные понятия CSS
Цели:
1. Ознакомиться со способами использования CSS в HTML. Связь стилей с webстраницей.
2. Изучить основные понятия CSS. Селекторы, свойства.
3. Организация файлов таблиц стилей.
4. Поработать с размерами элементов и ознакомиться с основными единицами
измерений.
17
Ход работы:
1. Создаём новую папку для работы.
2. В папке создаём файл index.html. Описываем в нём базовую структуру HTMLдокумента.
3. Вставляем парочку картинок. Можно те же, что и в прошлой работе (мне лень, я так и
сделаю).
4. Открываем страницу в браузере, смотрим, что всё нормально.
5. Первым делом мы попробуем inline-стили. Для этого обеим картинкам нужно дать
атрибут style:
6. Первой картинке нужно дать ширину в 400 пикселей, второй – высоту в 200 пикселей.
18
7. Обновляем страницу в браузере, смотрим, что изменилось.
8. Картинки изначально имеют своё разрешение, но если указать явно оба размера, то их
может шакалить. Например, если я свои альбомные картинки сделаю квадратными:
19
9. То станет вот так:
10. То же самое с картинками, которым дали размеры больше их оригинального
разрешения:
20
11. Далее попробуем документные стили. Нужно в тег <head> добавить тег <style>, внутри
которого уже будут описаны стили для нескольких элементов.
21
12. Допустим, я хочу, чтобы все картинки на странице были 300 пикселей. Надо написать
свойство для всех тегов <img>, чтобы не плодить inline-стили:
13. Обновляем страницу, смотрим.
22
14. Картинки разной высоты (первая стала 300, как в теге style, вторая – 200, как в inlineстиле). Это потому, что inline-стили являются более приоритетными. Если убрать их,
то всё станет, как задумывалось:
23
15. Далее попробуем внешние стили, которые хранятся в отдельных файлах. Для
наглядности надо создать второй файл (я назову его second.html) и перенести туда
вторую картинку, а в index.html её убрать. Тег <style> я также уберу:
16. Создаём файл стилей (я назову его style.css).
17. В style.css пишем указываем свойство для всех картинок:
24
18. Подключаем созданный CSS-файл в HTML-документы:
19. Открываем обе страницы, смотрим, что картинки одной ширины.
25
20. Напоследок, быстро посмотрим ещё пару свойств, которые косвенно определяют
размер элементов – максимальные ширина и высота. Если оригинальный размер
картинки меньше, то она останется, как есть, если больше, то сожмётся
соответственно. Добавим оба свойства в style.css:
21. Обновляем страницу, смотрим, что изменилось.
22. Как обычно, если всё работает/что-то не работает, показываем мне.
23. Отвечаем мне на вопросы:
a. Что такое CSS-селектор?
b. Что такое CSS-свойство?
c. В чём отличие inline/документных/внешних стилей?
d. В чём отличие px/%/vw/vh?
e. В чём отличие width/max-width и height/max-height?
Практическая работа №4
Работа с HTML-элементами в CSS
Цели:
1. Изучить шрифт, размер текста, его цвет, фон элементов.
2. Изучить работу с границами элементов.
3. Ознакомиться с внутренними и внешними отступами.
26
Ход работы:
1. Создаём новую папку для работы.
2. Внутри создаём 2 файла: index.html и style.css, стили будут внешними. В index.html
создаём базовую структуру HTML-документа.
3. Добавляем пару заголовков и параграфов с любым текстом.
4. Далее оборачиваем это всё в контейнер <div> и подключаем style.css:
27
5. Первым делом, я дам фон всему документу, т. е. тегу <body>. Картинку берёте, как
нравится, но по аналогии с тегом <img>, но желательно тёмную, чтобы понять, зачем
я делаю всё следующее. У меня это выглядит так:
6. Первым делом меняем цвет текста:
28
7. Я думаю, заметно, что фон меньше окна и несколько раз повторяется. Чтобы это
исправить, надо явно указать его размер. Значение cover растягивает его таким
образом, что картинка занимает всё пространство контейнера (в данном случае <body>):
29
8. Теперь поменяем шрифт. Можно использовать шрифты из Венды, но они могут не
быть на Маке или Линухе. Поэтому, адекватные люди используют внешние файлы
шрифтов. Проще всего что-то подходящее найти на fonts.google.com. Скроллим
простыню шрифтов, указав фильтры (как минимум Language -> Cyrillic):
30
9. Просто нажимаете на любой понравившийся и в новом окошке жмёте «Select this style»
справа от текста:
10. После этого либо сразу появится окошко для встраивания шрифта, либо надо будет
нажать кнопку справа сверху:
31
11. В этом окошке копируем правило @import и вставляем к себе в style.css:
32
12. Теперь шрифт можно использовать у себя в коде. Я добавлю свойство после цвета, но
вы можете встроить отдельные шрифты хоть для каждого тега:
33
13. Дальше мне не нравится размер букв, хочу сделать его крупнее. Стандартный размер
обычного параграфа – 16 пикселей, <h1> - в 2 раза больше. Я увеличу их примерно на
25%:
34
14. Выглядит всё ещё всрато, потому что текст плохо читается. Собственно, для этого
здесь есть <div>. Я дам ему обычный фон. Но сделаю это не просто селектор элемента,
а через id:
35
36
15. Читается лучше, но теперь не видно картинку. Поэтому сделаю фон полупрозрачным:
37
38
16. Теперь и картинку видно, и текст читается. Дальше я хочу дать обводку
полупрозрачному <div>’у:
39
40
17. Ещё я хочу, чтобы углы были скруглёнными:
41
42
18. Но мне не нравится, что текст слева начинается сразу от границ <div>’а. Надо дать ему
внутренний отступ:
43
44
19. Теперь мне нравится, что сверху отступ больше, чем слева и справа. Это уже не
внутренний отступ <div>’a, а внешние отступы <h1>,<h2> и <p>. Поэтому я их уберу.
45
46
20. Но я всё же хочу, чтобы заголовки от текста отделялись немного. Поэтому дам только
нижний отступ для <h1> и отступ сверху/снизу для <h2>:
47
21. Ну вот теперь более-менее норм. Получилось/не получилось – показываем, ну вы
поняли.
22. Вопросы:
a. Какие свойства отвечают за тип шрифта, его размер и цвет?
b. Какие значения можно использовать в качестве размера текста?
c. Какое свойство отвечает за фоновое изображение?
d. Какое свойство отвечает за фон в виде обычного цвета?
e. Какие значения можно использовать в качестве цветов?
f. В чём отличие внешнего и внутреннего отступов и где находится граница
элемента?
Практическая работа №5
Размещение элементов на странице
Цели:
1. Ознакомиться с видами вёрсток.
2. Flexbox.
3. Grid.
Ход работы:
1. Сначала всё просто: идём на 2 сайта: https://flexboxfroggy.com/#ru
https://cssgridgarden.com/#ru.
2. Проходим обе «игры», чтобы потом не тупить на вопросах.
3. В папке создаём 3 файла: flex.html, grid.html и style.css.
4. Ищем 5 картинок. Я возьму с сервиса случайных фоточек https://picsum.photos
48
и
5. В файле flex.html я сделаю 3 строки, растянутых на всю высоту:
49
6. В 1 и 3 строке будет по 2 картинки, во 2 строке – 1 картинка.
50
7. Из-за того, что картинки больше, они вылезают за границу строк. Поэтому ограничу
их по высоте:
51
8. Дальше делаю элементы с классом flex_row, собственно, flexbox, и расставляю
фоточки в шахматном порядке:
52
9. Теперь примерно то же самое делаю уже с помощью grid. В grid.html у меня всего 1
контейнер с 5 картинками:
53
10. Фоточки будут стоять в том же порядке. Чтобы проще было их расставлять, я просто
дам им всем id:
54
11. Дальше делаю контейнер сеткой 3 на 3. Фоточки также ограничиваю по высоте и
ширине.
55
56
12. Теперь просто расставляю фоточки, как в работе с flexbox.
57
13. Дальше чуть-чуть самостоятельно работы. Надо добавить ещё картинку и расставить
элементы, как у меня на скрине ниже:
14. Ну и как всегда, получилось/не получись – показываем.
58
15. Вопросы:
a. Для чего используется flexbox?
b. Как можно выравнивать элементы flexbox по горизонтали и вертикали?
c. Как можно переносить элементы flexbox, если они не влезают в одну строку?
d. Как изменять размеры элементов flexbox относительно друг друга?
e. Для чего используется grid?
f. Как устанавливаются размеры сетки? Какие единицы измерений при этом
можно использовать?
g. Как размещаются по ячейкам сетки её элементы?
h. Как можно выравнивать элементы внутри ячейки?
Практическая работа № 6
Псевдо-элементы и псевдо-классы. Позиционирование
Цели:
1. Изучить псевдо-классы, их принцип работы;
2. Изучить псевдо-элементы, их использование на практике.
3. Поработать с позиционированием элементов.
Ход работы:
1. Создаём новую папку, как всегда.
2. В папке будет 2 файла: index.html, style.css.
3. В index.html добавляю 2 параграфа с любым текстом.
4. Есть такая задача: поставить на фон полупрозрачный текст, для каждого параграфа
свой (да, нужно найти пару фоточек). Через background-image прозрачность картинки
регулировать нельзя. Поэтому я сделаю это через псевдоэлементы:
59
60
5. Теперь делаю псевдоэлементы полупрозрачными, чтобы текст стал читабелен:
61
6. Ещё хочу скруглённые углы. Но это не работает, если просто дать border-radius. Ничего
не изменится, хотя консоль показывает мне, что стиль применён:
62
7. Решается это просто: надо указать, что весь контент, который вылезает за границы
контейнера, должен быть скрыт:
63
8. Теперь добавлю парочку эффектов при наведении курсора на параграф, фон будет
становиться непрозрачным, а текст менять свой цвет:
64
9. И ещё добавлю небольшой эффект при нажатии на параграф: (кода уже много, поэтому
не весь):
65
10. Напоследок я уберу id элементов и заменю их на псевдоклассы:
11. Визуально ничего не меняется, но работает теперь чуть по-другому.
12. Получилось/не получилось – показываем.
13. Вопросы:
a. Какие виды позиционирования элементов есть в CSS?
b. Как описываются псевдоэлементы?
c. Какие виды псевдоэлеметов есть?
d. Как описываются псевдоклассы?
e. Какие виды псевдоклассов есть?
Практическая работа №7
Переходы и анимации
Цели:
1. Ознакомиться со способами создания анимации.
2. Изучить переходы CSS.
3. Изучить анимации CSS. Ключевые кадры.
4. Временные функции.
Ход работы:
1. Для этой работы проще всего будет взять предыдущую. Все стили я буду дописывать
в тот же style.css, в конец.
66
2. Первым делом, я добавлю переходы для всех изменений из псевдоклассов их прошлой
работы, чтобы они происходили плавно:
3. Обновляем страницу, наводим курсор, тыкаем, видим, что всё меняется плавно, а не
сразу.
4. Теперь более сложная задача. Добавим анимацию фона, чтобы он смещался в какуюнибудь сторону (у меня будет влево, у вас – как хотите).
67
5. Сначала делаем ключевые кадры (пока что пустые) и добавляем саму анимацию:
68
6. Поскольку это повторяющийся фон, я укажу точную ширину, а по вертикали он будет
в своих пропорциях:
69
70
7. Теперь самое важное. Нужно смещать фон на его ширину:
71
8. Получилось быстро, поэтому я увеличу время анимации:
9. Ну и последнее. Идём на cubic-bezier.com и выбираем/создаём любую временную
функцию, которую вставляем в любой созданный переход или анимацию:
72
10. Смотрим, показываем мне, что получилось/не получилось.
11. Вопросы:
a. Как работают переходы в CSS?
b. Как работают анимации в CSS?
c. Что такое ключевые кадры?
d. Что такое временные функции?
Практическая работа 8
Трансформация элементов
Цели:
1. Изучить 2D-трансформации.
2. Изучить 3D-трансформации.
3. Ознакомиться с вариантами применения трансформаций.
Ход работы:
1. Создаём новую папку, файлы index.html, style.css.
2. HTML-код у меня такой:
73
74
3. Такой изначальный CSS-код. У вас, естественно, он может быть другим:
75
4. Выглядит это так:
76
77
5. Далее делаем увеличение картинок при наведении курсора:
78
6. Картинка увеличивается, но уезжает за границы экрана
79
7. Меняю точку отсчёта трансформации:
80
8. Теперь она увеличивается вправо.
9. Дальше будут анимации появления элементов с небольшим 3D-эффектом.
81
10. Обновляем страницу, смотрим, что получилось.
11. Дальше добавим небольшой эффект смещения ссылки при наведении (плавно,
естественно):
82
12. Ну и напоследок добавлю эффект при нажатии на ссылку (тоже плавно):
83
13. Обновляем, смотрим, что получилось.
14. Вопросы:
a. Как описываются трансформации элементов?
b. Какие функции трансформаций есть в CSS?
c. Что такое перспектива в CSS?
Практическая работа 9
Viewport и медиа-запросы
Цели:
1. Ознакомиться с понятием viewport.
2. Изучить использование медиа-запросов в CSS.
Ход работы:
1. Создаём новую папку, файлы index.html, style.css, media.css.
84
2. В HTML-документе делаем пару параграфов, сетку с фоточками, строку меню:
85
3. В CSS у меня так:
86
4. Выглядит так:
87
5. Теперь, собственно, сама адаптация. Для начала надо указать <meta>-тег viewport и
подключить новый CSS-файл, в котором будут стили для мобильных устройств:
88
6. В media.css сначала указываем размер устройства, к которому будут применяться
стили:
7. Дальше смотрим, как вообще сейчас страница выглядит в телефоне. Для этого
открываем консоль разработчика жмём эту кнопку:
89
8. Выбираем устройство, размеры которого мы сейчас будем эмулировать (у меня это –
iPhone 6/7/8):
9. Я вижу, что длинное меню слегка сжалось и съехало влево. Вариант первый (плохой)
– просто меняю flexbox со строчного на колонку и убираю фиксированную высоту
блока:
90
10. Выглядит так себе. Нормальная практика убирать элементы меню вообще, и
показывать кнопку. Идём на https://www.flaticon.com/ru/ и в поиске пишем «menu».
91
11. Жмём на любую понравившуюся иконку. Во всплывающем окне жмём PNG -> Free
download:
12. Сохраняем иконку в папку.
13. Добавляем чутка HTML:
92
14. И стилизуем. По умолчанию кнопку не видно, поэтому в style.css у неё есть display:
none.
15. Идём в media.css. Там я даю скрываю пункты меню, но показываю кнопку и стилизую
её:
93
16. Теперь более-менее норм. Дальше надо показать меню при нажатии. Но чтобы это
выглядело нормально, надо все ссылки обернуть в <div>:
17.
94
18. В media.css стилизую popup и пишу, что он будет абсолютным и появляться ниже
<header>’а.
19. Обновляем страницу, смотрим, что получилось. Не идеально, но лучше. (да, это
делается через JS, но пока так).
95
20. Далее мне не нравится, что фоточки маленькие. Надо сделать по одной на строку. Тут
всё просто – меняем сетку, делая 1 столбец:
96
97
21. Ну и совсем для красоты, «прилепляю» <header> в style.css к верху экрана (надо будет
убрать его position:relative в media.css)
22. Переключаемся между мобильным видом и обычным, смотрим, что нигде ничего не
поломалось.
98
23. Ну и небольшая самостоятельная работа: адаптировать страницу для планшетов
(выбираем какой-нибудь iPad):
24. СОХРАНИТЕ КУДА-НИБУДЬ ЭТУ РАБОТУ, МЫ ЕЩЁ ВЕРНЁМСЯ К НЕЙ В
ОДНОЙ ИЗ СЛЕДУЮЩИХ РАБОТ.
25. Вопросы:
a. Для чего нужны теги <meta>?
b. Какие правила описания @media-запросов?
Практическая работа №10
Работа с JavaScript
Цели:
1. Добавить JS-код к HTML-документу.
2. Ознакомиться с синтаксисом языка.
3. Работа с DOM.
Ход работы:
1. Создаём новую папку, файлы index.html, script.js.
99
2. В HTML-документе будет такая структура:
3. Подключаем JS-файл:
4. Сначала, даём текст заголовку:
100
5. Дальше меняем атрибут src картинки:
101
6. Дальше чуть изменим текст параграфа, добавив к нему ещё текста:
102
7. Дальше добавим ещё элемент, например, <div>:
103
8. Стилизуем созданный <div>:
9. Либо сразу несколько стилей за один раз, как в CSS:
104
10. Аналогично можем добавить парочку тегов в <div>:
105
11. Вопросы:
a. Как можно подключить JS-код в HTML-документ?
b. Как описываются переменные в JS?
c. Как можно получить доступ к элементу HTML из JS?
d. Как можно из JS менять текст HTML-элемента?
e. Как можно менять из JS атрибуты HTML-элементов?
f. Как можно добавлять из JS HTML-элементы?
g. Как получить текстовое значение HTML-элемента?
h. Как получить HTML-код элемента?
Практическая работа №11
Обработка событий в JS
Цели:
1. Ознакомиться с функциями, классами и объектами.
2. Ознакомиться обработчиками событий в JS.
Ход работы:
1. Берём прошлую работу, где адаптировали страницу под мобилки.
2. Создаём и подключаем script.js.
106
3. Для начала делаем нормальное открытие меню. Я поменяю :hover <header>’a на класс:
107
4. Теперь надо добавить обработчик нажатия на кнопку меню, в которой надо будет
добавить этот класс <header>’у:
5. Жмём на кнопку, смотрим, что происходит.
6. Дальше делаем закрытие этой менюшки при клике на сетку с фоточками
7. :Обновляем, жмём кнопку, жмём на фоточку, смотрим, что происходит.
8. Вижу, что при нажатии не пункты меню, сама менюшка не закрывается. Надо добавить
обработчик и для этих элементов:
9. Обновляем, тычем, смотрим, что работает.
108
10. Вижу, что у меня 2 одинаковых обработчика событий. Значит, можно вынести их в
отдельную функцию:
11. Обновляем, но функционально ничего измениться не должно было.
12. Дальше реализуем добавление нового поста. Для этого создам новый HMTL-элемент:
109
13. И стилизую его. По умолчанию этого окошка не должно быть видно:
110
14. Теперь добавлю обработчик нажатия на пункт меню «Фото»:
15. Обновляем страницу, смотрим, что окошко открывается (а оно должно).
111
16. Теперь надо добавить ещё один обработчик для кнопки «Отменить», который будет
закрывать это окошко:
17. Дальше самое важное. Берём данные из полей ввода и добавляем новую фоточку в
начало сетки. На этот раз через нормальные объекты, а не через innerHTML.
18. Обновляем, пробуем добавить фоточку. Получилось/нет – показываем мне.
112
19. Вопросы:
a. Как описываются функции в JS?
b. Как добавить обработчик события в JS?
c. Как добавить/удалить класс HTML-элемента в JS?
d. Как создать новые элементы в JS?
e. Как получить значение поля ввода в JS?
f. Что делает CSS-свойство box-sizing?
Практическая работа №12
Условия, циклы, навигация в JS
Цели:
1. Ознакомиться с синтаксисом условного оператора. Тернарное условие.
2. Навигация по DOM.
Ход работы:
1. Берём прошлую работу.
2. Сначала слегка модифицируем кнопку меню. Я хочу, чтобы кнопка меню менялась
при открытии. Иду искать ещё одну иконку, на этот раз ищу «close».
3. Дописываю немного кода в обработчики открытия/закрытия, меняя имя картинки:
113
4. Теперь ещё изменю код кнопки, чтобы менюшка закрывалась при нажатии на эту же
кнопку:
5. Дальше добавим валидацию полей, чтобы нельзя было добавить картинки с пустыми
значениями:
114
6. Теперь фоточки не добавляются, но не понятно, что происходит. Будем визуально
подсвечивать поле ввода, с пустым значением:
115
7. Выглядеть должно примерно так (там красная граница):
116
8. С другой стороны, обязательным является только src, текст можно и не писать. Но
совсем без текста будет грустно, поэтому я сделаю либо таким, что ввели, либо
стандартным:
117
9. Теперь можно добавить фоточку без текста:
118
10. После добавления фоточек также надо очищать поля ввода:
11. И последняя часть. При нажатии на фоточку, она будет открываться во всплывающем
окне на весь экран. Добавим новый HTML-элемент:
119
12. Как и окошко с полями ввода, оно не видно по умолчанию:
120
13. Просто так добавить обработчик все элемента нельзя, поэтому я переберу их все в
цикле, и каждому дам обработчик.
121
14. Выглядит так:
122
15. Добавлю ещё обработчик для закрытия этого окошка:
16. Если кто-то умный, он заметит, что фоточки, добавленные через окошко добавления,
не открываются, как остальные. Это потому, что они добавляются уже после этого
кода, следовательно, у них такого обработчика нажатия нет. Просто добавляю его:
17. Тыкаем всё, что сделали, проверяем, что работает/не работает, показываем мне.
123
18. Вопросы:
a. Какой синтаксис условного оператора в JS?
b. Что является логическими значениями в JS?
c. Как работает тернарное условие в JS?
d. Какие циклы есть в JS?
e. Как в JS получать доступ к элементам внутри других элементов?
Практическая работа №13
Разработка калькулятора
Цели:
1. Ознакомиться с основными подходами в разработке программ.
2. Сделать простой калькулятор.
Ход работы:
1. Здесь работа оказалась довольно объёмной, поэтому я записал видос, пытаемся сделать
то же самое.
2. https://1drv.ms/v/s!AuTxBLHCSY30puINeqlzXDQZd-EgIQ?e=ClXL59
3. В конце делаем ещё пару кнопок самостоятельно:
a. возведение в степень
b. извлечение квадратного корня.
4. Вопросы:
a. Их нет. Если получилось всё сделать – малаца.
Практическая работа №14
Разработка карусели фотографий
Цели:
1. Ознакомиться с основными подходами в разработке программ.
2. Сделать карусель фотографий.
Ход работы:
1. Здесь работа оказалась тоже объёмной, поэтому я записал видос.
2. https://1drv.ms/v/s!AuTxBLHCSY30puMj78ud4oLbaNNuBg?e=Q4k89I
3. Вопросы:
a. Снова нет.
Практическая работа №15
Работа с классами и объектами
Цели:
1. Ознакомиться с работой классов и объектов в JS.
2. Поработать с объектами в JS
3. Доработать прошлую работу, создав класс для создания объектов карусели.
Ход работы:
1. Снова видос.
https://1drv.ms/v/s!AuTxBLHCSY30puMkhe58maPM3_FIBA?e=uWjNmW
2. Вопросы:
a. Как в JS описываются классы?
b. Как в JS описываются статические методы и в чём их отличие от
нестатических?
c. Как в JS создаётся новый объект класса?
124
Практическая работа №16
Работа с асинхронными событиями
Цели:
1. Ознакомиться с работой async/await.
2. Поработать Fetch API.
3. Разработать простое одностраничное приложение.
Ход работы:
1. Снова видос.
2. https://1drv.ms/v/s!AuTxBLHCSY30puMlnKJZ5NVIhRzqQw?e=mysOJD
3. Вопросы:
a. Что в JS делает ключевое слово async?
b. Что в JS делает ключевое слово await?
c. Что в JS делает функция fetch()?
Практическая работа №17
Работа с BOM
Цели:
1. Ознакомиться с понятием BOM.
2. Поработать window.location.
3. Доработать предыдущее задание.
Ход работы:
1. Снова видос.
2. https://1drv.ms/u/s!AuTxBLHCSY30puMmN1kUjXaTQ9KnmQ?e=LvsmBa
3. Вопросы:
a. Что такое BOM?
b. За что в JS отвечает объект window.location?
125
Практическая работа №18
Установка локального веб-сервера
Цели:
1. Ознакомиться с работой локального.веб-сервера
Ход работы:
1. Идём на сайт https://www.apachefriends.org/ru/index.html
126
2. Качаем XAMPP для Windows:
127
3. Запускаем скачанный файл от имени администратора:
128
4. Жмём «Next» до следующего окошка:
129
5. Оставляем галки на Apache, MySQL, PHP, phpMyAdmin:
6.
7.
8.
9.
Жмём «Next», выбираем путь установки. Я оставлю по умолчанию «C:\xampp».
Язык оставляем английский.
Убираем галку «Learn more about Bitnami for XAMPP».
Жмём «Next», ждём, пока установка завершится.
130
10. Жмём «Finish». Должна запуститься панель управления веб-сервером:
11. Жмём «Start» справа от Apache.
12. Переходим обратно в браузер, в адресную строку пишем «http://localhost».
131
13. Если открывается такое окошко, то всё установилось нормально:
14. Создаем в C:\xampp\htdocs новую папку «pract».
15. В папке создаём файл index.html.
132
16. Идём в браузер, пишем в адресную строку «localhost/pract». Если показалось
следующее, то всё работает правильно:
17. Если не получается, просим помочь.
18. Вопросы:
a. Снова нет.
Практическая работа №19
Разработка структуры базы данных
Цели:
1. Приобретение навыков создания и управления базой данных с помощью программы
phpMyAdmin.
2. Закрепление навыков использования MySQL.
Ход работы:
1. Всю работу в данной части мы будем делать в phpMyAdmin.
2. Для этого после запуска ксампа нужно в браузере перейти по ссылке
http://localhost/phpmyadmin
3. В рамках этой работы необходимо будет создать базу данных `photos` для предыдущих
работ с фоточками.
133
4. Заходим в базы данных:
5. Вводим название и выбираем `utf8mb4_unicode_ci`:
134
6. Создаём таблицу `users`:
7. Заполняем имена полей и выбираем типы данных:
8. Обязательно указываем для Id первичный ключ и автоинкремент:
135
9. Добавляем запись:
10. Поле ввода для Id можно оставить пустым, СУБД вставит его сама:
136
11. Если всё норм, то появится что-то типа такого:
12. Создаём аналогично таблицу `photos`, которая будет содержать фото пользователей.
Структура таблицы:
№
1
2
3
4
5
Название поля
Id
Uid
Image
Text
Tags
Тип
INT
INT
TEXT
TEXT
TEXT
13. В этой таблице `Uid` – внешний ключ, который ссылается на запись в таблице `users`.
Заходим в Структура – Связи:
137
14. Выбираем столбец, указываем, что он ссылается на таблицу `users`, столбец `Id`:
15. Добавляем запись. Здесь ссылка – это путь к картинкам в вашей 9 работе (у меня
картинки лежат в папке images):
138
16. Создаём таблицу `comments`, которая содержит комментарии к фото. Структура
таблицы:
№
1
2
3
4
5
Название поля
Id
Pid
Uid
Text
Post_date
Тип
INT
INT
INT
TEXT
DATE
17. `Pid`– внешний ключ, ссылается на `Id` таблицы `photos`, `Uid` – внешний ключ,
ссылается на `Id` таблицы `users`.
18. После описания структуры таблиц заполняем как минимум 10 фото, 5 отзывов и 2
пользователя.
19. Показываем мне.
20. Вопросы:
a. Какие типы данных есть в MariaDB?
b. Что такое первичный ключ?
c. Что такое внешний ключ?
Практическая работа №20
Ознакомление с синтаксисом PHP
Цели:
1. Ознакомление с синтаксисом PHP.
Ход работы:
1. В ранее созданной папке pract удалить всё содержимое.
2. Создать в папке файл index.php.
3. В нём будет всё тот же HTML-код:
4. В начале файла я добавлю несколько переменных, с которыми буду работать дальше.
Обычно такие данные берутся из БД, но сейчас пока так:
139
140
5. Дальше я вывожу эти данные на страницу. Здесь мы используем парочку из них. Ниже
я из php вывожу целый тег:
6. Можно делать вывод более просто, не затрагивая остальной HTML-код:
141
7. Либо то же самое ещё проще, используя Echo-тег:
8. Вопросы:
a. Как описываются переменные в PHP?
b. Как описываются PHP-теги?
c. Какой оператор отвечает за вывод данных в PHP?
d. В какие файлы обычно пишут PHP-код?
Практическая работа №21
Условия, циклы, массивы PHP
Цели:
1. Ознакомление с синтаксисом условного оператора PHP.
2. Ознакомление с массивами в PHP.
3. Работа с циклами в PHP.
Ход работы:
1. Продолжаем работать всё в том же файле.
142
2. Для начала я создам массив, в котором будут условные данные, как если бы я получал
их из БД. Пусть это будет массив строк с путями к картинкам:
3. Дальше, уже в HTML-части создаём картинки внутри цикла:
143
4. Либо то же самое, но с помощью альтернативной нотации:
144
5. Далее чуть усложним исходные данные, добавив к пути название, и это будет уже
вложенный ассоциативный массив:
145
6. Соответственно, теперь выводим не просто элементы массива, а элементы подмассива
по ключу и добавим к картинке подпись. В обеих нотациях:
146
7. И последняя часть. Ещё изменим массив, добавив туда пустые строки:
147
8. Теперь меняем код, чтобы на страницу не попадали элементы с пустой картинкой или
текстом (опять в обеих нотациях):
9. Вопросы:
a. Как описывается условный оператор в PHP?
b. Какие циклы есть в PHP?
c. Как описываются массивы в PHP?
d. Что такое альтернативная нотация в PHP?
e. Что такое ассоциативные массивы в PHP?
Практическая работа №22
Работа с СУБД MariaDB в PHP
Цели:
1. Ознакомление с подключением к СУБД MariaDB в PHP.
2. Работа с SQL.
148
Ход работы:
1. Берём всё ту же работу с фоточками, которая №12.
2. Кладём все файлы работы в папку pract (ну либо в новую, если хочется, главное, чтобы
она была внутри htdocs).
3. Меняем расширение файла index.html на .php.
4. Первым делом поменяем способ вывода фоточек. Теперь они будут браться из базы
(которую делали в 19-й работе). Обратите внимание, что у меня в базе и в примере
фоточки лежат в папке images:
5. И то же самое у меня записано в таблице `photos`:
149
6. Теперь подключаемся к базе и получаем из неё данные. Пока что прямо в index.php:
7. Чтобы было понятнее, что находится в переменной $data, можно вывести её на экран:
150
8. Выглядит это так:
9. То есть, в $data находится массив строк из таблицы `photos`, а имена столбцов
являются ключами вложенных ассоциативных массивов.
10. Убираем var_dump(), чтобы всё стало снова нормально выглядеть.
151
11. Дальше меняем сетку с фоточками. Теперь там будет динамически создаваться код
картинок, которые есть в базе:
12. После этого особо визуально ничего недолжно измениться, кроме самих фоточек и
подписей.
13. Вопросы:
a. Как в PHP создать подключение к базе данных?
b. Как в PHP сделать SQL-запрос к таблице базы данных?
c. Как в PHP сохранить результат SQL-запроса в массив?
Практическая работа №23
Функции, классы, пространства имён в PHP
Цели:
1. Ознакомление с синтаксисом функций в PHP.
2. Ознакомление с классами в PHP.
3. Работа с пространствами имён в PHP.
152
Ход работы:
1. Создаём новый файл, который будет включать в себя класс для работы с БД. У меня
это будет DB.php.
2. В классе описываем статические свойства для настроек подключения:
3. Далее описываем конструктор, в котором будем подключаться к базе:
153
4. Теперь меняем код в index.php, заменяя создание подключения созданием объекта
нашего класса:
5. Перед созданием объекта нужно сначала подключить файл, содержащий его код:
154
6. Дальше переносим сам SQL-запрос в класс, чтобы здесь вызывать только методы:
7. Обновляем страницу, смотрим, что ничего не сломалось.
155
8. Ну и под конец нужно зайти в класс, и указать, что он относится к пространству имён.
Я укажу Photos, вы можете указать что-то своё:
9. После добавления нужно в index.php дописать это имя перед именем класса:
156
10. Ну и на всякий случай добавлю ещё проверку, что в запрос к таблице фотографий
вернул какие-то данные:
11. Вопросы:
a. Как в PHP описываются классы?
b. Как в PHP создаются новые объекты?
c. Как в PHP описываются пространства имён?
d. Как в PHP описываются функции?
e. Как в PHP обратиться к свойству или методу объекта?
f. Что в PHP делает ключевое слово return?
Практическая работа №24
Composer и авторегистрация классов PHP
Цели:
1. Работа с composer в PHP.
Ход работы:
1. Создаём ещё один класс, Photo. Он будет отвечать за вывод фоточек на страницу.
157
2. Теперь вызываем его в index.php:
158
3. Но теперь нужно этот файл с новым классом тоже подключить:
4. Обновляем страницу, смотрим, что всё работает.
5. Теперь, чтобы не писать лишний раз кучу require, можно описать функцию для
авторегистрации классов, которая будет самостоятельно искать нужный файл и
подключать, в случае необходимости. Проще всего такое делается с помощью
composer.
6. Идём на сайт https://getcomposer.org и качаем Windows Installer.
159
7. Запускаем, выбираем путь к файлу php.exe (или оставляем тот, что был по умолчанию):
8. Дальше несколько раз жмём «Next», ждём.
160
9. Идём в папку pract, и с зажатым Shift жмём правой кнопкой мыши, в меню выбираем
«Открыть окно PowerShell здесь»:
10. В открывшемся окошке пишем «composer init». Он предложит ввести стартовые
данные, типа имени пользователя и проекта. Просто пропускаем.
11. На этапе зависимостей дважды пишем «no»:
161
12. И в самом конце ещё раз Enter.
13. После этого у вас в папке появится файл composer.json:
14. В него нужно будет добавить несколько строк после «require {}»:
162
15. После этого возвращаемся в консоль и вводим «composer update», чтобы он обновил
настройки и создал за нас функцию авторегистрации:
16. Если всё правильно, то в папке должны появиться файл composer.lock и папка vendor:
163
17. После этого достаточно будет везде подключать автозагрузчик классов из папки
vendor, который сам будет загружать всё остальное:
18. Вопросы:
a. Нет.
Практическая работа №25
Суперглобальные переменные. Сессии в PHP
Цели:
1. Работа с суперглобальными переменными в PHP.
2. Обработка данных форм.
3. Работа с сессиями в PHP.
Ход работы:
1. Снова большая работа, так что снова видео:
2. https://1drv.ms/v/s!AuTxBLHCSY30p6kiTVQzJVK9XOTNsg?e=GmxItV
3. Вопросы:
a. Что такое суперглобальные переменные в PHP?
b. Какие суперглобальные переменные есть в PHP?
c. Как указать метод отправки данных HTML-формы?
d. Как указать файл, который будет обрабатывать данные формы после отправки?
e. Как запускается сессия в PHP?
164
Практическая работа №26
Работа с асинхронными запросами в PHP
Цели:
1. Работа с асинхронными запросами в PHP.
2. Работа с JSON.
Ход работы:
1. Продолжаем прошлую работу.
2. Немного изменим поведение страницы при нажатии на фоточку. Создаём image.php,
на которой будет большая фоточка, информация об авторе и комментарии:
165
3. Данные для страницы будут браться из базы, в зависимости от ID, который был
передан в GET-параметр:
166
4. Чтобы параметр туда попадал, нужно поправить код класса Photo:
5. Поскольку изменился конструктор, нужно изменить его вызовы в index.php и user.php:
167
6. И немного поправить стили для элемента «.photo»:
7. Дальше убираем обработчик событий при нажатии на фоточку из script.js и
возвращаемся в image.php.
168
8. Подключаем style.css и дописываем старт сессии в начало:
169
9. Теперь нужно получать данные из таблицы фото. Для этого делаем новый метод в
классе базы:
10. И вызываем его на странице с фоточкой:
170
11. Дальше просто выводим данные из ассоциативного массива:
171
12. Немного правим стили:
172
13. И по итогу это должно будет выглядеть примерно так:
14. Дальше делаем комментарии к фоточке. Сначала добавляем новый метод в класс базы:
173
15. Вызываем его на странице с фоточкой:
16. И выводим. Обратите внимание, что блок .comments я в итоге вынес из #image:
174
17. И стилизуем:
175
18. По итогу выглядит как-то так:
176
19. При этом в таблице comments в базе у меня вот так:
177
20. Дальше добавляем форму для добавления нового комментария:
178
21. Стилизуем:
22. По итогу выглядит как-то так:
179
23. Данные этой формы будут отправляться в фоне, из JS, без перезагрузки страницы. Для
этого создаём файл image.js, внутри которого добавляем обработчик нажатия на
кнопку «Добавить»:
24. Внутри обработчика нужно получить ID фотографии и текст комментария:
180
25. Дальше эти данные будем слать асинхронным запросом на сервер:
26. Теперь создаём файл add_comment.php, который будет отвечать за добавление
комментария:
27. Добавляем в БД метод для нового коммента:
181
28. Вызываем его в добавлении комментария и возвращаем ответ на запрос в виде JSONстроки:
29. Дальше обрабатываем этот ответ на стороне клиента, добавляя новый комментарий в
начало всех комментариев:
182
30. И заодно поменяем метод в БД, чтобы комментарии извлекались из БД
отсортированные в порядке от новых к старым:
31. Обновляем страницу, добавляем новый коммент. Проверяем таблицу, что всё
добавилось нормально:
32. Вопросы:
a. Как отправить из JS асинхронный HTTP-запрос?
b. Что такое JSON-строка?
Практическая работа №27
Публикация сайтов
Цели:
1. Ознакомление с видами хостинга.
2. Работа с ftp-менеджером.
3. Работа с git.
4. Миграция БД.
Ход работы:
1. Для начала попробуем бесплатный хостинг для статичных страниц (без бэка и баз)
который предоставляет Github.
183
2. Идём на https://github.com и регистрируемся, если учётки ещё нет.
3. Создаём новый репозиторий:
184
4. Вводим название:
185
5. Жмём галку «Add a README file»:
6. Жмём «Create repository».
7. Сначала делаем просто: идём на https://desktop.github.com и качаем их приложение.
186
8. Ждём, пока установится, авторизуемся:
187
9. Оставляем настройки ,как есть, жмём «Finish»:
188
10. Идём в меню File -> Clone repository:
189
11. Выбираем только что созданный репозиторий, жмём «Clone»:
190
12. В открывшемся окошке жмём «Show in explorer»:
13. В эту папку копируем какие-нибудь html/css/js файлы из прошлых работ. Я возьму всё
те же фоточки до php:
14. Переходим обратно в Github Desktop.
191
15. Видим, что отобразились добавленные файлы:
192
16. Пишем в Summary что-то типа «Первый коммит» и жмём «Commit to main»:
193
17. После этого жмём любой Push origin:
194
18. Возвращаемся в репозиторий в браузере. Видим, что файлы отобразились:
195
19. Идём в меню Settings:
196
20. Слева жмём «Pages»:
197
21. Жмём на «None», выбираем нашу ветку (то есть «Main»):
198
22. Оставляем «/(root)», жмём «Save»:
199
23. Появится ссылка на сайтик:
24. Ждём минуты 2, пока сайтик полностью создастся, переходим по ссылке, радуемся.
25. Дальше более сложный вариант, но зато с бэком и базами.
26. Идём на https://beget.com/ru/hosting/free и регистрируемся.
27. Вводим имя, телефон, ждём код подтверждения, вводим.
200
28. Появится окошко с данными для входа. ОБЯЗАТЕЛЬНО ИХ СОХРАНИТЕ.
29. Жмём «Войти в панель управления»
30. В меню выбираем FTP:
201
31. Указываем логин и пароль, жмём «Добавить»:
32. Идём на https://filezilla-project.org и жмём FileZilla Client:
202
33. Качаем обычную версию:
34. Устанавливаем. Жмём «I agree» -> «Only for me» -> Галки по умолчанию -> Путь по
умолчанию -> «Install». Ждём. Запускаем.
203
35. В Filezilla Пишем данные из панели управления:
204
36. Имя пользователя и пароль используем те, что писали пользователю при создании:
205
37. Жмём «Быстрое соединение». В открывшемся окошке ставим галку и жмём «ОК».
38. После соединения справа появятся файлы вашего сайта:
206
39. Переходим в «ваш сайт -> public_html»:
40. Сюда обычным перетаскиванием загружаем файлы сайтика. Если спросит, жмём
«Перезаписать».
207
41. Открываем свой phpMyAdmin и выбираем свою базу. Сверху жмём «Экспорт»:
42. В открывшейся странице жмём «Вперёд», сохраняем файл. Он будет по умолчанию
называться также, как ваша база с расширением .sql.
208
43. Идём в панель управления beget.com и выбираем MySQL:
44. Создаём нового пользователя, оставляем галку:
209
45. У созданного пользователя жмём иконку phpMyAdmin:
46. На открывшейся странице жмём «Импорт»:
210
47. Жмём «Выберите файл» и выбираем .sql-файл, который до этого экспортировали.
Внизу жмём «Вперёд». Слева должны будут появиться ваши таблицы:
211
48. Последним шагом идём обратно в FileZilla и ищем файл DB.php. Жмём
«Просмотр/правка»:
49. В своём коде меняем $user, $password, $database на данные из beget:
212
50. Сохраняем файл, закрываем.
51. Возвращаемся в FileZilla. В открывшемся окошке ставим галку, жмём «Да».
52. Переходим обратно в панель управления, жмём «Сайты»:
53. Жмём настройки своего сайта:
213
54. В открывшемся окошке выбираем версию PHP 7.4:
55. Закрываем окошко, ждём несколько минут.
56. Переходим по ссылке своего сайтика, если всё правильно, отобразится ваша
страничка:
57. Вопросы:
a. Что такое ftp-менеджер?
b. Что такое git?
c. Как экспортировать/импортировать БД?
214
Основная литература
1. Робин Никсон. Создаем динамические веб-сайты с помощью PHP,
MySQL, JavaScript, CSS и HTML5, 5 издание - Питер, 2019 г.
1.
2.
3.
4.
5.
6.
Интернет-ресурсы
https://developer.mozilla.org/ru/ – MDN Web Docs
https://learn.javascript.ru – Современный учебник JavaScript
https://www.w3schools.com – W3Schools Online Web Tutorials
https://mariadb.com/kb/ru/5306/ – Документация по MariaDB
http://www.mysql.ru/docs/man/ – Справочное руководство по MySQL
https://www.php.net/manual/ru/ – Руководство по PHP
215
