目次

ボタンの表示と非表示
 非同期処理

教材:侍テラコヤ『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');

【実行】