<!DOCTYPE html> <html> <head> <meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport"> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css"> </head> <body> <h1>JavaScriptの練習</h1> <input type="text" id="gakusei" value="123456"> <script> function test() { var gakusei = document.getElementById("simei").value; alert(gakusei); } </script> <input type="text" id="simei" value="山田 太郎"> <input type="button" id="btn" value="実行" onclick="test()"> </body> </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 を実行する