Практическое задание.

1. Создайте главную страницу сайта магазина электронной техники.

2. Оформите главное меню сайта в виде кнопок, при нажатии на которые появляются анимированные меню. Главное меню содержит следующие пункты: «Компьютеры» - «Стационарные», «Ноутбуки», «Нетбуки», «Планшетники»; «Мобильные телефоны» - «Телефоны», «Смартфоны»; «Другие устройства» - «Видеорегистраторы», «Навигаторы», «Цифровые фотоаппараты»; «Контакты». При наведении указателя мыши на каждый пункт меню цвет его должен меняться. Пункты меню должны подсвечиваться при наведении на них указателя.

3. Разместить на главной странице часы с текущим временем и календарь с указанием текущей даты и дня недели.

4. При наведении на пункт меню в строке состояния должно появляться название страницы, которую можно открыть.

5. При входе на сайт должно поверх главной страницы появляться окно с предложением войти под своим именем или зарегистрироваться.

Вопросы для контроля.

1. Что представляет собой объектная модель JavaScript?

2. Каким образом представлены массивы данных в JS?

3. Объясните назначение и свойства объекта String.

4. Объясните назначение и свойства объекта Number.

5. Объясните назначение и свойства объекта Function.

6. Объясните назначение и свойства объекта String.

7. Объясните назначение и свойства объекта Date.

8. Объясните назначение и свойства объекта Array.

9. Объясните назначение и свойства объекта Boolean.

Дисциплина «Программное обеспечение компьютерных сетей» Специальность 230105 Лабораторная работа №3. «Создание пользовательских объектов и обработка событий».

Теоретическая часть.

Свои методы объектов

При объявлении в объект можно записать функцию. Она становится его методом, например:

   

01	var user = {

02	name: 'Василий',

03

04

// метод

05	sayHi: function() {

06	alert('Привет!');

07

}

08

09

};

10

11	// Вызов метода

12	user.sayHi();

Можно создать метод и позже, явным присвоением:

   

01	var user = {

02	name: 'Василий'

03

};

04

05	user.sayHi = function() {

06	alert('Привет!');

07

};

08

09	// Вызов метода:

10	user.sayHi();

Доступ к объекту через this

Для полноценной работы метод должен иметь доступ к данным объекта. В частности, вызовuser.sayHi() может захотеть вывести имя пользователя.

Для доступа к объекту из метода используется ключевое слово this. Значением this является объект, в контексте которого вызван метод, например:

   

1	var user = {

2	name: 'Василий',

3

4	sayHi: function() {

5	alert( this.name );

6

}

7

};

8

9	user.sayHi();

Здесь при выполнении функции user.sayHi() в this будет храниться ссылка на текущий объектuser.

В данном случае вместо this можно было бы использовать и переменную: alert( user.name ), но объект user может быть куда-то передан, переменная user перезаписана и т.п. Использование thisгарантирует, что функция работает именно с тем объектом, в контексте которого вызвана.

Через this можно обратиться к любому свойству объекта, а при желании и передать его куда-то:

   

01	var user = {

02	name: 'Василий',

03

04	sayHi: function() {

05	showName(this); // передать текущий объект в showName

06

}

07

};

08

09	function showName(obj) {

10	alert( obj.name );

11

}

12

13	user.sayHi();

Создайте объект calculator с тремя методами:

• readValues() запрашивает prompt два значения и сохраняет их как свойства объекта

• sum() возвращает сумму двух значений

• mul() возвращает произведение двух значений

результат кода:

1	var calculator = {

2	... ваш код...

3

}

4

5	calculator.readValues();

6	alert( calculator.sum() );

7	alert( calculator.mul() );

Есть объект «лестница» ladder:

01	var ladder = {

02

step: 0,

03	up: function() {  // вверх по лестнице

04	this.step++;

05

},

06	down: function() {  // вниз по лестнице

07	this.step--;

08

},

09	showStep: function() { // вывести текущую ступеньку

10	alert(this.step);

11

}

12

};

Сейчас работать с ним скучно:

1	ladder.up();

2	ladder.up();

3	ladder.down();

4	ladder.showStep(); // 1

Модифицируйте код, чтобы вызовы можно было делать цепочкой, вот так:

ladder.up().up().down().up().down().showStep();  // 1

Такой подход используется, например, во фреймворке jQuery.