Стать программистом. Часть 25. Основы JavaScript для абсолютных новичков!

Доброго времени суток, друзья!

В нашем прошлом уроке мы с Вами продолжили своё знакомство со встроенными в JavaScript объектами, и начали с самого основного объекта - window. Мы рассмотрели некоторые особенности этого объекта, привели практические примеры работы с ним, а также с его помощью разобрали такое фундаментальное понятие как Глобальные переменные и Глобальные функции.

Сегодняшней темой мы более плотно подойдем к взаимодействию JavaScript с HTML и СSS. Поэтому еще раз советую сначала обратить внимание на очень толковый курс по HTML от @qqc, в случае если вы не знаете принципов работы языка разметки гипертекста, а так же уроки по CSS также при авторстве @qqc, снова-таки в случае, если вы пока не имеете представления о каскадных таблицах стилей.

Ну а мы, как и раньше, маленькими шагами продолжаем движение вперед.

Урок 25. Встроенные функции и Объекты, Часть III. Document Object Model.

До сих пор мы с Вами рассматривали работу с JavaScript'ом как бы внутри самого языка. Мы не выходили за рамки самого кода, даже вывод результатов наших экспериментов мы осуществляли с помощью если можно так выразится чисто JavaScript'овым методом - alert(...);. Однако, одной из основных целей создания JavaScript'a являлось и является расширение возможностей поведения HTML и CSS. Другими словами, статический файл, который создается с помощью HTML и СSS можно сделать более привлекательным и удобным для потенциального пользователя, если использовать в этом деле JavaScript.

Посредником между JavaScript'ом c одной стороны и HTML с СSS с другой стороны выступает встроенный объект, название которого document.

Встроенный объект document.

Встроенный объект document предоставляет нам как программистам все необходимые свойства и методы для:

1. Выборки нужного нам элемента, расположенного в HTML разметке документа
2. Мониторинг активности пользователя на странице с HTML разметкой.
3. Изменение стилей представления (CSS) и поведения выбранного нами элемента по заданным критериям или после действий пользователя, которые мы смогли отследить.

Прежде чем разбирать все эти пункты подробнее, давайте откроем папку, в которой лежат наши Index.html и core.js и добавим к ним в компанию новый файл для стилей. Назовем этот файл - style.css. Примерно так:

Теперь нам надо сообщить нашему index.html файлу о его новом друге ответственном за визуальное представление style.css. Делается это следующим образом:

<link rel="stylesheet" type="text/css" href="style.css" />

Мы добавляем index.html запись, подчеркнутую оранжевой линией. Теперь мы сможем манипулировать видом элементов в index.html используя style.css. Для проверки работы добавим в style.css следующий код...

* {
    margin: 0;
    padding: 0;
}

body {
    background: #ccc;
}

...и обновим окно браузера, в котором у нас открыт Index.html. Мы должны увидеть, что фоновый цвет нашего документа поменялся с белого на серый. Вот так:

Цвет действительно поменялся. Значит мы все сделали правильно. Теперь давайте добавим несколько элементов в сам index.html документ, на примере которых мы и будем рассматривать пункты, перечисленные выше.

<h1>Квадрат</h1>
<div class="holder">
    <div id="square" class="html-element"></div>
</div>

 <h1>Круг</h1>
 <div class="holder">
    <div id="circle" class="html-element"></div>
 </div>

 <h1>Кнопки</h1>
 <div class="holder">
    <button id="js-square" class="button">квадрат</button>
    <button id="js-circle" class="button">круг</button>
 </div>

Ну а для того чтобы эти элементы приняли нужный для нас с Вами вид, мы добавим несколько стилей в файл style.css:

.holder {
    background: #fff;
    position: relative;
    padding: 30px;
    border: 1px solid #999;
    min-height: 150px;
}

.html-element {
    position: absolute;
    top: 5px;
    left: 5px;
    height: 80px;
    width: 80px;
}

.button {
    display: inline-block;
    width: 100px;
    height: 50px;
}

#square {
    background: #9F024D;
}

#circle {
    background: #4873BD;
    border-radius: 50%;
}

Благодаря этим "добавкам" наш index.html должен получить следующий вид:

Итак, теперь у нас есть квадрат, круг и аж две кнопки, с которыми мы можем теперь начать работать.

Выборка нужного нам элемента, расположенного в HTML разметке документа.

Для того чтобы начать манипулировать с каким-либо элементом в документе с HTML разметкой, нам нужно указать JavaScript'у на этот самый элемент HTML'я. Как я уже говорил ранее, указать на нужный HTML-элемент нам поможет встроенный JavaScript-объект document.

Сам объект document является Глобальным, то есть мы можем обращаться к нему по имени напрямую из любого места в коде. Так как document является именно объектом, логично предположить, что для выборки необходимого нам HTML-элемента, он обладает неким методом (функцией). На самом деле таких методов у него несколько. Начнем с самого простого:

Выборка по тэгу.

Каждый элемент расположенный в HTML документе имеет свой тэг. Например, интересующие нас элементы квадрата и круга были созданы с помощью тэга div (подчеркнуты оранжевой линией).

Мы можем воспользоваться этим и попробовать выбрать элементы по их тэгу. В объекте document за это отвечает метод под названием getElementsByTagName:

/* Объект document */
var elements = document.getElementsByTagName('div');

Мы создали переменную elements, в значение которой положим результат, который вернет метод getElementsByTagName. К самому методу мы получаем доступ через объект document и передаем в его аргумент строку с именем того тэга который нам нужен (мы определили, что это тэг div). Метод getElementsByTagName вернет на место своего вызова все элементы, которые ему удастся найти по заданному аргументу.

Чтобы посмотреть, что именно он нашел, нам придется заглянуть в саму переменную elements. Функции alert для такого "заглядывания" уже будет недостаточно, так как она не умеет показывать сложносоставные переменные в развернутом виде. Для этих целей нам потребуется другой способ просмотра наших результатов и поможет нам в этом уже знакомая нам из урока о профилировании вкладка Console.

Мы знаем, что когда мы создаем переменную так, как создали переменную elements, то она автоматически становится глобальным свойством объекта window. Так как оно глобальное мы можем достучаться к нему из любого места нашего кода. Console следит за исполнением нашего кода и имеет прямую связь с нашим файлом core.js. Все что есть в core.js все то же самое есть и в Console поэтому глобальная переменная elements (она же свойство объекта window) будет доступна и из Console. А вот Console уже умеет показывать любые переменные в развернутом виде. Воспользуемся этим свойством.

Откроем в окне с нашим index.html Console. Напоминаю, сделать это можно нажав клавишу F12 и обратимся в ней к нашей переменной elements.

Как видим результатом работы метода getElementsByTagName тал Массив с длинной в пять элементов.

Если поводить указателем мыши по этим элементам, то браузер подсветит нам какой именно элемент в массиве соответствует элементу в HTML разметке.

Как видим выборка по тэгу работает. Однако для наших нужд она работает слишком широко. То есть нам то надо выбрать только те элементы, которые нам надо (круг и квадрат) а выборка по тэгу соединила в себе вообще все элементы, которые были созданы с помощью тэга div.

Выборка по имени класса.

Как мы можем сузить параметры нашей выборки? Если мы внимательно посмотрим на элементы в нашей HTML разметке, то увидим, что только у интересующих нас круга и квадрата есть такое свойство как class (класс):

Видите, свойство класс и у квадрата, и у круга называется html-element. И так как этот класс присутствует только у нужных нам элементов, то мы смело можем этим воспользоваться для того чтобы выбрать только те HTML-элементы, которые мы хотим. Метод объекта document, который отвечает за выборку HTML-элементов по классу называется getElementsByClassName:

/* Объект document */

var elements = document.getElementsByClassName('html-element');

Обратите внимание что в аргумент метода getElementsByClassName мы передаем сроку с именем интересующего нас класса. Теперь же если мы пойдем в Console и посмотрим какой результат лежит в переменной elements, то увидим, что в результат по-прежнему вернулся Массив, но состоит он теперь только из двух элементов, что нам значительно удобнее, так как мы сузили нашу выборку исключительно до круга и до квадрата:

Однако, что мы будем делать в случае, когда нам нужно выбрать только лишь квадрат или только лишь круг? Мы с Вами конечно умеем работать с Массивами и можем догадаться что, используя выборку из предыдущего примера можем получить доступ к квадрату как elements[0] а к кругу - elements[1]. Примерно так:

Однако такой способ хорош, когда элементов на странице всего два (как в нашем случае). А если их будет тысяча? Поэтому неплохо бы иметь возможность сузить нашу выборку до одного, конкретно нужного нам элемента. Давайте посмотрим на наши HTML-элементы еще раз и постараемся найти в них нечто уникальное, то есть то что есть только у квадрата или то, что есть только у круга.

Обратите внимание что у наших HTML-элементов уникальные идентификаторы (подчеркнуты оранжевой линией). Эти идентификаторы присутствуют в HTML-разметке в единичном виде. Для квадрата это "square", для круга - "circle". То есть это те самые свойства, которые позволяют безошибочно выбрать либо квадрат, либо круг. Метод объекта document который может осуществлять выборку по идентификатору называется getElementById:

/* Объект document */
var square = document.getElementById('square');
var circle = document.getElementById('circle');

Обратите внимание метод getElementById так же принимает строку в свой аргумент. Строка должна содержать название нужного нам идентификатора. Мы создали две переменные. В переменную square положили результат выборки который вернет document.getElementById('square');, в переменную circle - результат работы document.getElementById('circle');

Проверим, что же нам вернулось, используя Console:

Как видим результатом такой выборки будет уже не Массив, а прямая ссылка на указанный нами HTML-элемент.

А на сегодня все.

Ссылки на предыдущие уроки:

Урок 1 - Окружение.,
Урок 2 - Некоторые особенности синтаксиса.,
Урок 3 - Переменные.,
Урок 4 - Типы переменных, как основа для их взаимодействия.,
Урок 5 - Операции с переменными одного типа.,
Урок 6 - Операции с переменными одного типа. Часть II.,
Урок 7 - Взаимодействие переменных с разными типами.,
Урок 8 - Взаимодействие переменных разного типа. часть II.,
Урок 9 - Взаимодействие переменных разного типа. Часть III.,
Урок 10 - Другие возможные взаимодействия между переменными.,
Урок 11 - Другие возможные взаимодействия между переменными. Часть II.,
Урок 12 - Другие возможные взаимодействия между переменными. Операторы присваивания.,
Урок 13 - Другие возможные взаимодействия между переменными. Операторы сравнения.,
Урок 14 - Сложные переменные. Array и Object.,
Урок 15 - Условные операторы.),
Урок 16 - Циклы.,
Урок 17 - Циклы. Часть II.,
Урок 18 - Функции.,
Урок 19 - Функции. Часть II.,
Урок 20 - Профилирование. Функции, часть III.,
Урок 21 - Функции, Часть IV. Аргументы.,
Урок 22 - Objects (Объекты).,
Урок 23 - Встроенные функции и объекты.,
Урок 24 - Встроенные функции и Объекты, Часть II. Глобальные функции и переменные.