フロントエンドエンジニア養成所

JavaScriptとは、ウェブサイトやウェブアプリの画面上に動きを加えたりすることができるプログラミング言語です。

例えば、画像が動いたり、ボタンが押された時に内容が変わったりするような動きは、JavaScriptによって実現されています。

前回の記事のCSSの解説ページで作成したsample-css.htmlに、JavaScriptのコードを追加したファイルを作成しましょう。ファイル名はsample-javascript.htmlとします。

<button onClick="showHelloWorld()">サンプル</button>

<style type="text/css">
    button {background-color: red;}
</style>

<!--ここから-->
<script>
function showHelloWorld() {
    alert("Hello world!!");
}
</script>
<!--ここまで追加-->

JavaScriptのコードはscriptタグ(<script>...</script>)の中に記載しています。

今回JavaScriptのコードでは、showHelloWorldという関数を作成しました。

関数とは、あることをするためのやることリストのようなものです。

今はよくわからないかもしれませんが、一旦そういうものなんだと思っていていただければ大丈夫です。

今回作成したshowHelloWorldは、実行すると「Hello world!!」というメッセージを表示するようにしています。

showHelloWorld は、<button> タグの onClick にセットしています。

これは、「ボタンがクリックされたら、showHelloWorldの関数を実行する」という意味です。

保存した sample-html.html を Google Chrome や Safari、Microsoft Edge などのブラウザで開いてみてください。

すると、次の画像のように、サンプルボタンをクリックするとHello world!!のアラートが表示されます。