JavaScript   ООП   PHP  

ООП в JavaScript. Лабораторная работа 1
Основные понятия и определения: объект, метод, свойства, события

Язык программирования 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

другие объекты 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>

Разберем код.

  1. style="color:blue" определяется стиль текста в данном абзаце
  2. onmouseover= событие которое может произойти с этим абзацем, в кавычках надо указать что при этом делать
  3. this.style.color='red' изменить стиль абзаца: цвет текста на красный:

Рассмотрим еще один пример. Изменение цвета фона текста:

Пример №4

Цвет фона текста меняется на красный при наведении мышкой на него!

<p style="background-color:blue" onmouseover="this.style.backgroundColor='red' " onmouseout="this.style.backgroundColor='blue'">Цвет фона текста меняется на красный при наведении мышкой на него!</p>

Разберем код.

  1. style="background-color:blue" определяется стиль текста в данном абзаце (цвет фона)
  2. onmouseover= (навести мышь) и onmouseout= (увести мышь) события которые могут произойти с этим абзацем, в кавычках надо указать что при этом делать
  3. this.style.backgroundColor='red'' изменить стиль абзаца: цвет фона на красный.

Задание №3

1) Создайте файл, соответствующий стандарту XHTML 1.1 или XHTML 1.0 Strict
2) Создайте три абзаца
3) Напишите скрипт, изменяющий цвет текста первого абзаца при наведении мышкой
4) Напишите скрипт, изменяющий цвет фона текста второго абзаца при наведении мышкой
5) Напишите скрипт, изменяющий цвет фона текста третьего абзаца только при наведении мышкой

JavaScript   ООП   PHP  
Знаете ли Вы, что в 1965 году два американца Пензиас (эмигрант из Германии) и Вильсон заявили, что они открыли излучение космоса. Через несколько лет им дали Нобелевскую премию, как-будто никто не знал работ Э. Регенера, измерившего температуру космического пространства с помощью запуска болометра в стратосферу в 1933 г.? Подробнее читайте в FAQ по эфирной физике.

Bourabai Research Institution home page

Bourabai Research - Технологии XXI века Bourabai Research Institution БОРОВСКОЕ ИССЛЕДОВАТЕЛЬСКОЕ УЧРЕЖДЕНИЕ - Технологии XXI века