Знакомства на Just click it
Скоро новый год!
Онлайн радио
Вверх
Новые статьи

Архив

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

 

 

Введение в JavaScript
JavaScript
Наверх
Источник: Создание сайтов
Мы В Контакте Мы на Facebook Лента новостей RSS
Копирование и публикация материалов сайта разрешены только при наличии активной ссылки на источник
2011 - наши дни.. © Контакты | Лого | Реклама на сайте | Вебмастерам
Политика конфиденциальности | Пользовательское соглашение