変数
変数基本
変数は数値や文字など【値】を入れておくための箱のようなもの。
記述例
使用例
配列
配列は変数をたくさん入れておける箱セットのようなもの。
中身の参照方法
配列の中身は【配列名[配列番号]】で参照できます。配列番号は1からではなく0始まりなので注意。
jQueryでの変数の利用
テキストの取得
$('ターゲット').text();
フォームテキストの取得
$('ターゲットのinputタグ').val();
プルダウン値の取得
$('ターゲットのselectタグ').val();
変数の操作
変数での"="は数式のイコールとは異なり【値の代入※】を意味します。よって「右辺で計算された値が左辺の変数に保存される」ということになります。
記述例
例：加算の考え方
① 配列【a】に0を代入。
② aに1を加算。aは0なのでつまり0+1=1
③ ②の解(0+1=1)をaに代入。結果元々の0が上書きされて1
if-else文
記述形式
※ else/else ifは必ずしも必要ではないので無くても可
記述例
例：10時/18時を境にあいさつの文言を分けるプログラム
ループ処理
記述形式
- 初期値
- ループ処理の初期値を設定
- 条件式
- ループ処理の範囲（回数）を設定
- 増減式
- ループ処理の増減方法を設定
記述例
1から100までの足し算を行うプログラム
解説
- 変数【value】を計算結果を入れる箱として用意して、初期値に0を代入
- 「足される数」として変数【i】を用意して、初期値に0を代入
- 【i】の値を1ずつ増加させ、その都度【value】に足していく、という処理を100回繰り返す
- 100回終わったら変数【value】の値に結果が入っている状態となる
ループ処理（jQuery）
ループ処理は計算のためだけではなく、同じ操作を繰り返す処理にも使うことができます。
記述形式
- index
- 対象となるターゲット要素の通し番号（※0スタートなので注意）
- element
- 対象となるターゲット要素
先ほどのfor文はあらかじめ繰り返す回数を指定して決めるのに対して、ここで使用している【each関数】は対象のターゲット要素が存在する数だけ順次参照してループをまわす、という動きをします。
よって対象のターゲットとなる要素が増えたり減ったりする場合でも繰り返し数を変更する必要がなく、柔軟に対応できるというメリットがあります。
記述例
表示している名字のリストを「こんにちは、○○さん！」という表記に書き換える
解説
- → html上のliタグを順次参照して、{}の中身(＝内容とかかれているところ)を都度実行する
- → いま参照しているliタグのテキストを取得
- → 取得したテキストの前後に指定分を付け加えて上書き
実行結果
タグの作成＋追加
- 作成
- 追加