Выполнение работы
Копии экрана, иллюстрирующие работу:
На рисунке 1 представлена первая html страница, где описание методов включается непосредственно в сам класс. Здесь реализованы 3 методы: метод выводящий название таблицы, шапку таблицы и строки таблицы. Таблица оформлена при помощи css и тэгов html.
На рисунке 2 представлена вторая html страница, где используется свойство prototype и массив записей. Здесь реализованы 3 методы: метод выводящий название таблицы, метод для внесения записей в массив записей и метод для вывода всей таблицы. Таблица оформлена при помощи css и тэгов html.
Рис.1 Разработанная web-страница №1. Методы внутри класса
Рис.2 Разработанная web-страница №2. Использование prototype и массива записей.
Разработанный код сайта:
1 Html cтраница, где описание методов включено в класс.
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Автозапчасти метод 1</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>Лабораторная работа №12 </h1>
<p class="bold24">Пользовательские объекты</p>
<p class="bold24"> Вариант 17</p>
<p>Создать пользовательский объект автозапчасть к автомобилю. Создать в скрипте 12 экземпляров данного объекта и вывести эти данные на страницу.</p>
<p>Здесь используется один из двух способов для описания собственных методов: описание метода включается в описание класса.</p>
<script type="text/JavaScript">
function carSpares(num,marka,model,gearbox,wheel,carbody)
{
this.num=num;
this.marka=marka;
this.model=model;
this.gearbox=gearbox;
this.wheel=wheel;
this.carbody=carbody;
this.printCaption=printCaption;
this.printTableHead=printTableHead;
this.printSpares=printSpares;
}
function printCaption()
{
document.write("<p class=bold24> Автозапчасти к автомобилю </p>");
}
function printTableHead()
{
document.write("<table style=font-size:18px;background-color:#ffffff align=center border=2 cellspacing=1 cellpadding=8 width=200 height=300 bordercolor=#0762A7><tr style=background-color:#9CF686;font-weight:bold;text-align:center><td>№</td><td>Марка</td><td>Модель</td><td>Коробка передач</td><td>Руль</td><td>Кузов</td></tr>");
}
function printSpares()
{
document.write("<tr style=text-align:center><td>"+this.num+"</td>"+"<td>"+this.marka+"</td>"+"<td>"+this.model+"</td>"+"<td>"+this.gearbox+"</td>"+"<td>"+this.wheel+"</td>"+"<td>"+this.carbody+"</td></tr>");
}
var car1 = new carSpares(1, "Ford", "Focus Cabriolet CA5", "Механическая", "LHD 2WD", "Cabriolet");
var car2 = new carSpares(2, "Ford", "Fiesta DX", "5-ступенчатая механическая", "RHD 2WD", "5-дверный седан");
var car3 = new carSpares(3, "Mercedes-Benz", "MayBach S600", "Механическая", "LHD", "3-дверный седан");
var car4 = new carSpares(4, "Mercedes-Benz", "AMG GT", "Автоматическая", "RHD", "купе");
var car5 = new carSpares(5, "BMW", "4 Gran Coupe", "Механическая", "LHD", "хэтчбек");
var car6 = new carSpares(6, "BMW", "X6", "Механическая", "LHD", "кроссовер");
var car7 = new carSpares(7, "Porsche", "Cayenne", "Механическая", "LHD", "внедорожник");
var car8 = new carSpares(8, "Porsche", "911 Targa", "Автоматическая", "LHD", "кабриолет");
var car9 = new carSpares(9, "Ferrari", "LaFerrari", "Автоматическая", "RHD", "купе");
var car10 = new carSpares(10, "Ferrari", "California", "Механическая", "LHD", "кабриолет");
var car11 = new carSpares(11, "Lexus", "GS", "Механическая", "LHD", "седан");
var car12 = new carSpares(12, "Lexus", "CT", "Автоматическая", "LHD", "хэтчбек");
car1.printCaption();
car1.printTableHead();
car1.printSpares();
car2.printSpares();
car3.printSpares();
car4.printSpares();
car5.printSpares();
car6.printSpares();
car7.printSpares();
car8.printSpares();
car9.printSpares();
car10.printSpares();
car11.printSpares();
car12.printSpares();
</script>
</body>
</html>