Предлагаю для самостоятельного разбора простую программу: кнопки управляют плюсиком, он может заползти на прямоугольный и овальный объекты и "попробовать" их. Кнопка с вопросом показывает координаты плюсика в данный момент.
Создайте новый html-файл, вставьте этот код, сохраните, а потом посмотрите результат в браузере:
Пояснение к коду:
position: absolute; — это свойство "подвешивает" элемент на странице. Элемент с таким свойством может находиться в любой точке экрана;
top: 100; и left: 400; — эти свойства задают координаты подвешенного элемента;
Вот и все пояснение. С остальным постарайтесь разобраться самостоятельно. Вообще, код получился скомканным и запутанным. В следующей части мы научимся делать программу понятнее.
Создайте новый 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; — эти свойства задают координаты подвешенного элемента;
Вот и все пояснение. С остальным постарайтесь разобраться самостоятельно. Вообще, код получился скомканным и запутанным. В следующей части мы научимся делать программу понятнее.
Вопрос по блоку:
ОтветитьУдалитьscript
otstupSleva = 0;
otstupSverhu = 100;
script
Почему именно от 0 до 100, и что в данном случае 0? По "mordochka" понятно, цифры указывают на расположение на экране, а тут понять не могу.Спасибо.
Это первоначальные координаты, которые должны совпадать с теми, что в уже есть стилях - position: absolute; top: 100; left: 0;
УдалитьЕсть прекрассный курс "Программирование для детей" Полякова К.Ю. что называется для самых маленьких. ХТМЛ является языком разметки и не имеет отношения к программированию. Учится лучше всего в русскоязычной среде. По окончании базового курса стали изучать программирование плат Arduino, там и достаточно простые примеры есть, и визуализация присутствует.
ОтветитьУдалитьА JS? Тоже по вашему разметка?
УдалитьНе имеет отношения? Ну да, JS не назовешь суперфункциональным, но он полезнее Wire(или как там язык arduino назывался?). Но отношение имеет.
Плюсы JS+HTML - никаких новых программ и уж тем более микроконтроллерных плат ребенку родители сразу не дадут. Также интереснее писать игры и видеть результат сразу, причем красочный результат, чем мучаться с поиском проблемы в проводах ради моргания светодиодом.
Если неверно вас понял - прошу прощения, писал около 2ух ночи. Прошу отписаться.
Думаю, Андрей просто поделился хорошими учебными материалами. Наверняка, в личном общении они хорошо работают. А тут - самостоятельное удаленное обучение. Каждому свое)
УдалитьДа, вы правы. Пойду-ка я лучше спать, пока не обидел кого-нибудь)
Удалитьтам IF используются это изи
ОтветитьУдалить