# Общий обзор возможностей JS в браузере и самого браузера. ## Браузер Браузер - программа с богатыми возможностями: - Получение данных по сети - Отображение полученных данных (HTML, CSS, Изображения) - Выполнение Javascript-кода, добавляющего логику и интерактивность в веб-страницах. - Отправка данных в сеть (на сервер), используя возможности HTML и из Javascript ### JS в браузере: - Может выполнять произвольный корректный JS-код - Может оперировать с другими частями страницы (HTML, CSS), делать с ними *что угодно*, меняя логику работы и внешний вид страницы - Может отправлять данные по сети, на сервер, с которого получена страница, или же на другие сервера, а так же открывать сетевые соединения, общаться с другими такими же браузерами для передачи данных, видео и голосовых конференций. - Может открывать и обрабатывать файлы на компьютере пользователя, отправлять их в интернет; - В современных мобильных браузерах у вас есть почти полный доступ к возможностям мобильного гаджета: * Геолокация * Фотография * Акселерометр - Canvas, как возможность для рисования чего угодно - графические примитивы (окружности, линии, текст), а так же попиксельного рисования (т. е. задания цвета каждой точки в отдельности) - WebGL, как зачатки 3D в браузере. ### Основные вехи развития браузера и JS в нём: - **Первая эра**. 90е-начало 00х годов. В этот период сайты представляли из себя книги для чтения, *всего-лишь* с возможностью перейти по ссылке на другой сайт или страницу. JS был в начале становления и практически не применялся - **Вторая эра**. Появился CSS, как отдельная сущность для оформления вида страниц. В JS появился AJAX, как возможность инициировать общение с сервером незаметно для пользователя, получать данные и отправлять их без перезагрузки страниц. Появляются формы, валидация данных в них, веб становится более интерактивным, в том числе благодаря flash - **Третья эра**. HTML5. HTML5 взял на себя множество вещей, которые требовали ранее более сложных решений, JS или Flash. Многие эффекты теперь являются частью CSS, и не требуют программирования. Так же появились Canvas, WebGL, возможности смартфонов и так далее, WebRTC. ### HTML **HTML** (Hypertext Markup Language) - язык разметки *гипертекста*. Под гипертекстом подразумевается множество ресурсов с текстовой информацией, объединенных с помощью *гиперссылок*. В процессе развития HTML оброс кучей дополнительных возможностей. #### Структура HTML: ```html Site Title ``` Как видите, **HTML** - это *древовидная структура данных*, представленная в виде парных тэгов (например `` и ``), которые могут хранить вложенные тэги (`` и ``) и так далее. В `` находится заголовок документа с настройками - кодировкой, именем страницы и так далее; в `` - собственно тело документа. В общем случае любые тэги могут быть внутри любых других тэгов, однако из этого правила много исключений. ##### Ссылки в HTML. Ссылки в HTML используются для двух основных целей: для отображения пользователю с возможностью перехода, или же для каких-то технических целей. ```html google яндекс ``` Эти ссылки для пользователя. А эти - для технических целей. Именно они подключают ваш JS и CSS код в документ в repl.it: ```html .... ``` Ссылки представлены в формате **URL**(Unified Resource Locator): <протокол>://<сайт>/путь/к/файлу?<параметры> где: - **протокол** - тип сетевого протокола для обмена данными с серверами. Обычно это **http** или **https**. - **сайт** - доменное имя или IP-адрес сайта - **путь к файлу** - путь в дереве каталогов на сайте к конкретному файлу. В отличие от windows используется прямой слэш (`/`) - **параметры** - если путь ведет не к статическому файлу, а к коду, который выполняется, то в параметры могут быть переданы этому коду для обработки. Ссылки могут быть абсолютными (как выше в общей структуре URL) и относительными. В случае с относительными отсутствующие части берутся из *строки адреса браузера*: ```html .... ``` Как видите, ссылки на `index.js` и на `index.css` не содержат в себе других частей **URL**, а значит они являются *относительными*. значит мы можем открыть эти файлы, добавив адрес из строки браузера. **Проделайте это**. Относительные ссылки полезны, если вы не знаете в какой папке, или на сайте с каким именем будет располагаться ваш код. При использовании абсолютных ссылок вам придется найти и исправить сотни ссылок даже в небольшом проекте с использованием HTML. #### Тэги HTML: - `a`. Служит для создания ссылок на другие страницы или сайты. - `img`. Добавляет картинку. - `p`. Добавляет параграф - `div`. Добавляет контейнер для других тэгов. - `table`. Добавляет таблицу - `tr`. Добавляет строку таблицы - `td`. Добавляет ячейку таблицы - `i`. Добавляет курсивный текст - `ul`. Добавляет ненумерованный список - `ol`. Добавляет нумерованный список - `li`. Добавляет элемент списка в тэги `ul` или `li` - `input`. Добавляет поля ввода. - `textarea`. Добавляет многострочное поле ввода для текста - `select`. Добавляет выпадающий список. - `br`. Добавляет перенос строки. Тэги бывают парные и непарные. Парные могут включать в себя другие тэги и текст; непарные (`img`, `input`, `br`) не включают в себя ничего, кроме своих параметров. В конце непарного тэга желательно ставить `/`: `
`, `` и так далее. Так же тэги деляться на **блочные** и **строчные**. **Блочные** по умолчанию занимают всю ширину и начинаются с новой строки; **строчные** же обычно предназначены для придания части текста какого-то свойства (например `a` создает ссылку, `i` - курсив). ### CSS **CSS** (Cascading Style Sheets) - каскадная таблица стилей. **HTML** хранит общую структуру и информацию; а **CSS** - то, *как* эта структура отображается. Таким образом можно кардинально изменить вид сайта, просто изменив **CSS** и не меняя информацию и структуру **HTML**-документа. #### CSS-Селекторы Для того, что бы определить *стиль* (внешний вид) тех или иных элементов в дереве HTML-тэгов, нужен способ указания множества тэгов, к которым применяется стиль. Этот способ называется **CSS-Selector**, и пишется на специальном языке, который позволяет осуществлять поиск в дереве тэгов и задавать им стиль. ```css * { /* все тэги */ background-color: lightgray; } a { /* все тэги a */ color: black; } a.mainmenu { /* все тэги a, в которых параметр class="mainmenu" */ font-size: 20px; } .mainmenu { /* все тэги, в которых параметр class="mainmenu" */ background: darkgray; } #someId { /* тэг, в котором параметр id="someId" */ background-color: red; } #someId a { /* все тэги a внутри тэга с id="someId" */ color: green; } #someId > a { /* все тэги a внутри тэга с id="someId" на уровень ниже и не далее*/ color: blue; } ``` Таким образом с помощью языка **CSS-Селекторов** вы можете выбрать множество тэгов внутри **HTML**-документа и применить те или иные настройки внешнего вида к ним. Для изучения **HTML** и **CSS** используйте [google](http://google.com), [HTMLBOOK](http://htmlbook.ru) и **Developer Tools**, который позволяет наглядно увидеть структуру **HTML** и стили, связанные с элементами в **HTML**. ### jQuery **jQuery** это библиотека, написанная на **JavaScript**, которая унифицирует и упрощает работу с **HTML** и **CSS**, используя встроенные функции **JavaScript**. Для работы с элементами **HTML** обычно используются **CSS-Селекторы** и **функции обратного вызова**. ```javascript $("#someId").click(function(){ alert("Вы нажали на элемент #someId"); }); $("#addButton").click(function(){ var a = +$("#aInput").val(); var b = +$("#bInput").val(); alert("Сумма а и b: " + (a + b)); }); ``` Пример выше назначает обработчик события `click` (клик левой кнопкой мыши) на элементы с `id="someId"` и `id="addButton"`, после чего выполняют определенные действия. Обработчик кнопки сложения так же предполагает наличие полей ввода c `id="aInput"` и `id="bInput"`. **jQuery** требует подключения, используя тэг `