Методы объекта
Метод – это функция, которая хранится в качестве значения в свойстве объекта и может вызываться посредством этого объекта.
Вызов метода осуществляется точно так же, как и вызов обычной функции – с помощью оператора () (оператор вызова):
var obj = {
name: "Гомер",
write_hello: function() { // задание метода
document.write("Привет");
}
};
obj.write_hello(); // вызов метода >>>> Привет
Для доступа к свойствам объекта внутри метода используется ключевое слово this. Оно содержит ссылку на объект, с помощью которого был вызван метод:
var o = {
name: "Homer",
sayName: function() {
alert (this.name);
}
};
o.sayName(); // "Homer"
Вместо ключевого слова this можно использовать непосредственно имя объекта, но это не очень удобно, так как, если изменится имя объекта, в методах придётся также изменять имя.
ДОПОЛНИТЕЛЬНО
Конструктор - это функция, которая выполняет инициализацию свойств объекта и предназначена для использования совместно с оператором new:
//определяем конструктор
function Car(seats) {
this.seats = seats;
this.canDrive = true;
}
//вызываем конструктор для создания нового объекта
var myCar = new Car("leather");
18. Dom. Понятие объектной модели документа. Методы поиска элементов на веб-странице
Для работы с элементами web-страницы на клиентской стороне используется объектная модель документа (Document Object Model, DOM). DOM-модель – это внутреннее представление HTML-страницы в виде дерева.
Все элементы страницы, включая теги, текст, комментарии, являются взаимосвязанными узлами DOM (узлы DOM-дерева являются объектами). Из корня дерева по ссылкам можно добраться абсолютно до любого узла (корневым элементом документа является тег <html>).
В HTML-странице помимо тегов используются комментарии и простой текст (перенос строки - это тоже текст). В DOM-модели они тоже представляют отдельные узлы. Поэтому общий вид дерева будет такой(см. рис).
Узлы-элементы - это теги, из которых состоит документ.
Текстовые узлы - весь текст внутри тега, включая пробелы и переносы строки. Перед <head> и после </body> текстовые узлы не создаются.
Комментарии - комментарии в коде страницы.
У элементов DOM есть свойства и методы, которые позволяют изменять их.
Основным назначением DOM-модели является возможность изменения HTML-страницы (и ее отображения на экране) в сценариях JavaScript.
Связи между объектами различных уровней, показанные на рис. ниже означают, что объект верхнего уровня содержит ссылку на объект нижнего уровня. Так, например, между объектами Window и Document есть связь. Это означает, что объект Window имеет свойство с именем document, содержащее ссылку на объект типа Document.
Рис. Иерархия объектов web-страницы
Основным объектом для работы с DOM-моделью является глобальная переменная document, которая ссылается на объект Document, описывающий HTML-документ, отображаемый в окне браузера.
Методы объекта Document:
open() - открывает новый документ; при этом для текущего документа все его содержимое удаляется.
close() - закрывает ранее открытый документ, фиксируя внесенные изменения.
clear() - очищает содержимое документа.
write() - записывает в документ заданную в качестве аргумента строку.
writeln() - аналогичен предыдущему, но выведенная в документ строка заканчивается символом перевода строки.
Для хранения произвольного количества ссылок на объекты, расположенные на web-странице, используются массивы. Поэтому свойства объекта Document, предназначенные для связи с компонентами web-страницы, выглядят следующим образом:
• links[ ] – массив ссылок на гипертекстовые связи, сформированные в HTML-документе с помощью элементов <а>;
• images[ ] – массив ссылок на изображения, включенные в состав web-страницы с помощью элемента <img>;
• forms[ ] – массив ссылок на формы, созданные посредством элементов <form>.
В этих массивах ссылки на объекты Link, Image и Form содержатся в том же порядке, в котором они встречаются в исходном тексте HTML- документа. Так, images[0] ссылается на первое изображение в составе web- страницы, images[1] – на второе изображение и т. д.
Объект Form ссылается на интерактивные элементы, принадлежащие HTML-форме документа. Несмотря на то, что каждый из элементов является объектом определенного типа (например, Text, Password, Radio, Checkbox и т. д.), для их описания существует также обобщенный тип Element. Соответственно, ссылки на интерактивные элементы, принадлежащие форме, содержатся в свойстве elements объекта Form.
Например, чтобы получить строку текста (value), которую пользователь ввел в первой форме (forms[0]) с помощью 3-го элемента управления (elements[2]), можно использовать следующее выражение:
line = document.forms[0].elements[2].value;
В результате выполнения данной команды значение третьего элемента управления, принадлежащего первой форме, входящей в состав текущего документа, будет скопировано в переменную line.
Для получения ссылки на требуемый объект DOM чаще всего используются методы быстрого поиска элементов HTML:
• document.getElementByld(id) – для поиска элементов по значению атрибута id в элементах документа;
• document.getElementsByTagName(tag) – возвращает коллекцию всех элементов с определенным тэгом, и среди них можно искать нужный; например, можно получить второй элемент с тэгом <р>: document. getElementsByTagName('p')[1];
• document.getElementsByName(name) – возвращает все элементы, у которых имена (атрибут name) равны заданному значению; работает только с элементами, у которых имеется атрибут name, например, form, input, a, select, textarea и ряд других, более редких; данный метод не будет работать с остальными элементами типа div, р и т. п.;
• getElementsByClassName() – для поиска элементов по классу, но он работает не во всех браузерах, поэтому его редко используют.
После определения ссылки на требуемый объект (элемент документа), можно выполнять изменение его свойств и атрибутов. Например, следующий код изменит цвет текста на голубой (blue) в div- контейнере с идентификатором dataKeeper:
document.getElementByld('dataKeeper').style.color = 'blue';
Для изменения содержания элементов HTML-документа без перерисовки всей страницы нужно использовать свойство innerHTML. Обычно данное свойство используется вместе с функцией getElementByld() для получения ссылки на требуемый элемент документа:
document.getElementByld('ID эпемента').innerHTML = 'содержание';
Например, вывод сообщений в тэге <р> можно выполнить следующим образом:
<script >
function Msg1(){
document.getElementByld('myText').innerHTML = 'Спасибо!';
}
function Msg2(){
document.getElementByld('myText').innerHTML = 'Попробуй получить сообщение 1 еще раз...';
}
</script>
<input type="button1" onclick="Msg1()” value=”Показать сообщение 1" />
<input type-'button2" onclick="Msg2()" value="Показать сообщение 2" />
<p id="myText"></p>
Введенный пользователем текст можно вывести на экран в тэге с id=”userMsg":
<script type="text/javascript”> function showMsg(){
var userlnput = document.getElementByld('userlnput').value; document.getElementByld('userMsg').innerHTML = userlnput;
}
</script>
<input type=''input" maxlength=''40" id-'userlnput” onkeyup=”showMsg()" value="Введите текст здесь ..." />
<p id="userMsg"></p>