Язык программирования JavaScript был разработан Бренданом Эйком (Brendan Eich) в Netscape Communications как язык сценариев для обозревателей Netscape Navigator, начиная с версии 2.0. В дальнейшем к развитию этого языка подключилась корпорация Microsoft, чьи обозреватели Internet Explorer поддерживают JavaScript, начиная с версии 3.0. Версия Microsoft получила название JScipt, поскольку JavaScript является зарегистрированной маркой фирмы Netscape.
JavaScript - это язык программирования, язык сценариев (скриптов), предназначенный прежде всего для создания интерактивных HTML-страниц. Программу на языке JavaScript либо встраивают прямо в HTML-файл (как в секции <head>, так и в секции <body>) с помощью тега <script> ... </script> и располагают код JavaScript внутри этих тегов,
<script type="text/javascript"> </script>
или помещают весь код JavaScript в отдельный файл с расширением js и связываются с ним с помощью тега Script:
<script type="text/javascript" src="scripts/JavaScriptFile.js"> </script>
Чтобы программа была выполнена, HTML-файл должен быть открыт в браузере пользователя. Так как JavaScript является в настоящее время единственным языком сценариев, который поддерживают все основные браузеры Web (Internet Explorer, Firefox, Netscape, Safari, Opera, Camino и т.д.), то он используется очень широко. Однако следует помнить, что некоторые скрипты действуют по-разному в разных браузерах (то что работает в Internet Explorer может не работать в Firefox)
JavaScript - интерпретируемый язык. Это означает, что для исполнения программы не требуется предварительная компиляция (преобразование исходного текста программы в машинный код). Текст программы интерпретируется, то есть анализируется и сразу же исполняется.
JavaScript - это объектно-ориентированный язык программирования (ООП), основан не на обработке команд кода, а на присвоении отдельным элементам программы конкретных событий и выполнении их, если данное событие имело место. Например, событие нажатие на кнопку приводит к изменению содержимого текстового поля:
Пример №1Введите свое имя и нажмите кнопку
|
Основными понятиями любого объектно-ориентированного языка являются объекты, классы, методы и свойства.
Разберем основные понятия на конкретных примерах:
<script type="text/javascript"> document.write("Введите свое имя и нажмите кнопку") </script>В результате при просмотре данной страницы в браузере появится текст: "Введите свое имя и нажмите кнопку".
OBJECT (объект) - это то, с чем производится действие, событие. Это может быть документ, открываемый в окне браузера или само окно браузера, или какая-то часть документа, теги. Объект должен иметь уникальное имя (ID), чтобы к нему можно было обратиться.
В нашем случае объектом является документ HTML и к нему можно просто обратиться по имени: document.
Иерархия объектов в JavaScript
Каждый объект обладает своими методами.
METHOD (метод объекта) - это действия, которые можно выполнять над объектом такого типа, или которые сам объект может выполнять.
Синтаксис кода: между именем объект и методом обязательно ставят разделительный оператор точка, после метода в скобках параметры метода.
Объект |
. |
Метод |
("параметры метода") |
Параметры метода относятся к типу данных - строки символов. Строки символов нужно обязательно взять в кавычки либо в одинарные, либо в двойные.
Каждый объект обладает своими свойствами.
PROPERTY (свойство) - каждый объект имеет свои свойства. Один и тот же объект может обладать многими свойствами. Часто эти свойства необходимо изменить, при возникновении некоторого события.
Для изменения свойства объекта необходимо соблюдать следующий синтаксис:
Объект .
свойство объекта = "новое значение свойства " Например, для изменения фонового цвета документа HTML (имя данного свойства bgColor) следует написать следующее:
<script type="text/javascript">
document.bgColor='red'
</script>И при просмотре в окне браузера фоновый цвет HTML документа будет красным.
Обратите внимание на то, что значение свойства red пишется в кавычках (одинарных или двойных), т.к. значение свойства относится к типу данных строки символов.
Задание №1
1) Создайте файл, соответствующий стандарту XHTML 1.1 или XHTML 1.0 Strict
2) Напишите скрипт, задающий свойство документа фон (цвета можно выбрать здесь)Разумеется, нас будет интересовать возможность изменения свойства при возникновении какого-либо события.
EVENT (событие) - это все, что случилось: открытие окна, загрузка в него документа, клик клавишей мышки или просто перемещение курсора по экрану, нажатие клавиши на клавиатуре - это все события, и они могут инициировать запуск больших и маленьких программ.
Стандартные события в HTML
имя события происходит onclick при щелчке кнопки мыши на элементе ondblclick при двойном щелчке кнопки мыши на элементе onmousedown при нажатии кнопки мыши на элементе onmouseup при отпускании кнопки мыши на элементе onmouseover при попадании курсора мыши на элемент onmousemove при движении курсора мыши по элементу onmouseout при попадании курсора мыши за пределы элемента onkeypress при нажатии и отпускании клавиши на элементе onkeydown при нажатии клавиши на элементе onkeyup при отпускании клавиши на элементе Здесь следует пояснить, что события (event) и обработчики событий (event handler) относятся к JavaScript, но они скорее «встроены» в HTML-код. Они входят в структуру документа НТМL и не требуют тегов <script> и </script>. Среди разнообразных обработчиков событий для начала мы выберем один, самый популярный, — onmouseover (навести мышь).
Пример №2
...пример смотрите здесь - в другом окнеКод выглядит следующим образом:
<p onmouseover="document.bgColor ='red'">Наведи мышь на этот текст .... </p>
Как уже говорилось для написания этого кода не требуются теги <script> </script>. Событие встраивается в HTML код, т.е является описанием, атрибутом тега (в данном случае тега <p></p>) при выполнении данного события - наведении мышкой на текст данного абзаца - изменяется свойство объекта - фон документа HTML.
И здесь есть еще одна важная особенность: document.bgColor ='red' нужно также записать в кавычках - одинарных или двойных. Вы можете использовать любой тип кавычек. Однако если Вы вынуждены как в данном случае ставить кавычки дважды, то можно использовать только вложенные кавычки. Не имеет значения, в каком порядке Вы использовали кавычки - сначала двойные, а затем одинарные или наоборот.
МОЖНО:
onmouseover="document.bgColor ='red' " или
onmouseover='document.bgColor ="red" 'Но НЕЛЬЗЯ:
onmouseover="document.bgColor ="red" "
onmouseover='document.bgColor ='red' '
onmouseover="document.bgColor ='red" '
Задание №2
1) Создайте файл, соответствующий стандарту XHTML 1.1 или XHTML 1.0 Strict
2) Напишите скрипт, изменяющий свойство документа - фон при наведении курсором на какой-то текст (цвета можно выбрать здесь)А если мы хотим изменить не свойство всего документа, а только свойство какого-то абзаца? Как в данном случае мы можем изменить свойство данного объекта? Есть несколько способов.
Пример №3
Этот абзац меняет цвет текста при наведении на него мышкой с синего на красный!
Код данного примера (ВАЖНО! Код должен быть записан в одну строчку)
<p style="color:blue" onmouseover="this.style.color='red'">Этот абзац меняет цвет при наведении на него мышкой с синего на красный!</p>
Разберем код.
Рассмотрим еще один пример. Изменение цвета фона текста:
Пример №4
Цвет фона текста меняется на красный при наведении мышкой на него!
<p style="background-color:blue" onmouseover="this.style.backgroundColor='red' " onmouseout="this.style.backgroundColor='blue'">Цвет фона текста меняется на красный при наведении мышкой на него!</p>
Разберем код.
Задание №31) Создайте файл, соответствующий стандарту XHTML 1.1 или XHTML 1.0 Strict |
|
|  |