Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
JavaScript
入門編
- トップページ
- JavaScript入門編 - コメントアウトとアラート
コメントアウトとアラート
みなさまどうもこんにちわ。
続きまして早速ちょろりとJavaScriptを書いてみましょう。コメントアウトとアラートについてです。今回はscriptタグを使ってインラインでJavaScriptを記述していきたいと思います。
用意するべきものはHTMLファイル一つで大丈夫ですので『index.html』をひとつ用意して以下の記述を貼り付けてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScript練習中！</title> </head> <body> <script> //ここにJavaScriptを書くよー </script> </body> </html>
準備はOKでしょうか。ではJavaScriptのコメントアウトの説明からやっていきます。コメントアウトはHTMLやCSSでもありましたね。JavaScriptのコメントアウトはこうなっています。
// これは一行コメントです。スラッシュが2 つ並んだ後の文字はすべてコメントです。 /* 複数行にまたがる場合はこっち使ってください。 この間がコメントです。CSSのコメントアウトと文法一緒です。 */
このように記述すればその部分はすべてコメント扱いとなります。これは特に難しくないですね。
続いてJavaScriptの処理をちょっと書いてみたいと思います。『alert()』というものを使ってみましょう。
先ほどのscriptタグの中にこのように記述してください。コピペはせずにタイピングをしっかりするようにしましょうね。
<script>
alert("JavaScript練習中");
</script>
保存したらブラウザで開いてみましょう。『JavaScript練習中』と書かれたポップアップが表示されたでしょうか。無事に動いたならばおめでとうございます、初めてのJavaScript完成でございます。もし動かない場合は何か記述が間違っている可能性がありますね。もう一度しっかり見返してみましょう。
HTMLと違い、JavaScriptなどのプログラム言語は非常にシビアになってます。HTMLでは閉じタグを忘れたりしてもブラウザが適当に解釈してそれっぽい表示をしてくれましたがJavaScriptでは基本的に一文字でも間違えて記述するとエラーとなり全く動きません。プログラム初心者の方は慣れるまでちょっと大変かもしれませんが頑張ってください。
今の『alert()』という記述は『アラート関数』というアラートダイアログを表示するための関数です。
このアラート関数はアラートダイアログを表示している間はJavaScriptの処理が停止するというとっても嬉しい機能(?)があり、よくデバッグに使用されています。昨今ではブラウザの開発ツールへメッセージを出力できる超便利な『console.log関数』(コンソールログ関数)が登場し、そちらが使われる事がほとんどとなりましたが昔はアラート関数を使ってデバッグをしていました。
デバッグとはプログラムに欠陥やバグがないか動作チェックする事を指します。
アラート関数の使い方は上記のように『()』の中に出力したいメッセージ等を入れればOKです。
注意点として文字列を出力したい場合は『"』(ダブルクォーテーション)か『'』(シングルクォーテーション)で囲む必要があります。
『"』か『'』でくくったものは『文字列』の扱いになります。文字列とは要するに文字です。プログラムの世界ではただの文字のあつまりの事を文字列と呼びます。
他の言語では『"』と『'』で処理が違ったりしますが、JavaScriptにおいてはどちらも扱いは一緒ですので『"』か『'』の好きな方で囲ってOKです。最近の若いJavaScriptプログラマーさんは他の言語の影響からか『'』を使用している方が多い印象がありますね。ちなみに私はおっさんなので『"』派です。
あ、こんな風に
// これはダメです。 "JavaScript練習中'
『"』と『'』を交互に使ってくくっちゃダメです。それはくくれてないです。必ず同じ記号でくくってくださいね。
ちなみに数字などは 『"』か『'』を使わなくてもそのまま出力できます。こんな感じですね。
<script> alert(777); </script>
こうすると『777』と書かれたアラートダイアログが表示できたと思います。このように数字はそのまま記述しちゃってOKです。
このように『"』か『'』で囲まないで数字を記述した場合は『数値』として扱われます。つまり足し算したり引き算したりと演算できるということです。では練習がてら軽く足し算してみましょう。
<script> alert(777 + 223); </script>
こうすると『1000』という数字が出たと思います。ちゃんと足し算できていますね。
では逆に『"』か『'』で囲むとどうなるのでしょうか。『"』か『'』で囲むと『文字列』の扱いになりますので『文字としての数値』という扱いになります。つまり数値ではなくなっている、ということで数値としての演算ができません。試してみましょう。
<script>
alert("777" + "223");
</script>
『777』と『223』を文字列として記述し、足し算してみます。みなさんも記述して試してみてください。
『777223』と表示されましたでしょうか。
JavaScriptではこのように文字列同士を加算すると『文字連結』が行われます。『777』と『223』が文字として扱われているため、数値としての演算はされずに文字連結が行われこういう結果になっているのですね。
あ、ちなみに文字列同士では足し算しかできません。引き算割り算掛け算はできませんのでご注意くださいね。エラーになっちゃいます。
さて、数値はこのような挙動を示しますが文字列を『"』か『'』で囲まないとどうなるのでしょうか。『true』や『false』などの特殊な文字列以外の場合、それは『変数』として扱われます。『変数』については先の記事で詳しく解説をしていきたいと思います。
あとJavaScriptでは文の終わりに『;』(セミコロン)を記述します。
文の終わりとはプログラミング上で『ひとつの処理がここで終わったよ！』という宣言になります。『;』は文の終わりを宣言する記号です。
昨今のプログラム言語では『;』を入れる必要がない言語も増えてきましたが、古い時代から存在するプログラム言語では文の終わりに『;』をつける、というのは共通の文法ルールになっています。こちらも初心者の方は忘れがちなので抜けないよう気をつけてください。
実はJavaScriptでは文を別々の行に記述した場合、『;』は自動補完されるため省略する事が可能です。
// 以下は『;』を省略できます。 x = 1 x = 2 // 以下は同じ行に記述されているので省略できません。 x = 1 x = 2
『;』を省略するかしないかという話は賛否両論があります。『;』を省略するメリットとしては文字数を削減できファイル容量を削減することができるという事です。実際に『;』が省略されている有名なライブラリ(汎用性の高い便利な関数をまとめたもの)も多数あります。
しかし『;』を省略すると処理系によっては思わぬバグを出してしまう危険もあり、ファイル容量が少し削減されるだけなのにそれと吊り合わない大きなリスクとなってしまっている、という意見もあります。ちなみに私は『;』を省略しない派です。
あ、『;』を省略しても問題なく動くプログラムを組む、というのはJavaScriptの処理の動きや文法を完璧に把握している上級者レベルの知識が必要ですので初心者のうちはしっかり『;』を記述するようにするようにしましょう。
というわけで今回はここまでです。ざざっと説明しましたがいかがでしたでしょうか。『文字連結』や『変数』などあまり聞いたことがない単語がいっぱい登場しましたね。詳しい話は後ほどの記事でまた解説していきます。
次の記事ではさっきからちらほら出ている『console.log』と開発ツールについて勉強していきましょう。
ではではこのへんで。またお会いしましょう。
この記事は桜舞が執筆致しました。
著者が愛する小型哺乳類 |
桜舞 春人 Sakurama HarutoISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。 |
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
