1
独自オブジェクトのコンストラクタ
function Product(name,price){
this.name = name;
this.price = price;
}
var prod_data = [];
prod_data.push(new Product('リラックスチェア','4000'));//{name:'リラックスチェア',price:'4000'}
prod_data.push(new Product('リラックスデスク','12000'));//{name:'リラックスデスク',price:'12000'}
prod_data.push(new Product('ブックスタンド','800'));//{name:'ブックスタンド',price:'800'}
window.addEventListener('load',function(event){
createTable();
},false);
//表作成関数
function createTable(){//HTMLの生成
var table = document.getElementById('prod_table');
var tbody = document.getElementsByTagName('tbody')[0];
for(var i = 0;i<prod_data.length;i++){
if(!(prod_data[i] instanceof Product)){
continue;
}
var tr = document.createElement('tr');
var td = document.createElement('td');
td.innerHTML= prod_data[i].name;
tr.appendChild(td);
td = document.createElement('td');
td.innerHTML = prod_data[i].price;
tr.appendChild(td);
tbody.appendChild(tr);
}
}
2
//他の関数を作成する場合
//独自オブジェクトのコンストラクタ
function Product(name,price){
this.name = name;
this.price = price;
//コンストラクタに定義
this.calcPrice1 = function(amount){
return this.price * amount;
}
}
//プロトタイプで共有
Product.prototype.calcPrice2= function(amount){
return this.price * amount;
}
var prod_data = [];
prod_data.push(new Product('リラックスチェア','4000'));
prod_data.push(new Product('リラックスデスク','12000'));
prod_data.push(new Product('ブックスタンド','800'));
window.addEventListener('load',function(event){
createTable();
},false);
function TableTool(){}//静的メソッドを作成
TableTool.createTdStr = function(value){
var str = '';
for(var i= 0;i<value.length;i++){
str += '<td>' + value[i] + '</td>';
}
return str;
}
//表作成関数
function createTable(){
var table = document.getElementById('prod_table');
var tbody = document.getElementsByTagName('tbody')[0];
for(var i = 0; i < prod_data.length; i++){
var tr = document.createElement('tr');
tr.innerHTML = TableTool.createTdStr(
[prod_data[i].name,
prod_data[i].price,
prod_data[i].calcPrice2(10),
prod_data[i].calcPrice2(20),
prod_data[i].calcPrice2(30)
]
);
tbody.appendChild(tr);
}
}
3
// オブジェクトの継承
//独自オブジェクトのコンストラクタ
function Product(name,price){
this.name = name;
this.price = price;
}
Product.prototype.calcPrice = function(amount){
return this.price * amount;
}
function HardProduct(name,price){//継承元と同じプロパティを定義する必要がある。そうしないとprototypeで継承元をたどってしまうから
this.name = name;
this.price = price;
this.zaiko = 0;
}
HardProduct.prototype = new Product();//継承したいオブジェクト(継承元)のインスタンスを代入する
function SoftProduct(name,price){
this.name = name;
this.price = price;
}
SoftProduct.prototype = new Product();//継承はprototypeに対しての代入になる。これ逆にするとprototypeに対して追加していたメソッドが消えてしまう
SoftProduct.prototype.calcPrice = function(){
return '---';
}
var prod_data = [];
prod_data.push(new HardProduct('リラックスチェア','4000'));
prod_data.push(new HardProduct('リラックスデスク','12000'));
prod_data.push(new HardProduct('ブックスタンド','800'));
prod_data.push(new SoftProduct('設置サービス','2800'));
prod_data.push(new SoftProduct('1年保証','5800'));
window.addEventListener('load',function(event){
createTable();
},false);
function TableTool(){}//静的メソッドを作成
TableTool.createTdStr = function(value){
var str = '';
for(var i= 0;i<value.length;i++){
str += '<td>' + value[i] + '</td>';
}
return str;
}
//表作成関数
function createTable(){
var table = document.getElementById('prod_table');
var tbody = document.getElementsByTagName('tbody')[0];
for(var i = 0; i < prod_data.length; i++){
if(!(prod_data[i] instanceof Product)){
continue;
}
var tr = document.createElement('tr');
tr.innerHTML = TableTool.createTdStr(
[
prod_data[i].name,
prod_data[i].price,
prod_data[i].calcPrice(10),
prod_data[i].calcPrice(20),
prod_data[i].calcPrice(30)
]
);
tbody.appendChild(tr);
}
}
<style>
table{border:solid 1px orange;border-spacing:0px;}
th,td{border:solid 1px orange;padding: 4px}
</style>
新製品価格表
製品名 | 価格 | 10個 | 20個 | 30個 |
---|