キーロガー：
どのキーをタッチしたかを取得してそれをロギングするマルウェア。
自分のパスワードが丸見えになる。
それを防止するために画面にプログラム的にキーボードを表示させて、それをクリックして入力させる：
スクリーンキーボードという
そのスクリーンキーボードを作りましょう
test2.html, test2.css, test2.jsを制作
とりあえずABCDのキーを作りますよ。
body内
<input type="button" value="A">
<input type="button" value="B">
<input type="button" value="C">
<input type="button" value="D">
</p>
クリックされた時にTypeという処理がされるようにする。
こういうのをイベントトリガーという。
<input type="button" value="A" onClick="Type()">
typeは予約語なのでTypeと大文字にする。
--->js側
Aを押したらコンソールにAとでるようにする。
function Type(){
console.log('A');
}
関数を実行するときに素材を「引数」（パラメータ）という。
それを加工して「戻り値」をもらったりする。
htmlではダブルクォート
javaScriptではシングルを使う。
ただし、この関数の引数はシングルコートになっている。
これはダブルクォートの中にダブルは書けないから。
引数を利用して、A-Dまで押したらコンソールにその文字がでるようにしましょう
<input type="button" value="A" onClick="Type('A')">
に変更。B以降も変更。
js側は
function Type(letter){
console.log(letter);
}
に変更
次、body直下に
を追加。
そして、コンソールじゃなくてここに書いてください。打った文字を。できる？
--->ここまで
function Type(letter){
var disp = document.getElementById('disp');
disp.innerHTML = letter;
}
これだと1文字しか表示されないから、打った文字全部でるようにしましょう
（ちなみに自分でやった分）
var msg='';
function Type(letter){
var disp = document.getElementById('disp');
msg = msg+letter;
disp.innerHTML =msg;
}
(よろしい回答はこちら）
function Type(letter){
var disp = document.getElementById('disp');
disp.innerHTML += letter;
}
disp.innerHTML += letter; で、
今書かれている文字（disp.innerHTML）を呼び出して、
それに新しい一文字（letter）を足していっている感じ。
disp.innerHTML = disp.innerHTML + letter;と
同じソースになる。
letterは毎回初期化されて一文字だけ受け渡しが行われている。
こういうのはちなみに仮引数という。
innerHTMLというのは、その中身という意味。
--->とりあえずここまで。（自分アレンジ含む）
test2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="test2.css">
<title>タイプライター</title>
</head>
<body>
<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')">
</p>
<script src="test2.js"></script>
</body>
</html>
--->test2.css
body{
background:#ff8;
}
#disp{
font-size:2rem;
}
input{
font-size:2rem;
padding:10px;
display:inline-block;
border-radius:5px;
text-decoration:none;
line-height:1;
}
--->test2.js
function Type(letter){
//letterは仮引数。何が送られてくるかわからないので
//仮に変数として処理しますよーという
var disp = document.getElementById('disp');
disp.innerHTML += letter;
}
resetボタンもつくろう。
→htmlのdのボタンの下に追加
<input type="button" value="RESET" onClick="resetDisp()">
→jsにも追加
function resetDisp(){
var disp = document.getElementById('disp');
disp.innerHTML = '';
}
＊なおボタンがぴこぴこ上下に動くのを止めたかったら
1.ボタン群のpにidをつけて
2.cssでボタンが表示されるとこを固定するといいらしい。
--->html側
<input type="button" value="A" onClick="Type('A')">
--->css側
#btn{
position:absolute;/*絶対配置*/
top:300px;/*上から100px*/
}
