JS
ウェブページに動きを加える。ボタンをクリックしたら画像が変わったり、スクロールしたら文字がふわっと出てきたりできる。
通常のJSとJSを簡単に書けるようにした拡張機能のjQueryがある。
jQueryの方で説明する。
HTMLのところに<script>〇〇〇〇</script>と囲んで書くこともできるが別のファイルを作成するのが普通。
別のファイルで作成し名前を〇〇.jsにする。
htmlのプログラムを書いたheadのところに<script src="〇〇.js" defer></script>とかきJSファイルを読み込むようにする。
実行するきっかけ
クリック時
| プログラム | 説明 | |
| クリック時箱(p) 〇〇〇 クリック時箱閉じる | $("p").on("click", function() { 〇〇〇 }); | クリック時箱とクリック時箱閉じるでプログラムを囲む。 クリックした時中に入っているプログラムを実行する。 mouseoverカーソルが乗った時 mouseoutカーソルが離れた時 focus入力欄がクリックされたとき blur入力欄のクリックが外れた時 input入力欄に入力されたとき changeセレクトやチェックボックスの値が変わったとき submitフォームを提出した時 |
| クリック時箱(p) 〇〇〇 クリック時箱閉じる | <p onclick="関数のプログラム名()">テキスト</p> <style> function 関数のプログラム名() $('p').css('color',red);} </style> | pをクリック時 HTMLのところにonclickで関数のプログラム名を書いておく。 |
| クリック時箱(p) 〇〇〇 クリック時箱閉じる | $(document).on("click", "p",function() { 〇〇〇 }); | 後から新規作成したものに対応できる。blurとfocusが使えないのでfocusoutとfocusinを使う |
秒数
| プログラム | 説明 | |
| ３秒ごと「あるプログラム(変数A)」 | setInterval(あるプログラム, 3000,変数A); | 3秒ごとにあるプログラムを実行する。プログラムの内容は別のところに書く。 |
| 関数名箱「あるプログラム」 〇〇〇 関数名箱閉じる | function あるプログラム(変数A){ 〇〇〇 } | |
| ３秒後「とあるプログラム(変数A)」 | setTimeout(とあるプログラム, 3000,変数A); | 3秒後に１回とあるプログラムを実行する。プログラムの内容は別のところに書く。 |
| 関数名箱「とあるプログラム」 〇〇〇 関数名箱閉じる | function とあるプログラム(変数A){ 〇〇〇 } |
実行するプログラム
変更
| プログラム | 説明 | |
| テキスト変更(p)「あいうえお」 | $("p").text("あいうえお") | テキストを変更 |
| 要素変更(p)「<h1>あいうえお</h1>」 | $('p').replaceWith('<h1>あいうえお</h1>'); | タグとテキストを変更 |
| 画像変更(p)「画像.png」 | $("p").attr("src", "画像.png"); | 画像を変更 |
| CSS変更(p)「色 赤色」 | $("p").css("color", "red"); | CSS変更 |
| テキスト変更(p)「<h1>あいうえお</h1>」 | $("p").html("<h1>あいうえお</h1>") | pタグの中にh1が入ってしまう |
| CSS複数変更(p)「色 赤色 フォントサイズ 1cm 」 | $("p").css({"color": "red","font-size": "20px"}); | CSS複数変更 |
追加・削除
| プログラム | 説明 | |
| クラス追加(p)「A」 | $("p").addClass("A"); | クラスがつくとクラスについているものが適用されるようになる |
| クラス削除(p)「A」 | $("p").removeClass("A"); | クラスが外れる |
| クラス追加削除(p)「A」 | $("p").toggleClass("A"); | クラスAがついているなら外し、クラスAがついていないならつける |
| 属性追加(p)「name あいう」 | $("p").attr("name","あいう"); | すでについている属性は上書きされる |
| 属性削除(p)「name」 | $("p").removeAttr("name"); | 属性を削除 |
| 要素追加・中の上(div)「<h1>あいうえお</h1>」 | $("div").prepend("<h1>あいうえお</h1>"); | |
| 要素追加・中の下(div)「<h1>あいうえお</h1>」 | $("div").append("<h1>あいうえお</h1>"); | |
| 要素追加・外の上(div)「<h1>あいうえお</h1>」 | $("div").before("<h1>あいうえお</h1>") | |
| 要素追加・外の下(div)「<h1>あいうえお</h1>」 | $("div").after("<h1>あいうえお</h1>"); | |
| 要素削除(div) | $("div").remove(); | 中身ごとすべて削除 |
表示
| プログラム | 説明 | |
| コンソール表示「あいう」 | console.log("あいう"); | F12キーを押してでてくる画面のコンソールに値を表示することができる。 実際にプログラムで使うわけではなくしっかりと動いているか確認するための表示欄。 |
| ウィンドウ表示「あいう」 | window.alert("あいう"); | |
| ウィンドウ選択「本が好きですか？」 | let ウィンドウ選択; ウィンドウ選択=window.confirm("本が好きですか？"); | はいならウィンドウ選択の値がtrue。いいえならウィンドウ選択の値がfalseになる。 |
| ウィンドウ入力「年齢を入力して下さい」 | let ウィンドウ入力; ウィンドウ入力=window.prompt("年齢を入力して下さい"); | 入力した値がウィンドウ入力の値になる。数字で入力しても文字扱いの数字になるのに注意 |
リンク
| プログラム | 説明 | |
| 別タブで開く「https://www.google.com」 | window.open("https://www.google.com/", "_blank"); | |
| このタブで開く「https://www.google.com」 | location.href="https://www.google.com/"; |
移動
| プログラム | 説明 | |
| 移動(#box)「右に200px、１秒」 | $("#box").animate({ left: "200px" }, { duration: 1000, easing: 'linear' }); | animateで動かすためにはその要素にpositionのrelativeやabsoluteやfixedをつける必要がある。 linear一定 swing最初がゆっくり真ん中が早い |
| 下に動かした後、右に動かす。 | $("#box").animate({ top: "100px" }, 1000) .animate({ left: "200px" }, 500); | つなげて書くことができる。秒数だけの場合はシンプルに数字だけ書けばいい。 |
目標に追加
| プログラム | 説明 | |
| (p)親(.A) | $("p").parents(".A").〇〇 | pの親のクラスAのもの 親のさらに上の親も含む parentは親のみ |
| (p)子(.A) | $("p").find(".A").〇〇 | pの子のクラスAのもの 子のさらに下の子も含む childlenは子のみ |
| (p)兄弟(.A) | $("p").siblings(".A").〇〇 | pの兄弟のクラスAのもの nextは次の兄弟 prevは前の兄弟 |
条件
| プログラム | 説明 | |
| 最初の条件「ウィンドウ入力＝１０」なら〇〇〇 | if(ウィンドウ入力===10){〇〇〇} | ＝は===を使う。< > <= >=はそのまま使う。≠は!=を使う。 ifの{}の中でletで定義した変数は外に出ると値がなくなる。 |
| 次の条件「ウィンドウ入力＜２０」なら〇〇〇 | else if(ウィンドウ入力<20){〇〇〇} | ifはもし～ならの意味。elseはそれ以外の意味。 |
| 次の条件「ウィンドウ入力＜３０」なら〇〇〇 | else if(ウィンドウ入力<30){〇〇〇} | |
| それ以外なら〇〇〇 | else{〇〇〇} | |
| pがクラスAを持つなら〇〇〇 | if ($('P').hasClass('A')) {〇〇〇} | |
| 5回繰り返す | for (let i = 1; i <= 5; i=i+1) {〇〇〇} | forの{}の中でletで定義した変数は外に出ると値がなくなる。 最初のみi=1 i<=5か確認 ○○〇を実行 i=i+1を繰り返す whileを使って同じことができる。 |