(続き)
キーボードがA-Dだけじゃ物足りない。26文字にしよう
QWERTY配列(クワーティ配列):
国際規格。
通説のひとつでは、タイプライターをかっこよく売りたいメーカーが
typeWriterの文字を全部Qの行に揃えたとか
諸説あり。
配列でキーボードの文字を用意。
var keys=['Q','W','E','R','T','Y','U','I','O','P',
'A','S','D','F','G','H','J','K','L','+',
'Z','X','C','V','B','N','M','<','>','?'];
console.log(keys[1]);
これを使ってボタンを数ぶん作る
→
作り方のヒント
1.親要素を事前に取得
2.子要素を生成
3.コンテンツを書き出す(innerHTML)
4.親要素にappendChildする
--->test2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="test2.css">
<title>タイプライター</title>
</head>
<body>
<p id="disp"></p>
<p id="btn2">
<input type="button" value="A" onClick="Type('A')">
<input type="button" value="B" onClick="Type('B')">
<input type="button" value="C" onClick="Type('C')">
<input type="button" value="D" onClick="Type('D')">
<input type="button" value="RESET" onClick="resetDisp()">
</p>
<p id="btn"></p>
<script src="test2.js"></script>
</body>
</html>
--->test2.js
var keys=['Q','W','E','R','T','Y','U','I','O','P',
'A','S','D','F','G','H','J','K','L','+',
'Z','X','C','V','B','N','M','<','>','?'];
console.log(keys[1]);
function Type(letter){
var disp = document.getElementById('disp');
disp.innerHTML += letter;
}
function resetDisp(){
var disp = document.getElementById('disp');
disp.innerHTML = '';
}
var btn = document.getElementById('btn');
for (var i=0; i<30; i++){
var ele = document.createElement('button');
ele.innerHTML = keys[i];
btn.appendChild(ele);
}
じゃあもうひとつ。クリーニングする場所をリストにするのもやってみましょう。(掃除の種類を配列にする。)
『会議室から掃除してください。内容は掃き掃除→ワックスがけ→拭き掃除。次に同様に給湯室、談話室』
htmlに追加
<ul id="cleaning"></ul>
jsに追加
//cleaning
var works = ['掃き掃除','ワックスがけ','拭き掃除'];
var rooms = ['会議室','給湯室','談話室'];
--->正解はこちら
for(var r=0; r<3; r++){
for(w=0; w<3; w++){
var ele = document.createElement('li');
ele.innerHTML = rooms[r]+'の'+works[w];
cleaning.appendChild(ele);
}
}