.net column

.NET開発者のためのブログメディア

JavaScriptで変数を表示する3つの方法を詳しく解説していきます。

2020年09月04日
SE
「JavaScriptで変数を表示する方法」なんだか難しそうですね。
PM
実際にどんな方法で変数を表示するのかみていきましょう。

JavaScriptで変数を表示する方法

プログラミング初心者を対象に「JavaScriptで変数を表示する方法」を解説する記事です。

変数を使用することで、プログラムの中で数値や文字列を再利用できます。JavaScriptでは、Webブラウザに表示した数値や文字列を取得し、変数に設定できます。変数に設定した数値や文字列を操作し、Webブラウザに表示します。

JavaScriptの変数を表示する場所

JavaScriptの変数をWebブラウザに表示する方法は3つあります。

1つ目はラベルやテキストなどHTMLの要素を指定して設定する方法です。Webブラウザでの操作に応じて、表示する内容を変更できます。

2つ目はポップアップウィンドウを表示し、変数を表示する方法です。

3つ目はデバッガのWebコンソールに処理中の変数の内容を表示する方法です。

Webブラウザに変数の内容を表示する

JavaScriptの変数をWebブラウザで表示する1つ目の方法は、HTML要素の中身を変更する方法です。

HTMLから変更する要素を取得するにはdocument.getElementById(“”ID名””)を使用します。getElementByIdを使用すると、HTMLから指定したID名と一致するオブジェクトを取得します。オブジェクトが持つtextContentプロパティを変更します。

サンプル

具体的な書き方を見てみましょう。

<html>
<body>
<p>ボタンをクリック!</p>
<input type=””button”” value=””Click”” onclick=””myfunc1()””><div id=””edit_area1″”></div>
<script>
var counter1 = 0;
var myfunc1 = function() {
counter1++;
var str = counter1 + “” 回目のクリックです。””;
document.getElementById(‘edit_area1’).textContent = str;
}
</script>
</body>
</html>

サンプルの実行結果

サンプルのHTMLとJavaScriptを実行すると以下のようになります。

ボタンをクリックすると、Webブラウザにクリックした回数を表示します。繰り返しクリックすると、回数が増加していくのが分かるでしょう。

 

ボタンをクリック!

解説

Clickボタンをクリックすると、onclickイベントが発生します。

onclickイベントが発生すると、myfunc1を実行します。myfunc1では、counter1をインクリメントし、ボタンをクリックした回数をカウントアップします。

次に、クリックした回数を文字列に整形します。最後に、ID=edit_areaのオブジェクトを取得し、textContentプロパティに文字列を設定します。

ポップアップウィンドウに変数の内容を表示する

JavaScriptの変数をWebブラウザで表示する2つ目の方法は、警告のようなポップアップウィンドウで表示する方法です。

ポップアップウィンドウを表示するためには、alert関数を使用します。alert関数は引数として、messageを受けとります。messageには、警告ダイアログに表示したい文字列または、文字列に変換可能なオブジェクトを設定します。

サンプル

具体的な書き方を見てみましょう。

<html>
<body>
<p>ボタンをクリック!</p>
<input type=””button”” value=””Click”” onclick=””myfunc2()””>
<script>
var counter2 = 0;
var myfunc2 = function () {
counter2++;
var str = counter2 + “” 回目のクリックです。””;
alert(str);
}
</script>
</body>
</html>

サンプルの実行結果

サンプルのHTMLとJavaScriptを実行すると以下のようになります。

ボタンをクリックすると、ポップアップウィンドウを表示します。ポップアップウィンドウには、alert関数で指定した文字列を表示します。ポップアップウィンドウのOKボタンをクリックすると、元の画面に制御が戻ります。

 

ボタンをクリック!


解説

Webブラウザに変数の内容を表示する時と同様に、Clickボタンをクリックすると、onclickイベントが発生します。onclickイベントが発生すると、myfunc2を実行します。

myfunc2では、counter2をインクリメントし、ボタンをクリックした回数をカウントアップします。ボタンをクリックした回数を文字列に整形し、alert関数へ設定します。

デバッガのWebコンソールに変数の内容を表示する

JavaScriptの変数を表示する方法の3つ目は、デバッガのWebコンソールに表示する方法です。

デバッガのWebコンソールに表示するには、console.log関数を使用します。console.log関数は引数として、JavaScriptオブジェクトのリストを指定します。各オブジェクトの文字列表現が引数に設定した順番通りに表示します。

サンプル

具体的な書き方を見てみましょう。

<html>
<body>
<p>ボタンをクリック!</p>
<input type=””button”” value=””Click”” onclick=””myfunc3()””><div id=””edit_area3″”></div>
<script>
var counter3 = 0;
var myfunc3 = function () {
counter3++;
var str = counter3 + “” 回目のクリックです。””;
console.log(str);
document.getElementById(‘edit_area’).textContent = str;
};
</script>
</body>
</html>

サンプルの実行結果

サンプルのHTMLとJavaScriptを実行すると以下のようになります。

Webブラウザに変数の内容を表示した時と同様に、ボタンをクリックすると、クリックした回数を表示します。同じ内容をデバッガのWebコンソールに表示します。

 

ボタンをクリック!

解説

Webブラウザに変数の内容を表示する時と同様に、Clickボタンをクリックすると、onclickイベントが発生します。

onclickイベントが発生すると、myfunc3を実行するように設定します。myfunc3では、myfunc1と同じように、textContentプロパティに文字列を設定します。最後に同じ文字列をconsole.logへ設定します。

デバッガのWebコンソールを開く方法

Google Chromeの場合、WindowsではF12キー(Macintoshの場合、Command+Option+Iキー)を押すことで起動します。

起動したWebコンソールのConsoleタブを開くと、console.log関数に設定した変数の設定値を表示します。JavaScriptで複雑な処理を構築する場合、デバッガのWebツールを活用し、十分にデバックするようにしましょう。

SE
数値や文字列を再利用できるのはとても便利ですね。
PM
実際にコードを書いて実践してみるととても勉強になりますよ。

JavaScriptで変数を表示しよう

いかがでしょうか。JavaScriptで変数を表示する3つの方法をご紹介してきました。変数を使用することで、プログラムの中で数値や文字列を再利用できます。ぜひご自身でソースコードを書いて、理解を深めてみましょう。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)