ВНИМАНИЕ! Вы начинаете изучать один из самых важных уроков. Надо отнестись к нему очень внимательно и вдумчиво!
1. Как создать проект в NetBeans.
Попробуем разобраться как можно заставить правильно взаимодействовать PHP, HTML, CSS и JS на одной странице. Для этого создадим проект в NetBeans:
Открываем NetBeans;
Меню Файл/Создать проект;
Выбираем PHP, жмем далее;
Вводим имя проекта «project_01» (без кавычек);
Указываем расположение (папку с проектом), жмем далее;
Выполнение: «Встроенный веб-сервер PHP», жмем готово;
Будет создан проект с именем «project_01» в котором будет 1 файл “index.php”. см. картинку.
Настройте самостоятельно окна как на картинке с помощью меню «Окно» и перетаскивания окон.
Что мы видим:
«» - указывает что это документ с типом HTML (хотя создавали мы проект PHP);
« -->» - комментарий языка HTML;
«» - тег, указывающий на начало программы на HTML, в конце такой же закрывающий, указывающий на конец программы на HTML - «»;
пара тегов … - начинает и заканчивает заголовок HTML;
пара тегов … начинает тело программы HTML (здесь пишется собственно программа на HTML);
есть еще теги (, ) – о них вы можете почитать в справочниках HTML в интернете. Например, на сайте http://htmlbook.ru;
Язык HTML очень простой и разобраться в нем можно читая справку в интернете.
2. Первая программа.
Введем текст «Привет мир!» после тега см. картинку;
Меню Выполнить/Запустить проект (F6);
Если NetBeans настроен правильно? Откроется окно браузера Хром с нашей надписью. Мы выполнили программу на языке HTML!
3. Отладчик Хрома.
Щелкните по окну Хрома и нажмите ctrl+shift+i – откроется отладчик Хрома. Что мы видим:
Отладчик разделен на панели (у меня они располагаются вертикально);
Вверху на панели выделен пункт «elements», ниже видна наша программа как в окне NetBeans. Здесь мы будем видеть программу на языке HTML;
В середине на панели выделен пункт «Styles» - стили. Здесь мы будем видеть то что написано на языке CSS;
Внизу мы видим «Console» консоль, она пока пустая.
На верхней панели справа есть три точки – меню настройки отладчика;
На панели консоли справа есть «Console setting» - настройка консоли;
Подробную информацию об отладчике можно найти в интернете. По мере обучения я буду показывать работу с элементами отладчика.
4. Программа на PHP.
Вернемся в NetBeans и изменим нашу программу на см. картинку.
«» - указывает на конец программы на PHP;
«» - тег html – перевод строки;
« .. » тег html – жирный шрифт;
Выполним ее (F6) и откроем в консоли Chrome. Что мы видим;
Выведены две надписи из PHP и из HTML;
На консоли (дальше для краткости «отладчик Хрома» я буду называть «консоль Хрома», или просто «консоль») мы видим только программу на HTML;
Заголовочные теги HTML , , были созданы автоматически;
На панели «Console» мы видим ошибку «GET http://localhost:8000/favicon.ico 404 (Not Found)» - не найдена иконка проекта «favicon.ico». Если нажать F5 – обновить страницу – ошибка пропадет (эта категория ошибок не критическая и показывается только при первом запуске);
Щелкнем мышью в панели «Elements» консоли по строке «Привет HTML!»:
тег html « .. » указывает браузеру, что надпись: «Привет HTML!» надо выводить жирным шрифтом;
смотрим на панель «Styles» (Стили) – видим определен стиль «font-weight: bold;» - это стиль на языке CSS. Мы пока CSS не использовали но браузер это сделал сам! ;
ВНИМАНИЕ! Чтобы обновить отображение в браузере без перезагрузки окна:
нажимаем кнопку сохранить (ctrl+s) в NetBeans;
переходим в Chrome;
и нажимаем F5;
в этом случае консоль обновится без перезагрузки (не надо опять открывать консоль - ctrl+shift+i).
5. Стили CSS (каскадные таблицы стилей) - язык разметки стилей.
Для чего нужен язык CSS?
Помогает избежать дублирования;
Облегчает обслуживание;
Позволяет делать изменения для всего сайта в одном месте;
Как работает CSS:
CSS выбирает элемент HTML (например, абзац);
задаёт свойство для изменения (например, цвет);
применяет определённое значение (например, красный);
Давайте внесем в нашу программу строку: «Это важный текст.» и посмотрим в консоли:
… - тег html – абзац;
мы определили стиль CSS для текста «красного цвета» только для текущего абзаца;
чтобы повторить этот стиль в следующем абзаце мы должны и в следующем абзаце написать «» или не должны?
Давайте внесем в нашу программу стиль CSS (см. картинку) (я удалил стиль из абзаца): мы видим, что стиль был применен ко всем абзацам!
6. Программа на JavaScript.
Добавим программу на языке JavaScript (см. картинку):
Открыл тег HTML ;
Оператор на языке JavaScript “document.write("" + Date() + "");”;
Закрыл тег
Что мы видим в консоли:
«Fri May 03 2019 20:54:31 GMT+0300 (Москва, стандартное время)» - отобразили текущую дату и время на языке JavaScript;
Если навести курсор мыши на строку в панели «Element» в консоли, мы видим выделение соответствующего текста в браузере;
Важно! Поэкспериментируйте с консолью чтобы хорошо разобраться с отображением информации.
Кстати! Текст «type="text/javascript"» устарел и его можно не писать! Т.е. можно “ текст JavaScript ”
7. Структурирование программы.
Мы получили в одном файле программы на разных языках PHP, HTML, CSS, JavaScript (не хватает только SQL)! Вы догадываетесь, что все это можно поделить по разным файлам - структурировать web-программу по языкам программирования! Создадим файлы:
«index.php» - этот файл у на уже есть;
«style.css» - для каскадных таблиц стилей;
«proc.js» - для программы на JavaScript;
«proc.php» - для программы на PHP;
В нашем случае мы сначала создадим папки по типам файлов. Для создания папок установим указатель мыши на «Исходные файлы» в панели «Проекты» NetBeans нажимаем правую кнопку мыши и выбираем «новый/папка»:
Папку «сss»;
Папку «php»;
Папку «js»;
Пока смысла в этих папках мало в дальнейшем лучше привыкнуть к такому подходу в структурировании по языкам!
Для создания файлов наводим мышь на соответствующую папку в панели «Проекты» NetBeans, где мы ходим создать файл, нажимаем правую кнопку мыши и выбираем тип файла:
Для css - «новый/каскадная таблица стилей…» и даем имя «style» (без расширения);
Для php - «новый/файл PHP…» и даем имя «proc» (без расширения);
Для JavaScript - «новый/файл JavaScript…» и даем имя «proc» (без расширения);
Должно получиться как на картинке.
Разбросаем программы на разных языках по файлам и в NetBeans панели расположим как на картинке:
Обратите внимание что в файле «style.css» не надо писать теги … . Теги пишут только в HTML;
Обратите внимание что в файле «prog.js» не надо писать теги … . Эти теги пишут только в HTML;
Обратите внимание что в файле «prog.php» «» - будет подключен файл с программой на php и выполнится;
Выполнится блок на языке html;
Выполнится строка «» - будет подключен файл с программой на JavaScript и выполнится;
Для наглядности установим строку «» перед строкой «» и сравним результат.
