Предопределенные объекты языка JavaScript. Работаем с data атрибутами в HTML5 Использование dataset API
Давным-давно, во времена XHTML/HTML4 у разработчиков было всего несколько возможностей, которыми они могли пользоваться для того, чтобы хранить произвольные данные, относящиеся к DOM. Вы могли изобретать свои собственные атрибуты, но это было рискованно - ваш код не был бы валидным, браузеры могли игнорировать ваши данные, и это могло вызвать проблемы, если название совпадало со стандартными атрибутами HTML.
Поэтому большинство разработчиков завязывались на атрибуты class или rel так как они были единственным разумным способом хранить дополнительные строки. К примеру, предположим, что мы создаем виджет для отображения сообщений типа временной линии сообщений в Twitter. В идеале JavaScript должен иметь возможность конфигурирования без необходимости переписывать код, так что мы определяем идентификатор пользователя в атрибуте class, например:
Наш JavaScript код будет искать элемент с ID msglist . С помощью скрипта мы будем искать классы, начинающиеся с user_ , а “bob” в нашем случае будет идентификатором пользователя, и мы отобразим все сообщения этого пользователя.
Скажем, мы бы хотели также задать максимальное количество сообщений, и пропускать сообщения старше шести месяцев (180 дней):
Наш атрибут class очень быстро загромождается - проще допустить ошибку, а разбор строк на JavaScript становится все сложнее.
Data-атрибуты HTML5К счастью, в HTML5 была введена возможность использовать пользовательские атрибуты. Вы можете использовать любое имя в нижнем регистре с префиксом data- , например:
Пользовательские data-атрибуты:
- это строки - в них вы можете хранить любую информацию, которая может быть представлена или закодирована в виде строки, например JSON. Приведение типов должно осуществляться с помощью JavaScript
- должны использоваться в тех случаях, когда нет подходящих элементов HTML5 или атрибутов
- относятся только к странице. В отличие от микроформатов они должны игнорироваться внешними системами, типа поисковых систем и поисковых роботов
Все браузеры позволяют вам получить и изменить data-атрибуты с использованием методов getAttribute и setAttribute:
Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);
Это работает, но должно использоваться только для поддержания совместимости со старыми браузерами.
Пример №2 обработки на JavaScript: метод data() библиотеки jQueryНачиная с версии jQuery 1.4.3 метод data() обрабатывает data-атрибуты HTML5. Вам нет необходимости явно указывать префикс data- , так что подобный код будет работать:
Var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("list-size", show+3);
Но как бы то ни было, имейте в виду, что jQuery пытается конвертировать значения таких атрибутов в подхдящие типы (булевы значения, числа, объекты, массивы или null) и затронет DOM. В отличие от setAttribute , метод data() физически не заменит атрибут data-list-size - если вы проверите его значение вне jQuery - оно все еще останется равным 5.
Пример №3 обработки на JavaScript: API для работы с наборами данныхИ, наконец, у нас есть API для работы с наборами данных HTML5, которое возвращает объект DOMStringMap. Необходимо помнить, что data-атрибуты отображаются в объект без префиксов data- , из названий убираются знаки дефиса, а сами названия конвертируются в camelCase, например:
| Имя атрибута | Имя в API набора данных |
| data-user | user |
| data-maxage | maxage |
| data-list-size | listSize |
Наш новый код:
Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;
Данный API поддерживается всеми современными браузерами, но не IE10 и ниже. Для таких браузеров существует обходной путь , но, наверное, куда практичнее использовать jQuery, если вы пишете для старых браузеров.
В языке JavaScript имеется три типа объектов: встроенные объекты, объекты браузера и объекты, которые программист создает самостоятельно (рис. 2.1).
Рис. 2.1. Объекты в сценариях JavaScript
Каждый из этих типов имеет свое назначение и свои особенности.
Встроенные объектыНиже мы перечислили встроенные объекты, свойства и методы которых доступны в сценариях JavaScript без предварительного определения этих объектов:
Здесь символом * отмечены встроенные объекты, определенные в языке Microsoft JScript версии 3.0. Эта версия реализована в браузере Microsoft Internet Explorer версии 4.0.
Встроенные объекты очень удобны для выполнения различных операций со строками, календарными датами, массивами, числами и так далее. Они освобождают программиста от выполнения различных рутинных операций вроде преобразования строк или вычисления математических функций.
Как работать со встроенными объектами?
Достаточно просто. Программа создает реализации (instance) объектов, а затем обращается к свойствам и методам объектов.
В качестве примера, имеющего практическое значение, рассмотрим документ HTML, в котором отображается текущая дата и время. Исходный текст этого документа вы найдете в листинге 2.1.
Листинг 2.1. Файл chapter2/date/date.html
Show date and time Show date and timeЗдесь сценарий JavaScript создает объект Data, применяя для этого ключевое слово new, знакомое всем поклонникам языка С++, и конструктор Date без параметров:
var dt; dt = new Date();Создаваемый таким образом объект Data инициализируется текущей локальной датой, установленной у пользователя (а не на сервере Web, с которого был загружен соответствующий документ HTML).
В следующей строке формируется текстовая строка даты:
szDate = "Date: " + dt.getDate() + "." + dt.getMonth() + "." + dt.getYear();Значение календарного числа, номера месяца и года здесь получается при помощи методов getDate, getMonth и getYear, соответственно. Эти методы вызываются для объекта dt, содержащего текущую дату.
Текстовая строка даты выводится в документ HTML с помощью метода write, определенного в объекте document:
document.write(szDate);Этот способ мы уже использовали в примерах сценариев, приведенных в первой главе нашей книги.
Заметим, что объект Date содержит также информацию о текущем времени. Эта информация извлекается для отображения с помощью методов getHours, getMinutes и getSeconds (соответственно, часы, минуты и секунды):
document.write("Time: " + dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds());Внешний вид документа HTML при его просмотре в окне браузера Microsoft Internet Explorer версии 4.0 показан на рис. 2.2.
Рис. 2.2. Просмотр локальной даты и времени
Применение других встроенных объектов мы продемонстрируем позже по мере изучения материала.
Объекты браузераС точки зрения сценария JavaScript браузер представляется иерархически организованным набором объектов. Обращаясь к свойствам и методам этих объектов можно выполнять различные операции над окном браузера, загруженным в это окно документом HTML, а также над отдельными объектами, размещенными в документе HTML. Например, можно создавать новые окна браузера, загружая в них документы HTML, динамически формировать текст документа HTML, обращаться к полям форм, определенных в документе HTML и так далее.
Объекты браузера являются тем интерфейсом, с помощью которого сценарий JavaScript взаимодействует с пользователем и документом HTML, загруженным в окно браузера, а также с самим браузером. В сценариях JavaScript вы не можете создавать новые классы на базе классов, соответствующих этим объектам, однако свойства и методы объектов браузера вам доступны.
Иерархия объектов браузераИерархия объектов браузера схематически показана на рис. 2.2.
Рис. 2.2. Иерархия объектов браузера
Объект window находится в корне иерархии. Когда в окно браузера загружается документ HTML, внутри этого объекта создаются другие объекты - document, parent, frame, location и top.
Если в окно браузера загружается документ HTML с фреймами, то для каждого фрейма создается отдельное окно, причем это окно создается как объект window.
Объект document содержит в себе другие объекты, состав которых полностью определяется документом HTML, загруженным в окно браузера. Это могут быть формы, ссылки на другие документы HTML или локальные ссылки внутри одного документа, объекты, определяющие адрес URL документа и так далее.
Если в документе имеются формы, то они также представляются в виде иерархического набора объектов. Объект-форма может содержать в себе такие объекты, как кнопки, переключатели, поля для ввода текстовой информации.
Обращаясь к свойствам перечисленных выше объектов, сценарий JavaScript может определить различные характеристики документа HTML, такие как, например, заголовок. Ему доступны все ссылки, размещенные в документе, а также содержимое полей форм, определенных в документе HTML.
События, связанные с объектамиСделаем еще одно очень важное замечание относительно объектов браузера.
С каждым таким объектом связывается определенный набор событий, обработка которых возможна в сценарии JavaScript.
Например, с объектом window связаны события onLoad и onUnload. Первое из этих событий возникает, когда браузер завершает загрузку окна и всех расположенных в нем фреймов (если эти фреймы определены в окне). Второе событие возникает, когда пользователь завершает работу с документом, закрывая окно браузера или переключаясь на другой документ.
Сценарий JavaScript может, например, при обработке события onLoad выводить для пользователя приветственное сообщение или запрашивать дополнительную информацию. При завершении работы с окном (когда возникает событие onUnload) сценарий может освобождать какие-либо ресурсы, связанные с этим окном, или выводить сообщение на экран монитора.
С другими объектами браузера также связаны события. Мы расскажем о них при описании этих объектов.
Объекты на базе классов, создаваемых программистомМногочисленные книги для начинающих, посвященные языку программирования С++, предлагают представить себе класс как структуру данных, где помимо обычных полей определены функции-методы для работы с этими данными. Так вот, в языке JavaScript для создания собственных классов используется прямо противоположный метод.
Класс JavaScript создается как функция, в которой определены свойства, играющие роль данных. Что же касается методов, то они тоже определяются как функции, но отдельно.
Приведем конкретный пример.
Пусть нам нужно создать класс, предназначенный для хранения записи воображаемой телефонной базы данных. В этом классе нам нужно предусмотреть свойства для хранения имени, фамилии, номера телефона, адреса, а также специального признака для записей, закрытых от несанкционированного доступа. Дополнительно требуется разработать методы, предназначенные для отображения содержимого объекта в табличном виде, как это показано на рис. 2.3.
Рис. 2.3. Просмотр содержимого записей
Прежде всего займемся созданием собственного класса с названием myRecord. Пусть пока в нем не будет методов, мы добавим их позже.
Искомый класс создается следующим образом:
function myRecord(name, family, phone, address) { this.name = name; this.family = family; this.phone = phone; this.address = address; this.secure = false; }Нетрудно заметить, что описание нашего класса есть ни что иное, как функция конструктора. Параметры конструктора предназначены для установки свойств объекта при его создании на базе класса.
Свойства определяются простыми ссылками на их имена с указанием ключевого слова this. Это ключевое слово здесь указывает, что в операторе выполняется ссылка на свойства того объекта, для которого вызван конструктор, то есть для создаваемого объекта.
Обратите внимание, что наш конструктор инициализирует свойство с именем secure, записывая в него значение false. Соответствующий параметр в конструкторе не предусмотрен, что вполне допустимо.
Как пользоваться определенным классом?
На базе этого класса вы можете создать произвольное количество объектов. Ниже мы привели фрагмент сценария JavaScript, где на базе класса myRecord создается два объекта rec1 и rec2:
var rec1; var rec2; rec1 = new myRecord("Иван", "Иванов", "000-322-223", "Малая Большая ул., д. 225, кв. 226"); rec2 = new myRecord("Петр", "Петров", "001-223-3334", "Большая Малая ул., д. 552, кв. 662"); rec2.secure = true;Объекты создаются при помощи оператора new, знакомого тем, кто составлял программы на языках С++ и Java. Здесь мы передаем конструктору параметры для инициализации свойств создаваемых объектов.
Что же касается свойства с именем secure, то в объекте rec2 оно инициализируется уже после создания последнего. В него записывается значение true. Мы не изменяли свойство secure объекта rec1, поэтому в нем хранится значение false.
Теперь наша задача - добавление в определенный нами класс новых методов с именами printTableHead, printTableEnd и printRecord. Первые два из этих методов выводят в документ HTML, соответственно, начальный и конечный фрагмент таблицы, а третий - строки таблицы, отражающие содержимое записей.
В сокращенном виде новое определение класса myRecord представлено ниже:
function printTableHead() { . . . } function printTableEnd() { . . . } function printRecord() { . . . } function myRecord(name, family, phone, address) { this.name = name; this.family = family; this.phone = phone; this.address = address; this.secure = false; this.printRecord = printRecord; this.printTableHead = printTableHead; this.printTableEnd = printTableEnd; }Здесь перед определением конструктора мы расположили определения для функций-методов нашего класса. Кроме этого, в конструктор добавлено определение новых свойств:
this.printRecord = printRecord; this.printTableHead = printTableHead; this.printTableEnd = printTableEnd;После такого определения класса вы можете создавать объекты и обращаться к определенным методам:
rec1.printTableHead(); rec1.printRecord(); rec1.printTableEnd(); rec2.printTableHead(); rec2.printRecord(); rec2.printTableEnd();Возвращаясь к документу, показанному выше на рис. 2.3, приведем его полный исходный текст (листинг 2.2).
Листинг 2.2. Файл chapter2/NewObject/NewObject.html
Просмотр записей Просмотр записейОпределение нового класса myRecord и его методов мы расположили в области заголовка документа HTML, как это принято делать.
Метод printTableHead выводит в документ HTML заголовок таблицы. Внешний вид этого заголовка зависит от содержимого свойств объекта.
Прежде всего метод printTableHead проверяет свойство secure, получая его значение при помощи ключевого слова this:
var szSec = ""; if(this.secure) szSec = " (Secure)"; else szSec = " (Unsecure)".fontcolor("red");Здесь это ключевое слово означает, что необходимо использовать свойство того объекта, для которого был вызван метод printTableHead.
Если содержимое свойства secure равно true, в текстовую переменную szSec записывается строка " (Secure)". Если же оно равно false, в эту переменную заносится строка " (Unsecure)", причем для строки устанавливается красный цвет.
Так как в JavaScript все текстовые строки (в том числе и литералы) являются объектами встроенного класса String, то для них можно вызывать определенные в этом классе методы. В частности, метод fontcolor позволяет установить цвет строки, чем мы и воспользовались.
Далее метод printTableHead выводит в документ HTML оператор
"); }
Последний метод, определенный в нашем классе, называется printRecord. Он печатает содержимое первых четырех свойств объекта как строку таблицы, определенной в документе HTML только что описанной функцией printTableHead.
Обратите внимание, что содержимое свойств объекта печатается наклонным шрифтом, для чего мы вызываем метод italics:
document.write("Определение класса myRecord мы уже описали выше.
Перейдем теперь ко второй части нашего сценария, расположенной в теле документа HTML.
Здесь мы создаем два объекта rec1 и rec2 на базе класса myRecord, а затем устанавливаем свойство secure объекта rec2 в состояние true.
Как видите, применение собственного класса позволили сильно упростить задачу инициализации и отображения содержимого записей нашей воображаемой телефонной базы данных. Фактически мы свели эту задачу к вызовам нескольких методов, определенных заранее в нашем классе.
На уроке будет рассмотрена темы Javascript объекты. Речь пойдет о пользовательских объектах: создание объекта в javaScript, работа со свойствами и методами объекта, а также javascript прототипами. Кратко излагается работа с объектами Location , Navigator , Screen
Задача сайта сайт — получение пользователями практических навыков работы с языком. Лабораторные работы по javaScript, изложенные по мере увеличения их сложности и подкрепляемые наглядными решенными примерами, позволят с легкостью воспринять изучаемый материал и научиться самостоятельно создавать «живые», динамические веб-страницы.
В javaScript существует несколько видов объектов:
- встроенные объекты
- объекты браузера
- объекты, которые программист создает самостоятельно (пользовательские)
Встроенные объекты — это предопределенные объекты , … Большинство из которых уже были рассмотрены в предыдущих уроках.
Об объектах браузера в javaScript речь пойдет в дальнейших уроках.
А сейчас время познакомиться с пользовательскими объектами в javaScript .
- Object(объекты)
- Number (обработка чисел)
- String (обработка строк)
- Array (массивы)
- Math (математические формулы, функции и константы)
- Date (работа с датами и временем)
- RegExp
- Global (его свойства Infinity, NaN, undefined)
- Function
Существует 2 способа создания объектов:
var имя_объекта = new Object(); имя_объекта.свойство = значение;// точечная нотация имя_объекта["свойство"] = значение;// скобочная нотация
Важно: Стоит заметить, что в качестве значения нельзя использовать цифру: myObg.rost = 2 // НЕЛЬЗЯ! myObg.rost = "2" // можно
Пример: Создать объект myBrowser со свойствами name (значение ) и version (значение «9.0 »)
✍ Решение 1:
var myBrowser = new Object(); myBrowser.name= "Microsoft Internet Explorer"; myBrowser["version"]= "9.0";
Пример: Создать два объекта-коллекции (car и moto) со свойствами color и brand . Вывести значение свойства color у объекта car и свойства brand у объекта moto .
✍ Решение:
| var car = new Object () ; car.color = "Белый" ; car.maxSpeed = 220 ; car.brand = "Nissan" ; document.write ("У машины цвет: " + car.color ) ; var moto = { color: "Синий" , horsePower: 130 , brand: "Yamaha" } ; document.write ("У мотоцикла производитель: " + moto.brand ) ; |
var car = new Object(); car.color = "Белый"; car.maxSpeed=220; car.brand = "Nissan"; document.write("У машины цвет: " + car.color); var moto = { color: "Синий", horsePower: 130, brand: "Yamaha" }; document.write("У мотоцикла производитель: " + moto.brand);
Цикл «для каждого» for in при работе с объектами в javascript
Совсем немного об этой конструкции уже было сказано в .
Цикл for in в javascript предназначен для прохода по массивам, коллекциям и объектам.
Рассмотрим пример использования for in:
| 1 2 3 4 5 6 7 8 | var myBrowser = new Object () ; myBrowser.name = "Microsoft Internet Explorer" ; myBrowser[ "version" ] = "9.0" ; for (var a in myBrowser) { alert(a) ; // Перебирает свойства объекта myBrowser. Выдаст name, version alert(myBrowser[ a] ) ; // Выдаст значения свойств } |
var myBrowser = new Object(); myBrowser.name= "Microsoft Internet Explorer"; myBrowser["version"]= "9.0"; for (var a in myBrowser) { alert(a); // Перебирает свойства объекта myBrowser. Выдаст name, version alert(myBrowser[a]); // Выдаст значения свойств }
Создание классов-конструкторов осуществляется в два этапа:
Создание класса объектов с помощью конструктора (создание классов-конструкторов):
function Имя_класса_объектов(св-во1, св-во2){ this.св-во1 = значение; this.св-во2 = значение; }
Создание нового объекта на основе конструктора для класса объектов:
var имя_объекта = new имя_класса("значение_св-ва1","значение_св-ва2");
var имя_объекта =new имя_класса(); имя_объекта.св-во1="значение_св-ва1"; имя_объекта.св-во2="значение_св-ва2";
Название класса конструктора принято писать с заглавной буквы!
Рассмотрим пример:
Пример: Создание конструктора для класса объектов и создание объекта на основе этого класса: создать объект myBrowser со свойствами name (значение “Microsoft Internet Explorer” ) и version (значение «9.0 »)
Открыть решение
| 1 2 3 4 5 6 7 8 | function Browser (name, version) { this .name = name; this .version = version; } var myBrowser = new Browser("Microsoft Internet Explorer" , "9.0" ) ; alert(myBrowser.name ) ; alert(myBrowser.version ) ; |
function Browser (name, version){ this.name = name; this.version = version; } var myBrowser = new Browser("Microsoft Internet Explorer","9.0"); alert(myBrowser.name); alert(myBrowser.version);
Итак, сравним еще раз с первым способом создания объектов:
// объект-коллекция var myBrowser = {name: "Microsoft Internet Explorer", version: "7.0"}; alert(myBrowser.name); alert(myBrowser.version); // следующая строка недопустима! var myBrowser1 = new myBrowser ("MozillaFirefox","3.5"); // НЕ ВЕРНО! !!
Важно: В случае создания объекта-коллекции нельзя создавать экземляр класса, так как это не класс
Задание js 6_1. Создать объект Сотрудник, который содержит сведения о сотрудниках некоторой фирмы, такие как Имя, Отдел, Телефон, Зарплата (использовать функцию-конструктор и ключевое слово this). Создать экземпляр объекта
Доступ к свойствам объектов в javaScriptИмя_объекта. имя_свойства
| 1 2 | agent007.Имя = "Бонд" ; alert(agent007.Имя) ; |
agent007.Имя = "Бонд"; alert(agent007.Имя);
Что такое свойство по умолчанию
Функция-конструктор позволяет наделить объект свойствами по умолчанию. Эти свойства будут у каждого создаваемого экземпляра объекта
| 1 2 3 4 5 6 7 8 9 10 | function Student(name, phone) { this .name = name; this .phone = "22-22-22" ; // свойство по умолчанию! } var ivanov = new Student("Ivan" , "33-33-33" ) ; alert (ivanov.name ) ; // выдаст "Ivan" alert (ivanov.phone ) ; // выдаст "22-22-22" ivanov.phone = "33-33-33" ; //меняем св-во по умолчанию alert (ivanov.phone ) ; // выдаст "33-33-33" |
function Student(name, phone) { this.name=name; this.phone="22-22-22"; // свойство по умолчанию! } var ivanov = new Student("Ivan","33-33-33"); alert (ivanov.name); // выдаст "Ivan" alert (ivanov.phone); // выдаст "22-22-22" ivanov.phone="33-33-33"; //меняем св-во по умолчанию alert (ivanov.phone); // выдаст "33-33-33"
Добавление свойств к классу объектов
Значение свойства можно добавить для:
- конкретного экземпляра объекта;
- целого класса объектов
Добавление свойств к конкретному (экземпляру) объекту:
имя_объекта. имя_свойства = значение
ivanov.biology = "отлично";
Важно: В примере свойство задается для конкретного объекта, а не для класса объектов!
Добавление свойств к классу объектов:
имя_класса.prototype. имя_свойства = значение
Student.prototype.biology = "отлично";
Важно: В примере свойство (по умолчанию) задается для класса объектов! Это сделано при помощи prototype ; прототип — объект, определяющий структуру
| 1 2 | Student.prototype .email = "[email protected]" ; alert(ivanov.email ) ; // выдаст "[email protected]" |
Student.prototype.email="[email protected]"; alert(ivanov.email); // выдаст "[email protected]"
Пример: Пример вывода всех свойств объекта со значениями
| 1 2 3 4 5 6 7 8 9 | var
summerTour=
{
turkey :
2000
,
spain :
3000
,
egypt :
1000
}
;
var
option;
for
(option in
summerTour)
{
document.write
(option +
":"
+
summerTour[
option]
+
" " ) ; } |
var summerTour={
turkey: 2000,
spain: 3000,
egypt: 1000
};
var option;
for (option in summerTour){
document.write(option + ":" + summerTour + "
");
}
Javascript прототипы (введение)
Рассмотрим пример того, как строятся javascript классы на прототипах
Пример: Создать класс объекта Cаr (автомобиль) с тремя свойствами: name (название), model (модель), color (цвет). Создать экземпляр класса с конкретными значениями свойств. Затем через созданный экземпляр добавить к классу свойство owner (владелец) с конкретным значением по умолчанию (Иванов ). Вывести все значения свойств созданного экземпляра
| function Car(name, model, color) { /* конструктор объекта car*/ this .name = name; this .model = model; this .color = color; } var myCar= new Car; myCar.name = "Мерс" ; myCar.model = "600" ; myCar.color = "green" ; Car.prototype .owner = "Иванов" ; /* добавляем новое свойство*/ alert(myCar.name + " " + myCar.model + " " + myCar.color + " " + myCar.owner ) ; |
function Car(name, model, color) { /* конструктор объекта car*/ this.name = name; this.model = model; this.color = color; } var myCar=new Car; myCar.name="Мерс"; myCar.model="600"; myCar.color="green"; Car.prototype.owner = "Иванов"; /* добавляем новое свойство*/ alert(myCar.name+" "+myCar.model+" "+myCar.color+" "+myCar.owner);
Задание js 6_2. Для задания js 6_1 через созданный экземляр объекта Сотрудник добавьте новое свойство адрес к классу объектов
JavaScript методы объектовСоздание метода объекта
Пример: Добавить к конструктору объектов Browser метод aboutBrowser , который будет выводить на экран обозревателя информацию о свойствах этого объекта
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | function showBrowser() { document.write ("Обозреватель: " + this .name + " " + this .version ) ; } function Browser(name, version) { this .name = name; this .version = version; this .aboutBrowser = showBrowser; } var myBrowser= new Browser("Microsoft Internet Explorer" , 8.0 ) ; myBrowser.aboutBrowser () ; |
function showBrowser() { document.write("Обозреватель: " + this.name + " " + this.version); } function Browser(name, version) { this.name = name; this.version = version; this.aboutBrowser = showBrowser; } var myBrowser=new Browser("Microsoft Internet Explorer",8.0); myBrowser.aboutBrowser();
function Browser(name, version) { this.name = name; this.version = version; this.aboutBrowser = function(){ document.write("Обозреватель: " + name + " " + version); } } var myBrowser=new Browser("Microsoft Internet Explorer",8.0); myBrowser.aboutBrowser();
Задание js 6_3.
Создать класс объектов (Tour) для работы туристической фирмы с методом подсчета стоимости поездки из расчета: количества человек
* количество дней
* тариф страны
. Создать экземпляр объекта turkeyTour со значениями свойств. Вывести все свойства объекта на экран. Метод объекта расчет создавать на основе функции.
Добавление свойств и методов к встроенным объектам (прототип)
JavaScript
— язык ООП (объектно-ориентированного программирования), базирующийся на прототипах.
Прототип
- объект, определяющий структуру
Рассмотрим работу с прототипами на примере:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* Изменение прототипа */ // Добавление свойства по умолчанию к встроенному объекту String .prototype .color = "black" ; // Добавление (изменение) метода к встроенному объекту String .prototype .write = stringWrite; function stringWrite() { document.write ("" ) ; document.write (this .toString () ) ; document.write ("" ) ; } // используем измененный класс var s = new String ("Это строка" ) ; s.color = "red" ; s.write () ; |
/* Изменение прототипа */ // Добавление свойства по умолчанию к встроенному объекту String.prototype.color = "black"; // Добавление (изменение) метода к встроенному объекту String.prototype.write = stringWrite; function stringWrite(){ document.write(""); document.write(this.toString()); document.write(""); } // используем измененный класс var s = new String("Это строка"); s.color = "red"; s.write();
Важно: К объекту Math нельзя добавлять свойства и методы
Задание js 6_4.
Дополните код программы для выполнения задания: К встроенному классу String добавить метод printMe() , который выводит слово «Ура!»
как заголовок (тег h…), указанного пользователем уровня ().
Уровень заголовка (1, 2 … 6) можно добавить в виде свойства класса String .
Вспомним, как должны выглядеть теги заголовков в HTML:
Дополните код:
| 1 2 3 4 5 6 7 8 | String .prototype .uroven = "1" ; ... function printZagolovok () { ... ... } var s= new ...; ... |
String.prototype.uroven="1"; ... function printZagolovok (){ ... ... } var s=new ...; ...
Резюме: сравним еще раз два варианта использования пользовательских объектов в JavaScript:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var
myBook=
new
Object
()
;
myBook.title
=
"книга"
;
myBook.price
=
"200"
;
alert(myBook[
"title"
]
)
;
// 1-й вариант обращения к свойствам
alert(meBook.price
)
;
// 2-й вариант обращения к свойствам
function
myBookShow()
{
for
(var
i in
myBook)
{
document.write
(i+
": "
+
myBook[
i]
+
" " ) ; // Перебор свойств } } myBook.show = myBookShow; myBook.show () ; |
var myBook=new Object();
myBook.title="книга";
myBook.price="200";
alert(myBook["title"]); // 1-й вариант обращения к свойствам
alert(meBook.price); // 2-й вариант обращения к свойствам
function myBookShow()
{
for (var i in myBook)
{
document.write(i+": "+myBook[i]+"
"); // Перебор свойств
}
}
myBook.show=myBookShow;
myBook.show();
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function myBook(title, price) { // определение свойств this .title = title; this .price = price; // определение метода this .show = show; function show() { document.write ("Название: " + this .title ) ; document.write ("Цена: " + this .price ) ; } } var book = new myBook("Книга" , 200 ) ; book.show () ; |
function myBook(title,price){ // определение свойств this.title = title; this.price = price; // определение метода this.show = show; function show() { document.write("Название: " + this.title); document.write("Цена: " + this.price); } } var book = new myBook("Книга", 200); book.show();> Перейти на главную страницу ... ...
*Сложное: количество пунктов меню, их названия и url необходимо запрашивать у пользователя
Совет:
для вывода в методе show() строки на экран воспользуйтесь методом document.write()
Рассмотрим использование объекта Navigator в javaScript на примере:
Пример: Написать функцию, которая выводит на экран:
- название браузера
- язык браузера
- название ОС
- включены ли куки
- подключен ли пользователь к интернету
- разрешение экрана
- глубину цвета
- адрес загруженной страницы
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var
option;
// вывод всех свойств объекта navigator
for
(option in
navigator)
{
document.write
(option +
" : "
+
navigator[
option]
+
" " ) ; } // функция выовда конкретных свойств объекта navigator function userDetails () { document.write (" Название браузера: " + navigator.userAgent + " " ) ; document.write ("Язык браузера: " + navigator.language + " " ) ; document.write ("Название ОС: " + navigator.oscpu + " " ) ; document.write ("Включены ли куки: " + navigator.cookieEnabled + " " ) ; document.write ("Подключен ли Интернет: " + navigator.nLine + " " ) ; } userDetails() ; |
var option;
// вывод всех свойств объекта navigator
for (option in navigator){
document.write(option + " : " + navigator+ "
");
}
// функция выовда конкретных свойств объекта navigator
function userDetails (){
document.write("
Название браузера: " + navigator.userAgent + "
");
document.write("Язык браузера: " + navigator.language + "
");
document.write("Название ОС: " + navigator.oscpu + "
");
document.write("Включены ли куки: " + navigator.cookieEnabled + "
");
document.write("Подключен ли Интернет: " + navigator.nLine + "
");
}
userDetails();
Рассмотрим использование объекта Screen в javaScript на примере:
function userDetails (){
document.write("Разрешение: " + screen.width + " x " + screen.height + "
");
document.write("Глубина цвета: " + screen.colorDepth + " x " + screen.height + "
");
}
userDetails();
Рассмотрим использование объекта Location в javaScript на примере:
| 1 2 3 4 | function
userDetails ()
{
document.write
("Адрес загруженной страницы: "
+
location.href
+
" " ) ; } userDetails() ; |
function userDetails (){
document.write("Адрес загруженной страницы: " + location.href + "
");
}
userDetails();
Выводы:
- С помощью выражений с ключевым словом new вы можете создавать экземпляры объектов, то есть их конкретные воплощения.
- Более того, благодаря свойству javascript prototype имеется возможность добавлять к объектам новые свойства и методы, придуманные пользователем и отсутствовавшие в исходных встроенных объектах.
- Создание объектов можно использовать для создания баз данных.
Статья, в которой рассмотрим, какие в jQuery существуют методы для работы с data-атрибутами и внутренним хранилищем Data.
Назначение HTML 5 data-атрибутовВ HTML5 к любому элементу документа можно добавить пользовательские атрибуты. Назначение данных атрибутов веб-разработчик определяет самостоятельно, но в большинстве случаев они предназначены для хранения некоторой информации, которую затем можно использовать в скриптах JavaScript. Пользовательские атрибуты всегда начинаются с data-* :
Работа с data-атрибутами посредством методов attr и removeAttr
Выполнение действий над атрибутами data в jQuery обычно осуществляется с помощью методов: attr и removeAttr .
// получить значение атрибута data у первого элемента текущего набора $("селектор").attr("data-*"); // добавить или изменить значение атрибута data у всех выбранных элементов $("селектор").attr("data-*","значение"); // удалить значение атрибута data у всех найденных элементов 1 способ - с помощью attr $("селектор").attr("data-*",null); 2 способ - с помощью removeAttr $("селектор").removeAttr("data-*");
Например, выведем значение data-атрибутов элемента div с id="phone-1" в консоль браузера:
// получим значения data-атрибутов var phoneInfo = "Наименование: " + $("#phone-1").attr("data-name") + "; Цена: " + $("#phone-1").attr("data-price"); // вывести значения в консоль console.log(phoneInfo);
Данный метод (attr) возвращает значение data-атрибута в виде строки.
Например, добавим атрибут data-year к вышеприведённому элементу:
$("#phone-1").attr("data-year", 2016);
Более детально разобраться, как работать с данными методами можно в статье jQuery - Работа с атрибутами HTML элементов .
jQuery - data-атрибуты и метод dataМетод data используется в jQuery не для общения с data-атрибутами. Его основное предназначение - это чтение данных из внутреннего хранилища jQuery ($.cache) или запись в него некоторой информации.
Внутреннее хранилище jQuery - это некий контейнер, в который можно помещать произвольную информацию, связанную с определённым DOM-элементом текущей страницы.
Но, тем не менее, данный метод может выполнять чтение HTML5 data-атрибутов, и помещать их во внутреннее хранилище. Это случается только в том случае, если в хранилище jQuery нет ключа с именем, равным имени data-атрибута. В противном случае вы получите значение из хранилища $.cache .
Таким образом работать с data-атрибутами посредством метода data имеет смысл только в том случае, если дальнейшая работа с ними будет вестись через хранилище jQuery.
Пример, в котором рассмотрим, как метод data работает с data-атрибутом:
// это действие поместит data-атрибут price в хранилище (если его нет в хранилище)
$("#book-1").data("price"); //значение 420 руб.
// изменим значение data-атрибута price элемента с помощью attr
$("#book-1").attr("data-price","513 руб.");
// прочитаем значение price (т.к. данное значение есть в хранилище $.cache, то оно будет взято из него)
$("#book-1").data("price"); //значение 420 руб.
// удалим ключ price, который связан с элементом book-1, из хранилища
$("#book-1").removeData("price");
// прочитаем значение price (т.к. данного значения нет в хранилище jQuery, то оно будет взято из data-атрибута и помещено в $.cache)
$("#book-1").data("price"); //значение 513 руб.
В методе data ключ соответствует имени data-атрибута без приставки data- .
// если у элемента div с id="pencil" нет ключа color в хранилище jQuery, то прочитаем значение атрибута data-pencil и поместим его значение в $.cache $("#pencil").data("color");
Кроме этого, если в окончании имени data-атрибута (после data-) содержится дефисы ("-"), то при обращении к нему с помощью метода data буквы стоящие перед дефисом должны быть заменены на заглавные, а сами дефисы убраны. Например, имя атрибута data-last-name должно быть указано в методе data как lastName .
Ещё один момент при работе с методом data заключается в том, что когда jQuery разбирает значение data-атрибута, то он пытается привести его значение (строку) к соответствующему типу JavaScript (булевскому значению, числу, объекту, массиву или null). Например, значение "420" преобразуется в число 420. Если значение data-атрибута является объектом (начинается с " { ") или массивом (начинается с " [ "), то jQuery использует для разбора значения метод parseJSON . Это означает то, что содержимое атрибута должно иметь валидный JSON синтаксис (включая указания имен свойств в двойных кавычках). Но если попытка разобрать значение data-атрибута окажется не удачной, то оно останется в исходном в виде (т.е. в виде строки).
В итоге, метод data используется для выполнения следующих операций (в зависимости от указанных аргументов):
1. Получение значения ключа, связанного с элементом, из внутреннего хранилища jQuery:
$("селектор").data("ключ");
Данный вариант метода data выполняет одно из следующих действий:
- Чтение data-атрибута (имя которого соответствует указанному ключу) у первого элемента текущего набора, помещение его в хранилище, и возвращение значение этого ключа в качестве результата. Данное действие данный метод выполняет только в том случае, если у элемента есть data-элемент соответствующий ключу и в контейнере $.cache у данного элемента нет записи с указанным ключом.
- Получает значение указанного ключа из хранилища jQuery. Это действие метод data выполняет только в том случае, если в $.cache у элемента есть указанный ключ.
- возвращает значение undefined или пустой объект, если ни одно из вышеперечисленных действий не выполняется.
Если в результате выборки $("селектор") возвращается несколько элементов, то данный метод возвращает значение только для первого элемента из полученного набора.
2. Получение всех данных в виде объекта JavaScript из хранилища jQuery, связанных с указанным элементом:
// вызов метода data осуществляется без аргументов $("селектор").data();
Более детально этот вариант метода data осуществляет следующее:
3. Метод data применяют не только для чтения значений, но и для записи данных (ключ-значение), ассоциированных с некоторым элементом DOM во внутреннее хранилище jQuery.
// 1 вариант (сохранить указанную пару ключ-значение для каждого выбранного элемента): $("селектор").data(ключ,значение); // ключ (строка) // значение (данные любого типа) // 2 вариант (установить набор пар ключ-значение (объект) для всех найденных элементов): $("селектор").data(obj); // obj - объект JavaScript, содержащий пары ключ-значение
Пример работы с методом data:
//помещение в хранилище jQuery ключа price со значением 550 $("#book-js").data("price",550); // прочитать информацию, связанную с элементом #book-js из хранилища (автоматическое помещение data-атрибута name в хранилище) $("#book-js").data(); // получим значение ключа price элемента #book-js $("#book-js").data("price"); // 550 // получим значение ключа price элемента #book-js $("#book-js").data("name"); // "JavaScript"
Методы для работы с data-хранилищем jQueryРассмотрим, какие ещё есть методы в jQuery для работы с data хранилищем кроме data .
Метод removeDataДанный метод предназначен для удаления данных, связанных с определённым элементом, из внутреннего хранилища jQuery. Данный метод не работает с data-атрибутами, поэтому все соответствующие ключу data-атрибуты удалены не будут.
Синтаксис метода removeData:
// 1 вариант - без параметров (удаляет все данные, связанные с текущим элементом, из внутреннего контейнера jQuery. Если в результате выборки будет возвращено несколько элементов, то метод removeData выполнит своё действие (удаление данных из $.cache) для каждого элемента. $("селектор").removeData(); // 2 вариант - со строковым параметром, содержащим название ключа, который необходимо удалить у всех найденных элементов $("селектор").removeData("ключ"); // 3 вариант - предназначен для удаления несколько пар данных, связанных с элементом, из внутреннего хранилища jQuery $("селектор").removeData("ключ1 ключ2 ..."); // 4 вариант - аналогичен 3 варианту, только ключи указываются посредством массива $("селектор").removeData(["ключ1","ключ2",...]);
Удалим несколько пар ключ-значений, ассоциированных с элементом с id="book-js" из хранилища jQuery:
// чтение всех ключ у элемента #book-js (автоматическое помещение data-атрибутов в data-контейнер jQuery) $("#book-js").data(); // удаление 2 ключей, связанных с #books-js из data-контейнера jQuery $("#book-js").removeData(["price","name"]);
Функция $.data()Данная функция выполняет действия аналогичные методу data , но в отличие от него работает на более низком уровне. Поэтому в большинстве случаев используют именно метод data , т.к. он является более удобным инструментом для работы с внутренним хранилищем jQuery.
Данная функция предназначена только для работы с jQuery хранилищем и в отличие от метода $("селектор").data() не извлекает данные из HTML 5 data-атрибутов.
Синтаксис функции jQuery.data() :
// 1 вариант - сохранение информации в jQuery хранилище $.data(element,key,value); // element - DOM-элемент, с которым будет связана пара ключ-значение // key - ключ (строка), который будет ассоциироваться со значением // value - значение (любой тип данных за исключением undefined) // 2 вариант - получение информации из jQuery хранилища $.data(element,key); // element - DOM-элемент, ассоциированный с данными // key - название, с которым связано искомое значение // 3 вариант - возвращение всех данных связанных с указанным элементом из data-хранилища $.data(element); // element - DOM-элемент, связанный с данными
Пример использования функции $.data() для сохранения информации, связанной с определённым DOM-элементом, в хранилище jQuery:
// сохранение в хранилище информации, связанной с элементом id="book-html" $.data(document.getElementById("book-html"),"name","HTML в действии"); // добавление ещё одной порции информации, связанной с этим же элементом $.data(document.getElementById("book-html"),"price","760"); "760" // получение данных из хранилища jQuery, связанных с элементом id="book-html", в виде объекта var obj = $.data(document.getElementById("book-html")); // получения значения name объекта var name = obj.name; // получения значения price объекта var price = obj.price;
Функция $.removeData()Эта функция также как и метод removeData применяется для удаления данных из внутреннего хранилища jQuery.
$.removeData() является низкоуровневой функцией, также как и $.data() . Поэтому более удобным вариантом является использование метода data() вместо функции $.data() .
Использование функции jQuery.removeData() :
// 1 вариант - удаление всей информации из хранилища связанной с указанным элементом $.removeData(element); // element - DOM-элемент, с которым связаны данные, подлежащие удалению // 2 вариант - удаляет пару ключ-значение из набора данных связанных с указанным элементом $.removeData(element,key); // element - DOM-элемент, ассоциированный с данными // key - ключ, определяющий набор информации (ключ-значение), который необходимо убрать из data-контейнера jQuery
Демонстрация использования функции removeData:
// помещение атрибутов data в хранилище jQuery $("#book-css").data(); // получения ключа price из хранилища jQuery $("#book-css").data("price"); // 1170 // получения ключа name из хранилища jQuery $("#book-css").data("name"); // "CSS для профессионалов" // удаление из хранилища ключа price $.removeData(document.getElementById("book-css"),"price"); // при получении несуществующего ключа элемента получаем значение undefined $.data(document.getElementById("book-css"),"price"); //undefined
Функция $.hasData()Эта функция определяет, имеет ли элемент, какие-либо данные во внутреннем хранилище jQuery.
Применение $.hasData() :
$.hasData(element); // element - DOM-элемент, который нужно проверить на наличие данных в $.cache
Функция hasData возвращает true , если в хранилище есть какие-либо данные связанные с указанным элементом. В противном случае данная функция возвращает false .
Внутреннее хранилище $.cache используется также самой библиотекой jQuery. Один из примеров - это использование его для хранения кода обработчиков событий jQuery.
Пример использования функции hasData:
// проверка данных во внутреннем хранилище связанных с элементом #book-css $.hasData(document.getElementById("book-css")); //false // поместим значение во внутреннее хранилище $("#book-css").data("name","CSS для профессионалов"); // проверка данных во внутреннем хранилище связанных с элементом #book-css $.hasData(document.getElementById("book-css")); //true // удалим значение из внутреннего хранилища $.removeData(document.getElementById("book-css")); // проверка данных во внутреннем хранилище связанных с элементом #book-css $.hasData(document.getElementById("book-css")); //false
Разобраться, как работать в jQuery с data-атрибутами, которые появились в спецификации языка HTML5, можно в статье "jQuery – Методы attr и removeAttr" . Эти методы (attr и removeAttr) используются не только для управления data-атрибутами, но и любых других атрибутов HTML элементов.