授業28回目 JQuery・Java Script 2018.4.14 (sat)

Java script 繰り返し・for文

*$(function( ){ } ); の中に記述する

-----------------------------------------------------------------------------
for(カウンターをセット;繰り返す条件;カウンターの処理){
  繰り返す処理;
}
-----------------------------------------------------------------------------

▷「繰り返し」を3回繰り返す
var count= 0;
for(count; count<3; count++){
console.log(”繰り返し”);
}
f0397237_13031553.png

1を足す ++1
1を引く −−1


▷最初の定義「var count = 0;」をfor文の中に入れてしまう書き方
*「count」を「i」に変える。「i」は変数。
for(var i =0; i<3; i++){
console.log(i);
}
f0397237_13064536.png


▷<body>タグに「文字」を3回追記する→<body>部分に「文字」が3回繰り返して表示される。
for(var i =0; i<3; i++){
$("body").append("<p>文字</p>");
}
f0397237_13115394.png
f0397237_13120221.png

▷配列と組み合わせる
*配列=一対一ではなく、一対多数で組み合わせることができる。
 変数を箱として考える。配列はマンション、変数は一軒家に例えることができる。
var yasai = ["ニンジン" ,"ジャガイモ" ,"セロリ", "キャベツ"]; (配列・野菜にはデータが4つ入っている)


▷ニンジンだけを表示する(文字列ニンジンが表示される)
var yasai = ["ニンジン" ,"ジャガイモ" ,"セロリ", "キャベツ"];
console.log(yasai[0]);

f0397237_15523231.png

*ニンジン→0 ジャガイモ→1 セロリ→2 キャベツ→3という数字が割り当てられている。


▷ニンジンを4回表示する
var yasai = ["ニンジン" ,"ジャガイモ" ,"セロリ", "キャベツ"];
for(var i =0; i<4; i++){
console.log(yasai[0]);
}
f0397237_15583629.png


▷ニンジン、ジャガイモ、セロリ、キャベツを表示する
var yasai = ["ニンジン" ,"ジャガイモ" ,"セロリ", "キャベツ"];
for(var i=0; i<4; i++){
console.log(yasai[ i ]);
}
f0397237_16245449.png


▷変数に文字列を追記する
①var html = " " ; 文字列であることを分からせるために「" "」(空文字)を書く
②html += "文字" ; 「+=」で変数に文字列を追記できる


▷文字列aaを4回繰り返す
var html = " " ;
for(var i=0; i<4; i++){
html += "<p>aa</p>"
console.log(html);
}
f0397237_17031046.png


▷文字列aaを1回繰り返す(aa aa aa aa)
var html = " " ;
for(var i=0; i<4; i++){
html += "<p>aa</p>"
}
console.log(html);
f0397237_17090695.png
▷<div>に文字を出力する(=htmlを書く)
var html = " " ;
for(var i=0; i<4; i++){
html += "<p>aa</p>"
}
console.log(html);
$("div").html(html);
f0397237_17210545.png



▷<div>にニンジン・ジャガイモ・セロリ・キャベツを出力する(=htmlを書く)
var yasai = ["ニンジン" ,"ジャガイモ" ,"セロリ", "キャベツ"];
var html = " " ;
for(var i=0; i<4; i++){
console.log(yasai[ i ]);
html +="<p>";
html +=yasai[ i ];
html +="</p>";
}
$("div").html(html);
f0397237_15032071.png
▷配列の個数分繰り返す方法
var yasai = ["ニンジン","ジャガイモ","セロリ","キャベツ","レタス","キュウリ"];
console.log(yasai.length);
→数字の6を出力
 「 .length」で文字列ではなく、数字が出てくる。
 野菜を追加していけば勝手にその個数分の数字が表示されるようになる。
f0397237_17000498.png

▷条件分岐を使って、ニンジン・ジャガイモに色をつける
*classをつける。
*htmlの<style>タグ内にCSSを記述する。

var yasai = ["ニンジン","ジャガイモ","セロリ","キャベツ","レタス","キュウリ"];
console.log(yasai.length);

var html="";

html += "文字"
html += "<ul>";
for(var i=0; i<yasai.length;i++){
if(yasai[ i ]=="ニンジン" || yasai[ i ]=="ジャガイモ"){ // →カタカナで書いてあったらカタカナで書く
 html += "<li class='konsai'>";
}else{
 html +="<li>"; // →条件に当てはまらない場合の開始タグを記述する
}
 html += yasai[ i ];
 html += "</li>";
}
html += "</ul>"

$("div").html(html);

* || →もしくは ・or
* &&→ かつ
f0397237_17315103.png
f0397237_17314135.png

f0397237_17545562.png

▷リンクを貼る → <a href='https://google.co.jp'>googleへ</a>の書き方

var link = "https://google.co.jp";

var html2 = " "; //→空(" ")にして追記する

html2 += "<a href=' " ;
html2 += link ;
html2 += " '>googleへ</a>" ;

$("p").html(html2);

*html2=定義したものを出力する
*シングルクオート(')も文字列として記述しなければならない

f0397237_15434425.png

f0397237_16265668.png

f0397237_16270784.png

[PR]
by zooori | 2018-04-28 16:35 | 授業まとめ(JQuery編) | Comments(0)

2017.11.27~webの学校の授業で学んだことをまとめています。


by zooori
プロフィールを見る
画像一覧