9 янв. 2015 г.

Связь HTML и JS: практика

Создайте новый html-файл с кодом:

<script>
otstupSleva = 0
</script>

<button onclick="otstupSleva += 10; document.getElementById('mordochka').style.marginLeft = otstupSleva;"> Napravo </button>

<button onclick="otstupSleva -= 10; document.getElementById('mordochka').style.marginLeft = otstupSleva;"> Nalevo </button>



<div id="mordochka">=o===o=</div>


Пояснение к коду:
<script> — это тег для хранения программы;
+= 10 — эта команда означает, что информацию внутри переменной надо увеличить на 10;
-= 10 — эта команда означает “уменьшить на 10”;
marginLeft — эта изменение с помощью программы CSS-свойства margin-left (отступ слева);

1. Задайте элементу <div id="mordochka">=o===o=</div> стиль верхнего отступа margin-top: 100px добавив свойство style к тегу.
2. Добавьте новую кнопку, клик по которой будет программно устанавливать верхний отступ элемента “mordochka” .marginTop = 200px. Текст внутри кнопки — любой.

Посмотрите более сложный вариант и постарайтесь разобраться в нем самостоятельно.

Следующая часть >>



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

  1. Что я делаю не так? Где ошибка? "<" и ">" убрал, иначе пишет, что недопустимый тег

    script
    otstupSleva = 0
    /script

    script
    otstupSverkhu = 0
    /script

    span margin-top: 100px; id="1"∧_∧/span

    button onclick="otstupSleva += 10; document.getElementById('1').style.marginLeft = otstupSleva;" > /button

    button onclick="otstupSleva -= 10; document.getElementById('1').style.marginLeft = otstupSleva;" < /button

    button onclick="otstupSverkhu += 10; document.getElementById('1').style.marginTop = otstupSverkhu;" \/ /button

    ОтветитьУдалить
    Ответы
    1. На первый взгляд, все правильно. Попробуйте id сделать буквенный, а не цифру.

      Удалить
  2. у меня тоже не получается! дайте подсказку! И будет ли продолжение учебника?

    ОтветитьУдалить
    Ответы
    1. Продолжение учебника уже есть, публикую понемногу. А что именно не получается?

      Удалить
  3. Здравствуйте! Большое спасибо за уроки! С нетерпением жду следующих!
    Но у меня что-то не получается с кодом. Не получается ни отступ сверху сделать, ни новую работающую кнопку (кнопка появляется, но не работает). Подскажите, что не так, пожалуйста. ">","<" также пришлось убрать для комментария.

    script otstupSleva = 0 /script
    span id="mordochka" style="margin-top: 100px;" =o===o=/span
    button onclick="document.getElementById('mordochka').style.marginTop=200 px;" otstup /button
    button onclick="otstupSleva +=10; document.getElementById('mordochka').style.marginLeft=otstupSleva;" Napravo /button
    button onclick="otstupSleva -=10; document.getElementById('mordochka').style.marginLeft=otstupSleva;" Nalevo /button

    ОтветитьУдалить
    Ответы
    1. Спасибо за комментарии, они помогают улучшить учебник. Верхний отступ для строчных элементов не работает. Надо так:
      div id="mordochka">=o===o= /div
      для блочного элемента все будет окей. Текст исправил.

      Удалить
  4. button onclick="otstupSverhu += 10; document.getElementById('mordochka').style.marginTop = otstupSleva;"> Vniz </button Алексей, где грешок в коде, кнопка вниз не ползет)

    ОтветитьУдалить
    Ответы
    1. Вы все делаете правильно. Извините, была ошибка в тексте: =0===0= надо заключить в тег div, а не span.

      Дело в том, что строчные и блочные элементы HTML отличаются в позиционировании.

      Удалить
    2. Вот теперь все работает. Спасибо!

      Удалить
  5. Было бы наверно правильным, переменную - otstupSleva назвать иначе. Так как она встречается в коде с назначением отступа влево и в право. Это может привести в замешательство.

    ОтветитьУдалить
  6. И логичнее по моему сделать правую кнопку - справа, а левую - слева (т.е. поменять строки кода местами, верхнюю вниз, а нижнюю вверх).

    ОтветитьУдалить
  7. Извиняюсь, но текст (1. Задайте элементу span id="mordochka"=o===o=span стиль верхнего отступа margin-top: 100px добавив свойство к тегу.) думаю тоже надо подправить.

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

    ОтветитьУдалить
  9. При использовании doctype перестает работать onclick у button. Причину до сих пор не обнаружил

    ОтветитьУдалить
    Ответы
    1. Причина в том, что в правилах CSS при наличии декларации doctype, нужно указывать единицу измерения размеров.
      Решается следующим образом:
      document.getElementById('mordochka').style.marginLeft = otstupSleva + 'px';

      Удалить
  10. Здравствуйте!Что я делаю не так? не получается сделать отступ сверху,кнопка есть,но не работает.

    script
    otstupSleva = 0
    /script
    div id="mordochka" =o===o= /div
    button onclick="otstupSleva += 10;document.getElementById('mordochka').style.marginLeft = otstupSleva;" Napravo /button
    button onclick="otstupSleva -= 10;document.getElementById('mordochka').style.marginLeft = otstupSleva;" Nalevo /button
    script
    otstupSverhu = 0
    /script
    div id="mordochka" =o===o= /div
    button onclick= "otstupSverhu += 10;document.getElementById('mordochka').style.margin-top :100px = otstupSverhu;" Verh /button

    ОтветитьУдалить
    Ответы
    1. Ощибка тут:
      document.getElementById('mordochka').style.margin-top :100px = otstupSverhu;
      Сравните с предыдущим кодом:
      document.getElementById('mordochka').style.marginLeft = otstupSleva;
      1. Надо писать marginTop (в сценарии не так как в стилях)
      2. ":100px" вообще убрать
      И так заработает. А сколько Вам лет?

      Удалить
    2. Спасибо,сейчас все работает.Мне 16 лет.

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

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

    ОтветитьУдалить
  13. script
    Verx = 0
    /script

    script
    otstupSleva = 0
    /script


    div id="mordochka"=o===o=/div

    button onclick="otstupSleva += 10; document.getElementById('mordochka').style.marginLeft = otstupSleva;" Napravo /button

    button onclick="otstupSleva -= 10; document.getElementById('mordochka').style.marginLeft = otstupSleva;" Nalevo /button

    button onclick="Verx -= 10; document.getElementById('mordochka').style.marginTop = Verx;" Vniz /button

    button onclick="Verx += 10; document.getElementById('mordochka').style.marginTop = Verx;" Vniz /button

    В чём тут ошибка ? У меня кнопки вместе с объектом двигаются :(

    ОтветитьУдалить
    Ответы
    1. Вы все сделали правильно! Кнопки двигаются из-за особенностей HTML-разметки, пока об этом не беспокойтесь. Попробуйте перенести div под кнопки. (В тексте урока исправил)

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

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

    ОтветитьУдалить
  16. Я все правильно сделал?

    script>
    otstupSleva = 0
    /script>

    button onclick="otstupSleva += 10;
    document.getElementById('mordochka').style.marginLeft
    = otstupSleva;"> Napravo /button>

    button onclick="otstupSleva += 10;
    document.getElementById('mordochka').style.marginLeft
    = otstupSleva;"> Nalevo /button>

    div id="mordochka".style.margin-top:
    100px;>=o===o=/div>

    button onclick="mordochka".marginTop = 200px;>Button/button>

    Открываю в браузере, пустая страница. Что я делаю не так? Помогите пожалуйста. Иван, 12 лет.

    ОтветитьУдалить
    Ответы
    1. Знак "<" убрал намеренно, компьютер путается.

      Удалить
  17. script
    orstupSleva = 0
    /script

    button onclick="otstupSleva += 10; document.getElementById('morda').style.marginLeft = otstupSleva;" NAPRAVO /button

    button onclick="otstupSleva -= 10 ; document.getElementById('morda').style.marginleft = otstupSleva;" NALEVO /button

    div id="morda"=o===o=/div>
    <br


    кнопки не реагируют, в консоли пишет что ошибки.

    Но как только вставлю код из вашего урока - ваши кнопки работают и мои (правая с ошибкой- не отображается передвижение)

    ОтветитьУдалить
    Ответы
    1. начало скрипта исправил, но она едет только вправо, а в лево не едет(((

      Удалить
    2. все исправил

      script
      otstupSleva = 0
      /script

      button onclick="otstupSleva -= 10; document.getElementById('morda').style.marginLeft = otstupSleva;" NALEVO /button

      button onclick="otstupSleva += 10; document.getElementById('morda').style.marginLeft = otstupSleva;"
      NAPRAVO /button

      div id="morda"=o===o=/div

      Удалить