本記事では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文の使い方、をみていきましょう。
