# Общий обзор возможностей 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` - курсив). Обратите внимание на `float` в **CSS** для
расположения несколько блочных элементов по горизонтали рядом, или же используйте **Bootstrap** или иной фреймворк.

##### Параметры тэгов **HTML**

В тэгах так же встречаются параметры, которые указаны в открывающем тэге и имеют определенный смысл в зависимости от тэга:

```html
Здесь параметром является `href`, а его значение - ссылка, на которую перейдет браузер при клике  

 параметр `type` указывает браузеру, какой именно тип поля ввода нужен 



```
Параметров может быть несколько, они записываются как <имя параметра>="<значение>" через пробел.

##### Комментарии в **HTML**
...бывают только многострочными
```html

```

### 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** требует подключения, используя тэг `