Javascript Урок 1

Автор: | 04.06.2016
Нет комментариев

Назначение обработчика onclick.

Для того, чтобы скрипт реагировал на событие — нужно назначить хотя бы одну функцию-обработчик. Обычно обработчики называют «on+имя события», например: onclick.

Существует несколько способов назначать обработчик на конкретное событие элемента. Все они представлены ниже. Обработчик события можно указать в виде inline-записи, прямо в атрибуте onсобытие. Например, для обработки события click на кнопке input, можно назначить обработчик onclick вот так:

<input id="b1" value="Нажми Меня" onclick="alert('Спасибо!');" type="button"/>

Второй вариант когда обработчик задается в виде функции:

div class='box' onclick="boxclick('yellow')"> Кликни по мне</div>
<script>
  function boxclick(color)
    {
    mybody=document.getElementById('b');
    mybody.style.backgroundColor=color;
    mybody.style.color='white';
    

    //alert("Вы кликнули по тегу Div");
    }
</script>

В этом случае скрипт может быть очень большим и не будет мешать восприятию HTML кода.

Для того чтобы воздействовать на объекты и менять их в функциях нам необходимо назначить id для каждого элемента и в коде получить этот элемент используя функцию document.getElementById('myElement')

и затем изменить нужный атрибут или стиль.

mybody=document.getElementById('b');
    mybody.style.backgroundColor=color;
    mybody.style.color='white';

Для выполнения последовательных действий в javascript используются таймеры. Для управления таймером необходимо выполнить функцию  setInterval(sec, 10) или setTimeout(sec,10). Первый параметр это имя функции которая запустится и второй параметр это интервал в миллисекундах. Функция setInterval задает интервал выполнения и будет выполнятся непрерывно, а setTimeout выполнит функцию одни раз через интервал указанный вторым параметром.

setInterval(sec, 10);
setTimeout(sec,10);
<html>

<head>
  <meta charset='utf-8'>
  <script>
  function boxclick(color)
    {
    mybody=document.getElementById('b');
    mybody.style.backgroundColor=color;
    mybody.style.color='white';
    

    //alert("Вы кликнули по тегу Div");
    }
  top1=400;
  left1=400;
  function up()
  {
  
  mode='up';
  }
  
  
  function sec()
  {
  if(mode=='up')
    {
    top1=top1-1;
    mydiv=document.getElementById('control');
    mydiv.style.top=top1+'px';
    }
  }
  
  setInterval(sec, 10);
  </script>
  <style>
  .box
    {
    width:100px;
    height:100px;
    background-color:yellow;
    }
  .box1
    {
    width:100px;
    height:100px;
    background-color:red;
    }
  .box2
    {
    width:100px;
    height:100px;
    background-color:green;
    }
  .box3
    {
    width:100px;
    height:100px;
    background-color:blue;
    }
    .up
    {
    position:absolute;
    top:0px;
    left:100px;
    width:100px;
    height:100px;
    background-color:yellow;
    }
    .down
    {
    position:absolute;
    top:200px;
    left:100px;
    width:100px;
    height:100px;
    background-color:yellow;
    }
    .left
    {
    position:absolute;
    top:100px;
    left:0px;
    width:100px;
    height:100px;
    background-color:yellow;
    }
  .right
    {
    position:absolute;
    top:100px;
    left:200px;
    width:100px;
    height:100px;
    background-color:yellow;
    }
  .control
    {
    position:absolute;
    top:400px;
    left:400px;
    width:100px;
    height:100px;
    background-color:red;
    }

  </style>
</head>

<body id='b'>
Текст Текст Текст Текст Текст 

<!--div class='box' onclick="boxclick('yellow')"> Кликни по мне</div>
<div class='box1' onclick="boxclick('red')"> Кликни по мне</div>
<div class='box2' onclick="boxclick('green')"> Кликни по мне</div>
<div class='box3' onclick="finction(){alert(123)}"> Кликни по мне</div>
-->
<div class='up' onclick='up()' >Вверх</div>
<div class='left'>Налево</div>
<div class='right'>Направо</div>
<div class='down'>Низ</div>
<div class='control' id='control'></div>
</body>

</html>

Листинг примера программы которая демонстрирует работу с таймером и использование обработчика onclick

Задания для самостоятельной работы.

  1. Используя таймер сделать светофор.
  2. Сделать к светофору кнопку для вызова зеленого света.
  3. Используя таймер сделать изменяющийся цвет body.