目次
教材:侍テラコヤ『JavaScriptの基礎を学ぼう』https://terakoya.sejuku.net/programs/60/chapters
ボタンの表示と非表示
スクロール量に合わせてイベント処理をするコードを記述する。
(1)html: スクロール用のdiv要素を作成
<!DOCTYPE html>
<html>
<head>
<title>イベント処理(スクロール)</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/scroll.css">
</head>
<body>
<div class="blue-screen">1ページ目</div>
<div class="red-screen">2ページ目</div>
<div class="blue-screen">3ページ目</div>
<div class="red-screen">4ページ目</div>
<div class="blue-screen">5ページ目</div>
<a id="back-btn" href="#">TOPに戻る</a>
</body>
</html>
(2)css: div要素の背景と「TOPに戻る」ボタンを装飾する
.blue-screen {
height: 100vh;
color: #fff;
font-size: 5em;
text-align: center;
background-color: #88f;
}
.red-screen {
height: 100vh;
color: #fff;
font-size: 5em;
text-align: center;
background-color: #f88;
}
#back-btn {
display: none;
padding: 40px 10px;
background-color: #fff;
color: #000;
text-decoration: none;
border-radius: 50%;
position: fixed;
bottom: 10px;
right: 10px;
}
(3)js: 画面のスクロール量を取得する
※document.scrollingElement.scrollTopプロパティを使用する。
※画面全体を対象とするため、windowオブジェクトを指定する。
(4)js: スクロール量が300px以上であれば「TOPに戻る」ボタンを表示する
※displayプロパティをinlineに変更する。
(5)js: スクロール量が300px未満であれば「TOPに戻る」ボタンを非表示にする
※displayプロパティをnoneに変更する。
const backBtn = document.getElementById('back-btn');
window.addEventListener('scroll', () => {
const scrollValue = document.scrollingElement.scrollTop;
if (scrollValue >= 300) {
backBtn.style.display = 'inline';
}
else {
backBtn.style.sisplay = 'none';
}
});
非同期処理
処理実行中にほかの処理も並行して実行できる仕組みのこと。
上から順番に実行される処理を同期処理という。
作成方法
(1) コンソールに下記を表示する。
(2) 待ち時間を設定し、非同期処理を実行する。
実行するまでに秒数を設ける際に、setTimeout関数を使用する。
処理4は2秒待ってから出力されるように設定する。
console.log('処理1');
console.log('処理2');
console.log('処理3');
setTimeout(() => {
console.log('処理4(非同期処理)');
},2000);
console.log('処理5');
console.log('処理6');
【実行】
