本記事からはJavaScriptについて解説します。
JavaScriptはWebアプリケーションを開発する上で必要な言語です。
入門編ではJavaScriptの基礎的な文法を解説していきます。
今回はJavaScriptで「Hello World」を表示する方法をみていましょう。
JavaScriptとは？
JavaScriptとは、Webアプリ開発における「フロントエンド」側の開発で使う言語です。
フロントエンドとは、Webアプリの表側の処理のことであり、ページが表示されてから動きます。
たとえば、ページにアラートを表示したり、アニメーションを付けたりすることが可能です。
JavaScriptは20年近く現役で使われ続けている優秀な言語でもあります。
JavaScriptを使う場合は、HTMLのソースコードに、次のように記述します。
<script>
【JavaScriptのコード】
</script>scirptタグの中にコードを書くことで、そのページ内でJavaScriptを動かすことが可能です。
JavaScriptを有効にする方法
ブラウザの設定の関係で、JavaScriptが動かなくなっている場合もあります。
JavaScriptを有効にする場合は、次の手順を踏みましょう。
- 1.Google Chromeを起動
- 2.右上の「︙」マークをクリック
- 3.「設定」をクリック
- 4.左のメニューから「Googleの設定」をクリック
- 5.「プライバシーとセキュリティ」の「サイトの設定」をクリック
- 6.「コンテンツ」の「Javascript」をクリック
- 7.「許可(推奨)」を「オン」に変更
もしJavaScriptが動かない場合は、このような手順で有効にしてください。
JavaScriptで「Hello World」を出力する
それではJavaScriptで「Hello World」を表示する方法をみていきましょう。
以下の項目に分けて解説します。
- HTMLの雛形を用意
- document.writeで「Hello World」を表示
- コンソールに「Hello World」を出力
- 指定した箇所に「Hello world」を表示
HTMLの雛形を用意
まずJavaScriptを動かすためのHTMLを用意しましょう。
ここでは以下の雛形を用意したので、コピーして使ってください。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
</body>
</html>○ファイル名
test.htmlファイル名「test.html」にして保存しましょう。
保存したファイルをダブルクリックすると、ブラウザが開きます。
タイトルが「テスト画面」となっていることを確認してください。
何も表示されていない画面に、ここからJavaScriptで「Hello World」を表示していきます。
document.writeで「Hello World」を表示
まずは最も一般的な「document.write」を使う方法をみていきましょう。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
document.write("Hello world!");
</script>
</body>
</html>○実行結果
※見やすいように拡大しています
document.writeの()の中に、出力したい文字列を入力してください。
文字列は必ず””で括るのをお忘れなく。
このようにコードを変更し、ブラウザを更新してください。
すると「Hello world!」と表示がされるはずです。
document.writeを使うと、webブラウザ上に文字列を表示できます。
コンソールに「Hello World」を出力
続いてコンソール上に文字列を表示する方法をみていきましょう。
コンソールとは、開発者がアプリのデバックを行う際に使う画面のことです。
まず、コードを以下のように変更しましょう。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
console.log("Hello world!");
</script>
</body>
</html>○実行結果
続いてコンソールを開きます。
コンソールを開く場合は、「F12」キーを押してください。
右上のメニューから「console」を選択してください。
すると「Hello world」が書かれていることが、お分かり頂けるかと思います。
指定した箇所に「Hello world」を表示
最後に指定した場所に「Hello world」と表示する方法を見ていきましょう。
document.writeよりも、こちらの方が実務では多く使います。
まず、ソースを次のように変更してください。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<div id=1></div>
<script>
document.getElementById(1).innerHTML = "Hello world!";
</script>
</body>
</html>○実行結果
divを生成しidを1としています。
divタグの中に、JavaScriptを使って「Hello world」を記入できます。
getElementById({id名}).innerHTML = {文字列};
このように記述すると、divタグ内で文字列を記入できます。
まとめ
本記事ではJavaScriptで「Hello World」を表示する方法を解説しました。
JavaScriptを使う場合、特にファイルのインストールは不要で、HTMLで埋め込むだけでOKです。
今回紹介したやり方がJavaScriptの基本となるので、覚えておくようにしましょう。
次回は、JavaScriptで簡単な計算を行う方法について解説します。
