Практическое задание №1
Пусть строка «отскакивает» от границ, двигаясь то справа налево, то слева направо. Ну, типа бьётся: «бумс-бумс-бумс».
Введение в объектную модель документа (dom) Обращение к элементу
В ECMAScript можно легко обратиться к любому элементу Веб-страницы и узнать или изменить его характеристики. Любой элемент является частью DOM.
Элементу, к которому мы обращаемся, должен быть дан идентификатор — уникальное имя. Теперь мы сможем обращаться к элементу по идентификатору с помощью метода «document.getElementById()».
Например, мы можем обратиться к определённому абзацу с помощью кода, приведённого ниже:
<p id="paragraph-1">Lorem ipsum.</p>
<script type="text/javascript">
document.getElementById('paragraph-1');
</script>
Итак, код, приведённый выше, позволяет обратится к абзацу с текстом «Lorem ipsum» и каким-то образом проанализировать или изменить его. Например, мы можем сменить цвета и шрифты, выравнивание текста и расположение самого абзаца на странице. Как? Расскажу через несколько секунд.
Итак, дав элементу идентификатор, мы можем обращаться к нему из сценария.
Смена оформления элемента
Обратившись к любоу элементу, мы можем изменить свойства его объекта style. Тут проще сначала показать на примере, а лишь потом возводить теоритический базис. Итак, пример.
<p id="paragraph-1">Lorem ipsum.</p>
Вот как будет выглядеть приведённый код в обозревателе:
Lorem ipsum.
Определив
абзац, обратимся к нему.
document.getElementById('paragraph-1').style.color = 'red'; // Меняем цвет на красный.
document.getElementById('paragraph-1').style.fontWeight = 'bold'; // Увеличиваем насыщенность.
document.getElementById('paragraph-1').style.textDecoration = 'line-through'; // Перечёркиваем текст.
document.getElementById('paragraph-1').style.border = '3px double gray'; // Берём абзац в рамку.
Вы можете посмотреть, как же выполнится приведённый код.
document.getElementById('paragraph-1').style.backgroundColor = '#ffc068'; // Меняем цвет на красный.
document.getElementById('paragraph-1').style.borderColor = 'gray'; // Увеличиваем насыщенность.
document.getElementById('paragraph-1').style.textTransform = 'uppercase'; // Перечёркиваем текст.
document.getElementById('paragraph-1').style.letterSpacing = '0.25em'; // Берём абзац в рамку.
Вы можете посмотреть, как же выполнится приведённый код.
Не заметили изменений? Обновите страницу и вернитесь к абзацу paragraph-1, после чего выполните код ещё раз.
Мы можем изменить любое свойство CSS любого элемента в сценарии ECMAScript. Необходимо лишь дать элементу идентификатор.
Замечание. Свойства, которые записывались в CSS через дефис, в DOM пишутся слитно, причём каждое последующее слово записывается с прописной буквы. Например, свойство border-left-color в DOM записывается как «элемент.style.borderLeftColor». Все значения необходимо записывать в кавычках (как строковые литералы), например «элемент.style.borderWidth = '12px';».
Мигание
Если мы будем периодически менять оформление элемента, он будет мигать.
<div id="paragraph-2" style="text-align: center;">Lorem ipsum.</div>
Вот как будет выглядеть приведённый код в обозревателе:
Lorem ipsum.
Обратимся к вновь созданному делению.
function blink() { // Меняем цвет на красный.
if (document.getElementById('paragraph-2').style.color == '#ffbb00') { // Текст — оранжевый?
document.getElementById('paragraph-2').style.color = 'black'; // Меняем цвет текста на чёрный.
document.getElementById('paragraph-2').style.backgroundColor = '#ffbb00'; // Меняем цвет фона на оранжевый.
} else {
document.getElementById('paragraph-2').style.color = '#ffbb00'; // Меняем цвет текста на оранжевый.
document.getElementById('paragraph-2').style.backgroundColor = 'black'; // Меняем цвет фона на чёрный.
}
}
setInterval(blink, 750); // Запускаем функцию.
Вы можете посмотреть, как же выполнится приведённый код.
Теперь деление выше мигает.