[Iws] Общие понятия - lesson 02


Веб-программирование. Инструменты программирования. Языки и среда программирования.

1. Инструменты программирования. Чтобы двигаться дальше надо разобраться почему я выбрал именно эти инструменты для программирования интерактивного сай та - напомню: Языки программирования: PHP, SQL, HTML, JavaScript, CSS. Среду программирования: NetBeans. 2. Языки программирования. Веб-страницы написаны на HTML, языке веб-программирования, который «говорит» браузеру как структурировать и отображать содержимое веб-страницы. Другими словами, HTML составляет основные «строительные блоки» для Веб. И в течении долгого времени эти стандартные блоки были довольно простыми и статичными: текст, ссылки и изображения. 2.1 HTML (HyperText Markup Language). HTML - язык разметки гипертекста. HTML дает возможность производить переход от одной части текста к другой, и эти части могут храниться на разных компьютерах. HTML не совсем язык программирования, он создан специально для разметки веб-страниц. Именно он дает браузеру необходимые инструкции о том, как отображать элементы страницы на мониторе. Важно заметить, что не только различные браузеры, но и различные их версии могут по-разному воспринимать и отображать на экране код. Следовательно, некоторые элементы корректно выглядящие в одном браузере могут выглядеть иначе другом. Код HTML состоит из тегов. Теги «говорят» браузеру как форматировать страницу. Чтобы писать на языке HTML надо его просто знать. HTML - очень простой язык и изучить его можно быстро. Не обязательно в точности запоминать все теги, важно хотя бы понимать их назначение. Тогда можно легко форматировать текст и изменять html страницы. Есть сайт, который мне постоянно помогал в изучении HTML — это сайт htmlbook.ru. На сайте есть полезный раздел — HTML по шагам. С него и можно начать изучение. 2.2 CSS (Cascading Style Sheets). CSS – каскадная таблица стилей — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языка разметки HTML. Язык, который позволяет легко и эффективно украсить веб-страницу, например, изменить: цвет текста или фона, размер и начертание шрифта, толщину линий, скруглить углы, создать анимацию и многое, многое другое. Цель создания CSS – для использования создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML) от описания внешнего вида этой веб-страницы. Такое разделение увеличивает доступность документа, предоставляет большую гибкость при управлении его представлением, а также уменьшает сложность и повторяемость в коде HTML. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях вывода (экранное представление или скин). 2.3 JavaScript. JavaScript - мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам. Программы на этом языке иногда называют скриптами. В браузере они подключаются напрямую к HTML и, как только загружается страничка – тут же выполняются. ВНИМАНИЕ! Программы на языке JavaScript - выполняются на стороне клиента (на ПК пользователя) и используются для взаимодействия с пользователем именно он делает страницы сайтов интерактивными. Все современные Веб-браузеры имеют встроенную поддержку для этого языка. Что умеет JavaScript? В браузере JavaScript умеет делать всё, что относится к манипуляции со страницей, взаимодействию с посетителем и, в какой-то мере, с сервером: Создавать новые HTML-теги, удалять существующие, менять стили элементов, прятать, показывать элементы и т.п. Реагировать на действия посетителя, обрабатывать клики мыши, перемещения курсора, нажатия на клавиатуру и т.п. Посылать запросы на сервер и загружать данные без перезагрузки страницы (эта технология называется "AJAX") …и многое, многое другое. ВНИМАНИЕ! Браузер накладывает на исполнение JS некоторые ограничения, это сделано для безопасности пользователей, чтобы злоумышленник не мог с помощью JavaScript получить личные данные или как-то навредить компьютеру пользователя. Большинство возможностей JavaScript в браузере ограничено текущим окном и страницей: не может читать/записывать произвольные файлы на жесткий диск, копировать их или вызывать программы. не имеет прямого доступа к операционной системе. современные браузеры могут работать с файлами, но эта возможность ограничена специально выделенной директорией – «песочницей». Возможности по доступу к устройствам также прорабатываются в современных стандартах и частично доступны в некоторых браузерах. работающий в одной вкладке, не может общаться с другими вкладками и окнами, за исключением случая, когда он сам открыл это окно или несколько вкладок из одного источника (одинаковый домен, порт, протокол). 2.4 PHP (HyperText Preprocessor). PHP - препроцессор гипертекста, скриптовый язык общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов. Итак, на сервере хранится страничка, написанная на php. Пользователь набирает адрес этой странички в браузере. Что происходит после нажатия клавиши Enter? Сервер пошагово исполняет команды и отправляет пользователю результат в виде html-кода. Этот код отображается в окне браузера в виде текста, картинок, видео и так далее (контент). В процессе формирования внешнего вида странички браузер может посылать дополнительные запросы к серверу. Внимание! PHP выполняется на сервере. То есть PHP не может работать на стороне клиента (на ПК пользователя). PHP — один из самых популярных в области построения веб-сайтов. Имеет большой набор встроенных средств и дополнительных модулей для разработки веб-приложений[12]. Некоторые из них: взаимодействие с системами управления базами данных. работа с локальными и удалёнными файлами. обработка файлов, загружаемых на сервер и др. ИТАК: php выполняется на стороне сервера и не может работать на стороне клиента. Java Script выполняется на стороне клиента. 2.5 SQL (structured query language). SQL (structured query language — «язык структурированных запросов») — декларативный язык программирования, применяемый для создания, модификации и управления данными в реляционной базе данных, управляемой соответствующей системой управления базами данных (мы будем использовать MySQL). База данных (для сайта) - набор таблиц, в которые вы вносите информацию, которая может быть отображена на сайте. Извлекается информация из базы данных с помощью языков PHP и SQL. Основной набор операций языка SQL: создание в базе данных новой таблицы; добавление в таблицу новых записей; изменение записей; удаление записей; выборка записей из одной или нескольких таблиц (в соответствии с заданным условием); изменение структур таблиц. 3. Среда программирования (Среда разработки) NetBeans. 3.1 Где писать программный код для сайта и как его отлаживать. Писать код сайта можно в текстовом редакторе: в простом текстовом редакторе типа Блокнот для windows; в специализированных текстовых редакторах для кода, таких как Sublimeили Atom; или в IDE - интегрированной среде разработки приложений: Microsoft Visual Studio; NetBeans; PhpStorm; Eclipse; И др. Их можно сравнивать – какая лучше, у всех есть свои достоинства и недостатки, но для изучения я выбрал БЕСПЛАТНУЮ IDE NetBeans. 3.2 Как производить отладку написанной программы. Для отладки программы можно использовать любой браузер или IDE. Мы будем использовать браузер Хром. 3.3 IDE NetBeans. NetBeans IDE - интегрированная среда разработки приложений (IDE) на языках программирования PHP, JavaScript, HTML, CSS, и ряда других. IDE NetBeans позволяет быстро и легко разрабатывать настольные, мобильные и веб-приложения Java, а также приложения HTML5 с использованием технологий HTML, JavaScript и CSS. Грубо говоря программы, мы будем далее писать и отлаживать в программах NetBeans и Chrome. 3.4 MySQL Workbench. Для хранения информации мы будем использовать базу данных MySQL -  свободная реляционная система управления базами данных. Для управления базой данных MySQL можно использовать: PHPMyAdmin (обычно установлена на сервере провайдера и используется бесплатно) MySQL Workbench (платная и ее надо установить). Для управления базами данных MySQL, я буду использовать MySQL Workbench. 4. Выводы. ВАЖНО: PHP и SQL выполняются на стороне сервера и не могут работать на стороне клиента (на ПК пользователя). С помощью этих языков программирования мы будем считывать информацию из базы и из папок на сервере для формирования сайта. Если мы хотим получить или сохранить информацию используем PHP и SQL. HTML, CSS, Java Script выполняются на стороне клиента (на ПК пользователя). С помощью этих языков программирования мы будем формировать сайт из полученной с сервера информации и в зависимости от действий пользователя. Если мы хотим организовать диалог с пользователем используем Java Script. Запомните! Передать информацию из PHP в Java Script легко, наоборот гораздо сложнее. Подробнее работу со всем вышеописанным рассмотрим в соответствующих разделах.