Книга: JavaScript. Учебник начального уровня
Сделай ещё что–нибудь.
Сделай ещё что–нибудь.
В предыдущем примере мы добились того, что на экран вывелся текст. После этого, чтобы ни делал пользователь, ничего не произойдёт. Независимо от того как, когда и зачем пользователь откроет ваш документ, он увидит тот же самый текст. Исходя из этого делаем вывод, что программой это называть ещё рано.
Как я уже упоминал, HTML вообще говоря к программированию отношения не имеет. Но он, если можно так выразиться, поддерживает скриптовые расширения. Самый распространённый язык программирования, используемый для этих целей - JavaScript. Слегка расширим наш предыдущий пример, чтобы проиллюстрировать его возможности:
<html>
<head>
</head>
<body> Забавно писать на html + java script не зная ни того, ни другого. <br>
Но попробуем.
<br>
<br>
<input type=button value='Нажми меня!'>
</body>
</html>
Запускаем в браузере и видим:
Основная часть кода осталась без изменений, после текста добавились две пустые строки для более гармоничного внешнего вида странички. Больше всего в этом примере нас интересует новая строчка
<input type=button value='Нажми меня!'>
рассмотрим её внимательно.
Первое, что бросается в глаза — непривычно большой тэг input. Да, название тэга именно input, от остальных элементов оно отделено пробелом. Что это за элементы? Мы о них раньше не говорили…
Дело в том, что тэг, помимо названия, может содержать так называемые атрибуты. Думаю нет смысла давать им определения, долго и нудно объяснять понятие, лучше просто попытаться научиться их читать. Давайте попробуем, я буду читать, одновременно переводя на русский:
<Поле ввода, типа кнопка, со значением «нажми меня», в случае клика должен выполниться скрипт «this.value = «Спасибо»;">
Ничего сложного. Поле ввода или элемент управления или просто контрол может быть разных типов, мы в нашем примере используем кнопку. Атрибут value в данном случае задает текст, который будет написан на нашей кнопке. Для того, чтобы «подчеркнуть», что заданное нами значение именно текст (строка), его следует заключить в кавычки или апострофы.
Почему я написал в данном случае задаёт текст, разве это работает не всегда? Дело в том, что для разных тэгов атрибут с одним и тем же именем может означать разные вещи. Для кнопок этот код работает, для чего–то другого — может работать, а может и не работать.
Вот, наконец, мы и подошли непосредственно к программированию, а строчка «this.value = «Спасибо»;" по сути наша первая программа. Разберём и её тоже.
Ключевое слово this в данном случае — это наша кнопка. Этим словом (в Delphi похожую функцию выполняет Self) кодируется объект, которому принадлежит вызываемая функция (в JS есть свои нюансы, но в первом приближении это верно). То есть в нашем случае мы написали, что в случае, если наша конкретная кнопка будет нажата будет выполнен некий код. Так вот, в этом коде this — это и будет наша кнопка.
Точка после this означает, что далее мы будем обращаться к тому, что есть у this. В данном случае мы обращаемся к атрибуту value тэга. Да, да, к тому самому, значение которого чуть раньше мы задавали в тэге input. Теперь мы по сути делаем то же самое, только чуть иначе.
Ну и последнее тут — точка с запятой в конце. Это, как и во многих других языках является разделителем для аналога предложений в языках программирования. Как и в обычных человеческих языках там есть свои нюансы использования, но об этом позже.
Оглавление книги
- 67. Ещё немного об МГУ и о коллегах
- Сделайте программный код красивым
- Заключение Сделайте первый шаг
- «Сделай сам»: пять узелков на память
- Глава 7. Сделайте так, чтобы ваши письма прочитали
- Глава 24. Сделайте макет
- Сделай сам
- Сделайте свой бренд веселее
- Сделайте текст динамичным!
- Сделайте подборку полезных статей
- Совет 32 Скажи это, сделай это, покажи это
- Сделайте прямо сейчас