Пропустить навигацию

Практика 4

Задание

  1. Создайте web-страничку домашнего питомца (iPet.html). Он должен уметь следующее: При загрузке страницы – сообщать «Привет, я виртуальный питомец!» (функция greetUser), при первом клике на него мышкой, он должен спрашивать имя пользователя (по умолчанию должно быть предложено ваше имя), затем выводить сообщение «Приятно познакомиться, имя_пользователя!» и изменять свое настроение на хорошее (менять изображение на улыбающееся), по прошествии 15 секунд после изменения, настроение должно возвратиться в исходное состояние. При повторном нажатии на изображение (когда имя пользователя уже введено), должно выводиться сообщение «Спасибо, имя_пользователя,  мне нравится внимание!». Изображение должно быть ниже верхней границы окна клиента на 120 пикселей (clientHeight) и занимать 80% от оставшегося размера по вертикали. Размер изображения должен динамически реагировать на изменение размеров окна браузера (onresize). Питомец должен помнить имя пользователя после закрытия браузера. В случае, если имя пользователя известно питомцу – при загрузке страницы сообщать: «Привет, имя_пользователя, давно не виделись!» (cookies, функция greetUser). Возможно добавление дополнительных функций для питомца на ваше усмотрение. Свойства clientWidth/Height предлагаются к самостоятельному изучению.
  2. Создайте объект, например, car, содержащий следующие свойства: количество колес, количество дверей. Создайте несколько объектов (user_car01, user_car02 … user_carNN)  прототипом которых будет объект car. Объекты user_car должны содержать следующие свойства: “марка авто”, “модель”, “пробег”, “год выпуска”, “вес”, “цвет”. Объект user_car должен содержать метод подсчета среднего пробега за год (считающийся как «пробег»/(2015 – «год выпуска»)). Также он должен содержать метод вывода (getInfo()) своих свойств следующим образом:
    «Это автомобиль марки … модели … . Год выпуска … , пробег: … , вес: … , цвет: … . (this)
    Организуйте вывод на экран имён всех ваших объектов (user_car01, user_car02 … user_carNN), и кнопку, которая выводит в текстовый контейнер <p> с помощью метода getInfo свойства объекта, имя которого введет пользователь. (prompt, innerHTML)
    В качестве прототипа и производных объектов могут быть использованы любые реальные предметы и понятия, содержащие какие-то свойства:
     (Прототип: Student со свойствами: “группа”, “курс”; объекты student01… со свойствами “фамилия”, “имя”, “возраст” и т.п.)
    (Прототип: Jacket со свойствами “материал”, “сезон”, объекты Jacket01…  со свойствами “цвет”, “цена”, “бренд”, и т.п.)

 

 

Исходный код:

Файл iPet.html

<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>
<title>iPet</title>
<script type="text/javascript">
		var userName;

	function greetUser() {
		
	}
	function touchPet() {
	
	}
	
	</script>
</head>

<body onload=  onresize=>


</body>
</html>


Файл cookie.js

function writeCookie(name, value, days) {
	var expires = "";
	if (days) {
		var date = new Date();
		date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
		expires = "; expires=" + date.toGMTString();
	}
	document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
	var searchName = name + "=";
	var cookies = document.cookie.split(';');
	for(var i=0; i < cookies.length; i++) {
		var c = cookies[i];
		while (c.charAt(0) == ' ')
		c = c.substring(1, c.legth);
	if (c.indexOf(searchName) == 0)
		return c.substring(searchName.length, c.length);
	}
	return null;
}

function eraseCookie(name) {
	writeCookie(name, "", -1);
}

 

Галерея изображений