01.<!DOCTYPE html>02.<html>03.<head>04.<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">05.<meta charset="UTF-8">06.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">07.</head>08.<body>09.<h1>JavaScriptの練習</h1>10. 11.<input type="text" id="gakusei" value="123456">12. 13.<script>14.function test() {15. var gakusei = document.getElementById("simei").value;16. 17. alert(gakusei);18.}19. 20.</script>21. 22.<input type="text" id="simei" value="山田 太郎">23. 24.<input type="button" id="btn" value="実行" onclick="test()">25. 26. 27.</body>28.</html>JavaScript のイベント 要素の中にイベントプロパティを記述し、値として JavaScript のコードを記述しますonclick="test()"test() は JavaScript のコードで、定義済の関数を呼び出しています id プロパティによる参照 id は、唯一のオブジェクトになる対象に設定され、document.getElementById メソッドによって使用されます。基本的な事1) SCRIPT 要素の中に書く 2) ページの上から下へ実行される 3) 画面のコントロールは id で参照する 4) 実行ブロックは、function 関数名() {} で定義される 5) 関数呼び出しは 関数名() で実行されるデベロッパーツール1) デベロッパーツールは F12 で開く 2) Elements タブで画面を Inspect して情報を得る 3) Console タブでエラーを見る 4) Console に直接入力して JavaScript を実行する