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

<протокол>://<сайт>/путь/к/файлу?<параметры> где:

протокол - тип сетевого протокола для обмена данными с серверами. Обычно это http или https.
сайт - доменное имя или IP-адрес сайта
путь к файлу - путь в дереве каталогов на сайте к конкретному файлу. В отличие от windows используется прямой слэш (/)
параметры - если путь ведет не к статическому файлу, а к коду, который выполняется, то в параметры могут быть переданы этому коду для обработки.

Ссылки могут быть абсолютными (как выше в общей структуре URL) и относительными. В случае с относительными отсутствующие части берутся из строки адреса браузера:

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

Как видите, ссылки на 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) не включают в себя ничего, кроме своих параметров. В конце непарного тэга желательно ставить /: <br />, <input type='email' name='email' /> и так далее.

Так же тэги деляться на блочные и строчные. Блочные по умолчанию занимают всю ширину и начинаются с новой строки; строчные же обычно предназначены для придания части текста какого-то свойства (например a создает ссылку, i - курсив).

CSS

CSS (Cascading Style Sheets) - каскадная таблица стилей.

HTML хранит общую структуру и информацию; а CSS - то, как эта структура отображается. Таким образом можно кардинально изменить вид сайта, просто изменив CSS и не меняя информацию и структуру HTML-документа.

CSS-Селекторы

Для того, что бы определить стиль (внешний вид) тех или иных элементов в дереве HTML-тэгов, нужен способ указания множества тэгов, к которым применяется стиль. Этот способ называется CSS-Selector, и пишется на специальном языке, который позволяет осуществлять поиск в дереве тэгов и задавать им стиль.

* {  /* все тэги */
    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, HTMLBOOK и Developer Tools, который позволяет наглядно увидеть структуру HTML и стили, связанные с элементами в HTML.

jQuery

jQuery это библиотека, написанная на JavaScript, которая унифицирует и упрощает работу с HTML и CSS, используя встроенные функции JavaScript. Для работы с элементами HTML обычно используются CSS-Селекторы и функции обратного вызова.

$("#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 требует подключения, используя тэг <script>, иначе у вас не будет функции $, через которую доступен функционал jQuery.

Bootstrap

Bootstrap - один из многих HTML/CSS фреймворков, который упрощает создание HTML и CSS, т. е. верстку, предоставляя приятный внешний вид из коробки, т. е. изначально. Для того, что бы не морочить себе голову с красотой страниц сайта - используйте его или другие подобные фреймворки.

How To Google

90% ваших вопросов сейчас имеют ответ с пояснениями в гугле. Просто не стесняйтесь искать. Если вы нашли что-то новое, обычно достаточно поискать <что-то новое> примеры или <что-то новое> samples для того, что бы разобраться на простых примерах. Так же есть полезные сервисы для обмена опытом, например Stack Overflow. Обычно ваши вопросы будут вести именно туда :-)

06.md 15 KB History Raw