JavaScript основы

«JavaScript Основы» – второй урок учебника JavaScript. В этом уроке мы поговорим о способах размещения JavaScript кода.

Сегодня мы попробуем самостоятельно разместить JS коды внутри HTML страницы и научимся оставлять комментарии.

Способы размещения JavaScript кода.

Прежде, чем начинать изучение любого существующего языка программирования необходимо научится запускать программы, написанные на этом языке и как это принято, первой программой, которую мы создадим будет простенький скрипт, вызывающий приветствие вроде «ПРИВЕТ МИР!»

Ну а теперь обо всем по порядку…

Для понимания JavaScript основ необходимо понять, как исполняются JavaScript коды. Для примера PHP код выполняется в момент получения команды на скачивание страницы сервером и пользователь получает уже обработанную сервером статическую страницу без каких–либо намеков на программный код. В случае с JavaScript все состоит совершенно иначе (если не сказать наоборот). В момент получения сервером команды на скачивание страницы от браузера сервер передает браузеру страницу со встроенным кодом в ее первоначальном виде, то есть с содержанием программного кода (этот код вы можете увидеть нажав в браузере команду показать исходный код). Затем, уже сам браузер начинает выполнение кода, в зависимости от поведения пользователя и так как страница будет содержать этот код постоянно пока вы с ней работаете, то код может быть выполнен сколь угодно много раз, тем самым изменяя страницу в режиме реального времени, обеспечивая максимальное взаимодействие с пользователем, чего к примеру не может дать PHP код.

Теперь поговорим о способах встраивания JavaScript кода в страницы сайта. Основных способов существует 4:

вставка ссылкой
использование событий
подстановка
контейнер <SCRIPT></SCRIPT>

А теперь рассмотрим каждый из этих способов более подробно:

Вставка JavaScript кода ссылкой.

По умолчанию в HTML использование гипертекстового перехода подразумевает открытие новой страницы или переход в другое место текущей страницы. При помощи JavaScript вы можете менять поведение любого HTML элемента и гипертекстовый переход не является исключением. Для изменения стандартных событий обработки гипертекстовых переходов используется следующий код:

Пока мы еще не изучили ни одной JavaScript команды, но ничего страшного здесь нет, ведь пока мы только приступили к изучению JavaScript основ и главное понять, как работает URL схема JavaScript.

Использование событий.

Об использовании событий для вызова JavaScript кода мы упомянули в предыдущем уроке. Здесь нет ничего сложного. Берется любой HTML элемент и ему назначается событие, при выполнении которого выполняется JavaScript код. Создадим простой пример, который при наведении мыши на кнопку вызовет сообщение ПРИВЕТ МИР)).

Как вы и сами можете видеть ничего сложного здесь нет.

Подстановки.

Подстановка является старым и малоиспользуемым способом вызова 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 и разберемся с основными типами данных.