Общий обзор возможностей 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> - собственно тело документа. В общем случае любые тэги могут быть внутри любых других тэгов, однако из этого правила много исключений.

Перенос строк и количество пробелов не имеет никакого значения для отображения; для новой строки используйте тэг <br />. Если же хотите сохранить форматирование как в исходном тексте - используйте тэг <pre>.

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

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

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

<a href='http://google.com'>Здесь параметром является `href`, а его значение - ссылка, на которую перейдет браузер при клике </a> <br/>
<input type='checkbox' /> параметр `type` указывает браузеру, какой именно тип поля ввода нужен <br/>
<input type='email' placeholder='Например это поле ввода email' /><br/>

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

Комментарии в HTML

...бывают только многострочными

<!-- это комментарий -->

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, т. е. верстку, предоставляя приятный внешний вид изначально. Для того, что бы не морочить себе голову с красотой страниц сайта - используйте его или другие подобные фреймворки.

CDN

Используйте Content Distribution Networks, для подключения библиотек типа jQuery. Это избавляет вас от проблем в repl.it и экономит трафик пользователя.

How To Google

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

English

Я вас опечалю, но английский нужен, особенно если вы захотите работать в IT. Общение с заказчиками, комментарии в коде, нахождения самой новой информации и так далее требует знание этого языка.
Я вас порадую, но на текущий момент количество русскоязычных ресурсов по теме достаточно для того, что бы научиться и выбирать из них то, что более понятно и наглядно. Еще 5-15 лет назад их было много меньше. Читайте хабр

Библиотеки

На текущий момент существует великое множество библиотек и фреймворков, которые помогают и ускоряют разработку. Некоторые из них:

Bootstrap
jQuery
AngularJS - вебприложения
ReactJS - вебприложения
D3 - графики
Meteor

Опять же, для начала определитесь, какую задачу вы хотите решить, а потом загуглите по возможным библиотекам, почитайте обзоры, и подберите наиболее подходящее решение. Запомните - инструмент подбирается под задачу, а не наоборот. Правильно выбранный инструмент позволяет решить задачу быстро и качественно

API, Сетевые возможности и AJAX

Кроме библиотек, которые подключаются и запускаются в браузере поверх встроенных возможностей JS, предоставляя стандартные решения для задач, с которыми сталкивается разработчик, существуют еще множество сервисов, которые хранят свои данные на других серверах, однако вы их можете использовать в своем JS-коде. Например, вы можете использовать Карты Google на своем сайте, не храня терабайты картинок земной поверхности на своих серверах. Документация по сервисам Google достаточно хорошо написана и почти полностью переведена на русский.

API

API (Application Programming Interface) - общий термин, которым называют те или иные продуманные способы взаимодействия с библиотеками. Например, набор функций jQuery - это API. API можно подразделить на сетевые и локальные. Например API Google Карт так и называется. Естественно задачи постройки маршрутов, отображения поверхности Земли и прочие выполняются за счет ресурсов серверов Google, так что эти API являются сетевыми. Хотя изнутри JS-кода это не всегда заметно.

Сетевые возможности JS

Так как браузер - изначально программа для сетевого взаимодействия, то JS обладает богатыми сетевыми возможностями. Рассмотрим их:

Вы можете создать HTML-элемент со ссылкой. Будь то a для пользователя или img для подгрузки картинки;
Вы можете сделать AJAX-запрос (Asynchronous Javascript And XML), который равносилен обычному запросу браузера к серверу, как посещение веб-страницы или подгрузка картинки в этой веб-странице; однако AJAX-запрос выполняется когда угодно и незаметно для пользователя;
Вы можете использовать Web-сокеты, это более низкоуровневая возможность для поддержания постоянного соединения с сервером и обменом данными. В случае с AJAX JS код является инициатором запроса и получает ответ; в случае с Web-сокет соединение может работать длительное время, и сервер получает возможность отправить данные в любой момент; а JS получит событие о приходе данных и сможет их обработать по приходу, без опроса сервера.
WebRTC (Web Real Time Communications) - технология общения между браузерами напрямую, используя сервер только для изначальной установки соединения; обмен данными в дальнейшем идет без посредников, без использования ресурсов сервера и более конфиденциально. Этот способ позволяет передавать видео, голосовые и другие данные. Таким образом можно сделать подобие Skype или Viber с голосовыми или видеозвонками используя только браузер и JS

Например, ничего не мешает нам найти и использовать в своем коде список городов по странам. Получим эти данные, используя AJAX. JSON

Canvas и События

Canvas - возможность HTML5, которая позволяет выделить блочный элемент для рисования любого вида 2D графики на нём. У вас есть возможность рисовать по-пиксельно, задавая цвет каждой точке; а так же рисовать текст, линии, круги и другие графические примитивы. пример

События

События - те или иные действия пользователя (нажатия кнопок, операции с мышью или на тачскрине), или внутри ОС, которые известны ОС и предполагают реакцию кода на них (отрисовку нового символа, действия при клике и так далее). Код, который обрабатывает событие, называется обработчиком события и обычно реализуется с помощью функций обратного вызова. См. jQuery примеры и обработку событий без jQuery в примере выше (Canvas)

Выбор проекта. ДЗ.

Придумайте несложную, но реалистичную идею
Прогуглите по библиотекам, которые, как вам кажется, помогут вам в реализации проекта
Подготовьте список библиотек и ссылок на их сайты, обзоры и прочую информацию.

06.md 25 KB Permalink Histórico Raw