9 янв. 2015 г.

Связь HTML-элементов с программой

Взаимодействие между элементами на экране и программой крайне необходимо для создания игр. Например, когда игрок нажимает кнопки движения, должна выполниться соответствующая программа. Если “влево”, игровой персонаж должен двинуться влево. Программа должна взять нужный элемент и подвинуть его.

Ранее мы уже делали запуск кусочка программы из HTML-элементов:
onmouseover="..." код в кавычках запустится, когда курсор мыши окажется над элементом,
onclick="..." а тут код запустится при клике по элементу.

 
Есть и другие свойства свойства HTML-элементов, позволяющие вызывать кусочки кода. Эти вызовы происходят в ответ на действия человека (клики, нажатия клавиш и т.д.). HTML-элементы “ловят” происходящие изменения и вызывают Javascript. Но нам также нужна связь в другую сторону менять HTML из программы.

Самый простой способ “взять” HTML-элемент программой через свойство тега id. Это свойство дает элементу уникальное имя (идентификатор). По этому имени программа и будет находить нужные элементы. Если вдруг окажется два элемента с таким уникальным id, в программе возникнет ошибка.



Итак, придумываем уникальное название (например, “bomba”) и в теге указываем свойство id="bomba", а в Javascript-программе пишем:
document.getElementById('bomba')
и можем делать с элементом все что захочется.

Обратите внимание на точку в этом коде. Она означает вложенность: вначале программа обращается ко всему документу (document) потом в нем находит нужный элемент (getElementById('bomba')), а когда мы будем менять элементу стили, например, цвет шрифта на зеленый, мы опять напишем точку и название нужного параметра (стиль): document.getElementById('bomba').style Потом опять через точку мы возьмем из стиля свойство .color (или любое другое) и присвоим новое значение, получится:
document.getElementById('bomba').style.color = 'green'

Смотрим на практике. Откройте недавний файл tag-test.html и добавьте к тегу <a> свойство id c именем elementik и получится так:
<a id="elementik" href="http://yandex.ru" style="color: red; font-size: 30px" onmouseover="alert('ya ya');">Test</a>

Опять напомню, что зеленым цветом выделен код HTML, желтым CSS-стили, а красным код программ Javascript.

Откройте файл в браузере и посмотрите, что получилось. Все должно было остаться таким как и было ;). Откройте консоль для того, чтобы с помощью программы изменить элемент страницы.

Пишем поочереди команды в консоли и смотрим, что получается:

document.getElementById('elementik').style.color = 'blue';
//изменится цвет ссылки на синий


Самостоятельно попробуйте другие цвета: green, yellow, orange, gray, magenta.

Теперь увеличим шрифт с помощью свойства стилей font-size. Обратите внимание на способ изменения этого свойства из программы. Дефис убирается, а второе слово пишется с большой буквы: .fontSize.


document.getElementById('elementik').style.fontSize = '60px';
//изменится размер шрифта

Для создания игр осталось совсем немного научиться двигать HTML-элементы. Один из способов увеличить боковой отступ слева. В стилях это свойство называется margin-left, а в программе (в консоли) мы напишем .marginLeft: document.getElementById('elementik').style.marginLeft = '100px';

Попробуйте 200px, 300px. Не забывайте про удобный способ в консоли вытащить предыдущую команду стрелочка “вверх”.

Давайте закрепим пройденный материал. Создайте новый html-файл со следующим кодом:


<span id="mordochka"> 8-) </span>
<!-- span — это тег для обычного текста -->
<button onclick=" document.getElementById('mordochka').style.background = 'red';"> red </button>


Где тут HTML-код? Где кусочек программы? В какой момент сработает кусочек программы?

Следующий урок >>

24 комментария:

  1. Читаю с довольствием. Спасибо за хорошее описание и понятный, не сухой язык.

    ОтветитьУдалить
    Ответы
    1. Спасибо за отзыв) А напишите свой возраст?

      Удалить
    2. Мне 37 лет. Понимаю не под эту категорию вы пишете, но мне как начинающему осваивать программирование на JS было весьма полезно прочитать вашу статью. Хотелось бы, чтобы вы еще озвучили список достойных книг. Жду с нетерпением продолжения.

      Удалить
  2. хотелось бы видеть структурированный красивы код, приучайте учеников писать код красивым

    ОтветитьУдалить
    Ответы
    1. Безусловно, Вы правы - в дальнейшем займусь этим. Пока другие приоритеты.

      Удалить
  3. Мне 27.Вы делаете Тера дело! Желаю не угасать мыслями и идеями к этому проекту ну и конечно надеюсь найдутся помощники для вашей Гига-идеи!

    ОтветитьУдалить
  4. Этот комментарий был удален автором.

    ОтветитьУдалить
    Ответы
    1. Первую часть закончил, усвою еще разок все и перейду во вторую.)

      Удалить
  5. Здравствуйте! Подскажите можно ли как нибудь настроить notepad++ чтобы он подсвечивал код такими же цветами как и у вас?

    ОтветитьУдалить
    Ответы
    1. Не знаю, но мне кажется это излишним. Главное, что при чтении было понятно где сценарий, где html-элементы и где css-оформление.

      Удалить
  6. Этот комментарий был удален автором.

    ОтветитьУдалить
  7. Этот комментарий был удален автором.

    ОтветитьУдалить
  8. Прошу , сделайте пожалуйста видео к этому и другим урокам по возможности .

    ОтветитьУдалить
    Ответы
    1. Видео в планах. А что именно надо сделать более наглядным?

      Удалить
    2. Например куда и как вы заменяете коды , где находятся теги и многое другое . Просто многим новичкам как я может быть непонятно.Сделайте уж пожалуйста видео. Заранее спасибо.

      Удалить
    3. Посмотрите вот этот видео-урок http://www.youtube.com/watch?v=-1FcaKnRTyg - стало понятнее?

      Удалить
  9. Этот комментарий был удален автором.

    ОтветитьУдалить
  10. Не пойму в чём ошибка, прост помудрить решил
    a id="elementik" href="http://yandex.ru" style="color: red; font-size: 30px"
    onmouseover="alert('ya ya');" SDK /a

    button onclick=" document.getElementById('elemntik').style.color = 'yellow' " Golden /button

    ОтветитьУдалить
  11. Мне 14 лет. Читаю все хорошо написано понятно иногда бывают вопросы но через минуту доходит продолжайте в том же духе!

    ОтветитьУдалить
    Ответы
    1. Спасибо большое) Пишите вопросы и пожелания о дальнейших уроках - может не сразу, но обязательно отвечу и постараюсь улучшить учебник.

      Удалить
  12. Мне 12 но я всё понимаю. СПАСИБО

    ОтветитьУдалить