Учебник по программированию.

§10. Знакомство с JavaScript.

Общая информация.

Что такое JavaScript? JavaScript – язык программирования, который используется при создании html документов и позволяет им реагировать на действия пользователя, т.е. делает документ динамическим.

Как и в любом другом языке программирования, программа на JavaScript представляет собой обычный текст. Отличием является то, что в других языках для того, что бы программа заработала, её необходимо откомпилировать. Программа на JavaScript компиляции не требует. Такую программу выполняет браузер, в котором просматривается интернет страница.

Сама программа на JavaScript должна находиться в HTML документе и должна быть заключена в тег script (открывающий и закрывающий). Браузер при отображении элементов HTML документа, встретив данный тег, начинает выполнять год программы. Выполнив его, браузер продолжает отображение последующих элементов.

Первая программа.

Изучение любого языка начинается с первой программы, которая выводит, как правило, «Hello Word!». Данный учебник не будет исключением, выведем с помощью языка JavaScript сообщение «Привет всем!». Создайте html документ со следующим содержанием:

После открытия такого документа в браузере вы увидите следующее:

Разберём, что мы написали. Данный HTML документ содержит открывающий и закрывающий тэги , в которых заключена программа, написанная на на JavaScript. Программа состоит из одной строки, в которой вызывается функция alert, параметром которой является строка «Привет всем!». Эта функция выводит в отдельном окошечке сообщение, которое передано ей в качестве параметра.

Примечание: в Javascript необходимо следить за регистром букв. Если в html без разницы, какой буквой мы укажем имя тэга большой или маленькой, то в JavaScript слова alert и Alert считаются разными. Поэтому будьте внимательны, функция alert пишется с маленькой буквы.

Примечание для тех, кто не имеет опыт программирования: функция – это отдельный код, который можно запустить с помощью одного слова. В данном примере это слово alert. Это слово, в свою очередь, называется именем функции. Сам отдельный код называется подпрограммой. Вместо слова «запустить», как правило, используется слово «вызвать». Т.е. правильней будет сказать: функция – это подпрограмма, которую можно вызвать, написав её имя. Параметр – это некоторая информация, которая передаётся подпрограмме. Параметр в языке JavaScript передаётся в круглых скобках, которые ставятся после имени функции. Одиночные кавычки в предыдущем примере нужны для того, что бы было понятно, что передаётся строка, а не имя переменной.

Теперь проверим тот факт, что браузер, встретив код JavaScript, выполняет его, а затем продолжает отображать оставшиеся элементы. Составим следующий html документ:

После нажатия на кнопку «OK» сообщение исчезнет и появится второй абзац:

Как видите, пока не закончила своё выполнение функция Alert второй абзац браузер не отобразил.

Реакция на действие пользователя.

При каком либо действии пользователя, будь то щелчок мыши, или её движение, так же многое, многое другое, «внутри компьютера» возникает строго определённое событие. Например, при нажатии пользователем левой кнопки мыши возникает событие, которое называется – onclick. Для того, что бы браузер каким либо образом отреагировал на это событие, необходимо написать программу, которая будет запускаться при его возникновении. Такая программа называется обработчиком события.

Как это делается в JavaScript? Во-первых, в тэг того элемента, при нажатии на который нам нужно отреагировать, необходимо вставить атрибут с таким же названием, как называется событие. Этому атрибуту необходимо присвоить значение, которое является именем той функции, которая будет вызвана при нажатии на элемент. Пример:

Таким образом, в данном примере функция alert('Привет всем!') является обработчиком события onclick.

Помимо функции alert мы можем вызвать и свою собственную функцию. Её мы должны описать в теге script, который может находиться по тексту как до элемента, так и после. Разница заключается в очерёдности загрузки. Если script будет описан ниже, то пока он не загрузится реакции на нажатие элемента не будет.

Далее пример описания нашей собственной функции:

Для описания функции необходимо написать слово function, затем необходимо написать её имя. Имя выбирается произвольно исходя из её назначения. После имени ставятся круглые скобки, в которых указываются параметры, если они не нужны, то скобки всё равно ставятся. Далее ставятся фигурные скобки, в которых описывается сам код. В данном примере вызывается два раза функция alert. После каждого вызова ставится точка с запятой.

Далее пример использования нашей функции:

Изменение свойств css с помощью JavaScript.

У каждого тэга может быть атрибут id, которому присваивается какое либо имя. В восьмом параграфе мы с ним уже познакомились. Далее в примере с помощью него меняется свойство color у элемента:

В коде JavaScript программы пишется имя id элемента, затем после точки пишется слово style, затем после точки пишется название свойства, которое нужно изменить, затем ставится знак равно, и в одинарных кавычках пишется то значение, которое необходимо изменить. Вставим эту строку в нашу функцию MyFunction, получим следующее:

Примечание: было сказано, что после слова styleа, после точки пишется название свойства. Это не совсем точно, т.к. названия свойств в css и в JavaScript в некоторых случаях отличаются. Для того, что бы сформировать название свойства в JavaScript, необходимо придерживаться следующим правилам:

• во-первых, названия свойств пишутся маленькими буквами. Даже первый символ тоже должен быть маленьким. Исключением является случай описанный в следующем правиле.
• во-вторых, если в css в названии свойства есть дефис, то он пропускается, а следующая за ним буква становится большой. Например: в css – border-color, в JavaScript – borderColor.

Пример кнопок скрывающей и показывающей текст.

Далее приведём пример, в котором при нажатии на кнопки можно скрыть и показать текст:

После нажатия на кнопку:

Примечание: если вы наберёте текст документа и просмотрите его в браузере, то вы должны будете увидеть, что при наведении мыши на кнопку курсор из стрелочки превращается в руку. За это отвечает свойство cursor.

Пример получился достаточно объёмным, однако в нём нет ничего того, чего вы не знаете (если конечно дочитали учебник до этого месте без купюр). Внимательно изучите его. Думаю, в нём должно быть вам всё понятно.

События «Наведение курсора мыши на элемент» и «Уход курсора мыши с элемента».

Существует ещё два события, которыми вы сможете уже сейчас пользоваться. Это onmouseover (возникает при наведении курсора мыши на элемент) и onmouseout (возникает при уходе курсора с элемента). Для примера усовершенствуем предыдущий пример так, что при наведении курсора мыши на кнопку её цвет будет меняться, символизируя, что она стала активной. Соответственно, при уходе курсора с кнопки цвет будет возвращён:

Примечание: всё, что добавлено нового в документ, выделено жирным шрифтом.

Код JavaScript в отдельном файле.

Так же как и таблица стилей код JavaScript может находиться в отдельном файле. Для этого в тэг script необходимо включить атрибут src, которому необходимо присвоить адрес файла с расширением js. Этот файл должен быть текстовым и должен содержать код JavaScript.

Пример:

Как видно из примера закрывающий тэг в таком случае необязателен.

Примечание: при использовании атрибута src код, который заключён в тэг script, выполняться не будет. Пример:

Задачи.

1. Сделайте так, что бы при загрузке вашего сайта выходило сообщение о том, что это за сайт и кто автор.

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