JavaScript основы
«JavaScript Основы» – второй урок учебника JavaScript. В этом уроке мы поговорим о способах размещения JavaScript кода.
Сегодня мы попробуем самостоятельно разместить JS коды внутри HTML страницы и научимся оставлять комментарии.
Способы размещения JavaScript кода.
Прежде, чем начинать изучение любого существующего языка программирования необходимо научится запускать программы, написанные на этом языке и как это принято, первой программой, которую мы создадим будет простенький скрипт, вызывающий приветствие вроде «ПРИВЕТ МИР!»
Ну а теперь обо всем по порядку…
Для понимания JavaScript основ необходимо понять, как исполняются JavaScript коды. Для примера PHP код выполняется в момент получения команды на скачивание страницы сервером и пользователь получает уже обработанную сервером статическую страницу без каких–либо намеков на программный код. В случае с JavaScript все состоит совершенно иначе (если не сказать наоборот). В момент получения сервером команды на скачивание страницы от браузера сервер передает браузеру страницу со встроенным кодом в ее первоначальном виде, то есть с содержанием программного кода (этот код вы можете увидеть нажав в браузере команду показать исходный код). Затем, уже сам браузер начинает выполнение кода, в зависимости от поведения пользователя и так как страница будет содержать этот код постоянно пока вы с ней работаете, то код может быть выполнен сколь угодно много раз, тем самым изменяя страницу в режиме реального времени, обеспечивая максимальное взаимодействие с пользователем, чего к примеру не может дать PHP код.
Теперь поговорим о способах встраивания JavaScript кода в страницы сайта. Основных способов существует 4:
- вставка ссылкой
- использование событий
- подстановка
- контейнер <SCRIPT></SCRIPT>
А теперь рассмотрим каждый из этих способов более подробно:
Вставка JavaScript кода ссылкой.
По умолчанию в HTML использование гипертекстового перехода подразумевает открытие новой страницы или переход в другое место текущей страницы. При помощи JavaScript вы можете менять поведение любого HTML элемента и гипертекстовый переход не является исключением. Для изменения стандартных событий обработки гипертекстовых переходов используется следующий код:
<A HREF=»JavaScript:ТУТ_БУДЕТ_ВАШ_КОД»>…</A>
Пока мы еще не изучили ни одной JavaScript команды, но ничего страшного здесь нет, ведь пока мы только приступили к изучению JavaScript основ и главное понять, как работает URL схема JavaScript.
Использование событий.
Об использовании событий для вызова JavaScript кода мы упомянули в предыдущем уроке. Здесь нет ничего сложного. Берется любой HTML элемент и ему назначается событие, при выполнении которого выполняется JavaScript код. Создадим простой пример, который при наведении мыши на кнопку вызовет сообщение ПРИВЕТ МИР)).
<INPUT TYPE=button VALUE=»Проведите по мне)t » onMouseOver=»window.alert(‘HELLO WORLD)))’);»> |
Как вы и сами можете видеть ничего сложного здесь нет.
Подстановки.
Подстановка является старым и малоиспользуемым способом вызова JavaScript, поэтому останавливаться на нем подробно мы не будем. Разберем лишь наиболее важные моменты:
Для создания подстановки у атрибута элемента используется конструкция &{..}, которая дает браузеру понять что необходимо начать выполнять JavaScript инструкции. Все очень просто, но данный метод давно не используется ввиду появления гораздо более удобных и функциональных методов обработки кода.
Контейнер <SCRIPT></SCRIPT>.
Использование контейнера <SCRIPT></SCRIPT> можно назвать более продвинутой версией обычной подстановки. Использование этого контейнера позволяет JavaScript самому генерировать HTML код страницы. Идея состоит в том, что встретив контейнер <SCRIPT></SCRIPT> HTML обработчик передает управление JavaScript интерпритатору, который в свою очередь переработав JavaScript код дает на выходе HTML код, который начинает обрабатываться уже HTML обработчиком.
Немного замудренно, но на практике все очень даже просто.
Контейнер <SCRIPT></SCRIPT> может быть размещен либо внутри контейнера <HEAD></HEAD>, либо внутри <BODY></BODY>.
Ну и конечно же небольшой пример:
<HTML> <HEAD> <SCRIPT> function greet() { window.alert(‘ПРИВЕТ’); } </SCRIPT> </HEAD> <BODY> <INPUT TYPE=button VALUE=»Поприветствуем! » onClick=greet()> </BODY> </HTML> |
Как и во всех предыдущих примерах все предельно просто. Вообще весь язык JavaScript не таит в себе особых трудностей, если конечно не копать очень уж глубоко) Но это нам и не понадобится.
Самым сложным в изучении этого языка на начальных этапах для меня лично оказалось использование не совсем привычной для языков программирования грамматики, например вызова встроенных событий, таких как onMouseOver.
Вся сложность состоит в том, что при любом другом написании этот обработчик не сможет быть интерпритирован (onmouseover, ONMOUSEOVER , onmouseOver, onMouseover). Ну об этом и о многом другом мы подробно поговорим в следующих уроках…
Комментарии в JavaScript.
В любом языке программирования, даже таком примитивном, как HTML должна быть поддержка комментариев. Использование комментариев позволяет лучше разбираться в коде другим людям, да и вообще это считается правилом хорошего тона среди программистов. Для создания однострочного комментария используется // :
//Однострочный комментарий
И для создания многострочного комментария используется /* */:
/* Это
многострочный
комментарий */
Вот мы и закончили с изучением основ JavaScript и пришло самое время перейти к более сложным, но и гораздо более интересным аспектам работы с этим замечательным языком программирования.
В следующем уроке мы начнем вплотную работать с JavaScript и разберемся с основными типами данных.