Kezdőlap Felfedezés Súgó
Bejelentkezés
gitgod
/
BasicProgramming
Figyelés 4
Kedvenc 3
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

06 beta

me@helium 8 éve
szülő
2a5ed870bb
commit
424c6a319c
1 módosított fájl, 49 hozzáadás és 30 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 49 30
      06.md

+ 49 - 30
06.md
Fájl Megtekintése 

@@ -4,13 +4,13 @@
 
 
 Браузер - программа с богатыми возможностями:
 
 - Получение данных по сети
 
-- Отображение полученных данных (HTML, CSS, Изображения)
 
-- Выполнение Javascript-кода, добавляющего логику и интерактивность в веб-страницах.
 
-- Отправка данных в сеть (на сервер), используя возможности HTML и из Javascript
 
+- Отображение полученных данных (**HTML**, **CSS**, Изображения, Видео)
 
+- Выполнение **Javascript**-кода, добавляющего логику и интерактивность в веб-страницах.
 
+- Отправка данных в сеть (на сервер), используя возможности **HTML** и из **Javascript**
 
 
 ### JS в браузере:
 
-- Может выполнять произвольный корректный JS-код
 
-- Может оперировать с другими частями страницы (HTML, CSS), делать с ними *что угодно*, меняя логику работы и внешний вид страницы
 
+- Может выполнять произвольный корректный **JS**-код
 
+- Может оперировать с другими частями страницы (**HTML**, **CSS**), делать с ними *что угодно*, меняя логику работы и внешний вид страницы
 
 - Может отправлять данные по сети, на сервер, с которого получена страница, или же на другие сервера, а так же открывать сетевые
 
   соединения, общаться с другими такими же браузерами для передачи данных, видео и голосовых конференций.
 
 - Может открывать и обрабатывать файлы на компьютере пользователя, отправлять их в интернет;
 
@@ -18,24 +18,25 @@
 
     * Геолокация
 
     * Фотография
 
     * Акселерометр
 
-- Canvas, как возможность для рисования чего угодно - графические примитивы (окружности, линии, текст), а так же попиксельного рисования (т. е.
 
+- **Canvas**, как возможность для рисования чего угодно - графические примитивы (окружности, линии, текст), а так же попиксельного рисования (т. е.
 
   задания цвета каждой точки в отдельности)
 
-- WebGL, как зачатки 3D в браузере.
 
+- **WebGL**, как зачатки **3D** в браузере.
 
 
 ### Основные вехи развития браузера и JS в нём:
 
 
 - **Первая эра**. 90е-начало 00х годов. В этот период сайты представляли из себя книги для чтения, *всего-лишь* с возможностью перейти по ссылке на другой
 
   сайт или страницу. JS был в начале становления и практически не применялся
 
-- **Вторая эра**. Появился CSS, как отдельная сущность для оформления вида страниц. В JS появился AJAX, как возможность инициировать общение с сервером
 
-  незаметно для пользователя, получать данные и отправлять их без перезагрузки страниц. Появляются формы, валидация данных в них, веб становится более
 
-  интерактивным, в том числе благодаря flash
 
-- **Третья эра**. HTML5. HTML5 взял на себя множество вещей, которые требовали ранее более сложных решений, JS или Flash. Многие эффекты теперь являются
 
-  частью CSS, и не требуют программирования. Так же появились Canvas, WebGL, возможности смартфонов и так далее, WebRTC.
 
+- **Вторая эра**. Появился **CSS**, как отдельная сущность для оформления вида страниц. В **JS** появился **AJAX**, как возможность инициировать общение 
+  с сервером незаметно для пользователя, получать данные и отправлять их без перезагрузки страниц. Появляются формы, валидация данных в них, веб 
+  становится более интерактивным, в том числе благодаря **Flash**
 
+- **Третья эра**. **HTML5**. **HTML5** взял на себя множество вещей, которые требовали ранее более сложных решений, **JS** или **Flash.** Многие 
+  эффекты теперь являются частью **CSS**, и не требуют программирования. Так же появились **Canvas**, **WebGL**, возможности смартфонов и так далее, 
+  **WebRTC**.  
 
 ### HTML
 
 
-**HTML** (Hypertext Markup Language) - язык разметки *гипертекста*. Под гипертекстом подразумевается множество ресурсов с текстовой информацией, объединенных
 
-с помощью *гиперссылок*. В процессе развития HTML оброс кучей дополнительных возможностей.
 
+**HTML** (Hypertext Markup Language) - язык разметки *гипертекста*. Под гипертекстом подразумевается множество ресурсов с текстовой информацией,
 
+объединенных с помощью *гиперссылок*. В процессе развития **HTML** оброс кучей дополнительных возможностей.
 
 
 #### Структура HTML:
 
 
@@ -59,9 +60,12 @@
 
 вложенные тэги (`<head>` и `<body>`) и так далее. В `<head>` находится заголовок документа с настройками - кодировкой, именем страницы и так далее;
 
 в `<body>` - собственно тело документа. В общем случае любые тэги могут быть внутри любых других тэгов, однако из этого правила много исключений.
 
 
+Перенос строк и количество пробелов не имеет никакого значения для отображения; для новой строки используйте тэг `<br />`. Если же хотите
 
+сохранить форматирование как в исходном тексте - используйте тэг `<pre>`.
 
+
 
 ##### Ссылки в HTML.
 
 
-Ссылки в HTML используются для двух основных целей: для отображения пользователю с возможностью перехода, или же для каких-то технических целей.
 
+Ссылки в **HTML** используются для двух основных целей: для отображения пользователю с возможностью перехода, или же для каких-то технических целей.
 
 
 ```html
 
 <a href='http://google.com'>google</a>
 
@@ -69,7 +73,7 @@
 
 ```
 
 Эти ссылки для пользователя.
 
 
-А эти - для технических целей. Именно они подключают ваш JS и CSS код в документ в repl.it:
 
+А эти - для технических целей. Именно они подключают ваш **JS** и **CSS** код в документ в repl.it:
 
 ```html
 
     <head>
 
     ....
 
@@ -97,10 +101,10 @@
 
     </head>
 
 ```
 
 
-Как видите, ссылки на `index.js` и на `index.css` не содержат в себе других частей **URL**, а значит они являются *относительными*. значит мы можем открыть
 
-эти файлы, добавив адрес из строки браузера. **Проделайте это**. Относительные ссылки полезны, если вы не знаете в какой папке, или на сайте с каким
 
-именем будет располагаться ваш код. При использовании абсолютных ссылок вам придется найти и исправить сотни ссылок даже в небольшом проекте с 
-использованием HTML.
 
+Как видите, ссылки на `index.js` и на `index.css` не содержат в себе других частей **URL**, а значит они являются *относительными*. значит мы можем 
+открыть эти файлы, добавив адрес из строки браузера. **Проделайте это**. Относительные ссылки полезны, если вы не знаете в какой папке, или на сайте 
+с каким именем будет располагаться ваш код. При использовании абсолютных ссылок вам придется найти и исправить сотни ссылок даже в небольшом проекте с 
+использованием **HTML**.
 
 
 #### Тэги HTML:
 
 - `a`. Служит для создания ссылок на другие страницы или сайты.
 
@@ -114,7 +118,7 @@
 
 - `ul`. Добавляет ненумерованный список
 
 - `ol`. Добавляет нумерованный список
 
 - `li`. Добавляет элемент списка в тэги `ul` или `li`
 
-- `input`. Добавляет поля ввода.
 
+- `input`. Добавляет поля ввода разных типов.
 
 - `textarea`. Добавляет многострочное поле ввода для текста
 
 - `select`. Добавляет выпадающий список.
 
 - `br`. Добавляет перенос строки.
 
@@ -125,6 +129,23 @@
 
 Так же тэги деляться на **блочные** и **строчные**. **Блочные** по умолчанию занимают всю ширину и начинаются с новой строки; **строчные** же обычно
 
 предназначены для придания части текста какого-то свойства (например `a` создает ссылку, `i` - курсив). 
 
+##### Параметры тэгов **HTML**
 
+
 
+В тэгах так же встречаются параметры, которые указаны в открывающем тэге и имеют определенный смысл в зависимости от тэга:
 
+
 
+```html
 
+<a href='http://google.com`>Здесь параметром является `href`, а его значение - ссылка, на которую перейдет браузер при клике </a> <br/>
 
+<input type='checkbox'> параметр `type` указывает браузеру, какой именно тип поля ввода нужен <br/>
 
+<input type='email` placeholder='Например это поле ввода email'><br/>
 
+```
 
+Параметров может быть несколько, они записываются как <имя параметра>="<значение>" через пробел.
 
+
 
+##### Комментарии в **HTML**
 
+...бывают только многострочными
 
+```html
 
+<!-- это комментарий -->
 
+```
 
+
 
 ### CSS
 
 
 **CSS** (Cascading Style Sheets) - каскадная таблица стилей.
 
@@ -137,6 +158,7 @@
 
 Для того, что бы определить *стиль* (внешний вид) тех или иных элементов в дереве HTML-тэгов, нужен способ указания множества тэгов, к которым
 
 применяется стиль. Этот способ называется **CSS-Selector**, и пишется на специальном языке, который позволяет осуществлять поиск в дереве тэгов
 
 и задавать им стиль.
 
+
 
 ```css
 
 * {  /* все тэги */
 
     background-color: lightgray;
 
@@ -162,7 +184,7 @@ a.mainmenu {  /* все тэги a, в которых параметр class="ma
 
     color: green;
 
 }
 
 
-#someId > a { /* все тэги a внутри тэга с id="someId" на уровень ниже и не далее*/
 
+#someId > a { /* все тэги a внутри тэга с id="someId" на уровень ниже и не глубже*/
 
     color: blue;
 
 }
 
 ```
 
@@ -198,8 +220,8 @@ $("#addButton").click(function(){
 
 
 ### Bootstrap
 
 
-**Bootstrap** - один из многих HTML/CSS фреймворков, который упрощает создание HTML и CSS, т. е. верстку, предоставляя приятный внешний вид
 
-из коробки, т. е. изначально. Для того, что бы не морочить себе голову с красотой страниц сайта - используйте его или другие подобные фреймворки.
 
+**Bootstrap** - один из популярных HTML/CSS фреймворков, который упрощает создание HTML и CSS, т. е. верстку, предоставляя приятный внешний вид
 
+изначально. Для того, что бы не морочить себе голову с красотой страниц сайта - используйте его или другие подобные фреймворки.
 
 
 ## How To Google
 
 
@@ -213,7 +235,7 @@ $("#addButton").click(function(){
 
 - Я вас опечалю, но английский нужен, особенно если вы захотите работать в **IT**. Общение с заказчиками, комментарии в коде, нахождения
 
   самой новой информации и так далее требует знание этого языка.
 
 - Я вас порадую, но на текущий момент количество русскоязычных ресурсов по теме достаточно для того, что бы научиться и выбирать из них то, что более
 
-  понятно и наглядно. Еще 5-15 лет назад их было много меньше.
 
+  понятно и наглядно. Еще 5-15 лет назад их было много меньше. Читайте [хабр](http://habrahabr.ru)
 
 
 ## Библиотеки
 
 
@@ -254,7 +276,7 @@ $("#addButton").click(function(){
 
     сервер получает возможность отправить данные в любой момент; а **JS** получит событие о приходе данных и сможет их обработать по приходу, без
 
     опроса сервера.
 
   - **WebRTC** (Web Real Time Communications) - технология общения между браузерами *напрямую*, используя сервер только для изначальной установки
 
-    соединения; обмен данными в дальнейшем идет *напрямую*, без использования ресурсов сервера и более конфиденциально. Этот способ позволяет 
+    соединения; обмен данными в дальнейшем идет без посредников, без использования ресурсов сервера и более конфиденциально. Этот способ позволяет 
     передавать видео, голосовые и другие данные. Таким образом можно сделать подобие Skype или Viber с голосовыми или видеозвонками используя
 
     только браузер и **JS**
 
 
@@ -271,13 +293,10 @@ $("#addButton").click(function(){
 
 
   События - те или иные действия пользователя (нажатия кнопок, операции с мышью или на тачскрине), или внутри ОС, которые известны ОС и предполагают
 
   реакцию кода на них (отрисовку нового символа, действия при клике и так далее). Код, который обрабатывает событие, называется **обработчиком события**
 
-  и обычно реализуется с помощью **функций обратного вызова**. См. jQuery примеры и обработку событий без jQuery в примере выше (Canvas)
 
+  и обычно реализуется с помощью **функций обратного вызова**. См. **jQuery** примеры и обработку событий без **jQuery** в примере выше (Canvas)
 
 
 ## Выбор проекта. ДЗ.
 
 
   - Придумайте несложную, но реалистичную идею
 
   - Прогуглите по библиотекам, которые, как вам кажется, помогут вам в реализации проекта
 
   - Подготовьте список библиотек и ссылок на их сайты, обзоры и прочую информацию.
 
-
 
-  
-