案件獲得できなかったら全額返金!未経験からプロのエンジニアスキルを身につけ、フリーエンジニアとして稼げるまで徹底サポート。オンラインでも教室でも学習可

【JavaScript入門】alertでアラートダイアログを出す方法

【JavaScript入門】
Pocket

JSには「警告」や「メッセージ」のアラートダイアログを出すalertというものがあります。アラートダイアログを出すにはalertに引数を渡してあげる必要があります。引数とはAlertに渡してあげる情報のことで、その情報はalert()の()内に書きます。引数が文字列の場合は“または‘で文字列を囲みます。

.png - 【JavaScript入門】alertでアラートダイアログを出す方法

数字の場合は何も必要ありません。

2 - 【JavaScript入門】alertでアラートダイアログを出す方法

またアラートダイアログに表示されるテキストを改行する場合には\nを、タブを入れて字下げする場合には\tを記述します。
alert(“テスト。\n改行しました。\n\t改行して、さらにタブで字下げしました。”);

3 - 【JavaScript入門】alertでアラートダイアログを出す方法

更にalertの引数には変数も入れられます。

4 - 【JavaScript入門】alertでアラートダイアログを出す方法

またalertの引き数は文字列と数値をを繋げることが出来ますその場合は+で繋ぎます。

5 - 【JavaScript入門】alertでアラートダイアログを出す方法

数字の場合はその合計数値がアラートに出ます。

6 - 【JavaScript入門】alertでアラートダイアログを出す方法

また、

の様に変数にnullを入れalertの引数にその変数を入れるととアラートダイアログにはnullが表示されます。

7 - 【JavaScript入門】alertでアラートダイアログを出す方法

また、

の様に変数に空文字を入れ、それをalertの引数にするとアラートダイアログには空文字が表示されます。(つまり何の文字も表示されません。)

8 - 【JavaScript入門】alertでアラートダイアログを出す方法

更に極端に大きな数値を渡すとアラートダイアログには正しい文字が表示されません。

9 - 【JavaScript入門】alertでアラートダイアログを出す方法

アラートダイアログが表示されると「OK」ボタンを押すか×印を押して、アラートダイアログを閉じない限り、次のスクリプトを実行することはありません。また、アラートダイアログが表示されている間は、ブラウザの操作をすることができなくなります。

アラートダイアログの発生方法

アラートダイアログを発生させる方法はただalert()と書き、いきなり発生させるだけでなく、一つのアクションンを置いて発生させることもできます。
まずは、マウスを文字に重ねるとアラートが表示される方法です。

10 - 【JavaScript入門】alertでアラートダイアログを出す方法
11 - 【JavaScript入門】alertでアラートダイアログを出す方法

文字をクリックするとアラートが表示される方法は以下のようになります。

12 - 【JavaScript入門】alertでアラートダイアログを出す方法
13 - 【JavaScript入門】alertでアラートダイアログを出す方法

また、ボタンをクリックするとアラートが表示される

14 - 【JavaScript入門】alertでアラートダイアログを出す方法
15 - 【JavaScript入門】alertでアラートダイアログを出す方法

などの発生方法があります。

Alertを使ってコードのミスチェック

またalertを使うことでコードにミスがないかを調べることもできます。

16 - 【JavaScript入門】alertでアラートダイアログを出す方法

1行目のここでは問題がないのでアラートダイアログに日付が出ます。

17 - 【JavaScript入門】alertでアラートダイアログを出す方法

2行目のここも問題がないので時間がアラートダイアログに出ます。

18 - 【JavaScript入門】alertでアラートダイアログを出す方法

これは3行目、末尾の;が:となっており構文が正しくないのでアラートダイアログはでません。

【おすすめ記事】
JavaScriptを学べるスクールってどこがおすすめ?
フロントエンジニアが勧める!JavaScript学習サイト
Javascriptの本・参考書の評判

投稿者:プログラミング教育ナビ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

プログラミングで挫折しそうなら、現役エンジニアにマンツーマンで相談してみませんか?オンラインのプログラミングスクール「TechAcademy」のメンターが対応。

この記事が気に入ったら
いいね!しよう

プロナビの最新情報をお届けします

あわせて読みたい

関連記事

イベントのご案内

☆=LOVE&≠MEメンバーも出演☆
めざせ!プログラミングスターLIVE
BS日テレ / Hulu で好評の番組 『めざせ!プログラミングスター』が スタジオを飛び出し、ついに課外授業(LIVE)を開催 ‼

 ▷ イベント詳細はこちら♪
ページ上部へ戻る
ja 日本語
X