忍者ブログ

からすまる日誌 JavaScript

基本(19) スクリーンキーボードを作る(2)

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

基本(19) スクリーンキーボードを作る(2)

(続き)
キーボードが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);
}
}
 
PR

コメント

ただいまコメントを受けつけておりません。

ブログ内検索

P R