- •Міністерство освіти і науки україни
- •Програмування для internet Конспект лекцій
- •Верстка
- •Редакторы для верстки
- •Валидаторы
- •Графические редакторы
- •Другие программы
- •Основные понятия Теги
- •Атрибуты и их значения
- •Семантическая верстка
- •Содержимое тега head
- •Работа с макетом
- •Контейнеры
- •Изображения и ссылки
- •Адреса в Интернете
- •Особенности свойств тегов Свойства: отступ
- •Отступы по умолчанию
- •Свойства: тип тега
- •Свойство visibility
- •Свойства: границы
- •Свойства: размер
- •Свойство: позиционирование
- •Центрирование блока
- •Документы html5
- •Структура документа
- •Структура тела документа
- •Макет страницы
- •Строение тела документа
- •Отображение документа в окне браузера
- •Контрольные вопросы и задания:
- •Задание для самостоятельной работы:
- •Стили css
- •Стили и стуктура
- •Блочные элементы
- •Основы применения стилей
- •Строчные стили
- •Встроенные стили
- •Внешние файлы
- •Ссылка по любому атрибуту
- •Определение ссылок по псевдоклассам
- •Новые селекторы
- •Контрольные вопросы и задания:
- •Блочные модели
- •Традиционная блочная модель
- •Универсальный селектор *
- •Новая иерархия заголовков
- •Объявление новых элементов html5
- •Выравнивание тела документа по центру
- •Создание главного блока
- •Заголовок
- •Навигационная полоса
- •Раздел и боковая врезка
- •Нижний колонтитул
- •Контрольные вопросы и задания:
- •Принцип работы гибкой блочной модели
- •Свойство display
- •Свойство box-orient
- •Свойство box-direction
- •Свойство box-ordinal-group
- •Сойство box-pack
- •Свойство box-flex
- •Свойство box-align
- •Гибкая блочная модель
- •Контрольные вопросы и задания:
- •Свойства css3
- •Свойство border-radius
- •Свойство box-shadow
- •Свойство text-shadow
- •Свойство @font-face
- •Линейный градиент
- •Радиальный градиент
- •Свойство outline
- •Свойство border-image
- •Свойства transform и transition
- •Функция transform: rotate
- •Функция transform: skew
- •Функция transform: translate
- •Одновременное использование всех видов трансформации
- •Динамические трансформации
- •Переходы
- •Внедрение JavaScript
- •Обработчики событий
- •Контрольные вопросы и задания:
- •Воспроизведение видеои аудио с помощью html5
- •Программирование видеопроигрывателя
- •Свойства
- •Выполнение кода
- •Воспроизведение аудио с помощью html5
- •Программирование видеопроигрывателя
- •Контрольные вопросы и задания:
- •Новые элементы, типы ввода и атрибуты, расширяющие функциональность форм
- •Атрибут multiple
- •Атрибут autofocus
- •Атрибут pattern
- •Атрибут form
- •Новые элементы форм
- •Контрольные вопросы и задания:
- •Швець н.В. Програмування для internet Конспект лекцій
- •65039, Одеса, вул. Канатна, 112
Внедрение JavaScript
Как и при использовании CSS существуют разные техники встраивания кода JavaScript в документы HTML. однако, точно так же, как и в случае с CSS, в HTML5 рекомендуется применять только одну из них – добавление ссылок на внешние файлы.
Строчные сценарии
Это простая техника добавления кода JavaScript в документ, основанная на преимуществах атрибутов элементов HTML. Речь идет об атрибутах, являющихся обработчиками событий, которые исполняют код в зависимости от действий пользователя.
Чаще всего используются обработчики событий, относящиеся к движению мыши, такие как onclick, onMouseOver и onMouseout. Однако на некоторых сайтах применяются ключевые слова и события окна (onload и onfocus), т.е. действия выполняются после нажатия клавиши или изменения состояния окна.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript</title>
</head>
<body>
<section id="main">
<p onclick="alert('you clicked me!')">Click Me</p>
<p>You Can't Click Me</p>
</section>
</body>
</html>
В HTML5 допускается использование Javascript внутри элементов HTML. однако по тем же причинам, которые были перечислены при обсуждении CSS, прибегать к подобному методу не рекомендуется – разбрасывание фрагментов кода по всему документу сильно затрудняет построение эффективных приложений.
Были разработаны новые техники и методы определения ссылок на элементы HTML и регистрации обработчиков событий, не требующие вставки строчных сценариев.
Встроенный код
Для того чтобы работать с объемным кодом и писать собственные функции, необходимо группировать сценарии между тегами <script>. Такой подход позволяет собрать код в одном месте и обращаться к остальным элементам посредством ссылок.Так же, как и в случае с элементом <style>, в HTML5 не требуется использовать атрибут <type> для указания языка в теге <script>. В HTML5 по умолчанию считается, что код написан на языке JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript</title>
<script>
function clickme(){
document.getElementsByTagName('p')[0].onclick=showalert;
}
function showalert(){
alert('you clicked me!');
}
window.onload= clickme;
</script>
</head>
<body>
<section id="main">
<p>Click Me</p>
<p>You Can't Click Me</p>
</section>
</body>
</html>
Элемент<script> и его содержимое могут находиться в любом месте документа, внутри других элементов или между ними. В целях унификации рекомендуется всегда помещать сценарии в голову документа и ссылаться на элементы с помощью корректных методов JavaScript, предусмотренных именно для этой цели.
Сейчас в JavaScript существует три метода определения ссылок на элементы HTML:
getElementsByTagname() – ссылается на элемент по его ключевому слову;
getElementById() – ссылается на элемент по значению атрибута id;
getElementsByClassName() – это новый метод, который позволяет сослаться на элемент по значению атрибута class.
Даже если вы размещаете сценарии в голове документа, необходимо учитывать слдующее6 браузер считывает код последовательно, поэтому невозможно сослаться на элемент, который еще не был создан.
В нашем примере сценарий находится в голове документа и считывается до того, как создаются элементы <p>. Если бы мы в этом коде попытались что-то сделать с элементами <p>, то получили бы сообщение обошибке, объясняющее, что такого элемента не существует. во избежание данной проблемы мы превратили код в функцию showalert(), а ссылку на элемент <p> и обработчик событий поместили во вторую функцию с названием clickme().
Функции вызываются из последней строки сценария с помощью еще одного обработчика событий (в данном случае связанного с окном), который называется onload. Этот обработчик выполняет указанную функцию. когда окно полностью загружается и все элементы полностью создаются.
Процесс выполнения всего документа выглядит так. сначала функции загружаются, но еще не исполняются. Затем создаются элементы HTML. И наконец, когда документ загружен целиком, срабатывает событие load и вызывается функция clickme().
Обычно для вызова функции указывают ее имя и передают какие-то значения. Но мы передаем обработчику событий ссылку на функцию, а не результат ее выполнения.
Внешний файл
Коды JavaScript увеличиваются экспоненциально с добавлением новых функций и обращением к некоторым API. Таким образом, встроенные код ызначительно увеличивают документы, к тому же немалая часть кода повторяется. Для того чтобы сократить время загрузки, повысить эффективность и получить возможность распространять и повторно использовать коды в новых документах, не жертвуя эффективностью, рекомендуется сохранять коды JavaScript в одном или нескольких внешних файлах и вызывать их через атрибут src.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript</title>
<script src="mycode.js"></script>
</head>
<body>
<div id="main">
<p>Click Me</p>
<p>You Can't Click Me</p>
</div>
</body>
</html>
Элемент <script> загружает код Javascript из внешнего файла под названием mycode.js. Это позволит вставить сценарий в каждый документ нашего веб-сайта и в любой момент повторно использовать содержащийся в нем код. С точки зрения пользователя, такая практика сокращает время загрузки и доступа к веб-сайту. Для разработчика же важно, что значительно упрощается организация и поддержка.
Новые селекторы
Как мы уже видели, для того чтобы как-то влиять на элементы HTML из кода JavaScript, необходимо создавать ссылки на них. Методов getElementsByTagname(),getElementById() и getElementsByClassName() недостаточно для поддержания должного уровня интеграции и актуальности вспецификации HTML5. Для того чтобы перевести JavaScript на уровень, соответствующий современной ситуации, были предложены и внедрены альтернативные решения. Теперь мы можем выбирать элементы HTML, применяя всевозможные селекторы CSS и используя новые методы querySelector() и querySelectorAll().
Метод querySelector()
Этот метод возвращает первый элемент, соответствующий описанной в круглых скобках группе селекторов. Селекторы объявляются в кавычках с использованием синтаксиса CSS, как в сдедующем примере.
function clickme(){
document.querySelector("#main p:first-child").onclick=showalert;
}
function showalert(){
alert('you clicked me!');
}
window.onload=clickme;
В этом листинге мы заменили метод getElementsByTagName(), который использовали раньше,методом querySelector(). Селектор в этом методе ссылается на первый элемент <p>, являющийся потомком элемента, имеющего атрибут id со значением main.
Ранее уже говорилось, что при этом данный метод возвращает только первый найденный элемент, и вы видите лишний псевдоклассfirst-child. Метод querySelector() в нашем примере вернет только первый элемент <p> внутри <div>, являющийся, разумеется, его первым потомком. Назначение данного примера – показать, что querySelector() вернет только первый элемент в документе, соответствующий одному из них.
Метод querySelectorAll()
В отличие от предыдущего метода, метод querySelectorAll() возвращает все элементы, соответствующие группе селекторов, указанной в круглых скобках. Возвращаемое значение представляет собой массив, содержащий все найденные элементы в том порядке, в котором они находятся в документе.
function clickme(){
var list = document.querySelectorAll("#main p");
list[0].onclick=showalert;
}
function showalert(){
alert('you clicked me!');
}
window.onload=clickme;
Группа селекторов, описанная в методе querySelectorAll() вернет все элементы <p> в нашем HTML-документе, которые являются потомками элемента <div>.
Этот пример не демонстрирует весь потенциал querySelectorAll(). Обычно данный метод используется для выбора сразу нескольких элементов, а не одного, как в нашем случае. Для прохождения по списку элементов, возвращенных методом, удобно использовать цикл for.
function clickme(){
var list = document.querySelectorAll("#main p");
for(var f = 0; f < list.length; f++){
list[f].onclick=showalert;
}
}
function showalert(){
alert('you clicked me!');
}
window.onload=clickme;
Метод querySelectorAll() как и querySelector(), может содержать одну или несколько групп селекторов, разделенных запятыми. Эти и предыдущие методы можно комбинировать, для того чтобы можно было выбирать нужные элементы. Например, сейчас мы выполним предыдущую задачу, но используем как querySelectorAll() , так и getElementsByTagName().
Данная техника демонстрирует, насколько точными могут быть эти методы. Мы можем скомбинировать методы в одной строке, а можем выбрать группу элементов и применить к ней второй метод, для того чтобы выбрать только некоторые из полученных на первом этапе.
function clickme(){
var list = document.getElementById("main").querySelectorAll("p");
list[0].onclick=showalert;
}
function showalert(){
alert('you clicked me!');
}
window.onload= clickme;