10 янв. 2015 г.

Программа для самостоятельного разбора

Предлагаю для самостоятельного разбора простую программу: кнопки управляют плюсиком, он может заползти на прямоугольный и овальный объекты и "попробовать" их. Кнопка с вопросом показывает координаты плюсика в данный момент.

Создайте новый html-файл, вставьте этот код, сохраните, а потом посмотрите результат в браузере:


<script>
otstupSleva = 0;
otstupSverhu = 100;
</script>


<span style="position: absolute; top: 100; left: 0;"  id="mordochka"> + </span>

<span style="position: absolute; top: 100; left: 400;"> [] </span>

<span style="position: absolute; top: 150; left: 400;"> 0 </span>

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

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

<button onclick="otstupSverhu -= 10; document.getElementById('mordochka').style.top = otstupSverhu;"> Vverh </button>

<button onclick="otstupSverhu += 10; document.getElementById('mordochka').style.top = otstupSverhu;"> Vniz </button>

<button onclick="alert( 'sleva: ' + otstupSleva + ', sverhu:' + otstupSverhu)"> ? </button>

<button onclick="if(otstupSleva == 400 && otstupSverhu == 100){alert( 'Vkusno!' )} if(otstupSleva == 400 && otstupSverhu == 150){alert( 'Fuu!' )}"> Poprobui </button>


Пояснение к коду:
position: absolute;   это свойство "подвешивает" элемент на странице. Элемент с таким свойством может находиться в любой точке экрана;
top: 100 и left: 400  эти свойства задают координаты подвешенного элемента;

Вот и все пояснение. С остальным постарайтесь разобраться самостоятельно. Вообще, код получился скомканным и запутанным. В следующей части мы научимся делать программу понятнее.

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

7 комментариев:

  1. Вопрос по блоку:
    script
    otstupSleva = 0;
    otstupSverhu = 100;
    script
    Почему именно от 0 до 100, и что в данном случае 0? По "mordochka" понятно, цифры указывают на расположение на экране, а тут понять не могу.Спасибо.

    ОтветитьУдалить
    Ответы
    1. Это первоначальные координаты, которые должны совпадать с теми, что в уже есть стилях - position: absolute; top: 100; left: 0;

      Удалить
  2. Есть прекрассный курс "Программирование для детей" Полякова К.Ю. что называется для самых маленьких. ХТМЛ является языком разметки и не имеет отношения к программированию. Учится лучше всего в русскоязычной среде. По окончании базового курса стали изучать программирование плат Arduino, там и достаточно простые примеры есть, и визуализация присутствует.

    ОтветитьУдалить
    Ответы
    1. А JS? Тоже по вашему разметка?
      Не имеет отношения? Ну да, JS не назовешь суперфункциональным, но он полезнее Wire(или как там язык arduino назывался?). Но отношение имеет.
      Плюсы JS+HTML - никаких новых программ и уж тем более микроконтроллерных плат ребенку родители сразу не дадут. Также интереснее писать игры и видеть результат сразу, причем красочный результат, чем мучаться с поиском проблемы в проводах ради моргания светодиодом.
      Если неверно вас понял - прошу прощения, писал около 2ух ночи. Прошу отписаться.

      Удалить
    2. Думаю, Андрей просто поделился хорошими учебными материалами. Наверняка, в личном общении они хорошо работают. А тут - самостоятельное удаленное обучение. Каждому свое)

      Удалить
    3. Да, вы правы. Пойду-ка я лучше спать, пока не обидел кого-нибудь)

      Удалить