2. Объекты в JavaScript

JavaScript является объектно-ориентированным языком. В примерах мы использовали два объекта: document и window. Значение термина «объект» в реальном мире интуитивно понятно. Мы хорошо знакомы с материальными осязаемыми объектами, например мяч, автомобиль, самолёт. У объектов есть свойства, и к объектам можно применять некоторые операции (методы). Так, например, у мяча есть такие свойства, как размер, скорость движения, цвет. С мячом можно проделать некоторые операции, которые изменят его свойства, например, бросить и тогда он изменит скорость своего движения, облить краской, и он изменит свой цвет.

JavaScript работает с такими объектами, как окно браузера, HTML-документ, компьютерное время, и другие.

Объекты включают в себя свойства, методы и события.

Объекты
Свойства	Методы	События
Объект обладает набором свойств, которые можно считывать, записывать и изменять с помощью программного кода.	Для того чтобы объект выполнил какую-либо операцию, необходимо применить метод, которым он обладает. Методы имеют аргументы, которые позволяют задать параметры выполняемых действий.	Событие представляет собой действие, распознаваемое объектом. Событие чаще всего создаётся пользователем: наведение и щелчок мыши, нажатие клавиши на клавиатуре и другие. После распознавания события в качестве реакции на него вызывается обработчик события.

Для пояснения сказанного разберём сценарий из первого примера: document.write("Эта страница написана на JavaScript!");

Объект document — это документ HTML, то есть веб-страница. Слово write, отделённое точкой, является методом этого объекта (на странице что-то будет написано). Название метода всегда сопровождается круглыми скобками, они либо пустые, либо в них указывается аргумент метода. В данном случае имеется аргумент — строка Эта страница написана на JavaScript!.

У объекта document кроме метода write имеется ещё 4 свойства и 14 методов. Все они предназначены для того, чтобы работать с объектами страницы: создавать новые HTML-элементы, находить уже существующие элементы и так далее. Некоторые из них мы будем изучать позднее.

 

Вопрос. Во втором примере мы использовали скрипт window.alert('Привет!');. Где здесь объект, метод и аргумент метода?

У объекта window кроме метода alert имеется ещё 42 свойства и 37 методов. Все они предназначены для работы с элементами окна браузера: управление размерами и положением окна, создание новых диалоговых окон и так далее.

Таким образом, объект — это коллекция свойств и методов, относящихся к этому объекту. Объект можно представить как коробочку, в которой собраны инструменты и материалы для определённой деятельности. Например, инструменты и материалы для шитья мы складываем в одну коробку, а инструменты и материалы для ремонта автомобиля — в другую. Когда нам нужно пришить пуговицу, мы берём коробку для шитья и достаём из неё те инструменты, которые необходимы именно для этой работы: иголку, нитку, ножницы. Хотя там много и других инструментов, но они для данной работы не нужны. Когда нам потребуется отремонтировать машину, мы возьмём коробку со слесарными инструментами, так как знаем, что там есть то, что нам потребуется.

В теории объектно-ориентированного программирования (ООП) объединение в одной структуре свойств и методов называется инкапсуляцией.

С помощью объекта document и его метода write можно выводить текст, оформленный HTML-тегами. Например: document.write("<p style='border:1px solid #00CCFF'>Здравствуйте!</p>")

Результат:

Здравствуйте!

Обратите внимание, что CSS-свойство border:1px solid #00CCFF пришлось заключить в одинарные кавычки, чтобы браузер не “запутался”. В JavaScript (как и в HTML) допускается использование и тех и других кавычек, нужно только внимательно следить, чтобы все кавычки в нужном месте закрывались. Нельзя было написать так:

"<p style="border:1px solid #00CCFF">Здравствуйте!</p>",

поскольку тогда браузер «решил бы», что строка закончилась после второй кавычки.

Задание 1

Во временной странице Untitled-1.html в первом примере сделайте так, чтобы текст, выводимый скриптом, стал красным.