2 Html страница, используются свойство prototype и массив записей.
<!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>Автозапчасти метод 2</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>Здесь используется один из двух способов для описания собственных методов: с использованием свойства prototype, которое позволяет добавлять новые методы к существующему классу.</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;
}
function allSpares()
{
this.cars = new Array;
}
allSpares.prototype.printCaption=function()
{
document.write("<p class=bold24> Автозапчасти к автомобилю </p>");
}
allSpares.prototype.add_spares=function(num,marka,model,gearbox,wheel,carbody)
{
this.cars[num]= new carSpares(num,marka,model,gearbox,wheel,carbody);
}
allSpares.prototype.get_allSpares = function()
{
var auto;
var SparesTable="<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:#81E7FC;font-weight:bold;text-align:center><td>№</td><td>Марка</td><td>Модель</td><td>Коробка передач</td><td>Руль</td><td>Кузов</td></tr>";
for(auto in this.cars)
{
SparesTable+="<tr style=text-align:center><td>"
SparesTable+=this.cars[auto].num;
SparesTable+="</td>"
SparesTable+="<td>"
SparesTable+=this.cars[auto].marka;
SparesTable+="</td>"
SparesTable+="<td>"
SparesTable+=this.cars[auto].model;
SparesTable+="</td>"
SparesTable+="<td>"
SparesTable+=this.cars[auto].gearbox;
SparesTable+="</td>"
SparesTable+="<td>"
SparesTable+=this.cars[auto].wheel;
SparesTable+="</td>"
SparesTable+="<td>"
SparesTable+=this.cars[auto].carbody;
SparesTable+="</td>"
}
SparesTable+="</table>"
return SparesTable;
}
var spares1 = new allSpares();
spares1.add_spares(1, "Ford", "Focus Cabriolet CA5", "Механическая", "LHD 2WD", "кабриолет");
spares1.add_spares(2, "Ford", "Fiesta DX", "5-ступенчатая механическая", "RHD 2WD", "5-дверный седан");
spares1.add_spares(3, "Mercedes-Benz", "MayBach S600", "Механическая", "LHD", "3-дверный седан");
spares1.add_spares(4, "Mercedes-Benz", "AMG GT", "Автоматическая", "RHD", "купе");
spares1.add_spares(5, "BMW", "4 Gran Coupe", "Механическая", "LHD", "хэтчбек");
spares1.add_spares(6, "BMW", "X6", "Механическая", "LHD", "кроссовер");
spares1.add_spares(7, "Porsche", "Cayenne", "Механическая", "LHD", "внедорожник");
spares1.add_spares(8, "Porsche", "911 Targa", "Автоматическая", "LHD", "кабриолет");
spares1.add_spares(9, "Ferrari", "LaFerrari", "Автоматическая", "RHD", "купе");
spares1.add_spares(10, "Ferrari", "California", "Механическая", "LHD", "кабриолет");
spares1.add_spares(11, "Lexus", "GS", "Механическая", "LHD", "седан");
spares1.add_spares(12, "Lexus", "CT", "Автоматическая", "LHD", "хэтчбек");
spares1.printCaption();
document.write(spares1.get_allSpares());
</script>
</body>
</html>
Стили css:
h1 {
text-align: center;
font-family: Monotype Corsiva, Arial;
color: #BA0606;
font-style: italic;
}
h2{
text-align: center;
background-color: #FAD899;
color: #E967FA;
}
body {
background-image:url(http://172.23.64.64/ftp/21/642138/Image/%D1%80%D0%BE%D0%BC%D0%B0%D1%88%D0%BA%D0%B0.jpg);
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:link {
color: #0000d0;
}
a:visited {
color: #900060;
}
a:active {
color: #AC37C6;
}
.bold24{
font-size:24px;
font-weight:bold;
text-align: center;
}
.tfirst {
border:1px none #9F3207;
border-collapse:separate;
width:100%;
height:100%;
}
#line{
border-bottom-style:ridge;
border-bottom-color:red;
border-bottom-width:2mm;
}
p {
text-align: justify;
font-size:24px;
text-indent:60px
}
ul.square{
list-style-type: square;
font-size:24px;
}
.leftimg{
float:left;
margin: 5px 40px 50px 5px;
width:15%;
height:15%;
}
.rightimg{
float:right;
margin: 5px 5px 40px 30px;
width:20%;
height:20%;
}
.kursiv{
font-style: italic;
}
#leftbold{
font-size:24px;
text-align: left;
font-weight:bold;
text-indent:0px
}
ol.size24{
font-size:24px;
}
.sizeimg{
width:60%;
height:60%;
}
.sizemap{
width:600px;
height:400px;
}