Практическое задание №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'; // Меняем цвет фона на оранжевый.

Практична работа №9.

Тема: “Организация анимации.”

Теоретические сведения.

Строка состояния и эффект «бегущей» строки

Строка «бежит» слева направо

Создать бегущую строку совсем не сложно. Ведь если мы будем дописывать слева от строки пробелы, то визуально строка начнёт сдвигаться вправо. Итак, создадим небольшую функцию и запустим её через небольшой интервал.

status = 'Текст строки состояния'; // Записываем текст в строку состояния.

function move2Left() { // Объявляем функцию.

status = ' ' + status; // Сдвигаем текст вправо.

}

setInterval(move2Left, 100); // Запускаем интервал.

Вы можете посмотреть, как же выполнится приведённый код.

Что, опять не видно строки состояния? Пожалуйста, открывайте уроки по ECMAScript в отдельном окне2.

Но что происходит? Наша строка «убегает» за пределы видимости! Не порядок!

Итак, нам нужно остановить перемещение строки когда её размер превосходит «допустимые нормы». Для этого сохраним наш интервал в переменной, и после отменим его методом «clearInteval(кодТаймера)».

А в функции будем проверять, не превышает ли длина строки (свойство «'строка'.length») 50 сим­волов («if (status.length > 50)»). Если условие выполнится, прервём интервал. Да, перед тем, как смотреть на выполнение последующего кода, обновите страницу.

status = 'Текст строки состояния'; // Записываем текст в строку состояния.

function move2Left() { // Объявляем функцию.

status = ' ' + status; // Сдвигаем текст вправо.

if (status.length > 50) // Проверяем длину строки.

clearInterval(statusBarTimer); // Отменяем интервал.

}

var statusBarTimer = setInterval(move2Left, 100); // Сохраняем интервал в переменной.

Вы можете посмотреть, как же выполнится приведённый код.

Итак, у нас появилась «бегущая» строка. Правда, бегает она на «привязи» в 50 символов.

Строка «бежит» справа налево

Ну что, для движения слева направо мы дописывали пробелы. Для движения в противо­положную сторону, естественно, следует их убирать. Это не на много сложнее.

Давайте посмотрим на «сдвинутую» строку. Она начинается с пробелов. Если мы один из них уберём, строка сдвинется влево.

Метод «'строка'.indexOf('подстрока')» позволяет узнать, с какой позиции искомая подстрока встречается в указанной строке. Он возвращает номер символа, с которого начинается первое вхождение, если оно есть, или -1, если подстрока не встречается ни разу. Да, как всегда, считаем от нуля.

Метод «'строка'.substring(позиция)» возвращает подстроку, начинающуюся с указанной позиции, и до конца строки. Другими словами, этот метод позволяет откинуть первые символы строки.

Сведя воедино предыдущие абзацы (вернее, мысли, высказанные в них), получим вот такой код:

status = ' Текст строки состояния'; // Записываем текст в строку состояния.

function move2Right() { // Объявляем функцию.

if (status.indexOf(' ') == 0) // Нулевой символ — пробел?.

status = status.substring(1); // Откидываем нулевой символ.

else

clearInterval(statusBarTimer); // Отменяем интервал.

}

var statusBarTimer = setInterval(move2Right, 100); // Сохраняем интервал в переменной.

Вы можете посмотреть, как же выполнится приведённый код.

Вот и всё. Мы реализовали движение справа налево.

} else {

document.getElementById('paragraph-2').style.color = '#ffbb00'; // Меняем цвет текста на оранжевый.

document.getElementById('paragraph-2').style.backgroundColor = 'black'; // Меняем цвет фона на чёрный.

}

}

setInterval(blink, 750); // Запускаем функцию.

Вы можете посмотреть, как же выполнится приведённый код.

Теперь деление выше мигает.

Математические функции и перемещение элементов Математические функции

В ECMAScript существует специальный объект «Math», в котором собраны основные математические функции и константы. В таблицах ниже приведён список всех его методов и свойств.

В свойствах объекта Math представлены наиболее распространённые математические константы.

Методы объекта Math позволяют выполнять простейшие (для высшей математики, разумеется) вычисления над числами.

Например, код ниже выведет √π.

alert(Math.sqrt(Math.PI)); // Выводим √π.

Вы можете посмотреть, как же выполнится приведённый код.