「Hello, World!」とは？
「Hello, World!」は、プログラミングの入門としてよく使われる基本的な例です。この例では、JavaScriptを使って画面に「Hello, World!」というメッセージを表示します。簡単なプログラムですが、JavaScriptの基本構文や出力の仕組みを学ぶ良いスタートとなります。
「Hello, World!」の実行例
以下のボタンをクリックすると、「Hello, World!」というメッセージが表示されます。
プログラムの解説
HTMLコードの解説
<button onclick="showMessage()">「Hello, World!」を表示</button>
<div id="output"></div>HTMLコードでは、<button>タグを使ってボタンを作成しています。このボタンがクリックされたとき、onclickイベントによりshowMessage()関数が実行されます。また、<div id="output">は、メッセージを表示するための空の要素です。id属性を使ってJavaScriptからこの要素を簡単に操作できるようにしています。
JavaScriptコードの解説
function showMessage() {
document.getElementById("output").innerHTML = "Hello, World!";
}JavaScriptコードのshowMessage()関数では、document.getElementById("output")を使ってHTMLのid="output"の要素を取得し、そのinnerHTMLプロパティに「Hello, World!」という文字列を代入しています。これにより、指定した要素内にテキストが表示されます。
まとめ
「Hello, World!」の表示はシンプルなプログラムですが、JavaScriptの基本である要素操作やイベントハンドリングを学ぶための良い例です。この例では、ボタンをクリックしてJavaScriptが実行され、HTML内の要素を操作してテキストを表示する仕組みを学びました。次のステップとして、さらに複雑な処理を追加して、JavaScriptの機能を深く理解していきましょう。