Разработка web-страниц на HTML, CSS и JavaScript: Учебное пособие для СПО. 2-е изд., стер.

Citation preview

---

В. В. ЯНЦЕВ

РАЗРАБОТКА WEB-СТРАНИЦ НА HTML, CSS И JAVASCRIPT УЧЕБНОЕ ПОСОБИЕ Издание второе, стереотипное

САНКТ-ПЕТЕРБУРГ • МОСКВА • КРАСНОДАР 2025

УДК 004 ББК 32.973.4я723 Я 65

Янцев В. В. Разработка web-страниц на HTML, CSS и JavaScript : учебное пособие для СПО / В. В. Янцев. — 2-е изд., стер. — Санкт-Петербург : Лань, 2025. — 148 с. : ил. — Текст : непосредственный. ISBN 978-5-507-52427-3 Издание, которое держит в руках начинающий программист, посвящено разработке web-страниц. Вместе с автором вы пройдете путь от создания простейшего документа, содержащего только текст, до оформления полноценного ресурса с иллюстрациями и компонентами интерактивного взаимодействия. Книга познакомит вас с наиболее важными элементами HTML; основными свойствами, которые указываются в таблицах стилей CSS; приемами управления объектами документа с помощью языка программирования JavaScript. Читателя также ждет бонус — рассказ о технологии Ajax с конкретными примерами, а также вспомогательный материал, посвященный созданию на своем компьютере полноценной среды разработки. Рекомендовано в качестве дополнительной литературы для студентов, обучающихся в средних профессиональных учебных заведениях по направлению «Информатика и вычислительная техника». Соответствует современным требованиям Федерального государственного образовательного стандарта среднего профессионального образования и профессиональным квалификационным требованиям. К книге прилагаются дополнительные материалы, доступные в электронной библиотечной системе «Лань» по ссылке или QR-коду, указанным ниже. УДК 004 ББК 32.973.4я723

Обложка П. И. ПОЛЯКОВА

© Издательство «Лань», 2025 © В. В. Янцев, 2025 © Издательство «Лань», художественное оформление, 2025

ОГЛАВЛЕНИЕ 1. ВВЕДЕНИЕ .......................................................................................... 5 1.1. О чем эта книга ................................................................................ 5 1.2. Особенности изложения материала ............................................... 5 1.3. Оформление кода ............................................................................ 6 1.4. Необходимые браузеры .................................................................. 7 1.5. Устанавливаем редактор................................................................. 8 1.6. Кодировка файлов ......................................................................... 14 1.7. Проверка кода ................................................................................ 15 2. СОЗДАНИЕ РАЗМЕТКИ СТРАНИЦЫ ....................................... 20 2.1. Простейшая страница ................................................................... 20 2.2. Тип документа ............................................................................... 22 2.3. Головная часть и тело документа ................................................ 22 2.4. Абзацы ............................................................................................ 24 2.5. Заголовки ....................................................................................... 24 2.6. Блоки текста ................................................................................... 28 2.7. Горизонтальные линии ................................................................. 29 2.8. Таблицы.......................................................................................... 32 2.9. Надстрочный и подстрочный текст ............................................. 33 2.10. Перевод строки ............................................................................ 34 2.11. Жирный, подчеркнутый, курсив ................................................ 36 2.12. Изображения на странице........................................................... 37 2.13. Списки и ссылки.......................................................................... 40 2.14. Атрибуты тегов............................................................................ 41 3. ОФОРМЛЕНИЕ ЭЛЕМЕНТОВ СТРАНИЦЫ ............................ 43 3.1. Контейнер ...................................................................................... 43 3.2. Размеры области контента............................................................ 44 3.3. Позиционирование контейнера.................................................... 47 3.4. Выравнивание текста .................................................................... 47 3.5. Отступы в абзацах ......................................................................... 50 3.6. Оформление изображений............................................................ 52 3.7. Позиционирование рисунков ....................................................... 54 3.8. Параметры обтекания текстом ..................................................... 54 3.9. Шрифт и его размер ...................................................................... 57 3.10. Изменения в горизонтальных линиях ....................................... 57 3.11. Стили вместо тегов ..................................................................... 57 3

3.12. Корректировка таблицы.............................................................. 62 3.13. Настраиваем надстрочный и подстрочный тексты ......................................................................... 63 3.14. Оформление ссылок .................................................................... 64 3.15. Контекстный селектор ................................................................ 64 3.16. Компоновка страницы с помощью таблиц ............................... 65 3.17. Оформление основной таблицы................................................. 67 3.18. Завершающие штрихи ................................................................ 69 3.19. Позиционирование ...................................................................... 69 3.20. Внешние таблицы стилей ........................................................... 71 4. УПРАВЛЕНИЕ ОБЪЕКТАМИ ДОКУМЕНТА........................... 73 4.1. Что такое JavaScript....................................................................... 73 4.2. Переменные ................................................................................... 74 4.3. Массивы ......................................................................................... 77 4.4. Условия .......................................................................................... 79 4.5. Циклы ............................................................................................. 83 4.6. Функции ......................................................................................... 85 4.7. Регистрация обработчиков ........................................................... 89 4.8. Всплывающие подсказки .............................................................. 94 4.9. Выделение блока ........................................................................... 98 4.10. Скрипт просмотра фото ............................................................ 101 4.11. Внешние сценарии .................................................................... 103 5. ТЕХНОЛОГИЯ AJAX .................................................................... 105 5.1. Выясняем разрядность ОС ......................................................... 105 5.2. Установка пакета Visual C++ ..................................................... 106 5.3. Установка сервера Apache 2.4 .................................................... 108 5.4. Установка PHP 8.......................................................................... 115 5.5. Как функционирует Ajax ............................................................ 118 5.6. Поля форм .................................................................................... 118 5.7. Добавляем форму на страницу................................................... 123 5.8. Стилизуем форму ........................................................................ 124 5.9. Тестируем пример ....................................................................... 127 6. ЗАКЛЮЧЕНИЕ ............................................................................... 132 7. ПРИЛОЖЕНИЯ .............................................................................. 133 7.1. Установка Python 3 ...................................................................... 133 7.2. Основные элементы HTML5 ...................................................... 137 7.3. Основные стили CSS3 ................................................................. 141 8. СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ ................... 146 4

1. ВВЕДЕНИЕ Среда веб-разработки — очень интересная область деятельности. И особенно она привлекательна тем, что у нее низкий уровень входа. Действительно, чтобы создать веб-страницу, достаточно примитивного редактора Блокнот. В нем вы можете написать HTML-код, таблицу стилей и сценарий на JavaScript. Не нужно устанавливать компилятор или интерпретатор. Все необходимое для запуска такой страницы содержится в «недрах» любого современного браузера. Да и база для веб-программирования — HTML, CSS и JavaScript — проста в изучении и доступна любому, кто хочет ее освоить.

1.1. О чем эта книга Предлагаемая вашему вниманию книга является пособием, знакомящим читателя со всеми аспектами веб-программирования. Обычно в литературе подобного рода уделяется внимание только какомуто одному разделу. Например, языку разметки HTML, каскадным таблицам стилей CSS, языку программирования JavaScript. Эта книга последовательно проводит читателя по всем трем направлениям. А главное — изучение нового материала все время происходит на практических примерах. Получив начальные знания, вы сможете использовать их при решении разных задач. Это как в математике: изучили формулу, решили несколько примеров вместе с преподавателем. Тем самым разобрались с алгоритмом, который отныне можно применять при решении других задач. Особенность книги состоит в том, что в ней описаны азы вебпрограммирования. Автор разобрал ограниченный перечень тегов, свойств и методов. Чтобы развивать свои знания дальше, будет полезным иметь под рукой справочники HTML и CSS, а также какую-нибудь серьезную книгу по JavaScript. На последнюю тему автор может посоветовать свое учебное пособие «JavaScript. Креативное программирование», которое вышло в издательстве «Лань» в 2023 г.

1.2. Особенности изложения материала В книге семь глав. Первая — «Введение». Вы сейчас читаете ее. Главы 2–4 построены следующим образом. Глава 2. Читатель создает страницу с простейшим текстом. После чего начинает изучение HTML5, добавляя на страницу по мере освоения материала все новые и новые теги и превращая ее в полноценный веб-документ. Глава 3. Переходим к изучению CSS. Во время этого процесса на страницу добавляются все новые и новые стили, после чего она приобретает качественное оформление. 5

Глава 4. Читатель знакомится с JavaScript и добавляет интерактивность содержанию. Глава 5. Бонусная глава, посвящена технологии Ajax, позволяющей странице обмениваться информацией с сервером без перезагрузки документа. Сначала мы создадим на домашнем компьютере локальный хостинг, а затем посмотрим Ajax в действии. Глава 6 содержит ряд вспомогательных материалов, которые могут пригодиться начинающему разработчику. И в самой короткой главе 7 мы подведем итоги нашей работы. Книгу сопровождает zip-архив со всеми рассмотренными программами. Его можно скачать по ссылке или QR-коду, указанным на обороте титула. Работать с архивом очень просто. Если описание какой-то программы начинается с указания Файл, значит, ее страница находится в той или иной папке архива. Понять, где найти программу, легко. Вот пример: Файл 3/3.5.1.html Здесь до слеша указано название папки, где размещается необходимый вам файл. Цифра в имени папки соответствует номеру главы, к которой эта папка относится. Дальше идет имя файла — 3.5.1.html. Первая цифра в его имени — номер главы, вторая — номер раздела, третья — порядковый номер программы, под которым она описана в разделе. Глядя на пример выше, понятно, что перед нами сценарий из третьей главы, из пятого раздела. В данном разделе этот сценарий разбирается первым (кстати, он единственный в указанном разделе). Чтобы посмотреть код, откройте страницу в каком-либо из специализированных редакторов. Про установку одного из таких редакторов вы прочитаете в параграфе 1.5 «Введения». Хотите посмотреть сценарий в действии? Просто запустите ту или иную страницу в браузере.

1.3. Оформление кода Коды страниц имеют различное типографское оформление в соответствии с их размещением в тексте. Если код в книге выделен в отдельный блок, то он оформлен моноширинным шрифтом, например так:

• Москва
• Санкт-Петербург
• Казань

Если фрагменты сценария внедрены непосредственно в текст, то в этом случае части кода выделены полужирным шрифтом, например так: если выполняется условие ev.target.tagName=="IMG", то

6

Обратите внимание: в некоторых блоках программ сделан перенос части кода на вторую и даже на третью или четвертую строку (из-за недостатка ширины страницы в книге). Это непринципиально, если речь идет о HTML или CSS. А вот в реальном сценарии JavaScript такой перенос кода не делается. Запомните правило: все переносы строк кода JavaScript существуют только в их типографском воспроизведении. Если вы в дальнейшем столкнетесь с подобной ситуацией, учитывайте данный аспект. Еще один момент. Обычно таблицы стилей какой-либо страницы принято записывать следующим образом (пример): p { text-align: justify; text-indent: 50px; font-family: Tahoma; font-size: 18px; }

Однако подобный код занимает в книге слишком много места. Поэтому автор применил сокращенную форму записи стилей (например, так): p {text-align: justify; text-indent: 50px; font-family: Tahoma; font-size: 18px;}

Как видите, экономия налицо: в этом случае вместо шести строк на запись потрачено только две. В описании программ нередко имеет смысл не приводить весь код, который относится к разбираемому фрагменту, а показывать только ту его часть, что важна в контексте данных объяснений. Поэтому в таких случаях автор вводит сокращение в виде трех точек: ...

Например, сокращенный вариант для предыдущего примера с настройками стилей может выглядеть так: #spb {... font-size: 18px;}

Тем самым мы показываем, что на данном этапе описания нам важно обратить внимание исключительно на размер шрифта. И последнее. Все принципиально важные фрагменты текста или кода в отдельных блоках, на которые надо обратить особое внимание, выделены полужирным шрифтом. Например, так: p {text-align: justify; text-indent: 50px; font-family: Tahoma; font-size: 18px;}

1.4. Необходимые браузеры Вспоминая былые времена, нужно сказать, что раньше специалистам, создающим тот или иной код, часто приходилось писать отдельные фрагменты для разных браузеров. Даже простые программы иногда разрастались до таких размеров, что их было сложно читать. Недаром умение «ваять» кроссбраузерную верстку оценивалось как показатель мастерства и профессионализма. 7

Нынешним программистам стало гораздо легче: все современные браузеры почти одинаково обрабатывают HTML, CSS и JavaScript. Однако некоторые незначительные различия еще остаются. На взгляд автора, обязательный набор разработчика должен включать минимум пять веб-обозревателей. Если вы решили серьезно заниматься вебпрограммированием, лучше установить на свой компьютер следующие браузеры, чтобы проверять, идентично ли в них выглядят написанные вами вебстраницы. Расскажем о браузерах по порядку. 1. Браузер Microsoft Edge. Входит в состав операционной системы Windows 10, поэтому не нуждается в скачивании и установке. Многие опытные программисты не любят данный браузер и игнорируют его при проверке сценариев. Автор считает, что это серьезная ошибка. Дело в том, что Microsoft Edge является браузером по умолчанию в операционной системе Windows 10. Многие пользователи, не такие продвинутые, как программисты, просто используют то, что у них изначально установлено на ПК. Следовательно, большой процент посетителей Интернета прибегают к услугам Microsoft Edge. 2. Google Chrome. На субъективный взгляд автора — лучший браузер. И, судя по некоторым опросам, наиболее популярный. Он моложе некоторых своих конкурентов, но снабжен самыми передовыми решениями и очень быстро развивается. И это неудивительно — ведь за ним стоит такой гигант, как компания Google. Скачать ПО можно здесь: https://www.google.ru/chrome/. 3. «Яндекс.Браузер». После его создания компания «Яндекс» вложила заметные средства в рекламу и популяризацию своей разработки. Поэтому данный браузер стоит у многих владельцев компьютеров с ОС Windows. Этих людей обязательно надо учитывать. Скачать дистрибутив можно здесь: https:// browser.yandex.ru/. 4. Opera — один из старейших браузеров, существовавших еще во времена борьбы за лидерство между Netscape Navigator и Internet Explorer. В России у него много поклонников. Недаром среди российских пользователей Интернета показатель его популярности в несколько раз выше, чем общемировой уровень. Кстати, браузер Opera был одним из первых, кто начал поддерживать таблицы стилей. Скачать программное обеспечение можно здесь: https://www.opera.com/ru. 5. Mozilla Firefox. В этом браузере сценарии необходимо проверять в обязательном порядке. У него достаточно высокий уровень популярности. При этом есть ряд отличий в обработке кода по сравнению с четырьмя перечисленными выше браузерами. Что-то Mozilla Firefox обрабатывает аналогично остальным браузерам, а что-то — по-своему. Во всяком случае автор неоднократно сталкивался с ситуациями, когда код, отлично работавший в других браузерах, начинал «капризничать» в Mozilla Firefox. Скачать браузер можно здесь: https://www.mozilla.org/ru/firefox/.

1.5. Устанавливаем редактор Настоящего программиста невозможно представить без полноценного текстового редактора, специально предназначенного для создания программ. 8

Конечно, весь код можно писать в обычном Блокноте. Но гораздо лучше и рациональнее пользоваться специализированными редакторами. Такие приложения намного удобнее: они подсвечивают код, предлагают синтаксические подсказки, позволяют менять кодировку документов, сохраняют файлы в разных форматах. В нашем случае необходим редактор, который позволит: – выполнять качественную разметку; – создавать файлы с таблицами стилей; – писать сценарии на JavaScript; – писать серверные приложения на PHP. Этим принципам удовлетворяют многие редакторы. Но лучше всего, на взгляд автора, Notepad++. Где его взять и как установить, рассказано ниже. Скачать Notepad++ можно по адресу https://notepad-plus-plus.org/ downloads/ (рис. 1.5.1). Устанавливается редактор следующим образом. Запустите скачанный файл. В первую очередь появится окно выбора языка программы. Оставляем русский (рис. 1.5.2) и нажимаем кнопку ОК.

Рис. 1.5.1 Сайт с файлами редактора Notepad++

Рис. 1.5.2 Выбираем язык ПО

В следующем окне нажимаем кнопку Далее (рис. 1.5.3). Затем нажатием кнопки Принимаю соглашаемся с условиями лицензии (рис. 1.5.4). Теперь нам необходимо выбрать папку для установки программы. По умолчанию предлагается C:\Program Files\Notepad++. Думаю, такой вари9

ант установки подходит всем, поэтому данную папку оставляем без изменений (рис. 1.5.5). Дальше будет окно с выбором компонентов, которые можно установить вместе с программой. Этот раздел предназначен в первую очередь для опытных программистов, каковыми мы пока не являемся. Поэтому здесь ничего не меняем, жмем кнопку Далее (рис. 1.5.6).

Рис. 1.5.3 Нажимаем кнопку Далее

Рис. 1.5.4 Соглашаемся с условиями лицензии

10

Рис. 1.5.5 Выбираем папку для установки программы

Рис. 1.5.6 Здесь ничего не меняем, жмем кнопку Далее

На последнем этапе перед началом непосредственной установки на вкладке появится пункт Create Shortcut on Desktop (рис. 1.5.7). То есть нам 11

предлагают создать ярлык программы на рабочем столе. Делать это или нет — зависит от вашего желания. Заметим, что после установки редактора ссылка на него добавится в контекстное меню. Достаточно будет навести указатель мыши на файл, щелкнуть правой клавишей и в списке возможных действий вы увидите строку Edit with Notepad++ или Редактировать в Notepad++. Кликните по ней — и файл будет открыт в редакторе. Разобравшись с вопросом, необходим ли ярлык на Рабочем столе или нет, нажмите кнопку Установить. Дождитесь окончания процесса (рис. 1.5.8). После завершения установки вам нужно будет принять еще одно решение: сразу запустить программу или отложить это дело «на потом». Для этого оставьте или снимите «галочку» в пункте Запустить Notepad++ (рис. 1.5.9). Теперь нажмите кнопку Готово. Поздравляю — отныне на вашем компьютере установлен профессиональный текстовый редактор! Познакомимся с ним поближе. Как выглядит редактор, вы можете видеть на рисунке 1.5.10.

Рис. 1.5.7 Нажимаем кнопку Установить

Notepad++ позволяет: – выполнять поиск по файлу в разных направлениях; – производить замену по шаблону; – устанавливать кодировки, в том числе необходимую для нашего проекта UTF-8; – менять страницы, форматируя их по стандартам разных операционных систем — Windows, Unix или macOS; – подсвечивать код, выделяя разные по назначению фрагменты, операторы, функции, переменные, комментарии и т. д.; 12

– выбирать синтаксис документа (благодаря чему меняются варианты подсветки кода), например HTML, CSS, JavaScript или PHP; – сохранять файлы с разным расширением; – менять стили оформления окна программы — вариантов достаточно, найдется любой по желанию; – выполнять еще многие и многие операции.

Рис. 1.5.8 Ждем окончания процесса

Рис. 1.5.9 Завершение установки

13

Рис. 1.5.10 Редактор Notepad++ с открытым в нем файлом JavaScript

1.6. Кодировка файлов Создавая примеры, автор сохранял их в кодировке utf-8. Если вы будете самостоятельно писать код, обязательно сохраняйте все файлы — html, css, js, php — в формате utf-8. Как это сделать? Откройте редактор Notepad++ и наберите код программы. Затем в меню редактора кликните закладку Кодировки и посмотрите, в каком формате написан файл. Если не в utf-8, то в открывшемся меню щелкните на строке Преобразовать в UTF-8 (рис. 1.6.1). Сохраните результаты вашей работы.

Рис. 1.6.1 Выбор кодировки для файла

14

1.7. Проверка кода Как ни хороши современные веб-обозреватели, но кое-чем автору они категорически не нравятся. А именно тем, что в них все очень тщательно продумано и предусмотрено. В результате, даже получив некачественный код, браузеры понимают, чего хотел добиться программист, и демонстрируют правильную веб-страницу. А это провоцирует разработчиков небрежно относиться к своим обязанностям. В результате миллионы сайтов за красивой оболочкой содержат множество ошибок и нарушений стандартов, которые веб-обозреватели успешно исправляют. Удивительно, но даже в ресурсах лидеров мировой веб-индустрии ошибок и нарушений немало. Большинство из таких сайтов сделаны на популярных «движках», как иногда называют всем известные CMS. Ошибки и отклонения от стандартов заложены у них в модулях, формирующих страницы. Автор относится к тому немногочисленному отряду программистов, которые выпускают «продукцию» в свет, только добившись абсолютно чистого кода. Поэтому я проверил разметку, стили и сценарии с помощью валидаторов. Валидатор — это специальная программа для проверки кода, написанного на одном из языков, предназначенных для создания веб-проектов. Задача такой программы — найти ошибки, если они есть, и выдать их перечень разработчику или сообщить, что код безупречный, если ошибок нет. Можно сказать и по-другому: назначение того или иного валидатора — проверять код на соответствие стандартам языка программирования. Стандарты HTML и CSS разрабатывает Консорциум Всемирной паутины — World Wide Web Consortium (W3C). Он же предоставляет и валидаторы для проверки разметки страниц и написания таблиц стилей. Вот их адреса в сети: – валидатор HTML5 — https://validator.w3.org/; – валидатор CSS3 — http://jigsaw.w3.org/css-validator/. Данные валидаторы очень удобны. Они позволяют проверять разметку и таблицы стилей: – страниц, уже загруженных в Сеть; – файлов, загруженных в валидатор с вашего компьютера; – в коде, скопированном из вашего файла и помещенном в специальное текстовое поле. Например, после обработки кода разметки все ошибки и предупреждения с комментариями на английском языке появятся на странице HTML-валидатора в ее нижней части. При этом ошибки будут сопровождаться надписью Error на розовом фоне, а предупреждения — надписью Warning на желтом фоне. Например, строка кода

В результате переменные i и t доступны в самых разных частях сценария. Учитывайте, что их значения могут быть изменены в теле любой функции, которая оперирует с этими переменными. Локальные переменные доступны только внутри конкретной функции, условия или цикла. Объявляются они, например, так: function func() { let a=1; ... }

75

или так: for(...) { let a=1; ... }

В этих примерах значение переменной a доступно только внутри функции или цикла. Обращение к переменной a из другой функции или не из цикла закончится неудачей. Наконец, в «недрах» функции может быть своя иерархия переменных. То есть одни из них оказываются глобальными внутри данной функции, а другие — локальными внутри цикла или условия, являющихся частью данной функции. Один из важнейших аспектов выполнения сценариев на JavaScript — операции с переменными. Для этого существует несколько видов операторов. Арифметические операторы. Для начинающего наиболее важны те, которые представлены в таблице 4.2.1. Таблица 4.2.1 Арифметические операторы Оператор

Действие

Пример x = 1; x = «Текст»

=

Присваивание

+

Сложение

x+y

–

Вычитание Умножение Деление Возведение в степень Взятие остатка от деления

x–y

 / ** %

Примечание Присваивает переменной данные любого типа Применяется также к переменным, содержащим строки; результатом будет новая строка

xy x/y x**y x%y

Результат — остаток от целочисленного деления

Существуют сокращенные формы записи операций присваивания, представленные в таблице 4.2.2. Таблица 4.2.2 Сокращенная форма записи операций Сокращенная запись

Аналог

x + = y;

x = x + y;

x– = y; x* = y; x/ = y; x** = y; x% = y;

x = x – y; x = x * y; x = x/y; x = x ** y; x = x%y;

Примечание Применяется также к переменным, содержащим строки; результатом будет новая строка

76

Еще две важные операции: инкремента и декремента. Разъяснения к ним даны в таблице 4.2.3. Таблица 4.2.3 Операторы инкремента и декремента Оператор

Название

++

Оператор инкремента

--

Оператор декремента

Действие Увеличение значения переменной на 1 Уменьшение значения переменной на 1

Аналог

Пример

x=x+1

x++

x=x–1

x--

В некоторых случаях с операторами инкремента и декремента надо обращаться очень аккуратно. Почему? Дело в том, что формы записи данных операторов могут иметь два вида. Например, оператор инкремента: x++; и ++x. Оператор декремента: x--; и --x. Если используем форму записи y = x++ (или y = x--), то сначала выполняется присвоение переменной y значение переменной x, а затем происходит увеличение (или уменьшение) значения переменной x. При y = ++x (или y = --x) сначала увеличиваем (или уменьшаем) текущее значение переменной x на единицу, а потом присваиваем ее значение переменной y.

4.3. Массивы Массив — это переменная, содержащая в своих «недрах» нумерованный список элементов. В качестве элементов могут быть данные любого типа, которые поддерживаются в JavaScript: строки, числа, символы и др. Массив может также одновременно содержать данные разных типов. Объявить массив очень просто: let mas=[элемент 1, элемент 2, ..., элемент n];

Можно также создать пустой массив, который будет заполнен в процессе выполнения сценария: let mas=[];

Для получения отдельного элемента по его индексу используются записи следующего вида: mas[n]

Чтобы узнать, сколько элементов в массиве, надо обратиться к свойству length: let d=mas.length;

Будьте внимательны при написании сценариев: индексы элементов массива начинаются с 0, а их количество отсчитывается с 1. Что интересно, элементами массивов могут быть переменные и даже сами массивы. О последнем случае мы поговорим чуть позже. Добавить новый элемент массива тоже очень просто: mas[n+1]=элемент n+1;

77

Существует множество методов обработки массивов. Посмотрим некоторые из них. concat() — объединяет несколько исходных массивов и создает новый. Например, так: let a=[1, 2, 3]; let b=["A", "B", "C"]; let x=a.concat(b);

Обратите внимание: в методе перемена мест массивов приводит и к перемене мест их элементов. Методом concat() можно соединить не только два массива, но и больше. every() — с помощью указанной функции проверяет все элементы массива. Возвращает true, если все элементы соответствуют заданному критерию, и false — в противном случае. filter() — создаёт новый массив с элементами, прошедшими проверку, условия которой заданы в передаваемой функции. find() — возвращает из массива первый элемент, который соответствует заданному критерию. findIndex() — возвращает из массива индекс первого элемента, который соответствует заданному критерию. forEach() — вызывает заданную функцию для каждого элемента массива. includes() — ищет определенный элемент в массиве и возвращает true или false в зависимости от результатов поиска. indexOf() — выполняет поиск элемента в массиве. Возвращает индекс первого совпадающего элемента. Противоположный ему метод lastIndexOf() возвращает индекс последнего совпадающего элемента. isArray() — проверяет, является ли объект массивом. Возвращает true в случае положительного исхода проверки и false в противном случае. Синтаксис: Array.isArray(проверяемый объект)

join() — формирует из элементов массива текстовую строку с разделителем, переданным аргументом. map() — выполняет замену элементов текущего массива на элементы, получаемые в результате выполнения функции, указанной в круглых скобках. Если элементы какого-либо массива необходимо заменить на полностью новые, можно использовать один из двух подходов: – создать новый массив с новыми элементами и в последующих частях программы использовать этот массив вместо старого; – удалить все элементы из текущего массива и заполнить его новыми данными. pop() — удаляет последний элемент массива и возвращает этот элемент. push() — добавляет новые элементы в конец массива и возвращает его новую длину. reduce() — применяет заданную функцию к каждому элементу массива, перебирая их слева направо, и возвращает конечный результат. 78

reduceRight() — применяет заданную функцию к каждому элементу массива, перебирая их справа налево, и возвращает конечный результат. reverse() — выполняет сортировку массива в обратном порядке. shift() — удаляет элемент массива с индексом 0 и возвращает этот элемент. slice() — возвращает новый массив, содержащий часть исходного массива. В скобках указывается индекс, с которого начинается отсчет, или интервал копирования. some() — с помощью указанной функции проверяет все элементы массива. Возвращает true, если хотя бы один элемент соответствует заданному критерию, и false — в противном случае. splice() — удаляет часть массива; удаляет часть массива, а на его место добавляет новые элементы; вставляет новые элементы в указанную позицию. В первых двух случаях возвращает удаленные элементы. sort() — производит сортировку элементов массива по заданной функции сравнения. Если функция не указана, массив сортируется в соответствии со значениями кодовых точек каждого символа Unicode. unshift() — добавляет элементы в начало массива и возвращает его новую длину. А если объединить несколько массивов в один? В результате такого объединения мы получим многомерный массив, каждым элементом которого, в свою очередь, тоже является массив. Чтобы получить значение того или иного элемента из вложенного массива, нужно указать после имени многомерного массива два оператора [ ]. В первом задаем индекс вложенного массива, во втором — индекс элемента из вложенного массива: mas[i][n]

Заполнить многомерный массив можно, сразу указав все его составляющие при создании или поочередно заполняя элементы массива: let mas=[]; mas[0]=["Иван", "Иванов", 25]; mas[1]=["Петр", "Петров", 31]; mas[2]=["Денис", "Денисов", 28];

К многомерным массивам или отдельным элементам вложенных массивов применимы все те же методы, что и к одномерным массивам.

4.4. Условия Проверка различных условий — важнейшая составляющая JavaScript. Очень часто сценарий решает задачу: какие действия выполнить в зависимости от значения какой-то переменной или от истинности какого-то выражения. Цель проверки условий — направить программу в то или иное русло (иногда направлений может быть гораздо больше двух). Начнем рассказ об условиях с операторов. В первую очередь перечислим операторы сравнения, которые представлены в таблице 4.4.1. 79

Таблица 4.4.1 Операторы сравнения Оператор == != > >= < y x >= y x мы поставили круглые скобки. Они нужны на случай, если мы передаем в функцию какие-то аргументы. Функции-стрелки могут быть записаны гораздо проще, без фигурных скобок, если выполняют всего одну операцию. Вот пример: let func= ()=>alert(t**d); func();

И еще пример — теперь с передачей в функцию аргументов: let func= (arg1, arg2)=>alert(arg1**arg2); func(t, d);

Если стрелочная функция оперирует одним аргументом, то круглые скобки перед оператором => можно не ставить:

Почему? Дело в том, что анализатор браузера при загрузке документа считывает его «сверху вниз». Но у нас обработчик объявлен в заголовочной части, то есть еще до того, как построена объектная модель документа. В результате браузер еще не видит изображение, а мы уже пытаемся привязать к картинке какое-то событие. В итоге обработчик не будет зарегистрирован. Чтобы все работало корректно, необходимо поступать следующим образом. Регистрировать сначала обработчик уровня окна браузера для события load, а уже внутри него записывать остальные обработчики. Сделать это можно так:

...

или так:

...

При таком подходе браузер сначала загрузит весь документ, следом запустит обработчик события load окна, после чего и будут зарегистрированы необходимые обработчики событий на элементах веб-страницы. Для регистрации обработчиков используется метод addEventListener. Он принимает три аргумента: addEventListener(событие, функция, дополнительные параметры)

Два из них обязательные. Первый — тип события. Второй — анонимная функция, «реагирующая» на событие, или имя внешней функции. Третий аргумент допустимо не указывать. Он может, например, определять, в какой стадии — всплытия или погружения — будет вызван обработчик. Кроме того, в качестве третьего аргумента могут быть иные данные, например указание разрешать вызов обработчика не более одного раза. Обратите внимание: метод addEventListener обращается к любому событию без использования префикса on: надо писать load, click, focus, submit и т. д. Рассмотрим несколько способов применения метода addEventListener. 1. Обработчики событий окна load, scroll, resize зарегистрировать проще всего. Например, для события load это можно сделать так: addEventListener("load", start);

и так: addEventListener("load", function() { ... });

и еще так: addEventListener("load", ()=> { ... });

2. Регистрация обработчика как ответ на событие load. Например, так: addEventListener("load", function() { document.getElementById("im"). addEventListener("click", func); });

или так: addEventListener("load", function() { document.getElementById("im"). addEventListener("click", function()

91

{ ... }); });

или вот так: addEventListener("load", function() { document.getElementById("im"). addEventListener("click", ()=> { ... }); });

3. Регистрация сразу нескольких обработчиков. Пример: addEventListener("load", function() { document.getElementById("im"). addEventListener("click", func); document.getElementById("im"). addEventListener("mouseout", doc); document.getElementById("im"). addEventListener("mouseover", res); });

4. Комбинированная регистрация — когда обработчики одних событий регистрируются вначале, а другие — в процессе выполнения сценария. Может выглядеть следующим образом: addEventListener("load", function() { document.getElementById("im"). addEventListener("click", func); }); function func() { ... document.getElementById("te"). addEventListener("click", doc); } function doc() { ... }

Вообще, метод addEventListener позволяет комбинировать регистрацию обработчиков весьма разнообразно. Главное достоинство метода addEventListener в том, что его можно вызывать сколько угодно раз и зарегистрировать с его помощью сколько угодно 92

обработчиков для одного и того же события на одном и том же элементе страницы. В работе программиста часто бывают ситуации, когда в сценарии необходимо зарегистрировать обработчик одного и того же события для множества однотипных элементов. Понятно, что писать множество строк кода с регистрацией одного и того же обработчика для разных элементов — крайне нерационально. Хотелось бы по возможности сделать сценарий более компактным. И тут на помощь приходит цикл. Использовав его, мы способны сократить процесс регистрации всего до нескольких строк. Именно такой подход реализован в следующем примере. Запускаем цикл, количество проходов которого равно количеству однотипных элементов: for(let i=0; i{func(t);});

У программиста часто бывают ситуации, когда необходимо зарегистрировать обработчик, вызывающийся ограниченное количество раз, а не бесконечно. На примере метода addEventListener рассмотрим несколько вариантов, как можно поступить в этом случае. Вариант 1. Нам необходимо вызвать обработчик только один раз. Как я уже говорил выше, метод addEventListener может третьим аргументом принимать указание реагировать на определенное событие на выбранном элементе однократно. Остальные аналогичные события на этом элементе не вызовут реакции сценария. Вариант 2. Необходимо вызвать обработчик несколько раз. На такой случай есть метод removeEventListener, который отменяет привязку ранее зарегистрированного обработчика к какому-либо событию при достижении определенного условия. Исходный обработчик можно не только отменить, но и зарегистрировать вновь. Более того, процесс регистрации и отмены может быть многократным. Во всех браузерах есть такой встроенный программный блок — обработчик событий по умолчанию. Он запускается после выполнения обработчиков, зарегистрированных в сценарии JavaScript. Однако довольно часто программисту необходимо отменить установленную по умолчанию обработку события. Для этого используется метод preventDefault. Отмена обработчика по умолчанию может использоваться в разных случаях. Например, к ней в обязательном порядке прибегают, используя технологию перетаскивания объектов Drag and Drop.

93

4.8. Всплывающие подсказки А теперь от теории — к практике. Мы напишем три сценария, которые сделают из нашего статичного документа — интерактивный. Начнем с создания всплывающих подсказок. Запустите в браузере файл 4.8.1.html. Вы увидите страницу, совершенно похожую на то, что мы видели в трех последних разделах предыдущей главы (рис. 4.8.1). Сейчас объектом наших исследований станут ссылки на сайты разных городов. Наведите указатель мыши на одну из ссылок. Рядом с ней появится прямоугольник с изображением соответствующего города и название сайта, на который вы перейдете, если кликните ссылку (рис. 4.8.2). Если теперь щелкнуть мышью на любом участке страницы, подсказка исчезнет. Чтобы реализовать такой принцип, внесем ряд изменений в нашу страницу. Во-первых, создадим новый слой, который будет служить основой для всплывающих подсказок: Файл 4/4.8.1.html

Во-вторых, оформим этот слой: #town {position: absolute; visibility: hidden; background: #FFFFFF; border: 1px solid #0000CC; padding: 15px; font-family: Tahoma; font-size: 24px; width: 300px;}

Как видите, в исходном состоянии он скрыт. За это отвечает новое для нас свойство — visibility. Оно может иметь несколько значений, но нам интересны только два из них: hidden — элемент скрыт, и visible — элемент виден. В исходном состоянии установлен режим «невидимости» — hidden. Теперь напишем сценарий, реализующий заявленные функции. Сценарий для удобства чтения документа разместим в заголовочной части страницы. Для этого добавим новые открывающий и закрывающий теги:

вот таким образом:

...

94

95 Рис. 4.8.1 Исходный вид страницы

96 Рис. 4.8.2 Появление подсказки

Внутри этих тегов и разместим наш первый сценарий. Сначала напишем обработчик события загрузки документа: addEventListener("load", ()=> { ... });

В теле этого обработчика регистрируем еще два. Функцию, которая будет запускаться при наведении мыши на ссылку: document.getElementById("lin").addEventListener("mouseover", lin); function lin(ev) { ... }

и функцию, необходимую для скрытия подсказки: addEventListener("click", ()=> { ... });

Разберем обработчики по порядку. Итак мы навели указатель мыши на ссылку. Для браузера это событие mouseover. Его обрабатывает именованная функция lin: function lin(ev) { ... }

В качестве аргумента она получает объект события — ev (от англ. event). Так как данная функция несколько раз будет обращаться к свойствам контейнера town, мы для сокращения кода вводим новую переменную: let twns=document.getElementById("town").style;

Затем определяем, произошло ли событие mouseover на ссылке. Для этого узнаем, содержит ли элемент, на котором произошло событие, атрибут href: if(ev.target.href) { ... }

Если «ответ положительный», узнаем id элемента: let adr=ev.target.id;

и вычисляем координаты указателя мыши: let x=ev.pageX-250; let y=ev.pageY-300;

Как видите, мы сразу корректируем полученные значения, чтобы подсказка появлялась на 250 пикселей левее и на 300 пикселей выше позиции ука97

зателя мыши. Тем самым подсказка не будет перекрывать ссылку, а окажется выше нее и чуть сбоку. Следующий шаг — перемещаем слой с подсказкой из исходного состояния в вычисленное положение: twns.left=x+"px"; twns.top=y+"px";

и делаем подсказку видимой: twns.visibility="visible";

Последняя операция функции — добавление на слой необходимого фото и адреса ссылки: document.getElementById("town").innerHTML= '
Сайт '+adr+'.ru';

Обратите внимание: в реальной программе последняя операция записывается одной строкой! Функция скрытия подсказки очень простая — в ней всего одна инструкция. Она обрабатывает событие click в любой точке страницы: addEventListener("click", ()=> { document.getElementById("town").style.visibility="hidden"; });

Все. Первый сценарий готов. Обратите внимание: в этой и последующих версиях нашей страницы мы вновь используем размещение блоков в ячейках таблицы!

4.9. Выделение блока Следующий сценарий позволит нам создать эффект выделения одного из блоков текста. Запустите в браузере страницу 4.9.1.html. Поочередно наводите указатель мыши на колонки с рассказами о городах. Вы увидите: колонка, на которую наведена мышь, остается яркой и хорошо читаемой, а две другие становятся блеклыми (рис. 4.9.1). Так выглядит заявленный нами эффект. Для реализации данного алгоритма не нужно что-то добавлять или менять в разметке документа. Все дело только в новом сценарии, который мы добавим к уже существующему. Откройте в редакторе файл страницы. Вы увидите, что в блоке

появилась новая функция — tab. Файл 4/4.9.1.html function tab(ev) {

98

... }

Она запускается при наведении указателя мыши на таблицу с текстом: document.getElementById("tab").addEventListener("mouseover", tab);

Функция в качестве аргумента получает объект события и содержит несколько простых инструкций. Первым делом создаем переменную h для сокращения кода: let h=ev.target.id;

Эта переменная будет хранить id ячейки, на которую наведен указатель мыши. Если событие действительно произошло на одной из ячеек if(h.indexOf("td")>=0) { ... }

выполняются две основные операции: 1) у всех ячеек уменьшается уровень непрозрачности: document.getElementById("td1").style.opacity=0.3; document.getElementById("td2").style.opacity=0.3; document.getElementById("td3").style.opacity=0.3;

2) у ячейки, на которую наведена мышь, уровень непрозрачности восстанавливается до единицы: document.getElementById(h).style.opacity=1;

Таким образом происходит требуемое выделение блока текста. В этой функции мы обратились к еще незнакомому нам свойству opacity. Оно отвечает за непрозрачность элемента и может содержать значение от 0 до 1, где ноль — полная прозрачность, а единица — полная непрозрачность. Дробные значения указывают на уровень частичной прозрачности. Чтобы вновь сделать все три блока непрозрачными, щелкните мышью на любом участке страницы. За восстановление уровня непрозрачности отвечают инструкции, которые мы добавили в обработчик события клика на документе: addEventListener("click", ()=> { document.getElementById("town").style.visibility="hidden"; document.getElementById("td1").style.opacity=1; document.getElementById("td2").style.opacity=1; document.getElementById("td3").style.opacity=1; });

Первая инструкция сохранилась от предыдущей версии страницы, вторая, третья и четвертая добавлены в новой версии. Они возвращают непрозрачность всем трем блокам текста. Как видите, получить эффект выделения оказалось очень просто. 99

100 Рис. 4.9.1 Выделение блока текста

4.10. Скрипт просмотра фото Все у нас хорошо, за исключением одного момента: после того как мы уменьшили размеры фотографий, их стало сложнее рассматривать. Восполним этот пробел и добавим на страницу возможность видеть снимки в натуральную величину. Откройте в браузере файл 4.10.1.html. Наведите указатель мыши на одно из трех изображений и кликните на нем. Страница закроется белым полупрозрачным фоном, на котором появится увеличенное фото выбранного города (рис. 4.10.1). Чтобы убрать его, немного прокрутите документ вниз. Для реализации данного «механизма» нам требуется добавить на страницу новые элементы. Во-первых, слой, который станет выполнять роль фона:

Рис. 4.10.1 Просмотр увеличенного изображения

Файл 4/4.10.1.html

Во-вторых слой для демонстрации крупного снимка:



Здесь необходимо дать ряд пояснений. Почему два слоя? Дело в том, что базовый слой имеет уровень непрозрачности 0,95 — то есть частично прозрачен. Если поместить изображение на этот слой, то оно тоже станет частично прозрачным. А это не то, что нам нужно. Поэтому у нас два контейнера — отдельно с фоном и отдельно с рисунком. Дальше. Согласно спецификации HTML все изображения должны иметь заполненный атрибут src. Но в исходном состоянии никакого снимка в контей101

нере для увеличенных кадров нет. Поэтому мы создали файл net.jpg, который является квадратом белого цвета размером 1×1 пиксель, и поместили его в новую папку pict. Этот файл и загружается в исходном состоянии на демонстрационный слой. Когда вы щелкаете на выбранном фото, файл net.jpg очень быстро заменяется на реальное изображение. А когда вы прекращаете просмотр увеличенного снимка, на демонстрационный слой вновь загружается рисунок net.jpg. Настройки слоев: #bas, #view {position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden;} #bas {z-index: 3; opacity: 0.95; background: #FFFFFF;} #view {z-index: 4; display: flex; justify-content: center; align-items: center;}

Здесь мы впервые используем набор свойств: display: flex; justify-content: center; align-items: center;

Эти настройки позволяют нам размещать увеличенное изображение в центре демонстрационного слоя и соответственно в центре страницы. Чуть подробнее о них: – display — определяет, как элемент должен быть расположен в документе; – justify-content — определяет, как браузер распределяет пространство вокруг элемента со свойством display: flex; – align-items — определяет выравнивание элементов по вертикали. Обратите также внимание, что базовый и демонстрационный слои занимают все пространство окна браузера: #bas, #view {... width: 100%; height: 100%; ...}

Теперь напишем сценарий. В нем будут две функции — показывающая и скрывающая картинку. Начнем с первой и самой главной. Сначала введем три переменные для сокращенного обращения к слоям: let view=document.getElementById("view"); let bas=document.getElementById("bas").style; let pict=document.getElementById("pict");

Зарегистрируем обработчик события клика в теле таблицы с блоками текста: document.getElementById("tab").addEventListener("click", show);

Напишем функцию show, которая обрабатывает щелчок: function show(ev) { ... }

Первым делом выясняем, был ли клик на одном из снимков: if(ev.target.tagName=="IMG")

102

{ ... }

Потом узнаем величину прокрутки страницы по вертикали let sc=window.pageYOffset

и смещаем оба слоя на полученное значение: bas.top=sc+"px"; view.style.top=sc+"px";

Загружаем на демонстрационный слой выбранное изображение в натуральную величину pict.src=ev.target.src;

и делаем оба контейнера видимыми: view.style.visibility="visible"; bas.visibility="visible";

Чтобы скрыть фотографию, чуть-чуть прокрутим страницу вниз или вверх. Это событие обрабатывает следующая анонимная функция: addEventListener("scroll", function() { ... });

В ней три инструкции: view.style.visibility="hidden"; bas.visibility="hidden"; pict.src="pict/net.jpg";

Первые две скрывают слои, а третья возвращает изображению исходный адрес — pict/net.jpg. На этом наши эксперименты с добавлением интерактивности странице закончены. Осталось добавить совсем немного, о чем вы прочтете в следующем разделе.

4.11. Внешние сценарии Ситуация с размещением сценариев JavaScript очень похожа на ту, что мы видели относительно таблиц стилей. Если сценарий включает в себя большой объем кода, размещать его в заголовочной части страницы нерационально. Поэтому предпочтительнее другой вариант — размещение сценариев на JavaScript во внешних файлах. Подключают такие программы к текущему документу следующим образом. Необходимо внутри блока head разместить теги , при этом в открывающем теге указать адрес необходимого файла:

где js.js — адрес файла со сценарием. Обратите внимание: любой внешний файл с программой на JavaScript должен иметь расширение .js. Естественно, 103

что внутри такого файла теги не указываются — написание кода начинается прямо с первой строки. Как вынести сценарии нашей страницы в отдельный файл? Очень просто. Создадим в текстовом редакторе пустой файл, который назовем town.js. Поместим в него код всех скриптов, что были в нашем документе: Файл 4/town.js addEventListener("load", ()=> { document.getElementById("lin").addEventListener("mouseover", lin); ... });

Подключим данный файл к основной странице. Сделаем это так: Файл 4/4.11.1.html



Города России



Запустите в браузере файл 4.11.1.html и убедитесь, что все сценарии продолжают работать так, как положено. Заодно обратите внимание, что для единообразия мы вынесли в отдельный файл и таблицу стилей.

104

5. ТЕХНОЛОГИЯ AJAX Для тестирования технологии Ajax нам в обязательном порядке необходимо создать на своем компьютере локальный хостинг. Вообще, хостинг — это, упрощенно говоря, компьютер, предназначенный для размещения сайтов и обеспечивающий к ним доступ из Интернета. Локальный хостинг — набор программ на вашем персональном компьютере, которые позволяют имитировать реальный хостинг и проводить тестирование ваших сайтов (включая HTML-страницы и серверные скрипты) перед их размещением в Сети. Кстати, обратите внимание: локальный хостинг работает без подключения к Интернету! Чтобы получить результаты, описанные в данной книге, вам понадобится установить на компьютер распространяемый пакет компонентов Visual C++ от Microsoft, сервер Apache и интерпретатор PHP. Описание технологии их установки — в следующих разделах. Итак, вводная часть завершена — приступим к созданию локального хостинга. А начнем мы с выяснения разрядности вашей ОС. Обратите внимание: все процедуры описаны для компьютера с операционной системой Windows 10.

5.1. Выясняем разрядность ОС Перед тем как мы создадим на компьютере среду разработки, необходимо выяснить разрядность вашей операционной системы, чтобы знать, какие файлы скачивать для локального хостинга. Включите компьютер, дождитесь полной загрузки операционной системы. Щелкните на кнопке Пуск, а затем на кнопке Параметры (рис. 5.1.1). В открывшемся окне выберите пункт меню Система. Откроется следующая вкладка, в которой необходимо кликнуть на строке О системе (или О программе). После этого на вкладке Характеристики устройства посмотрите строку Тип системы (рис. 5.1.2).

Рис. 5.1.1 Кнопка Параметры в меню

105

Рис. 5.1.2 Разрядность или тип операционной системы

Типов ОС Windows существует два — 32-разрядная и 64-разрядная. Запомните разрядность вашей. Это число понадобится трижды: при скачивании пакета Visual C++, а также zip-архивов сервера Apache и интерпретатора PHP.

5.2. Установка пакета Visual C++ Откройте браузер и зайдите на страницу https://www.apachelounge.com/ download/. Это сайт, с которого мы будем скачивать архив с сервером Apache. Но сначала надо установить на ваш компьютер компоненты Visual C++, без которых сервер не заработает. Для этого найдите на указанной странице текст “Be sure you installed latest 14.38.33130 Visual C++ Redistributable Visual Studio 2015–2022 : vc_redist_x64 or vc_redist_x86 see Redistributable” (на момент подготовки книги данные строки были последними в описательной части страницы; со временем текст может несколько измениться). Для нас важны две ссылки, расположенные в тексте: vc_redist_x64 и vc_redist_x86. Если у вас 64-разрядная ОС, нажмите ссылку vc_redist_x64. Если 32-разрядная, необходимо щелкнуть на ссылке vc_redist_x86 (рис. 5.2.1).

106

Запустите скачанный файл (рис. 5.2.2). Примите условия лицензионного соглашения и нажмите кнопку Установить. Дождитесь завершения процесса установки (рис. 5.2.3). Нажмите кнопку Закрыть (рис. 5.2.4).

Рис. 5.2.1 Ссылки для скачивания пакетов Visual C++

Рис. 5.2.2 Начало установки пакета

107

Рис. 5.2.3 Процесс установки

Рис. 5.2.4 Завершение установки

5.3. Установка сервера Apache 2.4 Теперь скачайте на Рабочий стол компьютера с сайта https://www. apachelounge.com/download/ zip-архив сервера, соответствующий разрядности вашей ОС (рис. 5.3.1). Для 64-разрядной системы — архив с пометкой Win64 (например, httpd-2.4.58-win64-VS17.zip), для 32-разрядной — с пометкой Win32 (например, httpd-2.4.58-win32-VS17.zip). Распакуйте архив. Скопируйте папку Apache24 (только ее) непосредственно на диск C, чтобы ее адрес был C:\Apache24 (рис. 5.3.2). Откройте приложение Командная строка от имени администратора. Для этого нажмите кнопку Пуск, в меню выберите Служебные — Windows, найдите пункт Командная строка и щелкните на нем правой (правой!) кнопкой мыши. В выпадающем списке выберите Дополнительно, а затем Запуск от имени администратора (рис. 5.3.3). Откроется окно программы. 108

109 Рис. 5.3.2 Копируем папку Apache24 на диск C

Рис. 5.3.1 Сайт с zip-архивом сервера

Рис. 5.3.3 Запуск командной строки

Теперь надо инсталлировать, а затем запустить сервер. Для этого в окне командной строки сразу после C:\WINDOWS\System32>

наберите C:\Apache24\bin\httpd.exe -k install

Должно получиться C:\WINDOWS\System32>C:\Apache24\bin\httpd.exe -k install

Нажмите Enter. Когда процесс инсталляции закончится (рис. 5.3.4), в окне программы вновь появится строка C:\WINDOWS\System32>

Закройте окно командной строки и перезагрузите компьютер. ВНИМАНИЕ! Может открыться окно брандмауэра с запросом на разрешение работы Apache. Разрешите доступ во всех сетях. Нам надо убедиться, что сервер заработал. Для этого откройте ваш браузер и введите в строке адреса http://localhost/. Если появилось сообщение “It works!”, значит, все в порядке — сервер функционирует как положено (рис. 5.3.5). Теперь обратите внимание на один важный момент. Метод, которым мы установили сервер, позволяет запускать его автоматически при включении 110

компьютера и завершать его работу при выключении компьютера. То есть Apache продолжает функционировать, даже если в данное время он вам не нужен. Эта информация вызывает у вас беспокойство по поводу теоретической уязвимости ПК? Тогда переведите сервер в режим ручного запуска. Для этого выполните следующие действия: – введите в строке поиска слово «службы» (рис. 5.3.6) и нажмите на соответствующей иконке, которая появится в списке результатов поиска; – в открывшемся окне найдите строку Apache2.4 и щелкните на ней правой (правой!) кнопкой мыши — появится меню управления службой (рис. 5.3.7); – кликните на строке Свойства и в окне на вкладке Общие найдите список Тип запуска; – выберите пункт Вручную, затем последовательно нажмите кнопки Применить и ОК (рис. 5.3.8); – теперь остановите службу, нажав соответствующую ссылку в левой стороне окна (рис. 5.3.9); – дождитесь окончания процесса (рис. 5.3.10); – закройте вкладку Службы. Теперь Apache остановлен и переведен в режим ручного запуска. При необходимости воспользоваться сервером снова зайдите в раздел Службы, выделите строку Apache2.4 и кликните на ссылке Запустить службу (рис. 5.3.11). Подождите окончания процесса (рис. 5.3.12). Продолжаете беспокоиться о безопасности? Можете на время работы с сервером отключать свой ПК от Интернета. Напомним — локальный хостинг работает без сети.

Рис. 5.3.4 Инсталляция сервера из приложения Командная строка

Рис. 5.3.5 Сервер подтверждает, что он работает

111

Рис. 5.3.6 Находим приложение Службы

Рис. 5.3.7 Открываем меню управления службой

112

Рис. 5.3.8 Переводим службу в режим ручного запуска

Рис. 5.3.9 Нажимаем ссылку Остановить службу

113

Рис. 5.3.10 Идет процесс остановки Apache

Рис. 5.3.11 Для запуска Apache нажмите ссылку Запустить службу

114

Рис. 5.3.12 Идет процесс запуска сервера

5.4. Установка PHP 8 Скачайте на рабочий стол компьютера с сайта https://windows.php.net/ download/ zip-архив PHP 8, соответствующий разрядности вашей ОС. Для 64-разрядной системы — архив с пометкой x64, для 32-разрядной — с пометкой x86. Обратите внимание: так как мы будем устанавливать PHP в качестве модуля сервера Apache, скачивать надо дистрибутив Thread Safe (рис. 5.4.1). Распакуйте архив. Переименуйте распакованную папку на php и переместите ее непосредственно на диск C, чтобы ее адрес был C:\php (рис. 5.4.2). В папке C:\Apache24\conf с помощью текстового редактора Блокнот откройте файл httpd.conf (рис. 5.4.3), найдите в нем строку DirectoryIndex index.html

и добавьте к ней index.php

Должно получиться DirectoryIndex index.html index.php

Теперь в самый конец файла httpd.conf добавьте две строки: AddHandler application/x-httpd-php .php LoadModule php_module "C:/php/php8apache2_4.dll"

Сохраните изменения, закройте файл и перезагрузите компьютер. 115

116 Рис. 5.4.1 Сайт с zip-архивом PHP

Убедимся, что PHP заработал. Для этого в папке C:\Apache24\htdocs создайте текстовый файл и запишите в него следующий код: