|
|
@@ -0,0 +1,83 @@
|
|
|
+# Общий обзор возможностей 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
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width">
|
|
|
+ <title>Site Title</title>
|
|
|
+ <script src="index.js"></script>
|
|
|
+ <link href="index.css" rel="stylesheet" type="text/css" />
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+
|
|
|
+ </body>
|
|
|
+</html>
|
|
|
+```
|
|
|
+
|
|
|
+Как видите, **HTML** - это *древовидная структура данных*, представленная в виде парных тэгов (например `<html>` и `</html>`), которые могут хранить
|
|
|
+вложенные тэги (`<head>` и `<body>`) и так далее. В `<head>` находится заголовок документа с настройками - кодировкой, именем страницы и так далее;
|
|
|
+в `<body>` - собственно тело документа. В общем случае любые тэги могут быть внутри любых других тэгов, однако из этого правила много исключений.
|
|
|
+
|
|
|
+##### Ссылки в HTML.
|
|
|
+
|
|
|
+Ссылки в HTML используются для двух основных целей: для отображения пользователю с возможностью перехода, или же для каких-то технических целей.
|
|
|
+
|
|
|
+```html
|
|
|
+<a href='http://google.com'>google</a>
|
|
|
+<a href='http://ya.ru'>яндекс</a>
|
|
|
+```
|
|
|
+Эти ссылки для пользователя.
|
|
|
+
|
|
|
+А эти - для технических целей. Именно они подключают ваш JS и CSS код в документ в repl.it:
|
|
|
+```html
|
|
|
+ <head>
|
|
|
+ ....
|
|
|
+ <script src="index.js"></script>
|
|
|
+ <link href="index.css" rel="stylesheet" type="text/css" />
|
|
|
+ </head>
|
|
|
+```
|
|
|
+
|
|
|
+Ссылки представлены в формате **URL**:
|
|
|
+<протокол>://<сайт>/путь/к/файлу
|
|
|
+
|
me@helium