24.07.2023 08:01
smart_alex 2 870 Источник


От переводчика. Разбор работы непосредственно веб-серверов на Arduino закончен автором в предыдущих статьях, но остались нераскрытыми различные тонкости формирования дизайна и работы самих веб-страниц.

В этом уроке автор «расставляет по полочкам» методы получения доступа к различным HTML элементам при помощи CSS и JavaScript и подробно объясняет механизмы управления внешним видом страниц.

В этой статье подробно разбирается как можно получить доступ к HTML элементам (тегам) с помощью CSS и JavaScript, чтобы применить к ним CSS стили и управлять этими элементами с помощью JavaScript. Также в этом уроке объясняется как ссылаться на HTML теги, используя идентификаторы и имена классов.

❯ Запуск примеров


Каждый из нижеприведенных примеров можно скопировать и сохранить в виде HTML файла (например, index.htm). Затем, если это необходимо, файл можно загрузить в Arduino следуя примеру из 2-й части этого руководства.

Также эти примеры можно открыть на компьютере в веб-браузере напрямую, без использования Arduino.

❯ Доступ к HTML элементам


К HTML элементам сначала необходимо получить доступ, чтобы к ним можно было применить CSS стили и чтобы ими можно было манипулировать при помощи JavaScript.

Доступ к HTML элементам в CSS


Существует три основных метода доступа или ссылки на HTML элементы в CSS:

  • Ссылка на HTML элемент по имени его тега, например, p для ссылки на тег абзаца <p>
  • Используя идентификатор (id), например, <p id=«red_text»>текст...</p>
  • С помощью класса (class), например, <p class=«red_text»>текст...</p>

Комбинация вышеуказанных методов также может использоваться для доступа к HTML элементу.

Теперь мы рассмотрим примеры для каждого из перечисленных методов.

Ссылка по имени HTML элемента


Этот метод уже был продемонстрирован в 10-й части этого руководства, а также использовался в 14-й части (предыдущей).

<!DOCTYPE html>
<html>
    <head>
        <title>Arduino SD Card Web Page</title>
        <style type="text/css">
            p {
                font-family: arial, verdana, sans-serif;
                font-size: 12pt;
                color: #6B6BD7;
            }
        </style>
    </head>
    <body>
        <h1>Arduino SD Card Page with CSS</h1>
        <p>Welcome to the Arduino web page with CSS styling.</p>
    </body>
</html>

В вышеприведенном коде страницы CSS стили применяется к каждому абзацу. Это делается путем задания стилей по имени HTML элемента p:



Подобным образом CSS стили можно применять к любым другим HTML элементам, ссылаясь на имена их HTML тегов, например, h1, h2, h3, div, span и т. д.

Этот метод используется для установки стилей по умолчанию для HTML элементов на странице и эти стили можно переопределить, назначив HTML элементу идентификатор или имя класса.

Ссылка по идентификатору (ID)


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

В этом примере демонстрируется использование идентификатора:

<!DOCTYPE html>
<html>
    <head>
        <title>Arduino SD Card Web Page</title>
        <style type="text/css">
            h1 {
                font-family: arial, verdana, sans-serif;
                font-size: 16pt;
                color: blue;
            }
            p {
                font-family: arial, verdana, sans-serif;
                font-size: 12pt;
                color: #6B6BD7;
            }
            #green_small {
                font-size: 9pt;
                color: green;
            }
        </style>
    </head>
    <body>
        <h1>Arduino SD Card Page with CSS</h1>
        <p>Welcome to the Arduino web page with CSS styling.</p>
        <p id="green_small">This is a second paragraph.</p>
        <p>This is a third paragraph.</p>
    </body>
</html>

Приведенный выше код при загрузке в браузере создает следующий текст на веб-странице:



Как видно из вышеприведенного кода, в CSS для обозначения идентификатора используется символ # перед его названием:



Затем этот стиль применяется к HTML элементу с этим идентификатором:

<p id="green_small">This is a second paragraph.</p>

Поскольку это идентификатор, то его нельзя использовать повторно на веб-странице. Для выделения других элементов можно использовать другие идентификаторы, но каждый из них должен быть уникальным.

Также обратите внимание, что идентификатор переопределяет стиль p по умолчанию, который применяется ко всем абзацам. Другие абзацы, не имеющие идентификатора, форматируются с использованием стиля абзаца по умолчанию.

Ссылка по классу


Класс (class) работает так же, как идентификатор, за исключением того, что его можно использовать более одного раза на веб-странице. Для обозначения класса в CSS используется точка (.) перед именем, чтобы показать, что это класс, а не к идентификатор или HTML элемент.

В следующем примере показано, как применить CSS стили к HTML элементам, имеющим имена классов.

<!DOCTYPE html>
<html>
    <head>
        <title>Arduino SD Card Web Page</title>
        <style type="text/css">
            h1 {
                font-family: arial, verdana, sans-serif;
                font-size: 16pt;
                color: blue;
            }
            p {
                font-family: arial, verdana, sans-serif;
                font-size: 12pt;
                color: #6B6BD7;
            }
            .red_big {
                font-size: 14pt;
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>Arduino SD Card Page with <span class="red_big">CSS</span></h1>
        <p>Welcome to the <span class="red_big">Arduino</span> web page
with <span class="red_big">CSS styling</span>.</p>
        <p>This is a second paragraph.</p>
        <p class="red_big">This is a third paragraph.</p>
    </body>
</html>

Вышеприведенная выше разметка создает следующую веб-страницу:



Обратите внимание, что стиль класса был применен как к HTML тегу span, так и к HTML тегу p (абзацу). Стиль, применяемый к HTML элементам, имеющим имена классов, переопределяет стиль этих элементов по умолчанию.

CSS стиль, применённый к HTML элементам с именем класса red_big, можно увидеть ниже. Точка используется, чтобы показать, что он относится к классу:



Смешивание методов доступа


Один и тот же CSS стиль можно применить к нескольким HTML элементам. К HTML элементам также можно обращаться более адресно, например, только к абзацам внутри определённого элемента div. Пример такого подхода:

<html>
    <head>
        <title>Arduino SD Card Web Page</title>
        <style type="text/css">
            h1, p {
                font-family: arial, verdana, sans-serif;
                color: cyan;
            }
            h1 {
                font-size: 16pt;
            }
            p {
                font-size: 12pt;
            }
            div p {
                font-style: italic;
                letter-spacing: 5px;
            }
        </style>
    </head>
    <body>
        <h1>Arduino SD Card Page with CSS</h1>
        <p>Welcome to the Arduino web page with CSS styling.</p>
        <div><p>This is a second paragraph.</p></div>
        <p>This is a third paragraph.</p>
        <div><p>This is a fourth paragraph.</p></div>
    </body>
</html>

Если в CSS стиле есть имена HTML тегов, имена идентификаторов или имена классов, разделенные запятой, то этот стиль применяется к каждому из этих элементов.

Следующий CSS стиль применяется как к тегу h1, так и к тегу p и определяет семейство шрифтов для обоих, а также цвет шрифта:



В вышеприведенном HTML коде размер шрифта для тега h1 и абзаца (p) указываются отдельно.

Если в CSS стиле есть имена HTML тегов, имена идентификаторов или имена классов, не разделенные запятой, то стиль применяется к элементам по мере их появления друг в друге. В приведенном выше HTML коде CSS стиль применяется к каждому абзацу, который встречается в HTML элементе div.



Приведенный выше стиль делает шрифт курсивом и разделяет буквы на 5 пикселей в каждом абзаце, который встречается внутри div.

Доступ к HTML элементам в JavaScript


Идентификаторы и имена классов позволяют JavaScript получить доступ к HTML элементам, чтобы изменять их или манипулировать ими.

Если вы следили за каждой частью этого руководства, то уже знакомы с методами доступа к HTML элементам с помощью JavaScript.

Доступ к HTML элементам с идентификаторами в JavaScript


В следующем примере показано, как из JavaScript получить доступ к HTML элементу с именем ID:

<!DOCTYPE html>
<html>
    <head>
        <title>Arduino SD Card Web Page</title>
        <script>
            var btn_count = 0;
            function ButtonCount()
            {
                btn_count++;
                document.getElementById("btn_clicks").innerHTML = btn_count;
            }
        </script>
    </head>
    <body>
        <h1>Arduino SD Card Page with JavaScript</h1>
        <button type="button" onclick="ButtonCount()">Click to Count</button>
        <p>The button has been clicked <span id="btn_clicks">0</span> times.</p>
    </body>
</html>

В этом видео показана вышеприведенная страница с JavaScript кодом, работающим в браузере:

JavaScript функция ButtonCount() вызывается каждый раз, когда нажимается кнопка и добавляет 1 к переменной btn_count.

JavaScript получает HTML тег span с идентификатором btn_clicks, используя следующий код:

document.getElementById("btn_clicks").innerHTML = btn_count;

Который обращается к span в этой HTML строке:

<p>The button has been clicked <span id="btn_clicks">0</span> times.</p>

Текущее значение btn_count затем вставляется в этот span.

Не забывайте, что только один элемент на странице может использовать идентификатор с именем btn_clicks.

Доступ к элементам HTML по именам классов в JavaScript


Следующий код обращается к HTML тегам с одинаковым именем класса:

<!DOCTYPE html>
<html>
    <head>
        <title>Arduino SD Card Web Page</title>
        <script>
            var btn_count = 0;
            var btn_count_0 = 0;
            var num_classes = 0;
            function ButtonCount()
            {
                btn_count++;
                document.getElementsByClassName("btn_clicks")[0].innerHTML = btn_count;
                document.getElementsByClassName("btn_clicks")[1].innerHTML = btn_count_0;
                btn_count_0++;
                // get the number of btn_clicks classes on the page
                document.getElementById("btn_classes").innerHTML =
                                    document.getElementsByClassName("btn_clicks").length;
            }
        </script>
    </head>
    <body>
        <h1>Arduino SD Card Page with JavaScript</h1>
        <button type="button" onclick="ButtonCount()">Click to Count</button>
        <p>The button has been clicked <span class="btn_clicks">0</span> times.</p>
        <p>Or counting from 0 clicked <span class="btn_clicks">?</span> times.</p>
        <p>Number of "btn_clicks" classes on page: <span id="btn_classes"></span></p>
    </body>
</html>

В этом видео показана работа приведенной выше HTML страницы:

Два HTML тега span имеют одно и то же имя класса (btn_clicks). Доступ к ним демонстрируют следующие строки JavaScript кода:

document.getElementsByClassName("btn_clicks")[0].innerHTML = btn_count;
document.getElementsByClassName("btn_clicks")[1].innerHTML = btn_count_0;

Количество HTML тегов на странице, использующих имя класса btn_clicks, можно получить с помощью следующего кода:

document.getElementsByClassName("btn_clicks").length;

При необходимости к каждому тегу с этим именем класса можно получить доступ в цикле.

Доступ к HTML тегам с одинаковым именем класса осуществляется в порядке их появления на странице, сверху вниз.

❯ От переводчика о 15-й части


Говоря совсем простыми словами, есть набор стандартных тегов (p, h1, h2 и т. д.), которым можно присвоить либо уникальный идентификатор (id), либо групповой (class) и затем при помощи этих идентификаторов получать доступ к этим элементам и управлять их внешним видом и работой.

Всё остальное (в этой статье) — это описание формальных правил и методов для подобных манипуляций при помощи CSS и JavaScript.

Часть 1, часть 2, часть 3, часть 4, часть 5, часть 6, часть 7, часть 8, часть 9, часть 10, часть 11, часть 12, часть 13, часть 14.

Комментарии (2)


  1. anegin
    25.07.2023 18:32
    #25787160

    Хаб "Разработка под Android" - тут лишний


    1. smart_alex Автор
      25.07.2023 18:32
      #25787192
      +1

      Пардон, промахнулся когда публиковал статью — спасибо, что заметили — исправил.