授業31回目 JQuery・Java Script 2018.5.8(tue)

↑(トップへ)をクリックして自動スクロールさせる

f0397237_10181068.png


①HTMLファイルを記述する。(*今回は高さを出すためのサンプル文章を省略して記述)
f0397237_10280225.png

<body>にid="top"
最後の「トップへ」の<p>にid="to_top"
<a>のリンク先に<body>に指定したid="top"を指定する。



②CSSの記述
f0397237_10325970.png



⑴最後の<p>につけたid="to_top"のスタイルを指定する
f0397237_10422163.png


「トップへ」を幅100px・高さ100pxにして、中央揃えにする。
line-heightを高さと同じ100pxに指定する。
→height(高さ)とline-height(行間)を同じサイズにすると垂直方向に真ん中に配置することができる。(一行の場合のみ)
positionをfixedにして固定し、top/bottom/right/leftで位置を指定する。
今回は、bottom:20px、right:20pxで下の右側に固定する。




⑵最後の<p>につけたid="to_top"の中の<a>のスタイルを指定する。
f0397237_10500986.png


背景色を薄いオレンジに指定し、ブロック要素にする。
→ブロック要素にすると横幅ができるのでクリックする場所を伸ばすことができる。
下線も消す。
border-radiusで四角形を丸にする。
→border-radiusを50px以上に指定すると丸になる。
transitionで、マウスオーバーした時に変化する時間を0.5秒にする。




⑶最後の<p>につけたid="to_top"の中の<a>にマウスオーバーした時のスタイルを指定する。
f0397237_11104248.png



⑷JQueryでclass="on"をつけたり、消したりする。
→<p id="to_top">にonがついているときは、display:blockとなる。つまり「トップへ」を表示させる。
優先度を上げるために、#to_top.onと記述する。.onだけだと#to_topよりも優先度が低くなり、表示されない。?
f0397237_11133520.png


*JQueryの記述
スクロールされている値が300以上だったら、<p>にclass="on"をつけてください。=「トップへ」を表示する。
もし300より小さければ、class="on"を非表示にしてください。=「トップへ」を表示しない。

「トップへ」は最初は非表示にする(CSSで指定)。スクロールして値が300以上になった時に表示する。下にスクロールして300以上になり表示されて、また上に戻って300より小さくなった時に消える。

*htmlにclass="on"は記述しない。


f0397237_12052923.png


f0397237_12061295.png


f0397237_12073546.png



*アイコンにする場合
font-awesomeなどを使う。
<a>のfont-sizeを調整することで、アイコンの大きさを調整できる。




③JQueryの記述
f0397237_11150585.png



$(function(){
$("#to_top a").click(function(){//aタグをクリックすると
$("body,html").animate({"scrollTop":0},500)//$("body,html").するする()
return false;//id="top"に戻るという指示を消す <a href="#top">を消す。なぜaタグを使うかというと、指マークを表示させるためたが、CSSで変えることもできる。
});
→aタグをクリックすると、トップまで(*"scrollTop":0の地点まで)スクロールする。
 リンクを無効にする。

*animateについて
params→{ }
duration→終わるまでの時間。短いと早く終わる。1000→1秒 500→0.5秒
easing→加速度
callback→アニメーションが終わった後に処理を行うことができる。連続する時に使う。


//画面をスクロールしたら、#to_topに.onをつける →クラスをつけたり消したりしている 非表示・表示にしているのではない
$(window)/*スクロールしたら*/.scroll(function(){
var h =$(this)/*=$(window)*/.scrollTop();//$(window)がどれくらいスクロールされているかの値を取得する
console.log(h);/*どれくらいスクロールされたかを出力して調べる*/
→スクロールしたら($(window))、どれくらいスクロールされているかの値を取得する。?


//もしスクロールされている値が300以上だったら、addClass("on")してください=トップページへを表示する
if(h>300){
$("#to_top").addClass("on");//pタグにクラスのonをつけてください
}else {//もし300より小さければ、onを非表示にする *onがある時に消せと言われたら消す。ない時は関係ない。一旦スクロールして表示されて、また上に戻った時に消える。
$("#to_top").removeClass("on");
}
});
   });//////////////
→スクロールされている値が300以上だったら、<p>にclass="on"をつけてください。=「トップページへ」を表示する。
 もし300より小さければ、class="on"を非表示にしてください。=「トップページへ」を表示しない。


[PR]
# by zooori | 2018-05-18 12:14 | 授業まとめ(JQuery編) | Comments(0)

授業30回目 JQuery・Java Script 2018.5.05(sat)

タブパネルの切り替え方法
  <ブラウザ表示> *①〜③共通

f0397237_11112021.png

<htmlファイル> *①〜③共通
f0397237_11145271.png

4つの方法を整理

①クリックするもの(該当のもの)以外を非表示にする。(main.js)
f0397237_11205579.png


②最初に全て非表示にする。*書き方の順番が重要 (main2.js)
f0397237_11405438.png

③関数とif文を使用する。(main3.js)
f0397237_11564685.png

④属性を取得する。(main4.js)
*タブパネルに川を追加する。
*htmlファイルに川を追加する。写真も追加する。


<ブラウザ表示>
f0397237_12021383.png
<htmlファイル>
f0397237_12001791.png
f0397237_12114912.png

その他
*$( )→( )の中はセレクタ。

*thisはクリックされた<a>タグ。→イベントの発生させた<a>タグを取得できる。
.click( function(){})がthisになる。(=クリックしたもの)

*JavaScriptにデータを渡すための属性
data-〇〇〇〇(好きなキーワードを入れることができる)
メモ的な使い方をする。

*data属性用のもの(attrではない書き方)
.data(" ");
" "の中に-(ハイフン)以降のキーワードを記述する。


[PR]
# by zooori | 2018-05-08 12:24 | 授業まとめ(JQuery編) | Comments(0)

授業29回目 JQuery・Java Script 2018.4.28(sat)

eachメソッド 繰り返し処理

①1つ1つの<li>に何かしらの処理をしたい時に使う。
*htmlファイルの<ul>にid=fruitをつける。
*<li>分だけ繰り返してる
*ここでは5回
*1回1回繰り返して5と表示されている。一気に5回ではない。

$("#fruit li").each(function(){
console.log("文字");
});

f0397237_11185666.png
f0397237_11190749.png

②1回目(の繰り返し)はみかん、2回目はりんご・・・・と続く。最後(5回目のももまで)繰り返す。
*this 繰り返している時のそのもの
*1つずつ繰り返してる、同時に行われているわけではない
*.text テキストを取得する みかん、りんごなどのテキストを入力する。変数mesに入れる。
*今回はtext.();の()に何も入れない場合の使い方。()に入れて使う使い方もある。 

$("#fruit li").each(function(){
var mes =$(this).text();
console.log(mes);
});
f0397237_11305573.png

f0397237_12130205.png

JQueryの書き方
$("#fruit li").each(function(){
console.log("文字");
});
*↑ある分だけ繰り返す。減らしても無駄に繰り返すことはない。
*$(function(){});の中に書く。


③.text()にテキスト入れたバージョン
*()の中の文字列が上書きされている(ブラウザ表示)
*consoleの表示はそのままなのは順番が先にあるから

$("#fruit li").each(function(){
var mes =$(this).text();
console.log(mes);
$(this).text("書き換える");
});
f0397237_12145682.png



④文字列の結合→「みかんは、くだもの」のように表示される。
$("#fruit li").each(function(){
var mes =$(this).text();
console.log(mes);
$(this).text(mes+"は、くだもの");
});
f0397237_12190307.png



[PR]
# by zooori | 2018-05-05 12:28 | 授業まとめ(JQuery編) | Comments(0)

授業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)

授業27回目 JQuery・Java Script 2018.4.7(sat)

分岐 
 条件を分けることが出来る
「もし〜ならば、〜してください」

□書き方
$(function(){
/*
if(条件){
処理
}

if(条件){
処理
}else{
条件が成り立たない時の処理
}
});//////////////////////////////////////////////


□if文が9割
      
①「もしこうだったら、こうしてください」
if(条件){ 処理 }

②「もしこうだったら、こうしてください。そうじゃなければ、こうしてください」
if(条件){処理}else{条件が成り立たない時の処理}



■var kazu2が1の時に「おめでとうございます。あたりです。」と表示され、1以外の時は「残念。はずれです。」が表示される。

*varで定義する。条件が成り立つなら、consoleで表示される。
*Math.randomは0.000000000001から0.999999999までの数字をだす。
*10をかけても(*10と記述する)math.floorにすると0から9までの数字が表示される。
**99の場合は1/99の確率で当たる。*10の場合は1/10の確率で当たる。
*== 等しい
 = 代入

var kazu = Math.random()*10;

var kazu2 = Math.floor(kazu);

console.log(kazu2);

if(kazu2 == 1){
console.log("おめでとうございます。あたりです。")
}else{
console.log("残念。はずれです。")
}


□ 条件を追加出来るif文の書き方

*幾つでも条件を追加できる。
*最後にelseを書くことで、「全て成り立たない時は」と書くことができる。

if(条件1){
条件1が成り立つ時の処理
}else if(条件2){
条件2が成り立つ時の処理
}else if(条件3){
条件3が成り立つ時の処理
}else{
全ての条件が成り立たない時
}


■var kazu3が2→「大吉」、1→「吉」、0→「凶」が表示される。

var kazu3 = Math.floor(Math.random()*3); → var kazu と var kazu2をまとめてかくとこういう書き方が出来る。
console.log(kazu3); →0 か1か 2が表示されればOK。それに応じておみくじの結果が表示される。

if(kazu3 == 2){
console.log("大吉")
}else if(kazu3 == 1){
console.log("吉")
}else if(kazu3 == 0){
console.log("凶")
}

■2018年はうるう年かを表示する。
*うるう年の条件
・4年に1度 
・4で割り切れる場合は、うるう年。( year % 4==0と記述)
・ただし、100で割り切れる場合は、うるう年じゃない→2100年は4でも100でも割り切れる。4で割り切れるという条件が優先される。
・さらに、ただし、400で割り切れる場合は、うるう年
*一番条件がゆるいものを最初に持ってきてしまうと全てそこに入ってしまう。ex.コイン貯金箱

var year = 2018;
if(year % 400==0){
console.log(year+"年はうるう年");
}else if(year % 100==0){
console.log(year+"年はうるう年じゃない");
}else if(year % 4 == 0){
console.log(year+"年はうるう年");
}else{
console.log(year+"年はうるう年じゃない");
}


□switch文 try..catch文などが他にある。

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