JavaScriptの常用例

このページには、JavaScriptが何ができるかのいくつかの例が含まれています。

注意：これらの例で使用されている方法がまだ学んでいない場合は、どうぞ心配しないで。次の章でそれらについて学びます。

JavaScriptでHTMLの内容を変更できます

getElementById()メソッドは、指定された値と一致するIDを持つ要素を返します。

この例では、该方法を使用してHTML要素（id="para"）を検索し、要素の内容（innerHTML）を「Hello world」に変更しました：

document.getElementById("para").innerHTML = "Hello world";

JavaScriptでHTMLの属性値を変更できます

この例では、JavaScriptが以下を変更しました<img>タグのsrc属性の値：

JavaScriptでHTMLのスタイル（CSS）を変更できます

JavaScript style属性は、要素のインラインスタイルを設定するために使用できます。

document.getElementById("demo").style.color = "blue";

JavaScriptでHTML要素を非表示にできます

HTML要素の非表示も、表示スタイルを変更することで行うことができます。

document.getElementById("demo").style.display = "none";

JavaScriptでHTML要素を表示できます

非表示のHTML要素の表示も、表示スタイルを変更することで行うことができます。

document.getElementById("demo").style.display = "block";

JavaScriptで警告ポップアップウィンドウを作成できます

この例では、JavaScriptが警告ダイアログを作成します。

alert("Hello world!");

JavaScriptはイベントハンドラをドキュメントに追加できます

この例では、JavaScriptがマウスクリックイベントを監視し、それに反応します。

document.addEventListener("click", myFunc);
function myFunc() {
　　　document.body.style.backgroundColor = "coral";
}

JavaScriptは時間を表示できます

この例では、JavaScriptが現在の時間を表示しています。

var intervalID = setInterval(startTimer,　1000);
function startTimer() {
　　　　var date = new Date();
　　　　var x = document.getElementById("result");
　　　　x.innerHTML = date.getHours();　+　":"　+　date.getMinutes();　+　":"　+　date.getSeconds();
}