Взаимодействие между элементами на экране и программой крайне необходимо для создания игр. Например, когда игрок нажимает кнопки движения, должна выполниться соответствующая программа. Если “влево”, игровой персонаж должен двинуться влево. Программа должна взять нужный элемент и подвинуть его.
Ранее мы уже делали запуск кусочка программы из 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-элементов:
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 и получится так:
Опять напомню, что зеленым цветом выделен код 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-код? Где кусочек программы? В какой момент сработает кусочек программы?
Читаю с довольствием. Спасибо за хорошее описание и понятный, не сухой язык.
ОтветитьУдалитьСпасибо за отзыв) А напишите свой возраст?
УдалитьМне 37 лет. Понимаю не под эту категорию вы пишете, но мне как начинающему осваивать программирование на JS было весьма полезно прочитать вашу статью. Хотелось бы, чтобы вы еще озвучили список достойных книг. Жду с нетерпением продолжения.
Удалитьхотелось бы видеть структурированный красивы код, приучайте учеников писать код красивым
ОтветитьУдалитьБезусловно, Вы правы - в дальнейшем займусь этим. Пока другие приоритеты.
УдалитьМне 27.Вы делаете Тера дело! Желаю не угасать мыслями и идеями к этому проекту ну и конечно надеюсь найдутся помощники для вашей Гига-идеи!
ОтветитьУдалитьСпасибо! Вы уже все уроки прошли?
УдалитьЭтот комментарий был удален автором.
ОтветитьУдалитьПервую часть закончил, усвою еще разок все и перейду во вторую.)
УдалитьЗдравствуйте! Подскажите можно ли как нибудь настроить notepad++ чтобы он подсвечивал код такими же цветами как и у вас?
ОтветитьУдалитьНе знаю, но мне кажется это излишним. Главное, что при чтении было понятно где сценарий, где html-элементы и где css-оформление.
УдалитьСкачай Sublime Text (3) там есть подсветка
УдалитьЭтот комментарий был удален автором.
ОтветитьУдалитьЭтот комментарий был удален автором.
ОтветитьУдалитьПрошу , сделайте пожалуйста видео к этому и другим урокам по возможности .
ОтветитьУдалитьВидео в планах. А что именно надо сделать более наглядным?
УдалитьНапример куда и как вы заменяете коды , где находятся теги и многое другое . Просто многим новичкам как я может быть непонятно.Сделайте уж пожалуйста видео. Заранее спасибо.
УдалитьПосмотрите вот этот видео-урок http://www.youtube.com/watch?v=-1FcaKnRTyg - стало понятнее?
УдалитьА что такое "кусочек программи" в конце урока?
УдалитьЭтот комментарий был удален автором.
ОтветитьУдалитьНе пойму в чём ошибка, прост помудрить решил
ОтветитьУдалить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
Всё додумался
УдалитьВсё из-за кавычек
УдалитьА что не работало?
УдалитьМне 14 лет. Читаю все хорошо написано понятно иногда бывают вопросы но через минуту доходит продолжайте в том же духе!
ОтветитьУдалитьСпасибо большое) Пишите вопросы и пожелания о дальнейших уроках - может не сразу, но обязательно отвечу и постараюсь улучшить учебник.
УдалитьМне 12 но я всё понимаю. СПАСИБО
ОтветитьУдалитьМне 40)) спасибо!
ОтветитьУдалить