Общий обзор возможностей 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:

<!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 используются для двух основных целей: для отображения пользователю с возможностью перехода, или же для каких-то технических целей.

<a href='http://google.com'>google</a>
<a href='http://ya.ru'>яндекс</a>

Эти ссылки для пользователя.

А эти - для технических целей. Именно они подключают ваш JS и CSS код в документ в repl.it:

    <head>
    ....
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>

Ссылки представлены в формате URL: <протокол>://<сайт>/путь/к/файлу

06.md 6.0 KB Riwayat Mentahan