記事の作成日：2020/02/07
・Console.log または、 ・Alert() ・innerHTML ・innerText[省略しています] ・input (type="text")
<HTML>
<!-- HEAD は省略しています。スクリプトは <SCRIPT> や <LINK> を使用して、読み込ませるかそのまま記述します。 -->
<Body>
<!-- value は ボタンの中の文字の内容です。 onclick は クリックされたときに実行させるためです。 -->
<Input type="button" value="実行" onclick="f()">
</Body>
</HTML>
Console.log を使うことによってデバッグのメッセージとしてログを残すことができます。
Console.log で出力されたメッセージは、各ブラウザの 開発者向けツール ＞ コンソール から確認できます。
HTML内で 実行 ボタンを押すと コンソール に Hello world! が出力されます。
function f(){
Console.log("Hello world!");
}
<HTML>
<!-- HEAD は省略しています。スクリプトは <SCRIPT> や <LINK> を使用して、読み込ませるかそのまま記述します。 -->
<Body>
<!-- value は ボタンの中の文字の内容です。 onclick は クリックされたときに実行させるためです。 -->
<Input type="button" value="実行" onclick="f()">
</Body>
</HTML>
alert は、 実行すると画面上にダイアログを表示します。
計算結果などユーザーに表示させることができます。
<input type="button" value="onclickに直接alert" onclick="alert('Hello world!');">
function f(){
alert("Hello world!");
}
<HTML>
<!-- HEAD は省略しています。スクリプトは <SCRIPT> や <LINK> を使用して、読み込ませるかそのまま記述します。 -->
<Body>
<!-- value は ボタンの中の文字の内容です。 onclick は クリックされたときに実行させるためです。 -->
<Input type="button" value="実行" onclick="f()">
<Div id="abc"></Div>
</Body>
</HTML>
innerHTML は、直接HTML にテキストを挿入します。(HTMLも可能です)
計算結果などユーザーに表示させることができます。
また、ページの内容を追加することもできます。
function f(){
let outabc = document.getElementById("abc");
outabc.innerHTML = "Hello world!";
}
<HTML>
<!-- HEAD は省略しています。スクリプトは <SCRIPT> や <LINK> を使用して、読み込ませるかそのまま記述します。 -->
<Body>
<!-- value は ボタンの中の文字の内容です。 onclick は クリックされたときに実行させるためです。 -->
<Input type="button" value="実行" onclick="f()">
<Input type="text" id="abc">
</Body>
</HTML>
<input> (type="text"など) は、テキストボックスに文字列を挿入することができます。()
計算結果などユーザーに表示させることができます。
document.getElementById("なんとかかんとか") .value ここを忘れないようにしましょう。慣れてくると忘れる時がありますから。
ちょっとした結果表示に向いています。たとえば、数値など。
function f(){
document.getElementById("abc").value = "Hello world!!";
}