オセロの盤の作り方
8✖️8のオセロの盤を作ります。まずはbodyタグ内を以下のように記述します。body要素内のonload属性はブラウザがページの読み込みを完了した際にダブルクォーテーション内の関数を実行してくれます。
table要素内にセルを並べていくので、id属性に「board」を指定します。
<body onload="init()">
<h2>オセロの盤</h2>
<table id="board"></table>
</body>
head要素内のscript要素は以下のようになります。
変数boardにbody要素内のtable要素を取得させます。
繰り返し文
「for(let r = 0; r < 8; r++) {
let tr = document.createElement("tr");
・
・
}
board.appendChild(tr);
}」
の部分でオセロの盤の行にあたるものを8つ作ります。
「createElement( )」メソッドは「document.createElement("要素名")」のかたちで引数に指定したHTML要素を生成することができます。
「appendChild( )」メソッドは
「親要素.appendChild(子要素)」のかたちで親要素の末尾に子要素を追加することができます。
今回は「tr」要素を8つ作り、table要素に追加しています。
繰り返し文
「for(let d = 0; d < 8; d++) {
let td = document.createElement("td");
td.className = "ceil";
tr.appendChild(td);
}」
の部分はオセロの盤の列にあたるものを8つ作っています。
変数tdに生成したHTML要素である「td」要素を代入し、「tr.appendChild(td)」でtr要素一つ一つにtd要素を8つ追加しています。
「td.className = "ceil"」で作成したtd要素に「ceil」というclass属性を付与しています。classNameプロパティはclass属性の取得や設定に用いることができるプロパティです。
<script>
function init() {
let board = document.getElementById("board");
for(let r = 0; r < 8; r++) {
let tr = document.createElement("tr");
for(let d = 0; d < 8; d++) {
let td = document.createElement("td");
td.className = "cell";
tr.appendChild(td);
}
board.appendChild(tr);
}
}
</script>
完成は以下になります。コピーしてhtmlファイルに貼り付けていただければ、ブラウザで表示できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>board</title>
<style>
table {
border: 3px solid black;
border-collapse: collapse;
}
.cell {
width: 50px;
height: 50px;
background-color: green;
border: 1px solid black;
}
</style>
<script>
function init() {
let board = document.getElementById("board");
for(let r = 0; r < 8; r++) {
let tr = document.createElement("tr");
for(let d = 0; d < 8; d++) {
let td = document.createElement("td");
td.className = "cell";
tr.appendChild(td);
}
board.appendChild(tr);
}
}
</script>
</head>
<body onload="init()">
<h2>オセロの盤</h2>
<table id="board"></table>
</body>
</html>