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.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

Worepressのロゴ、ボタン、カラースキームなどの公式データをメモ

この記事は約 1 分で読めます。 WordPressのロゴ、ボタン、カラースキームなど、公式データがダウンロード出来るようになっていたので、メモ。 ちゃんと、あったんですね!!しかも、かなり種類が豊富 …

no image

はじめてのHTML5。

この記事は約 1 分で読めます。 そろそろいろんなところで、HTML5を見かけるようになり・・・今イチバン気になっているのがHTML5です。 これからHTML5を覚えていこうと思っているところなので、 …

no image

Google Maps表示用スクリプト「google_map_api_js」を試してみた♪

この記事は約 1 分で読めます。 以前「jquery.gmap3.js」を使ってGoogle Mapsを表示させてみました。(「jquery.gmap3.jsを使って、Googlemapを簡単にカスタ …

no image

Webサイト移転の時に自動的にジャンプする方法

この記事は約 1 分で読めます。 たまたまいじっていたサイトでサーバーを移転する事になりました。 そんなワケで、ちょこっとメモ。 今回、独自ドメインをとっていなかった為、URLが変わります。 その場合 …

no image

WordPressでオリジナルテーマ作りにチャレンジ5【sidebar.php編】

この記事は約 1 分で読めます。 WordPressのオリジナルテーマ作りにチャレンジしています。 今回は、「sidebar.php」の部分を作りたいと思います。 私が作りたいオリジナルテーマの「si …