Программирование / Заочники / Высокоуровневые методы / JavaScript_Урок 1

Урок 1: Работа с DOM-структурой документа

Основная цель урока.

1.Научиться пользоваться консолью разработчика Google

2.Научиться использовать создавать и добавлять новые элементы в DOM-

структуру документа

Учебное задание 1.

Написать JavaScript – « Бегущая строка».

Технология выполнения учебного задания 1.

Шаг 1.Создайте новый текстовый файл Lab.txt и переименуйте его в html.

Шаг 2. Откройте Lab.html с помощью Gooogle Chrome.

Шаг 3. На произвольном участке документа нажмите правым кликом и выберите из контекстного меню « Показать код элемента». В открывшемся окне перейдите на закладку Console. В этой консоли мы будем писать код – он будет тут же исполняться. Когда код будет отлажен и заработает, как задумывалось – перенесём его в Lab.html.

Шаг 4. Т.к. мы открыли пустую html страницу DOM-структура документа не содержит ни одного элемента (кроме базовых html и body, их GoogleChrome создаёт сам).

Создадим новый элемент div:

var newEl = document.createElement("div");

Для этого, чтобы посмотреть содержимое любой переменной/объекта достаточно написать имя этой переменной/объекта в консоли и нажать Enter.

newEl

Шаг 5. Элемент создан, но пока не добавлен в структуру DOM-страницы. Добавим его в тег body с помощью метода appendChild:

document.body.appendChild(newEl);

Переключитесь на закладку Elements (в консоли разработчика), в структуре документа должен появиться новый элемент – тег div (рисунок 1).

Рисунок 1. Добавленный элемент div

Шаг 6. На станице этот тег не заметно, потому что он не имеет никакого содержимого. Добавим в качестве содержимого тега строку “Hello!” (это так же может быть другой тег или даже группа тегов):

newEl.innerHTML = "Hello!";

Важно: JavaScript чувствителен к регистру и если вы напишете свойство innerHTML

(или любое другой свойство) с ошибкой, например с большой буквы, то будет создано новое свойство с таким именем. Пример:

newEl.innerHTML = "Hello!";

newEl.InnerHTML = "Hi!";

Элемент newEl теперь содержит innerHTML = "Hello!" и InnerHTML = "Hi!", в браузере будет отображаться строка "Hello!"

Шаг 7. По умолчанию для всех тегов их положение задаётся относительно текущего тега-контейнера (в нашем случае тега body). Т.е. нельзя задать положение элемента явно в виде пары координат (x,y), как это было в C#/Windows Forms. Однако, если изменить свойство style.position на “absolute” (абсолютное позиционирование), то можно задавать координаты элемента через свойства left и top (они так же находятся в свойстве style).

newEl.style.position = "absolute";

для проверки изменим свойство left

newEl.style.left = "150px";

Элемент должен сместиться на 150 пикселов вправо. Обратите внимание, что свойство left это строка, если присвоить это свойство просто числу 150, то ничего не изменится. Буквы px в конце строки означают « пикселы», так же могут быть дюймы

(in), пункты (pt) и проценты (%).

Шаг 8. Для того чтобы элемент перемещался нужно воспользоваться функцией setTimeout и каждые N миллисекунд вызывать функцию, которая будет менять свойство left.

Но left это строка, поэтому если мы напишем следующее:

newEl.style.left = newEl.style.left + 10;

то получим, что newEl.style.left будет равно «150px10», а не «160px», как хотелось бы. Для того чтобы обойти это есть 2 пути:

1.создать отдельное вспомогательное свойство для тега (например posX).

2.преобразовывать style.left в число с помощью функции

(parseInt("150px") будет равно числу 150).

Воспользуемся 1-ым способом, создадим новое свойство:

newEl.posX = 0;

Далее напишем функцию, которая будет работать как таймер (для переноса на новую строку использовать сочетание клавиш Shift+Enter):

function funcTimer()

{

newEl.posX = newEl.posX + 5; newEl.style.left = newEl.posX + "px"; if (newEl.posX > 800) newEl.posX = 0;

// функция вызывает сама себя через 100 миллисекунд setTimeout(funcTimer, 100);

}

Шаг 9.

Теперь для того, чтобы запустить бегущую строку достаточно 1 раз вызвать функцию funcTimer:

funcTimer();

Шаг 10. Перенесём получившийся код в Lab1.html. Для начала создадим пустой

HTML-файл с корректной структурой (листинг 1).

<!DOCTYPE html> <html>

<head>

<title>Название страницы </title> </head>

<body>

</body>

</html>

Листинг 1. Шаблон пустого HTML-файла (Lab1.html).

Далее вставим наш скрипт. JavaScript-код в HTML документах заключаются в тег

<script>, иначе он будет выведен на страницу как текст.

<!DOCTYPE html>

<html>

<head>

<title>Название страницы </title> </head>

<body>

<script type="text/javascript">

var newEl = document.createElement("div");

document.body.appendChild(newEl); newEl.innerHTML = "Hello!";

newEl.style.position = "absolute";

newEl.posX = 0;

function funcTimer()

{

newEl.posX = newEl.posX + 5; newEl.style.left = newEl.posX + "px"; if (newEl.posX > 800) newEl.posX = 0;

// функция вызывает сама себя через 50 миллисекунд setTimeout(funcTimer, 50);

}

funcTimer();

</script>

</body>

</html>

Листинг 2. Код бегущей строки (Lab1.html).

Шаг 11. Небольшое улучшение – тег div можно создать и в HTML документе, это будет проще, уменьшит количество JavaScript-кода, а значит и потенциальное количество возможных ошибок. Если элемент уже создан его можно найти с помощью функции getElementById.

<!DOCTYPE html> <html>

<head>

<title>Название страницы </title> </head>

<body>

<div id="myDiv" style="position:absolute">Hello!</div>

<script type="text/javascript">

var newEl = document.getElementById("myDiv"); newEl.posX = 0;

function funcTimer()

{

newEl.posX = newEl.posX + 5; newEl.style.left = newEl.posX + "px"; if (newEl.posX > 800) newEl.posX = 0;

// функция вызывает сама себя через 50 миллисекунд setTimeout(funcTimer, 50);

}

funcTimer();

</script>

</body>

</html>

Листинг 2. Код бегущей строки (Lab1.html).

Шаг 12. В случае возникновения ошибок в JavaScript-е они будут выведены в консоль разработчика. Попробуйте допустить какую-нибудь ошибку (например

вызывать не метод getElementById, а getElementByIdaaaa), обновить страницу и

посмотреть что будет выводиться в браузере и как будет выглядеть сообщение об ошибке в консоли разработчика.

Самостоятельное задание 1.

Написать JavaScript, который будет имитировать движение гоночных машинок с разной скоростью (минимум 2 машинки).

Подсказки по реализации:

∙Чтобы отображалась картинка, нужно вместо строчки Hello вставить тег img с ссылкой на картинку (справка по тегу img: google-запрос img html).

∙Для того чтобы у каждого элемента была своя скорость можно добавить свойство speed (и даже acceleration\« ускорение»).

∙Изменить координату y можно через свойство style.top

∙Скорость можно ставить случайно с помощью функции Math.random

∙Чтобы вызвать функцию, переданную в setTimeout, с параметрами можно

воспользоваться следующим приёмом:

var a;

// без параметров setTimeout(targetFunction, 50);

// c параметром a

setTimeout(function() { targetFunction(a); }, 50);

Доп. задание (+5 баллов):

Машинок должно быть не менее 8. Когда одна из машинок приходит к финишу первой (финиш условное значение, например 800), все машины останавливаются и отображается сообщение, что машина с номером таким-то пришла первой

(отображение сообщения через alert). После этого координаты всех машин обнуляются, скорость генерируется случайным образом и всё начинается сначала.