Webの記録

苦手なJavaScriptをイチから勉強してみる【if文とfor文】

投稿日:2013年1月15日 更新日:

この記事は約 5 分で読めます。

苦手なJavaScriptをイチから勉強してみる【JavaScriptを外部ファイルにする】の続きとしてメモします。

イチから「JavaScript」を学び直しをする為に記録を残しています。少しずつメモを追加していきます。

私の個人的なメモなので、ちょっと違うよ!とか、こうしたら?というのがあると思います。その場合はこっそりコメント等頂けると有難いです!

少しずつメモしているので、連載的な感じで続きを書いていってます。過去のメモも、時々追記していきます。超・初心者向けです。

今回は、条件分岐(if文)と繰り返し処理(for文)についてメモしています。



JavaScript勉強の流れ

  1. 基本準備編
  2. 記述の基礎編
  3. イベント編
  4. 関数編
  5. JavaScriptを外部ファイルにする
  6. 条件分岐(if文)と繰り返し処理(for文)←今回はココ。

if文やfor文を書く前に

今回は条件分岐をするif文、繰り返し処理をするfor文の基礎をメモしたいと思います。

まずは、変数の理解。

if文やfor文を書く時に使う「変数」。値を入れる箱・・・という感じのモノです。
変数は、使う前に宣言(定義)します。

定義の仕方
var 変数名;
(例)var age;

変数に数字や文字などを代入して使います。

代入の時の記述方法
変数名 = 値;
(例)age = 20;
(例)name = “あいうえお”;

宣言の時に一緒に一緒に値も代入する場合もあります。

定義と代入を一緒にする場合の記述
var 変数名 = 値;
(例)var age = 20;

変数名は自由に作れますが、決まりごともあります。

変数に使える文字
半角英数字とアンダースコア(_)
ただし、1文字目には数字は使えない。予約語(※)も使えない
予約語
break else new var case finally return void catch for
switch while continue function this with default if
throw delete in try do instanceof typeof

よく使う記号は以下の通りです。

かけ算
*
割り算
/
足し算
+(+は文字列などの連結にも使用します)
引き算
剰余算
代入
=(□=●とすると、●を□に代入するという意味)
等しい(true)
==
等しくない(false)
!=
a < b
aはbより小さい
a <= b
aはbより等しいか小さい(以下)
a > b
aはbより大きい
a >= b
aはbより大きいか等しい(以上)
a || b
左右を比較する演算子。aまたは(OR)b
a && b
左右を比較する演算子。aかつ(AND)b

if文で条件判定

条件判定はif文以外にもあるのですが、今回はif文を使ってみます。

もしも、●●(条件式の部分)ならば・・・で、判断が1つの場合。

記述の仕方1
if (条件式) {
条件が成立した場合の処理
}

もしも、●●(条件式の部分)ならば・・・、そうでなければ(else)・・・で、判断が2つの場合。

記述の仕方1
if (条件式) {
条件が成立した場合の処理
}else{
条件が成立しなかった場合の処理
}

判断が3つの場合。else if で更に判定をする(判定の回数を増やせる)

記述の仕方1
if (条件式) {
条件が成立した場合の処理
}else if (条件式2) {
条件2が成立した場合の処理
}else{
条件が成立しなかった場合の処理
}

for文で繰り返し処理

指定した回数だけ繰り返し処理(ループ)をするfor文について書いてみます。

記述の仕方
for (初期化式; 条件式; 制御変数の更新) {
処理
}

上記の文を見ても「?」なので・・・簡単な記述例を書いてみます。
5回繰り返し(iはカウントをする為の変数)でカウント回数を画面に表示するというものです。

for (i=1; i <= 5; i++){
document.write("

"+i+"回目

");
}

制御変数の更新部分で「i++」としている部分の意味を書いてみます。
マイナスする場合も同じように「-」記号を2回書くと1ずつ減らす事が出来ます。

i++
変数iの値を1ずつ増やす(i = i +1;と同じ)

if文とfor文を使った作例

パスワードを入力して正解すると「照合出来ました!」と画面表示、間違った場合3回まで入力させてダメだったら「あなたのidはロックされました」と画面表示するというものです。


var myPass;
var passSt = "1234";

window.onload = function(){

//3回繰り返す
for (i = 1; i <= 3; i++){
myPass = window.prompt("パスワードを入力してください","****");
if(myPass == passSt) {
//パスワードが合っていれば専用ページに飛び、繰り返し処理から抜ける
document.write("

照合出来ました!

");
break;
}else if( i == 3 ){
document.write("

あなたのIDはロックされました

");
}
}
}

このページはJavaScriptを有効にしてご覧ください。

今回は、if文とfor文について書いてみました。

同じような感じで複数の条件の判定をするswitch文、条件が合っている間繰り返し処理をするwhile文があります。
これについては後日書いていこうと思います。

javaScriptは奥が深いです。まだまだ基礎部分でメモすべき事があると思うので、今後もゆっくり地道にメモしていくつもりです。

-Webの記録
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

Evernote Webクリッパーを入れてみた♪

この記事は約 1 分で読めます。Web上で興味を持ったページの情報をそのまま手軽にEvernoteに保存する方法を試してみたいと思います。 日頃使っているEvernoteの便利な使い方その2です。(2 …

ファイルアップロード・メール添付機能をWordPressお問い合わせプラグイン「Contact Form 7」でカンタン実現!

この記事は約 1 分で読めます。 WordPressでお問い合わせフォームを付けるときは、いつもプラグイン「Contact Form 7」を利用しています。 日本人の作者で、利用者が多く、更新頻度の高 …

no image

スマートフォン用サイトで、タップで電話をかけさせたい時

この記事は約 1 分で読めます。 スマートフォン用のサイトで、必要になったのでメモ。 ボタンをタップした時に電話をかけさせたい時の記述と、郵便番号などの数字を電話番号と間違えて勝手に電話番号のリンクが …

no image

スマホサイトの画像コピーガード対策

この記事は約 1 分で読めます。 スマホ向けのサイト制作の機会が増えました。 PC向けの時にいろいろとしていた画像コピーガード対策も、スマホ対応しなくてはならなくなってきました。 画面の長押しすると、 …

no image

WordPress カスタムフィールドを使ってみる

この記事は約 1 分で読めます。 WordPressの便利な機能のひとつ「カスタムフィールド」に今回チャレンジします♪ 「カスタムフィールド」は、記事本文とは別に項目を独自で作って表示するものです。