//tips
//js理解継続
ローカルwebサーバ経由でHTMLファイルを開くことができればクッキーも動作するので先日のservedを用いてクッキーの実装を行なっていく。
クッキーは小さなデータをブラウザに保存する仕組み。データはブラウザとサーバ間で送受信され、ECサイトやSNSサイトなどでユーザのログイン情報を管理するのに使われる。
Jsからも読み取りと書き込みができるので、過去のボタンクリック有無やサイト訪問回数などを保存するのに使われる。
クッキーには変数名=値として記録され、後ほど出てくるagree=‘yes’などの部分がそれに該当する。
</footer>
<div id = “privacy-panel”>
<p>クッキーを使用しております</p>
<button id = “agreebtn”>承認する</button>
</div>
</body>
</html>
クッキー用のパネルをページ下部に表示させる流れにしていく。その際にcssも読み込ませる必要があるので下記のようにする。
<head>
…
<link href=“../../_common/css/style.css” rel=“stylesheet”>
<link href=“panel.css” rel=“stylesheet”>
</head>
ページが読み込まれたときにクッキーが保存されているかを確認し、保存されていれば「クッキーを確認しました」などをコンソールに表示させるようにする。
クッキーのデータ操作はjs-cookieというオープンソースのライブラリを使用。
common/scripts/js.cookie.jsをindex.htmlに読み込ませ、<script>のなかにコードを記述していく。
外部のライブラリを使用する際には、そのライブラリの機能の前に読み込みを行う必要がある。
<div id=“privacy-panel”>
…
</div>
<script src= “../../_common/scripts/js.cookie.js”></script>
<script>
‘use strict’
const agree=Cookies.get(‘cookie-agree’);
if(agree===‘yes’)
{
console.log(‘クッキー確認’)
}else
{
console.log(‘クッキーを確認できません’)
document.getElementById(‘agreebtn’).onclick=function()
{
Cookies.set(‘cookie-agree’,’yes’,{expires:7});
};
}
</script>
このようにライブラリは定型的なプログラムを肩代わりしてくれる補助プログラムなので使い方を覚えると便利。
ページを開くとcookie-agreeというクッキーの値を読み取り、定数agreeに代入。承認ボタンをクリックされると保存されるが、クリックされていない場合には、undeifinedになる。
承認ボタンのクリックイベントを設定したいのでid =“agreebtn”から.onclick=function(){…を実行させる。
Cookies.set(‘cookie-agree’,’yes’,{expires:7});で’yes’を設定し、７日間の有効期限を持たせている。
ボタンを押されていたことがある場合にはクッキーパネルを表示させないようにする。
<script src= “../../_common/scripts/js.cookie.js”></script>
<script>
‘use strict’
const agree=Cookies.get(‘cookie-agree’);
const panel =document.getElementById(‘privacy-panel’)
if(agree===‘yes’)
{
document.body.removeChild(panel);
}else
{
document.getElementById(‘agreebtn’).onclick=function()
{
Cookies.set(‘cookie-agree’,’yes’,{expires:7});
document.body.removeChild(panel);
};
}
</script>
すでにあるHTML要素の削除にはremoveChildメソッドを使用しており、()内で指定した要素を削除する。
<div id=“privacy-panel”></div>は<body>の子要素であるため、document.body.removeChild(panel);として削除する。
次により一般的な画像データの入れ替えを行う。
大きな画像を表示する<img>タグは<div></div>(id属性bigimg)で囲み、小さな<img>タグは<li></li>(class属性thumb)で囲むことにする。
<section>
<div class=“center”>
<div>
<img src=“img1.jpg” id=“bigimg”>
</div>
<ul>
<li><img src =“thumb-img1.jpg” class=“thumb” data-image=“img1.jpg”> </li>
<li><img src =“thumb-img2.jpg” class=“thumb” data-image=“img2.jpg”> </li>
<li><img src =“thumb-img3.jpg” class=“thumb” data-image=“img3.jpg”> </li>
<li><img src =“thumb-img4.jpg” class=“thumb” data-image=“img4.jpg”> </li>
</ul>
</div>
</section>
ここからはcss。
<style>
section img{
max-width:100%;
}
.center{
margin:0 auto 0 auto;
max-width:90%;
width:500px;
}
ul{
display:flex;
margin:0;
padding;0;
list-style-type:noe;
}
li{
flex:1 1 auto;
margin-right:8px;
}
li:last-of-type{
margin-right:0;
}
</style>
Jsの内容に入っていく。
</footer>
<script>
‘use strict’
const thumbs=document.querySelectorAll(‘.thumb’);
thumbs.forEach(function(item,index)){
item.onclick=function(){
console.log(this.dataset.img);
}
});
</script>
今回はquerySelectorAllメソッドを用いて、HTMLのclass属性を使用して複数の要素を取得している。
const thumbs=document.querySelectorAll(.thumb);
document.querySelectorAll(‘CSSセレクタ’)
セレクタに.thumbを指定することで<img class=“thumb”…>が全て取得される。要素は配列のような形で取得されているので、foreachによって全てにイベント設定を行うことになる。
配列.forEach(function(item,index)){
処理内容をここに書く
});
Itemには配列そのものの内容<img src=“thumb-img1.jpg”…>、indexには順番番号が割り当てられる。
Itemに保存している要素にonclickイベントを設定し、要素がクリックされた時に=に続くfunctionの{~}内の処理が実行される。
Thisはイベントが発生した要素、つまりitemを指し、これはイベント設定するfunctionの中で使える。
data-○○は○○部分を自由に決めて良いというもので○○部分を読み取る方法として、
取得した要素.dataset.○○
で<img>タグのdata-image属性を読み取ることができる。
