【初級編DAY19】【調べながら実装しよう】jQuery実践課題①
HTML・cssの課題で作成したサイトに動きを付けてみましょう！
下記は復習と、新しく覚えたいことを記録しておきます。
手探りでの作成なので、きっとコードがごちゃごちゃで、お恥ずかしいですが、記録として残しておきます。お気づきの点がありましたら教えて頂けたら嬉しいです！
01. 課題①：ドロワーメニューの実装
まず、こちらのサイトを参考にしながら作成をしました。
👇とても分かり易く、作成が行えました。ありがとうございます。👇
≪HTML≫
まとめ
<li class="header-nav-item" id="toggle">
<span class="header-nav-link">
<span>Menu</span>
</span>
<ul class="toggle-list">
<li><a href="#">新発売</a></li>
<li><a href="#">おすすめ</a></li>
<li><a href="#">期間限定</a></li>
</ul>
</li>
- 親である.header-nav-itemにはidとして#toggleを追加
- ドロワーメニューとして表示したい要素の次にリストのタグを入れる（今回でいうとMenuの下に表示したかったので、ナビゲーションリスト内のMenuの下に記述をしました。）
- MenuをリンクタグからSpanに変更
≪ＣＳＳ≫
まとめ
/* ドロワーメニュー */
#toggle{
position: relative;
}
.toggle-list{
display: none;
width: 80px;
height: auto;
position: absolute;
top: 38px;
left: -13px;
background-color: rgba(0,0,0, 0.25);
font-size: 13px;
text-align: center;
padding: 10px;
color: rgba(255, 255, 255, 0.9);
}
.toggle-list>li{
padding-top: 10px;
}
- position relativeとabsoluteの使用（下記詳細記載）
- display none で通常ページから見えなくし、jQuerで表示させる
新しく覚えておきたいこと
position relativeとabsoluteについて
- セットで使用する
- relativeは親要素、absoluteは子要素へ
- relativeは元ある場所からどれだけ動かすか（相対位置）
- absoluteは親要素を基準としてどれだけ動かすか（絶対位置）
👇こちらのサイト記事を参考にさせて頂きました。大変分かり易かったです！👇
≪jQuer≫
まとめ
// アコーディオンメニュー
});
課題②：ページトップへ戻るボタンを付ける
≪HTML≫
まとめ
<button class="pagetop"><a href="#header">TOP</a></button>
- 今回HTMLをいれた場所はBodyのすぐ下。
- どこでもいいのかもしれないけど、分かるように。
- pタグなどで実装しているところもあったがボタンを押す、ので、buttonタグにした
≪CSS≫
まとめ
/* PageTop */
.pagetop{
position: fixed;
right: 20px;
bottom: 20px;
right: 20px;
bottom: 20px;
display: none;
}
.pagetop a {
font-family: "Josefin Sans", "Noto Sans JP", sans-serif;
font-size: 12px;
font-weight: bold;
margin: auto;
}
- position fixedでどこに配置するかを指定（右下）
- buttonの形を丸にする。上下の大きさを同じにして丸に（border-radius: 50%;）
- TOPの文字について
フォントが適用されていないようだったので、追記し、太字にした - なんだかいまいちちゃんと真ん中になっているんだろうかという不安がある
≪jQuer≫
まとめ
// クリックされたら飛ぶ
scrollTop:0},500);
});
- .pagetopがクリックされたとき
- animateを使用して、html,bodyのトップ０まで移動する
// windowsがスクロールされたときの処理
// もしWindowのスクロール位置が80pxより上だったときボタンを表示
if (jQuery(window).scrollTop() > 80)
{jQuery(".pagetop").fadeIn(300);}
if (jQuery(window).scrollTop() > 80)
{jQuery(".pagetop").fadeIn(300);}
// 80pxより下のときはボタンを消す
else
});
- jQuery(window).scroll(function・・・
Windowがスクロールされたときに発火する関数が記載されている - if (jQuery(window).scrollTop() > 80)
jQuery(window).scrollTop()でWindowのスクロール位置を取得している。>80とすることで「もし、80pxよりスクロールしていたとき」、となる。 - true（真）として {jQuery(".pagetop").fadeIn(300);}で.pagetopを300ms（0.3秒）かけてフェードインで表示
- else そうでなかったとき
- false（偽）として、 {jQuery(".pagetop").fadeOut(300);}で.pagetopを300ms（0.3秒）かけてフェードアウトで非表示に。
覚えておきたいこと
■jQuery(window).scroll(function()■
Windowがスクロールのイベントがあったときに発火する
■jQuery(window).scrollTop()■
Windowのスクロール位置が取得できる
今まで勉強してきたことを踏まえ、サイトやchatGPTを使用しながら実際にサイトに動きを付けてみました。
まずはHTMLで土台を作り、cssで装飾、そしてJavaSprict・jQuerで動きをつけるこれまでの流れが見えてきましたね！
今回もっとも躓いたのはjQuerでの；を付け忘れ・・しょーもないミスで時間がかかりました。そんなときにやっぱり活用したのがchatGPT様！
一発で私のミスを指摘してくださいました・・(笑)
これからもAIを活用しつつ、自分で調べつつ、精進していきます。
今日はここまでにします٩( ''ω'' )وお疲れ様でした。
【初級編DAY18】ChatGPTのプログラミングへの活用方法
プログラミングを行うにあたり便利なChatGPTの機能を使ってみよう！
■ChatGPTとは■
ChatGPTは、自然言語処理技術を使用して対話型のコンピュータプログラムとコミュニケーションするためのAIモデルです。ChatGPTは、対話型のAIアプリケーションを開発するための強力なツールであり、情報提供、カスタマーサポート、教育、エンターテインメントなど、さまざまな分野で活用されています。
学習された情報をつかって、プログラミングをする際の効率アップと、スピードアップにつなげていきましょう！
ChatGPTを使ったプログラミング勉強方法
chatGPTを使う注意
・AIはアシストにすぎない
・コードの扱いに注意
打ち込んだ内容が学習データに。機密情報の扱いに注意。
・問題解決のプロセスはメンターに相談したほうが勉強となる
chatGPTは答えを教えてくれるので、自分で解決する力をつけるためにヒントとしての使用が好ましい。
・chatGPTは万能ではない
情報にないデータはわからない。嘘をつくこともある。
chatGPTのおすすめの活用方法
- 辞書として使う
基礎的な技術内容を調べるのに優れている。 - タイポ、文法のチェック
「タイポ」とは、タイポグラフィ（文字の印刷や表示に関するスタイルや設計）の略語で、一般的には「タイプミス」または「入力ミス」として知られている。
おすすめのプロンプト：「以下は[プログラミング言語]のプログラムです。タイポや文法に誤りがないかチェックしてください。 - エラーメッセージの解読
プログラミングで出てきたエラーの解読をお願いする。
おすすめのプロンプト：「以下は[プログラミング言語・技術]のコードとそれを実行したときのエラーメッセージです。どういう意味か説明してください」 - コードの解説
自分以外が書いたコードの意味が分からないときに解説してもらう。※自分で読むことも大事
おすすめのプロンプト：「以下は[プログラミング言語・技術]のコードを解説して設してください。 - 記事の解説
関連する情報をネット上の解説記事で調べている際にでた疑問を投げかける。
命令（プロント）のポイント
- AIは察してくれないので具体的に命令する
- 技術の種類、具体的な技術、何をしたいのか の情報を入れると良い
まずは自分で調べることが第一ですが、忘れてしまった基本的な文法やメソッドはchatGPTに聞く方が効率的といえますね！
デメリットもよく理解した上で、うまく活用していくことが大事になりそうです♫
今日はここまでとします٩( ''ω'' )وお疲れ様でした。
【初級編DAY17】よくあるアニメーションを自在に作れるようになろう②
最終問題「フォームに入力された値をアラートに表示しよう」を見ていきます。
フォームに入力された値をアラートに表示しよう
e.preventDefault();
const yourName = nameInput.val();
if (!yourName) {
nameInput.next(".error-message").text("必須項目です");
return;
}
nameInput.next(".error-message").text("");
alert(`${yourName}さん、こんにちは`);
return false;
});
解説
- jQuery("#js-form-name").on("submit",
.on("submit"… はフォームの内容が送信されたらという意味
フォームに関するイベントアクションなのでidはフォームのidをしてしている -
・・・function (e) {
通常イベントメソッドにはそれぞれデフォルトのアクションが存在する。submitの場合は「フォームの送信」がデフォルトのアクションとなる。デフォルトのアクションが動いてしまうと更新が行われてしまうため、下記3にてその動きを止めたい。その為にまずは「フォームの送信イベント」をfunctionの引数(e)に格納している。 - e.preventDefault();
引数e に「フォームの送信イベント」が格納されている。それを.preventDefaultで送信イベントをキャンセルしている。それにより、ページの更新は行われない。 - const nameInput = jQuery("#js-input-name")
nameInputに"#js-input-name"の情報を取得
const yourName = nameInput.val()
yourNameに上記のフォームに入力されている値を取得※.val()は値を指定
※一括でconst nameInput = jQuery("#js-input-name").val()で書くことも可能である※別々にすることで別で使用する際の利便性が生まれる - if (!yourName)
もし、変数yourNameが空だったらを意味をする。下記にて解説する。
(!yourName)の！の意味は「反転の意」という。！を一つつけると、値が存在すればfalse、存在しなければtrueを返す。そのため、yourName内が空の場合はtrue、何か文字が入っていればfalseで次の項目へと進む。 -
{nameInput.next(".error-message").text("必須項目です");まずtrue(真)の場合(この場合はyourNameが空だったとき）。変数nameInputの次の兄弟要素の(".error-message")を選択し、そのtextを変更している。変数nameInputには要素の情報が入っているので、これがもし項目４で値の情報のみとしていた場合はこの式がなりたたず、「trueの次の(".error-message")要素＝エラー」となってしまうので要注意。その時は(".error-message")を直接指定すると良い。
-
return;}
処理を抜ける。これを書かないと続けて次の処理（false)へ進んでしまう。 -
nameInput.next(".error-message").text("");alert(`${yourName}さん、こんにちは`);
一度空欄でsubmitをしていた場合、項目6で行った「必須項目です」が残っている場合がある。false（値が有る）となった場合はコチラは消したいので、空欄にしておく。アラートにyourNameに取得している値を表示させる。 - return false;
古いブラウザではpreventDefault();が正しく機能しないためにreturn false;の記述を行っていたが現在は必要ないそう
新しく覚えたいこと
■デフォルトイベントのキャンセル（preventDefault）■
.on("submit",function (e) {
e.preventDefault();
e.preventDefault();
引数eに「フォームの送信イベント」が格納されている。
それを.preventDefaultで送信イベントをキャンセルしている。それにより、ページの更新は行われない。
※.on("submit"・・・に限らず、それぞれのデフォルトイベントがあります。
それを.preventDefaultで送信イベントをキャンセルしている。それにより、ページの更新は行われない。
※.on("submit"・・・に限らず、それぞれのデフォルトイベントがあります。
■反転の意(!変数)■
「変数yourNameが空だったら」を意味をする。！の意味は「反転の意」という。！を一つつけると、値が存在すればfalse、存在しなければtrueを返す。そのため、yourName内が空の場合はtrue、何か文字が入っていればfalseで次の項目へと進む。
実務に近い処理となってきたように感じます・・
一口に変数と言っても色々な使い方があることがわかりますね。
しっかりと理解を深めながら進めていきましょう♫
今日はここまで٩( ''ω'' )وお疲れ様でした。
【初級編DAY17】よくあるアニメーションを自在に作れるようになろう①
これまで学んだことの復習を兼ねてコーディングノックに挑戦！
この章で新しく覚えておきたいこと、もしくは追加して覚えておきたいことをメモとして残します。
ボタンクリックでアラートを表示しよう
// javaScript
document.querySelector("#js-button-alert")
.addEventListener("click", function () {
alert("おはよう！");
});
// jQuery
alert("おはよう！");
});
過去の記事を見て復習する
JavaSprict
👇セレクタ要素の取得、イベント監視復習👇
jQuer
👇セレクタ要素の指定👇
👇イベント監視（.on）👇
アコーディオンメニューを作ろう
過去の記事を見て復習する
■兄弟要素（.next）について■
👇兄弟要素の復習👇
新しく覚えたいこと
■.slideToggle();■
スライドをして表示・非表示をさせるメソッド。
表示されている時は隠し、隠れている時は表示する。
表示されている時は隠し、隠れている時は表示する。
これまではスライドして表示、スライドして消える、の処理のみでしたが、slidetriggerを使うことで状況に応じ開き閉じが可能となる便利なコードですね！
👇slideに関する復習👇DAY16記事に追記しました。
トップへ戻るボタンを作ろう
jQuery("html,body").animate({scrollTop:0},500);についての解説
- htmlの下にある要素bodyタグを指定
まずは画面のスクロール位置を取得したい。HTML要素（body要素）を対象にして実行している。 - .animateにてscrolltop:0は画面の最上部の位置に移動するという意味
- 引数500は「500ms（0.5秒）時間をかける」という意味
新しく覚えたいこと
■.animate()■
特定のHTML要素のCSSプロパティを連続して変化させることでアニメーションを実現してくれます。
基本記述
対象要素.animate( {CSSプロパティ}, duration, easing, 関数 )
※cssプロパティは必須、それ以外は省略可能
出来ること
- css（fontsizeや幅など）
- スクロール位置を動かす
参考記事
ドロワーメニューを作ろう
});
新しく覚えたいこと
■.toggleClass■
classのつけ外しをするメソッド。同一のclassがついているときは外し、ついていないときはつける
addClassメソッドと removeClassメソッドでつけ外しが可能と学びましたが、こちらはその状況に合わせてつけはずしを行ってくれる便利なメソッドです。
👇classの追加・削除に関する復習👇DAY16記事に追記しました。
次章で、最終問題「フォームに入力された値をアラートに表示しよう」をまとめます。（長くなってしまったので、別記事にてUPします。）
いよいよ実践的な動きのあるサイト作りに近づいてきました。まだまだ色んなメソッドや使い方など知らないことも多くあるとは思いますが、一つ一つ攻略していきましょう♫
今日はここまで。お疲れ様でした♫
【初級編DAY16】jQueryを学ぼう②
前回に引き続きjQueryについて学んでいきましょう。
メソッドとパラメーター
前回、jQueryはjQuery("セレクタ").メソッド("パラメータ")であることを学び、jQueryでセレクタを指定できることがわかりましたね。
次はメソッドとパラメーターについて詳しく見ていきましょう。
メソッドとパラメーターについて
■メソッドとは■
■パラメーターとは■
先ほどのメソッドに対して、具体的な実行指示文
「色は赤にして」「追加するclass名を指定」「このテキストにして」など、補語を指します。
※パラメーターに引き渡された値を引数と呼ぶ
※メソッドによって複数指定が出来たり、必要がないものなどがある
jQueryの代表的なメソッド
情報の追加と変更
例
// .text()・・・textを取得
// .text("変更したいテキスト")・・・テキストを””内の文字列に変更
// .html()・・・htmlを取得する
// .html("変更したいHTML")・・・HTMLを""内のHTMLに変更
// val() フォームの入力値(value属性の値)を取得する
// val('入力値') フォームの入力値(value属性の値)を設定・上書きする
取得した情報を変数に格納して使用することも可能
パラメーターを空白とすることで要素を取得します。
いまいちtitleとhtmlの変更の違いが判らない・・そんな方におすすめのサイトです。
👇参考にさせて頂きました👇
要素の挿入と削除
例
// .prepend('要素') 指定した要素内の先頭にHTMLを挿入する
// .append('要素') 指定した要素内の最後にHTMLを挿入する
// .remove() 指定した要素を削除する（子要素も含め）
属性の取得、変更、追加、削除
// .attr('属性') 指定した属性の値を取得する
// 属性hrefの値が返ってくる
// .attr('属性', '値') 指定した属性の値を変更する
// 該当するidのリンクタグのhref属性の値が変更となる
// .removeAttr(属性名) 指定した属性を削除する
// 該当するidのaタグからhref属性が削除さる
class属性の追加と削除
// .addClass(class属性値) class属性を追加する
// id button にclass .active が追加される
// .removeClass(class属性値) class属性を削除する
// id button のclass .active が削除される
// .toggleClass(class属性値) class属性をつけはずしする
// id button にclass.activeがついていれば外し、ついていなければつける
※追加削除を行う際、パラメーター""内には".active"ではなく、"active"と直接文字列を入れてしまってokです。
2023/10/12 追記 .toggleClass
cssの取得、設定
cssの複数の設定方法
メソッドチェーン
一つのセレクタに対して複数のメソッドを指定したいときはメソッドをつなげて書くことが出来ます。
メソッドをつなげて記述することをメソッドチェーンと言います。
※メソッドならすべて連結できるわけではないので注意しましょう。
例
// ↓メソッドを繋げて書くと
処理も見やすくなり、記述量も減るね！
メソッドを使用したアニメーション
jQueryにはリッチな動きをつけれるメソッドが用意されています。
JavaScriptで作ろうと思ったら何行も書かないといけないアニメーションが、jQueryのメソッドひとつで実行が可能です！
代表的なメソッド一覧
- .fadeIn() ・・・フワッと表示
- .fadeOut() ・・・フワッと消える
- .slideDown() ・・・スライドして表示
- .slideUp()・・・スライドして消える
例
// .fadeIn() フワッと表示。
パラメーターに数字を入力することで表示の時間を変えられる
パラメーターに数字を入力することで表示の時間を変えられる
// .fadeOut() フワッと消える。
パラメーターに数字を入力することで表示の時間を変えられる
パラメーターに数字を入力することで表示の時間を変えられる
// .slideDown() スライドして表示。
// .slideUp() スライドして消える。
※第1引数()内に演出速度が変更可能。（1000と設定⇒1秒かけて要素が変化）
スライドはHP作成に欠かせないアコーディオンメニュー（クリックすることで伸び縮みするメニュー）の作成に使用するので覚えておきましょう。
2023/10/11 追記 slidetrigger
2023/10/11 追記 第一引数の演出速度
イベントの監視・構文
何かのイベントをきっかけに特定の処理が行われる方法を学びます。
■イベント構文の基本■
jQuery("セレクタ").on( イベント名, セレクタ, データ ,関数 )
イベント名：何をしたときか
セレクタ ：対象要素内でさらに指定したセレクタからのイベントだけを設定
データ ：任意のデータを渡したい時に値を設定
関数 ：どんな処理をするか
今回はjQuery("セレクタ").on( イベント名, 関数 )で下記解説をしていきます。
セレクタ、データについてもっと知りたい方用
👇参考にさせて頂きました👇
.on()を使った主なイベント処理
- click : クリックされたとき
- change : フォーム内に変更があったとき
- load : 読み込まれたあと
- resize : ブラウザサイズが変更されたとき
- mouseenter : ホバーされたとき
- mouseleave : ホバーが外れたとき
- submit : フォームが送信されたとき
公式サイトで確認：.on() | jQuery API Documentation
実際の使い方を見ていきましょう。
クリックイベントの例
例
// #buttonがクリックされたら関数が実行される
// 関数（#button-titleのテキストが変更となる)
});
hoverイベントの例
hoverのイベントに関しては記述の仕方が少し変わります。
イベント名にhoverされた時と外れたときの処理を書いていきます。
例
// hoverされたときのイベント 色をオレンジに
mauseenter:function(){
},
// hoverが外れたときのイベント 色を白に
moouseleave:function(){
});
イベントとイベントはカンマで区切ることを忘れずにしましょう。
少し特殊ですが、こーゆー記述なんだな、くらいで覚えておいて大丈夫です。
ワンポイント【いろいろなイベント構文の書き方】
.onを使用してイベント構文を記述しましたが、上記の書き方のほかにも記述の仕方があります。
// クリックされたときに何か処理を追加したい場合は
//ここに処理を書く
});
// スクロールしたときに何か処理を追加したい場合は
//ここに処理を書く
});
.onがないね！
先ほどまではメソッドを.onをとしていましたが、こちらはメソッドを直接指定しています。
このような書き方もあることを覚えておきましょう♫
jQueryで出来ることがたくさんあり、またリッチなアニメーションもつけられることがわかりました！
覚えることも多く大変ですが、素敵なサイトがつくれると思うとワクワクしますね！
では、今日はここまで٩( ''ω'' )وお疲れさまでした。
【初級編DAY15】jQueryを学ぼう①
DOM操作を含めたJavaSprictの基礎を学んだところで、jQueryの学習に入っていきましょう！
■jQueryとは？■
JavaScriptのライブラリで、JavaScriptをより簡単に記述できるようにしたもの
メリット
- 短いコードで簡単に記述が可能
- 便利なライブラリが豊富
ライブラリとは：JavaScriptを使った開発作業において汎用的に使える機能を再利用できるようにまとめたもの。様々な人が作業を重複して行うのではなく、誰かが一度作った機能は広く共有し、よりクリエイティブな作業に集中できるようにしようというものです。
jQueryを使うための準備
■CDNとは■
Content Delivery Networkの略
ファイルを手元にダウンロードしなくても簡易的に活用できる仕組み
CDN読み込み方法
①jQuery公式サイトのCDNsのセクションから外部で提供してくれているjQueryのURLを読み込みします。
Google、マイクロソフト、CDNJS、jsDelivrのどれかをクリックして、スニペットコピーします。
②HTMLファイルに記入
<!-- 先にjQueryを読み込む -->
<script src="./js/script.js">
/* ここに自分のコードを記述する。外部ファイルとして読み込んでもOK */
</script>
</body>
先ほどjQuery公式よりコピーしたスニペットを自分のHTMLファイルへ記入します。
注意点
- </body>タグの直前に記入する。
- jsファイルよりも上（先）に記入する。
以上でjQueryの読み込みは完了です！
こちらのサイトを参考にさせて頂きました。
👇CDNについてもっとよく知りたい方はコチラ👇
jQueryを書く時のルール
■基本記述■
とりあえず、jQueryがどのように便利なのか、下記にて確認をしてみましょう。
id#titleのtextを書き換えたいとき、JavaSprictとjQueryの書き方の違いは以下となります。
jQueryのほうがすっきりして、処理が分かりやすいね！
では実際にjQueryを使っていきましょう。
セレクタ（HTML要素）の指定方法【jQuery("セレクタ")】
jQueryで操作したいセレクタ（HTML要素）を指定してみましょう。下記のように指定することで一致するすべての要素を取得します。
基本記述
// idで指定
// classで指定
// タグで指定
// 属性で指定
■セレクタの指定方法■
- id・・・#id名（＃シャープ）
- class・・.class名（.ドット）
- タグ・・タグ名（そのまま）
- 属性・・[属性名]（大かっこ※href要素などの属性の中に""がある場合は外側は''シングルで囲いましょう。例(’[href=”http://〇〇”]’
これでjQueryからHTML要素を指定して操作することが可能となります。
JavaSprictのdocument.querySelectorAll("セレクタ");と同じ意味合いですね！
👇JavaSprictの復習はコチラ👇
では、上記では一致したHTMLの要素がすべて指定されているので、その中からプロパティの指定をしていきましょう。
メソッド("パラメータ")
これまでで、jQueryを使用してHTMLの要素を取り出すことをしました。その際返ってきた情報は該当するHTML要素に関するすべての情報が載っていたかと思います。
では、その中から操作する場所を指定、変更してみましょう。
基本
クラス名.titleを指定し、css要素のcolorを"red"へ書き換えている
こちらの書き方でいろいろな要素の操作が可能となりますので、覚えておきましょう！
詳しくはDAY16で解説しています。
さて、jQuery()で一致したすべての要素の指定ができることがわかりました。
そうなるとJavaSprictのdocument.pueryselectorAllと同様となりますので、こちらも個別に操作が必要な際は繰り返し処理が必要となります。
繰り返し処理【.each(function)】
■.each(function)とは■
繰り返し処理を行うことができるメソッド
例
//一致する全ての要素が取得される
//個別に操作するためには繰り返し処理が必要
elements.each(function () {
});
解説
- jQueryでclass名.textの要素をすべて変数elementsに格納
- elementsに対して繰り返し処理を実行
- console.log内
jQuery(this).text()・・・jQueryで現在処理されている要素（ここでいうとelements)のTEXT情報（innerText）を指定している。 - これがオブジェクトが終わるまで繰り返される。
■thisとは？■
様々なものを指し示す変数。現在処理されている要素が繰り返しの都度入れ替わりでその変数に入っているイメージ。
JavaScriptのforEachとよく似ているね！
複数のセレクタを指定する
jQueryを使用する際に、まとめてセレクタを指定したり、子要素や孫要素を指定することも可能です。
まとめてセレクタを使用
カンマで区切ることで複数のセレクタを指定することが可能です。
例
class名.ABCとクラス名.abcを指定することが可能
子要素や孫要素などの条件を追加して指定
書き方により、「.〇〇の下にある.△△を呼び出す」と複数の条件を追加することが可能です
他にも様々な条件でセレクタの指定が可能となります。
公式サイトで確認をしておきましょう。
Selectors | jQuery API Documentation
メソッドを使った要素の指定【Tree Traversal】
jQuery(”セレクタ”)を起点とし、親子要素や兄弟要素を直接指定するメソッドが存在します。
■Tree Traversalとは■
樹形図のように親子関係がある要素を辿って指定できること。 これらのメソッド。
■使用メソッド■
.children()・・・子要素
.find()・・・子孫要素
.find()・・・子孫要素
例
// #sectionを起点に子孫要素のpタグを操作
// #sectionを起点に子要素のpタグを操作
#sectionのそれぞれの関係要素のpにcssでカラーを赤に変更している
解説
<section class="oyayouso">
<p class="koyouso"></p>
<p class="koyouso">
<p class="magoyouso"></p>
<p class="magoyouso"></p>
</p>
</section>
子孫要素とは：親要素を起点に子要素以下の階層から検索できる
子要素とは：親要素を起点に直属の子要素のみ検索できる。
メソッドを使った要素の指定はほかにもたくさんあります。
Tree Traversal | jQuery API Documentation
.parents()・・・先祖要素
.parent()・・・親要素
.next()・・・次の兄弟要素
.prev()・・・前の兄弟要素
.children()・・・子要素
.find()・・・子孫要素
ワンポイント
jQuery(function(){})について
これからコードを記述するにあたり、jQuery(function(){})という記述を見かけることがあるかと思います。
こちらのコードは「HTMLをすべて読み込んだ後に処理を実行するための記述」となり、HTMLよりも前に記述を行った際に必要なコードとなります。
通常HTMLは上から下に読んでいるので、HTML要素が読み込まれる前にjQueryが記述されるとないものを指定することとなりうまく動かくなってしまいます。
それを防ぐために、このコードがあった際はHTMLの読み込みが完了するまでは待機し、読み込みが終わった後にjQuery(function(){})が読まれるようになっています。
JavaScriptを読み込む位置を</body>の直前にすることで、HTMLがすべて読み込まれた後にJavaScriptの処理が実行されます。その場合はjQuery(function(){} で囲う必要はありません。
だから</body>の直前に書くことを推奨されているんだね！
こちらのサイトを参考にさせて頂きました。
👇よくわかる解説はコチラ👇
jQueryの省略
通常jQuery("セレクタ").メソッド("パラメータ")と記述すると記載しましたが、実はjQueryの部分を＄で省略することも可能なんです！
下記二通りの記述の仕方を記載しましたが、どちらも同じ意味となります。
しかし、注意が１つあり、WordPressではそのまま$()を使用することが出来ないので、覚えておきましょう。
どんどん難しくなってきましたね・・
JavaSprictを学んでからjQueryを勉強すると少し考え方の違いがあり戸惑うところもありますが、JavaSprictは頭の片隅に置きながらまた新しくこの便利なjQueryについで学んでいきましょう！
今日はここまで！٩( ''ω'' )و
お疲れ様でした。
【初級編DAY14】Web制作初心者のためのJavaScript基礎講座（DOM操作）
サイトに動きを付けるためにはJavaSprictでDOM操作することで動きをつけることができます。DOM操作について学んでいきましょう！
DOM操作とは
■DOMとは■
HTMLなどのドキュメントにJavaScriptからアクセスするための仕組み
下記にて詳しく説明します。
まず、HTMLの構造を理解しておきましょう。
階層構造：ツリー構造（上の階層から順になっていること）
オブジェクト：document
該当のHTMLすべてをコンソール画面に表示するには
console.log(document);
とすることで、HTMLの階層がコンソール画面に表示されます。
以上のようにHTMLデータはdocumentであることを覚えておきましょう。
JavaSprictでHTMLに動きをつけたり変更するには、このdocument内（HTML）から特定のデータや要素を探し出し、様々なメソッドを当てていくことが必要となります。
このようなJavaSprictからHTMLなどのdocumentにアクセスすることをDOM操作といいます。
では実際にJjavascript からHTMLを取得してみましょう。
HTML要素の取得
では、JavaSprictからHTMLの要素（id、class、タグ、属性 等）を取得してみましょう。
HTML要素を取得するために今回は3種類の方法を解説します。
■セレクタの指定方法■
- id・・・#id名（＃シャープ）
- class・・.class名（.ドット）
- タグ・・タグ名（そのまま）
- 属性・・[属性名]（大かっこ※href要素などの属性の中に""がある場合は外側は''シングルで囲いましょう。例(’[href=”http://〇〇”]’
上記のように、("セレクタ")の部分には指定方法はCSSセレクタの記法とほぼ同じですね！
下記にて詳しく見ていきましょう。
最初に一致したセレクタ要素を取得【document.querySelector】
■document.querySelectorとは■
指定したセレクタと一番最初に一致した要素を呼び出せるメソッド。document.querySelectorで取得したいセレクタを指定することで、document＞セレクタで一致する最初の要素のみを取得することできます。
基本
例
console.log(document.querySelector("#header-title"));
コンソール画面にdocument内のid#header-titleに一致したHTML要素が表示されます。
※コンソール画面にたくさんの情報が出来た！※
現在の指定だと、id #header-title に関するすべてのHTML情報がオブジェクトで返ってきているような状態となります。現在はHTMLの要素を呼び出しているのでそれでOKです！
ここからまたさらに必要な情報を絞り込む必要があります。指定の方法は次項に乗せています。コチラからどうぞ。（下記2通りも同様です。）
一致したすべてのセレクタ要素を取得【querySelectorAll】
■document.querySelectorAllとは■
セレクタと一致したすべての要素を呼び出します。
document.querySelectorAllで取得したいセレクタを指定することでdocument＞セレクタでセレクタと一致するすべての要素を取得することできます。
しかし、取得したデータはオブジェクトデータで返ってきます。個別に取得するためには繰り返し処理が必要となることを覚えておきましょう。
基本記述
セレクタに該当したすべての情報がオブジェクト形式で返ってきます。
オブジェクトの形式で返ってきますので、このままをconsole.log使用しても一番最初のものしか表示がされません。そのため、繰り返し処理を使用して表示していきましょう。
繰り返し処理を使用し、呼び出したオブジェクトを個別に取り出す
先ほどの用のquerySelectorAllで呼び出した.textのオブジェクトデータを変数に格納し、すべてをコンソール画面に書き出しています。
例
// 一致する要素をすべて取得
const items = document.querySelectorAll(".text");
//繰り返し方法① (for)で個別に取り出す
for (let item of items) {
console.log(item);
}
//繰り返し方法② (forEach)で個別に取り出す
items.forEach(function (item) {
console.log(item);
});
解説
- querySelectorAllを使用し.textに一致するすべての要素を変数itemsに格納
- 繰り返し方法でitemsからitemに書き出しをしてコンソール画面に表示させる（上記は二通りforまたはforEachにて繰り返し処理を記載
👇繰り返し処理についての復習はコチラから👇
各セレクタで呼び出す【getElementsBy～】
■document.getElementsBy～とは■
各セレクタで呼び出すためのメソッド
id名、class名など決まっているものを指定するときに使用する。
id名、class名など決まっているものを指定するときに使用する。
※使用の注意※
呼び出すものが変わらないときは良いが、クラス名からid名に変更となった際、こちらを使用している場合はメソッドごと書き換えが必要となる。
そのため汎用性高く使えるquerySelector()で進めていくのがおすすめとされている。
基本記述
// // idで取得
document.getElementById("id名")
// classで取得
document.getElementsByClassName("class名")
// name名で取得
document.getElementsByName("name名")
// タグで取得
document.getElementsByTagName("タグ名")
// 属性で取得
document.querySelector("[属性]")
キー、プロパティを絞る
これまでで、JavaSprictを使用してHTMLの要素を取り出すことをしました。その際返ってきた情報は該当するHTML要素に関するすべての情報が載っていたかと思います。
では、その中から、必要なプロパティを取り出しましょう。
基本
該当するdocument＞該当セレクタ名＞outerHTMLのみが取り出されます。
outerHTMLのほかにもinnerHTMLなどいろいろな情報がHTMLの中には含まれています。その一つ一つの情報を絞り込み呼び出すイメージです。
覚える必要はないですが、document＞セレクタ（すべての情報）＞要素となることを覚えておきましょう！
では、ここからは本格的にJavaSprictを使用して、HPに動きを付けていきましょう。
Javascript で動きを付ける
JavaSprictで行う処理のほとんどがは「取得 → 加工 → 出力」の流れとなります。
下記の処理を行ってみましょう
- タイトル文字書き換え
- タグ、要素の追加【createElement、setAttribute、appendChild】
- ボタン操作、アクション操作【click】
- イベント監視【window.onload、addEventListener】
下記にてそれぞれ解説をしていきます。
タイトル文字書き換え
id#titleの文字をJavaSprictを使用して変更します。
例
// innerTextの書き換え
document.querySelector("#title").innerText = "タイトル〇〇";
呼び出したid#titleのinnerTextを変更することで、JavaSprictを使用してのタイトル変更をすることができました。
タグ、要素の追加【createElement、setAttribute、appendChild】
親要素であるclass.btn-itemがあるとします。
その中に新しく「ログイン」と表示されたリンクボタンを追加していきましょう。
例
//新規にaタグを作成
const button = document.createElement("a");
//テキストを追加
button.innerText = "ログイン";
//setAttributeでclassを追加
button.setAttribute("class", "btn");
//setAttributeでhrefを追加
//親要素.appendChild(追加したい要素)でbuttonを追加
document.querySelector(".btn-items").appendChild(button);
■使用しているメソッド■
・createElement
新しい要素の追加。(””)内に追加したい要素を記載。
・setAttribute
新しい属性の追加。(”属性”,"値")を指定。
・appendChild
特定の親要素の最後に子要素として追加。(変数)を記載することでその変数が親要素の最後へ追加される。
解説
- createElementを使用してaタグを変数buttonに格納（button内 <a><a/>）
- buttonのinnerTextに”ログイン”を追加（button内 <a>ログイン</a>）
- setAttributeで属性class名を追加。（button内 <a class="btn">ログイン</a>）
- setAttributeで属性href名を追加。（button内 <a class="btn" href="http://〇〇〇/">ログイン</a>）
- querySelectorで追加したい親要素を取得。指定した親要素の最後にappendChildで完成した変数buttonを追加する。
- 完成！
ボタン操作、アクション操作【click】
JavaSprictを使用してボタンをクリックします。
■使用するメソッド■
click();
例
自動的にJavaSprictを使用してボタンをクリックさせることが可能となりました。リンク表示のあるボタンやセレクタを指定することでリンクへ飛ばすことが可能です。
イベント監視【window.onload、addEventListener】
ページが読み込まれた時やクリックされた時など、なにか特定のイベントをきっかけにした処理を実行させます。
ページの読み込みが完了したらアラートを表示させる
■使用するメソッド■
window.onload
例
window.onload = function () {
alert("読み込みが完了しました");
};
ページ読み込みが完了と共に関数を指定してアラート”読み込みが完了しました"を表示しています。
ボタンがクリックされたときにアラートを表示させる
■使用するメソッド■
addEventListener(イベントの種類, 通知を受けるオブジェクト)
例
ボタンを押したときにアラート"ボタンがクリックされました"が表示されます。
解説
- querySelectorで要素を取得。
- addEventListenerのイベントを指定。"click"と指定することで先ほど指定した要素がクリック（イベント）があった際に次の引数に通知される。
- 通知を受けるオブジェクトとしてfunctionを指定しているため、function関数内のアラートが表示される。
少しずつJjavascript を使用したサイトに動きをつける方法がわかってきましたね！かっこいいサイト制作を目指して頑張っていきましょう♫
スニペット登録も活用しながら効率よくやっていきましょうね！
今日はここまで٩( ''ω'' )وお疲れ様でした。
