JSで単語帳を作ろう(前編) | ジョイタスネット

JSを使って単語帳を作ってみよう。

準備

任意の場所にwordlistフォルダを作成し、その中にjsフォルダと、cssフォルダを作成する。

作成

1.wordlistフォルダの直下にindex.htmlを作成し以下のように記述する。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>単語帳</title>
		<link rel="stylesheet" href="css/main.css">
		<script src="js/main.js"></script>
	</head>
	<body>
		<h1>単語帳</h1>
		<input type="text" id="en" placeholder="単語">
		<input type="text" id="ja" placeholder="意味">
		<button id="btn">登録</button>
		<p id="total">全0件</p>
		<table id="table"></table>
	</body>
</html>

実行してみよう。以下のように表示されれば成功だ。

main.js作成

入力した内容で表を作成していこう。jsフォルダ内にmain.jsを以下のように作成する。

'use strict';
window.onload=function(){
	const en=document.getElementById('en');	
	const ja=document.getElementById('ja');	
	const btn=document.getElementById('btn');	
	const total=document.getElementById('total');	
	const table=document.getElementById('table');	
	class Color{
		constructor(en,ja){
			this.en=en;
			this.ja=ja
		}
		showInfo(){
			return `<td>${this.en}</td><td>${this.ja}</td>`;
		}
	}
	let colors=[];
	btn.addEventListener('click',()=>{
		let color=new Color(en.value,ja.value);
		colors.push(color);
		en.value='';
		ja.value='';
		createTable();
	});
	function createTable(){
		table.innerHTML='<tr><th>単語</th><th>意味</th></tr>';
		for(let i=0;i<colors.length;i++){
			let tr=document.createElement('tr');
			tr.innerHTML=colors[i].showInfo();
			table.appendChild(tr);
			total.textContent=`全${colors.length}件`;
		}
	}
	createTable();
};

実行して、いくつか単語を登録してみよう。以下のように入力した内容が下に表示されれば成功だ。

main.css

テーブルにスタイルを当てよう。cssフォルダの中にmain.cssを作成し以下のように記述する。

#table{
	border-collapse:collapse;
}
td,th{
	border:1px solid #333;
	padding:0 10px;
	text-align:center;
}

[解説]
テーブルにボーダーに引くときにborder-collapseの指定をcollapseにしないと線が2重になってしまう。とても覚えにくいプロパティの一つだが、よく使うので知っておこう。

実行してみよう。テーブルに線が引かれた。
(現状はリロードするとデータが全部消えてしまうので再入力の必要がある)