【受講記録】デイトラWeb制作コース初級編DAY18

はじめに

2024年10月からデイトラのWeb制作コースの受講をスタートしました。

アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。

OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。

初級編DAY18の押さえておきたいポイント

メソッドとパラメーター

メソッドとは、セレクタで指定した要素を操作する命令文のこと。

パラメーターとは、どのようにメソッドを実行するか具体的に指示する補語。
パラメーターに渡された値のことを引数と呼ぶ。
メソッドによってパラメーターは複数指定できたり、必要がないものもある。

classの追加.addClass、classの削除.remuveClassについては、()内にセレクタ指定時の．は不要なので要注意！

cssのプロパティは複数まとめて指定することも可能。
font-sizeのようにハイフンが含まれる場合は、ｰの後ろを大文字で書く。
このような書き方をcmel case（キャメルケース）と呼ぶ。

.textメソッドは、テキストを書き換えるのに使えるだけでなく、
()内を空にすることでその値を取得するときにも使うことができる。

//.text()で要素を取得する
const title = jQuery("#js-title").text();
alert(title);

メソッドチェーン

1つのセレクタに対して複数のメソッドを指定する場合、繋げて書くことができる。
なんでもかんでも連結できるわけではない。

//メソッドチェーン
jQuery("#js-title").css("color", "red");
jQuery("#js-title").text("Daily Trial");
//つなげると
jQuery("#js-title").css("color", "red").text("Daily Trial");

メソッドを使ったアニメーション

jQueryにはリッチな動きをつけれるメソッドがあり、
JavaScriptで作ろうと思ったら何行も書かないといけないアニメーションも、jQueryはメソッドひとつで実行できる。

イベントの監視

何かのイベントをきっかけに、特定の処理を行う。

基本的な書き方は
 jQuery(“セレクタ”).on(“イベント名”, function() {}) 

clickの場合

jQuery("#js-btn").on("click", function(){
    jQuery("#js-title").text("おもち");
})

hoverの場合
（最初、推測してイベント名にhoverと入れて書いてみたら全然違って笑った・・・）

jQuery("#js-btn").on({
    mouseenter: function(){
        jQuery(this).css("color", "yellow");
    },
    mouseleave: function(){
        jQuery(this).css("color", "white");
    },
});

なお、.onではなく、イベント名を直接書く方法もある。

例えば、クリックされたときに何か処理を追加したい場合は
jQuery("セレクタ").click(function(){
//ここに処理を書く
});
スクロールしたときに何か処理を追加したい場合は
jQuery("セレクタ").scroll(function(){
//ここに処理を書く
});

初級編DAY18の追加で調べたいことメモ

• イベントのバリエーションは知っておきたい！

初級編DAY18の感想と記録

おお！するっと終わった！やっぱりjQueryすごくわかりやすい！
ただ、その分Javascriptを忘れている・・・ひぃ

ときどきJavaScriptも振り返りながら、
JavaScriptだとどうやって書くかなー？と思いながら進めないと本当にきれいさっぱり忘れてしまいそう。

ちょっとずつ復習はしつつ、初級編終わったらもっかい総復習しよう！

引き続きがんばるぞ！

DAY18 完了日　：　2024年11月05日（火）
DAY18 所要時間　：　1h
Web制作コース 初級編Total ：　33.5h