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. Текст внутри кнопки — любой.

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

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



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

  1. Анонимный10 января 2015 г. в 14:17

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

    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. Алексей Зюзин10 января 2015 г. в 14:52

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

      Удалить
    2. Unknown18 февраля 2020 г. в 04:12

      Вообще-то там есть ошибка (OtstupSlerka)ты написала

      Удалить
  2. Unknown11 января 2015 г. в 02:55

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

    ОтветитьУдалить
    Ответы
    1. Алексей Зюзин11 января 2015 г. в 03:16

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

      Удалить
  3. Unknown11 января 2015 г. в 03:39

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

    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. Алексей Зюзин11 января 2015 г. в 03:54

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

      Удалить
    2. Unknown11 января 2015 г. в 03:58

      Спасибо

      Удалить
  4. Unknown11 января 2015 г. в 03:39

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

    ОтветитьУдалить
    Ответы
    1. Алексей Зюзин11 января 2015 г. в 03:58

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

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

      Удалить
    2. Анонимный11 января 2015 г. в 06:32

      Вот теперь все работает. Спасибо!

      Удалить
  5. Unknown11 января 2015 г. в 11:37

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

    ОтветитьУдалить
  6. Unknown11 января 2015 г. в 11:49

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

    ОтветитьУдалить
  7. Unknown11 января 2015 г. в 12:38

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

    ОтветитьУдалить
  8. Unknown12 января 2015 г. в 08:09

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

    ОтветитьУдалить
  9. Unknown30 января 2015 г. в 07:19

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

    ОтветитьУдалить
    Ответы
    1. Unknown30 января 2015 г. в 08:23

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

      Удалить
  10. Анонимный7 февраля 2015 г. в 05:43

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

    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. Алексей Зюзин7 февраля 2015 г. в 13:30

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

      Удалить
    2. Анонимный8 февраля 2015 г. в 02:25

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

      Удалить
  11. Unknown4 июня 2015 г. в 06:47

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

    ОтветитьУдалить
  12. Unknown4 июня 2015 г. в 06:48

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

    ОтветитьУдалить
  13. Unknown4 июня 2015 г. в 06:52

    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. Алексей Зюзин5 июня 2015 г. в 01:14

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

      Удалить
  14. Unknown23 декабря 2016 г. в 02:27

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

    ОтветитьУдалить
  15. Unknown23 декабря 2016 г. в 02:38

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

    ОтветитьУдалить
  16. Unknown23 декабря 2016 г. в 02:47

    Я все правильно сделал?

    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. Unknown23 декабря 2016 г. в 02:48

      Знак "<" убрал намеренно, компьютер путается.

      Удалить
  17. Анонимный26 июня 2017 г. в 10:00

    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. Анонимный26 июня 2017 г. в 10:03

      начало скрипта исправил, но она едет только вправо, а в лево не едет(((

      Удалить
    2. Анонимный26 июня 2017 г. в 10:11

      все исправил

      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

      Удалить
  18. FlatcherPro8 ноября 2019 г. в 17:46

    script
    otstupSleva = 0

    /script


    script

    otstupSverhu= 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

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

    div id="mordochka"; style="marginTop: 100" =o===o= /div
    что не так? отступ не появляется

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

Подписаться на: Комментарии к сообщению (Atom)