【入門編4】JavaScriptでalertを出してみよう

JavaScript入門

本記事ではJavaScriptのalertについて解説します。

Webサイトを開いたタイピングでalertを表示させると、ユーザーに大事なお知らせを伝えることが可能です。

更に今回は、if文の使い方についても併せてみていきましょう

if文を使うことで、条件に応じてalertを出力したりしなかったり制御することが可能です。

alertとは?

alertとは、Webサイト側から表示するメッセージ機能のことです。

よくログインするときにパスワードを間違えたとき、「パスワードが違います」みたいな小さい画面が出てくることがあります。

これがalertです。

alertを出すメリットは、JavaScriptで簡単に表示できる点です。

alertを出さずページにメッセージを出す方法もありますが、実装な面倒な場合もあります。

alertは手軽という面でアドバンテージがありますね。

JavaScriptでalertを出す方法

それでは、JavaScriptでアラートを出す方法をみていきましょう。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
alert("アラート!");
</script>
</body>
</html>

○実行結果

最も単純にalertを出す方法です。

上記のコードを実行すると、ページに訪れただけで「アラート!」とアラートが表示されます。

alertを出す場合は、

alert({出力したい文字数})というように記述すれば良いだけです。

これがJavaScriptにおけるalertの基礎となります。

if文を使ってalertを出す

続いてif文を使ってalertを制御する方法をみていきましょう。

まずはif文とは何か、というところから解説していきます。

if文とは?

if文とは、条件分岐処理を行うときに使う文法です。

たとえば、数値が10以上な場合と、それ以外の場合とで表示内容を変える、といったことができます。

if文は以下のように書きます。

if(条件式){
条件式に当てはまる場合の処理
}

ifの括弧の中に条件式を書く必要があります。

そして{}の中に、条件式に当てはまった場合にのみの処理を記述します。

たとえば、変数aが1だった場合のみ処理したい場合は次のようにします。

if(a == 1){}

「a == 1」というのが条件式となります。

「左辺と右辺が同じ場合」という条件の場合「=」を2回使ってください。

1回だとただしく動かないので注意しましょう。

aが1より大きい場合のみ処理したい場合は、以下です。

if(a > 1){}

「>」という記号を使います。

逆にaが1より小さい場合は、以下です。

if(a < 1){}

「<」という記号を使います。

特定条件の場合のみalertを出す

それではif文を使って、特定条件のみalertを出してみましょう

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var random = Math.random() * 10;
if(random <= 5){ alert("値は5以下です:" + random); }
</script>
</body>
</html>

○実行結果

上記ではまず、Math.random() * 10によって、1~10の値をランダムに生成し、random変数に格納しています。

その次の行に注目してください。

if文を使って、randomが5以下の場合のみ処理をさせています。

○以下の場合に処理させる場合は「<=」という記号を使います。

randomは5以下だった場合のみ「値は5以下です:~」と表示されます。

特定条件に当てはまらなかった場合にalertを出す

続いて、特定条件に当てはまらなかった場合にalertを出す方法をみていきましょう。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var random = Math.random() * 10;
if(random <= 5){ alert("値は5以下です:" + random); }
else{ alert("値は5より上です:" + random); } 
</script>
</body>
</html>

○実行結果

先程同様random変数に1~10の値が入っています。

else文を使って、if文の条件に当てはまらなった場合の処理を、記述しています。

else文を使うことで、特定条件に当てはまらなかった場合のみ動かすことが可能です。

上記の例では、randomが5以下の場合「値は5以下です:~」と表示され、それ以外の場合は「値は5より上です:~」と表示されます。

条件分岐を複数作る

最後に複数の条件分岐を作る方法をみていきましょう。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var random = Math.random() * 10;
if(random <= 5){ alert("値は5以下です:" + random); }
else if(random <= 8){ alert("値は5より大きく8以下です:" + random); }
else{ alert("値は8より上です:" + random); } 
</script>
</body>
</html>

○実行結果

条件を複数作りたい場合は、else if文を利用します。

if文の条件式には当てはまらなかった場合に、else if文が動きます。

else if文を使い、randomが8以下の場合に「値は5より大きく8以下です:~」と表示させています。

このようにelse if文を使えば、複数の分岐を作ることが可能です。

まとめ

本記事では、JavaScriptでalertを出す方法を解説しました。

alertの出し方や、if文によってalertを制御する方法がお分かり頂けたかと思います。

次回はJavaScriptのfor文の使い方、をみていきましょう。

挫折率が高い??プログラミング学習のポイント
駆け出しエンジニアが一緒に学ぶ
CANITは、Progateやドットインストールで独学している人達同士をつなげます。駆け出しエンジニアのあなたのためのSNSです。
JavaScript入門
【この記事を書いた人】
谷津弘樹

某自社開発のIT企業に勤めていた元webプログラマーです。主にサーバーサイド側を担当し、phpを使った開発経験があります。現在は退職しフリーランスライターとして活動中。IT系の記事を主に執筆し生計を立てています。

CANIT
タイトルとURLをコピーしました