Moscow Codding School – 4
Moscow Codding School
4
План
- HTML
- jQuery
- Tasks List
HTML
HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки документов во Всемирной паутине. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.
- Базовая разметка
- Подклюение скриптов
- Подключение стилей
- Как создать Checkbox и текстовый инпут
- Как создать кнопку
- Bootstrap
- DOM и привязка к JS
Базовая разметка
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Awesome App</title>
<link href="/style.css" rel="stylesheet">
</head>
<body>
<!-- Разметка страницы -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/app.js"></script>
</body>
</html>
Подключение JavaScript
<script src="/app.js"></script>
Обычно js-файлы подключаются в самом низу страницы, чтобы не блокировать загрузку. Плюс, таким образом можно сразу работать с разметкой из JS — она уже будет доступна.
Подключение стилей
<link href="/app.css" rel="stylesheet">
Стили же, наоборот, обычно подключаются в вверху страницы, в теге <head>. Это помогает сразу рисовать страницу правильно.
Input'ы
<input type="text" placeholder="Введите текст" /> <input type="checkbox" /> <input type="checkbox" checked />
Как создать кнопку
<button>Важная кнопка!</button>
Привязка к JS
Для привязки HTML к JS обычно используется аттрибут class. И классы, начинающиеся с префикса js-:
<input class="js-text" placeholder="Введите текст…"/>
<button class="js-alert-text">Отправить</button>
$('.js-alert-text').on('click', function() {
alert($('.js-text').val());
})
Bootstrap
Для простоты дальше мы будем использовать фреймворк «Bootstrap», так нам не придётся писать свои стили и слишком сильно погружаться в вёрстку.
Основы jQuery
- Селекторы
- События
- Работа с HTML/DOM
Селекторы
jQuery-селекторы нужны для того, чтобы получить элемент, с которым нам нужно поработать:
var $byClass = $('.js-tasks-list'); // по классу
var $byTag = $('input'); // по названию тега
var $byID = $('#js-tasks'); // по аттрибуту id
var $byAttr = $('[data-user="Vasya"]'); // по аттрибуту
Обычно, к переменным в которых хранятся HTML-элементы найденные jQuery, добавляется префикс $. Это помогает легче ориентироваться в коде.
Работа со значениями и содержимым
Чтобы работать значениями из input'а, у jQuery-элементов есть специальный метод — val();
$('input').val(); // Получить значение
$('input').val('new value'); // Записать значение
Работать с содержимым элементов можно с помощью двух методов: $el.html() и $el.text();
$('.content').html(); // Получить HTML, который находится в элементе
$('.content').html('<div>Hello World</div>'); // Перезаписать HTML
$('.content').text(); // Получить текст из элемента
$('.content').text('Hello world'); // Записать текст
События
$('input').on('change', function() {
// Код, который мы выполняем при изменении значения в input'е
});
$('.js-task-remove').on('click', function() {
// Код срабатывающий при клике на все элементы с таким классом
});
Tasks List
События
var events = {};
events.store = {};
events.on = function(name, fn) {
if (!events.store[name]) {
events.store[name] = [];
}
events.store[name].push(fn);
}
events.trigger = function(name) {
if (!events.store[name]) { return; }
events.store[name].map(function(fn) {
fn();
});
}
event.on('close', function () { alert('closed') })
events.trigger('close');