こんにちは！
今日も頑張ろう

Lesson-12
JavaScript / jQuery を始める前に

L12.1 はじめに

L12.1.1 概要

動きのある Web ページや Web ページで計算などの処理を行う場合は、JavaScript や jQuery や個別のライブラリィなどを使用します。
JavaScript の処理部は、ブラウザに内蔵されていますので JacaScript のコードを書くだけで使用可能です。
jQuery の処理部は、JavaScript で記述されており使用するためには、jQuery の処理部を導入する必要があります。
個別ライブラリィは、個別機能に特化した機能提供を行うもので JavaScript を直接呼び出しているものと、jQuery の機能を使用しているものがあります。個別ライブラリィを使用するためには、個別ライブラリィの処理部（必要に応じて個別ライブラリィの CSS や画像ファイルなどを含む）を導入する必要があります。
JavaScript などの勉強するには、以下のオンラインドキュメントも参考にしてください。
- MDN Web Docs JavaScript

L12.1.2 アプリケーションと各機能の関係

(1) アプリケーション

Web ページで動きを出す場合や計算などの処理を行う場合は、JavaScript や jQuery で処理を記述したり個別ライブラリィなどの呼び出しを行います。
実現する機能によって記述方法が異なりますので、本サイトの Web パーツ（WebParts）ページなどを参考にして記述を行ってください。

(2) 個別ライブラリィ

個別機能に特化した機能提供を行うライブラリィです。
実装する機能によって使用するライブラリィが異なりますので、本サイトの Web パーツ（WebParts）ページや個別ライブラリィの公式サイト、ネット上の参考サイトなどを参考にして使用してください。
個別ライブラリィを使用する場合は、個別ライブラリィをダウンロードしてサイト内に配置する方法と CDN サイトを使用する方法があります。CDN については、下記の「CDN（Content Delavery Network）」を参照してください。
個別ライブラリィには、jQuery を使用するものと JavaScript を直接使用するものがあります。jQuery を使用するものはjQueryの実装が必要になりますので忘れずに jQuery の導入を行ってください。

(3) jQuery

jQuery は、JavaScript コードをより容易に記述できるようにするために設計された JavaScript ライブラリです。
jQuery は、JavaScript を使用して機能実現を行っていますので jQuery の機能は、JavaScript を直接呼び出すことで実現可能ですが jQuery を使用することで処理の記述が簡素化されます。
jQuery は、以下の特徴を持ちます。
- ブラウザの違いを意識せずに処理を記述できます。
- HTML 文書（DOM：Document Object Model）に簡単にアクセスできます。
- Ajax 処理（サーバーとの非同期通信）が簡単に記述できます。
jQuery の詳細については、関連図書や関連サイトを参照してください。

(4) JavaScript

JavaScript は、Web ページの操作機能を提供します。JavaScript を使用することで Web ページに動きを与えたり算術などの処理を行うことが可能になります。
JavaScript の処理部は、ブラウザに内蔵されているので JavaScript のコードを記述するだけで使用可能です。
JavaScript はスクリプト言語のひとつであり Netscape Communications 社によって開発されたプログラミング言語ですが、標準化され現在ではほとんどのブラウザの標準スクリプト言語として使用されています。JavaScript の言語仕様は、ECMAScript として標準化されています。
JavaScript はクライアント（ブラウザ）のスクリプト言語として発展して来ましたが近年ではサーバーサイドでも稼働するもの（Node.js など）もあります。
JavaScript の詳細については、関連図書や関連サイトを参照してください。

L12.1.3 CDN（Content Delivery Network）

jQuery や個別ライブラリィを使用する場合は、ダウンロードしてサイト内に配置する方法と CDN（Content Delivery Network）を使用して配置する方法があります。CDN の特徴と使用方法は、以下の通りです。

CDN を使用すると jQuery や個別ライブラリィを使用する時に指定された URL を記述するだけで使用できますのでダウンロードしてサイト内に配置する作業が不要になります。
CDN では、jQuery や個別ライブラリィのダウンロードが高速で大容量のサーバーから行われますので高速に実行されると同時に自サイトのサーバー負荷を軽減させることができます。
CDN を使用する場合は、ネットの検索で「（使用する機能名） CDN」と検索して表示されたコードを Web ページ内に記述してください。例えば、jQuery の CDNは「jQuery CDN」と検索します。
例えば、jQuery の場合は「jQuery CDN」と検索することで CDN の情報を入手することができます。jQuery の場合は、jQuery の本家に加えて Google や Microsoft が提供しています。

L12.1.4 JavaScript / jQuery の動作確認

JavaScript や jQuery の動作確認には、Chrome の検証ツールを使用するのが便利です。

Chrome の検証ツールを起動してコンソール画面を開くことで JavaScript や jQuery のコードを入力して動作を確認することができます。
jQuery の動作を確認するためには、HTML の script 要素を使用して、jQuery 本体の読み込みを行っておく必要があります。
console.log(...) を使用することで、指定した変数などを検証ツールのコンソール画面に表示することができます。

L12.2 じゃんけんアプリケーション

L12.2.1 じゃんけんアプリケーションについて

JavaScript、jQuery、PHP（参考）の言語仕様や動作環境の違いを理解するために各環境で動作する「じゃんけんアプリケーション」を用意しました。

ソースコードは類似していますが特徴的な部分に相違があります。各アプリケーションのソースコードで相違点を確認してください。

L12.2.2 JavaScript 版

JavaScript で作成した「じゃんけんアプリケーション」です。JavaScript の基本機能を使用して作成しています。

リロード　別画面で表示

ソースコード表示

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>じゃんけん</title>
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.container {
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
	border: 1px #fff solid;
}
.container h1 {
	font-size: 28px;
	text-align: center;
}
.senntaku {
	display: flex;
}
.senntaku div {
	width: calc(100% / 3);
	line-height: 100px;
	margin: 10px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	background: blue;
	color: white;
	border-radius: 10px;
}
.senntaku div:hover {
	opacity: 0.6;
	cursor: pointer;
}
.kekka {
	padding: 0 20px;
	font-size: 1.4rem;
}
</style>
<script>
function jyanken(anata) {
	let watashi;
	let hantei;
	const cnvRand = [ "グー", "チョキ", "パー" ];
	const kekka_anata = document.getElementById('kekka-anata');
	const kekka_watashi = document.getElementById('kekka-watashi');
	const kekka_hantei = document.getElementById('kekka-hantei');

	watashi = cnvRand[ Math.floor(Math.random() * 3) ];
	if (anata == watashi) {
		hantei = "引き分け";
	}
	else if ((anata == "グー") && (watashi == "パー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "グー") && (watashi == "チョキ")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "グー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "パー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "グー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "チョキ")) {
		hantei = "私の勝ち";
	}
	kekka_anata.textContent = anata;
	kekka_watashi.textContent = watashi;
	kekka_hantei.textContent = hantei;
}
</script>
</head>
<body>
	<div class="container">
		<h1>じゃんけん<br>（JavaScript版）</h1>
		<div class="senntaku">
			<div onclick="jyanken('グー');">グー</div>
			<div onclick="jyanken('チョキ');">チョキ</div>
			<div onclick="jyanken('パー');">パー</div>
		</div>
		<p class="kekka">
			あなたは、<span id="kekka-anata">？</span> で、私は、<span id="kekka-watashi">？</span> なので、<span id="kekka-hantei">？</span>です。
		</p>
	</div>
</body>
</html>

L12.2.3 jQuery 版

(1) jQuery 版（その1：HTML アクセス）

jQuery で作成した「じゃんけんアプリケーション」です。

JavaScript のアプリーションと比較して、じゃんけん結果を HTML 部分に設定する部分を jQuery を使って設定するようにしました。

リロード　別画面で表示

ソースコード表示

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>じゃんけん</title>
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.container {
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
	border: 1px #fff solid;
}
.container h1 {
	font-size: 28px;
	text-align: center;
}
.senntaku {
	display: flex;
}
.senntaku div {
	width: calc(100% / 3);
	line-height: 100px;
	margin: 10px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	background: red;
	color: white;
	border-radius: 10px;
}
.senntaku div:hover {
	opacity: 0.6;
	cursor: pointer;
}
.kekka {
	padding: 0 20px;
	font-size: 1.4rem;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function jyanken(anata) {
	let watashi;
	let hantei;
	const cnvRand = [ "グー", "チョキ", "パー" ];

	watashi = cnvRand[ Math.floor(Math.random() * 3) ];
	if (anata == watashi) {
		hantei = "引き分け";
	}
	else if ((anata == "グー") && (watashi == "パー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "グー") && (watashi == "チョキ")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "グー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "パー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "グー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "チョキ")) {
		hantei = "私の勝ち";
	}
	/* 結果の設定を jQuery を用いて実施 */
	$("#kekka-anata").text(anata);
	$("#kekka-watashi").text(watashi);
	$("#kekka-hantei").text(hantei);
}
</script>
</head>
<body>
	<div class="container">
		<h1>じゃんけん<br>（jQuery版-1）</h1>
		<div class="senntaku">
			<div onclick="jyanken('グー');">グー</div>
			<div onclick="jyanken('チョキ');">チョキ</div>
			<div onclick="jyanken('パー');">パー</div>
		</div>
		<p class="kekka">
			あなたは、<span id="kekka-anata">？</span> で、私は、<span id="kekka-watashi">？</span> なので、<span id="kekka-hantei">？</span>です。
		</p>
	</div>
</body>
</html>

(2) jQuery 版（その2：イベント取得）

jQuery で作成した「じゃんけんアプリケーション」です。

jQuery 版（その1）と比較してイベントの発生タイミング（グー、チョキ、パーのボタン押下タイミング）を jQuery を使用して取得するようにしました。

リロード　別画面で表示

ソースコード表示

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>じゃんけん</title>
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.container {
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
	border: 1px #fff solid;
}
.container h1 {
	font-size: 28px;
	text-align: center;
}
.senntaku {
	display: flex;
}
.senntaku div {
	width: calc(100% / 3);
	line-height: 100px;
	margin: 10px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	background: red;
	color: white;
	border-radius: 10px;
}
.senntaku div:hover {
	opacity: 0.6;
	cursor: pointer;
}
.kekka {
	padding: 0 20px;
	font-size: 1.4rem;
}
</style>
</head>
<body>
	<div class="container">
		<h1>じゃんけん<br>（jQuery版-2）</h1>
		<div class="senntaku">
			<div id="goo">グー</div>
			<div id="cyoki">チョキ</div>
			<div id="par">パー</div>
		</div>
		<p class="kekka">
			あなたは、<span id="kekka-anata">？</span> で、私は、<span id="kekka-watashi">？</span> なので、<span id="kekka-hantei">？</span>です。
		</p>
	</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
/* イベント発生タイミングを jQuery を用いて実施 */
$("#goo").click(function(){ jyanken("グー"); });
$("#cyoki").click(function(){ jyanken("チョキ"); });
$("#par").click(function(){ jyanken("パー"); });
function jyanken(anata) {
	let watashi;
	let hantei;
	const cnvRand = [ "グー", "チョキ", "パー" ];

	watashi = cnvRand[ Math.floor(Math.random() * 3) ];
	if (anata == watashi) {
		hantei = "引き分け";
	}
	else if ((anata == "グー") && (watashi == "パー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "グー") && (watashi == "チョキ")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "グー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "パー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "グー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "チョキ")) {
		hantei = "私の勝ち";
	}
	$("#kekka-anata").text(anata);
	$("#kekka-watashi").text(watashi);
	$("#kekka-hantei").text(hantei);
}
</script>
</body>
</html>

(3) jQuery 版（その3：イベント統合）

jQuery で作成した「じゃんけんアプリケーション」です。

jQuery 版（その2）と比較してイベントの発生タイミング（グー、チョキ、パーのボタン押下タイミング）の取得を統合しました。

リロード　別画面で表示

ソースコード表示

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>じゃんけん</title>
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.container {
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
	border: 1px #fff solid;
}
.container h1 {
	font-size: 28px;
	text-align: center;
}
.senntaku {
	display: flex;
}
.senntaku div {
	width: calc(100% / 3);
	line-height: 100px;
	margin: 10px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	background: red;
	color: white;
	border-radius: 10px;
}
.senntaku div:hover {
	opacity: 0.6;
	cursor: pointer;
}
.kekka {
	padding: 0 20px;
	font-size: 1.4rem;
}
</style>
</head>
<body>
	<div class="container">
		<h1>じゃんけん<br>（jQuery版-3）</h1>
		<div class="senntaku">
			<div>グー</div>
			<div>チョキ</div>
			<div>パー</div>
		</div>
		<p class="kekka">
			あなたは、<span id="kekka-anata">？</span> で、私は、<span id="kekka-watashi">？</span> なので、<span id="kekka-hantei">？</span>です。
		</p>
	</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
/* イベント発生タイミングを統合し jQuery を用いて実施 */
$("div.senntaku div").click(function(){ jyanken($(this).text()); });
function jyanken(anata) {
	let watashi;
	let hantei;
	const cnvRand = [ "グー", "チョキ", "パー" ];

	watashi = cnvRand[ Math.floor(Math.random() * 3) ];
	if (anata == watashi) {
		hantei = "引き分け";
	}
	else if ((anata == "グー") && (watashi == "パー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "グー") && (watashi == "チョキ")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "グー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "パー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "グー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "チョキ")) {
		hantei = "私の勝ち";
	}
	$("#kekka-anata").text(anata);
	$("#kekka-watashi").text(watashi);
	$("#kekka-hantei").text(hantei);
}
</script>
</body>
</html>

(4) jQuery 版（その4：エフェクト付加）

jQuery で作成した「じゃんけんアプリケーション」です。

jQuery 版（その3）と比較して結果表示部分にフェードイン効果を加えました。

リロード　別画面で表示

ソースコード表示

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>じゃんけん</title>
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.container {
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
	border: 1px #fff solid;
}
.container h1 {
	font-size: 28px;
	text-align: center;
}
.senntaku {
	display: flex;
}
.senntaku div {
	width: calc(100% / 3);
	line-height: 100px;
	margin: 10px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	background: red;
	color: white;
	border-radius: 10px;
}
.senntaku div:hover {
	opacity: 0.6;
	cursor: pointer;
}
.kekka {
	padding: 0 20px;
	font-size: 1.4rem;
}
</style>
</head>
<body>
	<div class="container">
		<h1>じゃんけん<br>（jQuery版-4）</h1>
		<div class="senntaku">
			<div>グー</div>
			<div>チョキ</div>
			<div>パー</div>
		</div>
		<p class="kekka">
			あなたは、<span id="kekka-anata">？</span> で、私は、<span id="kekka-watashi">？</span> なので、<span id="kekka-hantei">？</span>です。
		</p>
	</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("div.senntaku div").click(function(){ jyanken($(this).text()); });
function jyanken(anata) {
	let watashi;
	let hantei;
	const cnvRand = [ "グー", "チョキ", "パー" ];

	watashi = cnvRand[ Math.floor(Math.random() * 3) ];
	if (anata == watashi) {
		hantei = "引き分け";
	}
	else if ((anata == "グー") && (watashi == "パー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "グー") && (watashi == "チョキ")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "グー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "パー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "グー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "チョキ")) {
		hantei = "私の勝ち";
	}
	$("#kekka-anata").text(anata);
	$("#kekka-watashi").text(watashi);
	$("#kekka-hantei").text(hantei);
	/* 結果表示をフェードイン */
	$(".kekka").hide();
	$(".kekka").fadeIn(1500);

}
</script>
</body>
</html>

L12.2.4 PHP 版（参考）

PHP（サーバーサイドスクリプト）で作成した「じゃんけんアプリケーション」です。他の処理と比較するために参考として掲載します。

リロード　別画面で表示

ソースコード表示

ソースコード


<?php

const cnvRand = [ "グー", "チョキ", "パー" ];

if ((isset($_POST["goo"]) && $_POST["goo"])) {
	$anata = "グー";
}
else if ((isset($_POST["cyoki"]) && $_POST["cyoki"])) {
	$anata = "チョキ";
}
else if ((isset($_POST["par"]) && $_POST["par"])) {
	$anata = "パー";
}
else {
	$anata = "";
}

if ($anata == "") {
	$anata = "？";
	$watashi = "？";
	$hantei = "？";
}
else {
	$watashi = cnvRand[rand(0, 2)];
	if ($anata == $watashi) {
		$hantei = "引き分け";
	}
	else if (($anata == "グー") && ($watashi == "パー")) {
		$hantei = "私の勝ち";
	}
	else if (($anata == "グー") && ($watashi == "チョキ")) {
		$hantei = "あなたの勝ち";
	}
	else if (($anata == "チョキ") && ($watashi == "グー")) {
		$hantei = "私の勝ち";
	}
	else if (($anata == "チョキ") && ($watashi == "パー")) {
		$hantei = "あなたの勝ち";
	}
	else if (($anata == "パー") && ($watashi == "グー")) {
		$hantei = "あなたの勝ち";
	}
	else if (($anata == "パー") && ($watashi == "チョキ")) {
		$hantei = "私の勝ち";
	}
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>じゃんけん</title>
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.container {
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
	border: 1px #fff solid;
}
.container h1 {
	font-size: 28px;
	text-align: center;
}
.senntaku {
	display: flex;
}
.senntaku button {
	width: calc(100% / 3);
	line-height: 100px;
	margin: 10px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	background: green;
	color: white;
	border: none;
	border-radius: 10px;
}
.senntaku button:hover {
	opacity: 0.6;
	cursor: pointer;
}
.kekka {
	padding: 0 20px;
	font-size: 1.4rem;
}
</style>
</head>
<body>
	<div class="container">
		<h1>じゃんけん<br>（PHP版）</h1>
		<form id="form" class="senntaku" method="post">
			<button name="goo" type="submit" value="グー">グー</button>
			<button name="cyoki" type="submit" value="チョキ">チョキ</button>
			<button name="par" type="submit" value="パー">パー</button>
		</form>
		<p class="kekka">
			あなたは、<?php echo $anata; ?> で、私は、<?php echo $watashi; ?> なので、<?php echo $hantei; ?>です。
		</p>
	</div>
</body>
</html>

L12.3 window / document オブジェクト

L12.3.1 window / document オブジェクト

windows オブジェクトと document オブジェクトは、JavaScript や jQuery でコードを記述するための重要なオブジェクトです。このオブジェクトが保有・提供するプロパティ、メソッド、イベントなどを活用してコードを記述する必要があります。本章では、このオブジェクトの概要について説明しますので、詳細事項については関連サイトや関連図書を参照してください。

L12.3.2 window オブジェクト（プロパティ）

windows オブジェクトは、画面に表示されているすべてのオブジェクトが格納されている最上位のオブジェクトです。多くのプロパティがありますが、ここでは主要なプロパティについて説明します。

windows オブジェクトを使用する場合は、「window.プロパティ名」と記述しますが、特例として「window.」を省略した記述が認められていますので、本説明では、「window.」を省略して「プロパティ名」と記述しています。

主要なプロパティは、以下の通りです。

全ての説明を開く

closed（ウィンドウが閉じられているかの確認）【読取専用】

ウィンドウが閉じられているかの状態を確認します。閉じられている場合は、true になり、それ以外の場合は、false になります。


bool = closed;							// ウィンドウの状態により true / false を設定

// ポップアップからウィンドウの URL を変更
if (window.opener && !window.opener.closed) {
	window.opener.location.href = "http://www.sample.com";
}

console（デバックコンソールのアクセスオブジェクト（console）を取得）【読取専用】

デバックコンソールにアクセスするためのコンソール（console）オブジェクトを取得します。コンソールへのメッセージ出力時は、複数の項目をカンマ（,）で区切って指定することができます。

console.error、console.info、consle.log では、文字列置換を使用することができます。オブジェクト（%o または %O）、整数値（%d または %i）、文字列（%s）、浮動小数点値（%f）の置換文字列が使用可能です。


console.clear();						// コンソールのクリア
console.error("メッセージ"); 			// コンソールへエラーメッセージを出力
console.info("メッセージ");				// コンソールへメッセージタイプのログ出力
console.log("メッセージ");				// コンソールへ一般タイプのログ出力
console.trace();						// コンソールへスタックトレース出力
console.warn("メッセージ");				// コンソールへ警告メッセージ出力

// 置換文字列の使用例
for (let i = 1; i <= 5; i++) {
	console.log("名前：%s, 回数：%d", "太郎", i);
}

document（ウィンドウの文書情報オブジェクト（document）を取得）【読取専用】

ウィンドウの文書情報にアクセスするためのドキュメント（document）オブジェクトを取得します。ドキュメントオブジェクトの詳細は、後述の「document オブジェクト」を参照してください。


console.log(document.title);			// ページのタイトルを取得

frames（サブフレームの配列（iframe）を取得）【読取専用】

ウィンドウに表示されているサブフレーム（iframe）の配列を取得します。


console.log(frames);					// サブフレームの配列を取得

history（表示履歴を示すヒストリィ（history）オブジェクトを取得）【読取専用】

表示履歴にアクセスするためのヒストリィ（history）オブジェクトを取得します。


histoty.back();							// 戻るボタン押下と同等
history.go(-1);							// histoty.back(); と同等

innerHeight（ウィンドウの高さを取得）【読取専用】

ウィンドウの高さを（ピクセル値）取得します。高さには水平スクロールバーを含みます。ウィンドウの水平スクロールバーや境界を除いた高さを取得する場合は、ルート（<html>）の clientHeight プロパティを使用してください。ウィンドウの高さを変更するには、resizeTo() や resizeBy() などを使用してください。


console.log(innerHeight);				// ウィンドウの高さを表示

innerWidth（ウィンドウの幅を取得）【読取専用】

ウィンドウの幅を（ピクセル値）取得します。幅には垂直スクロールバーを含みます。ウィンドウの垂直スクロールバーや境界を除いた幅を取得する場合は、ルート（<html>）の clientWidth プロパティを使用してください。ウィンドウの幅を変更するには、resizeTo() や resizeBy() などを使用してください。


console.log(innerWidth);				// ウィンドウの幅を表示

length（ウィンドウ内のフレーム数を取得）【読取専用】

ウィンドウ内のフレーム（iframe 要素）数を取得します。frames プロパティも合わせて参照してください。


console.log(length);					// フレーム数を表示

location（文書の位置情報を示すロケーション（location）オブジェクトを取得）【読取専用】

文書の位置情報を示すロケーション（location）オブジェクトを取得します。


console.log(location.href);				// 現在の URL を表示

location.assign("http://www.sample.com");
										// 新しいページへ移動
location = "http://www.sample.com";		// location.assign と同じ動作

location.reload();						// 現在のページの再読み込み

name（ウィンドウ名の取得・設定）

ウィンドウ名の取得および設定を行います。ウィンドウ名を使うことで同じウィンドウを二重に開かないようにチェックすることができます。


console.log(name);						// ウィンドウ名を表示
name = "new window name";				// ウィンドウ名を設定

navigator（アプリケーション情報を示すナビゲータ（navigator）オブジェクトを取得）【読取専用】

アプリケーション情報を示すナビゲータ（navigator）オブジェクトを取得します。


console.log(navigator.clipboard);			// クリップボードオブジェクトを表示
console.log(navigator.connection);			// ネットワーク情報オブジェクトを表示
console.log(navigator.cookieEnabled);		// Cookie が有効かの状態を表示
console.log(navigator.deviceMemory);		// 端末のメモリサイズ（ギガバイト単位）を表示
console.log(navigator.geolocation);			// 端末の位置情報を表示
console.log(navigator.hardwareConcurrency);	// 論理プロセッサーコア数を表示
console.log(navigator.keyboard);			// キーボードオブジェクトを表示
console.log(navigator.language);			// ブラウザの言語情報を表示
console.log(navigator.languages);			// ユーザーが知っている言語リストを表示
console.log(navigator.locks);				// ロック処理を行うためのロックオブジェクトを表示
console.log(navigator.onLine);				// ブラウザがオンラインかの状態を表示
console.log(navigator.userActivation);		// ユーザー操作状態を示すユーザーアクティベーションオブジェクトを表示
console.log(navigator.userAgent);			// ブラウザのユーザーエージェント情報を表示
console.log(navigator.userAgentData);		// ユーザーのブラウザとオペレーティングシステム情報を示すユーザーエージェントデータオブジェクトを表示

opener（現在のウィンドウを開いたウィンドウ情報の取得／設定）

現在のウィンドウを開いたウィンドウオブジェクトの取得／設定を行います。


console.log(opener);						// 現在のウィンドウを開いたウィンドウオブジェクトを表示

outerHeight（ウィンドウ全体の高さを取得）【読取専用】

ウィンドウ全体（ウィンドウ操作部を含む）の高さを（ピクセル値）取得します。ウィンドウの高さを変更するには、resizeTo() や resizeBy() などを使用してください。


console.log(outerHeight);				// ウィンドウ全体の高さを表示

outerWidth（ウィンドウ全体の幅を取得）【読取専用】

ウィンドウ全体（ウィンドウ操作部を含む）の幅を（ピクセル値）取得します。ウィンドウの幅を変更するには、resizeTo() や resizeBy() などを使用してください。


console.log(outerWidth);				// ウィンドウ全体の幅を表示

parent（親ウィンドウ情報の取得）【読取専用】

親ウィンドウのウィンドウオブジェクトを取得します。親ウィンドウがない場合は、自身のウィンドウオブジェクトになります。


console.log(parent);					// 親ウィンドウのウィンドウオブジェクトを表示

screen（ウィンドウに関連付けられた画面（screen）オブジェクトを取得）【読取専用】

ウィンドウに関連付けられた画面（screen）オブジェクトを取得します。画面オブジェクトは、現在のウィンドウの情報を確認するためのオブジェクトです。


console.log(screen);					// 画面オブジェクトを表示

scrollX（水平スクロールされているピクセル数を取得を取得）【読取専用】

水平スクロールされているピクセル数を取得します。


console.log(scrollX);					// 水平スクロールのピクセル値を表示

scrollY（垂直スクロールされているピクセル数を取得を取得）【読取専用】

垂直スクロールされているピクセル数を取得します。


console.log(scrollY);					// 垂直スクロールのピクセル値を表示

self（現在のウィンドウオブジェクトを取得）【読取専用】

現在のウィンドウオブジェクトを取得します。


// 以下のウィンドウオブジェクトは、すべて等価です
obj_w1 = window;
obj_w2 = self;
obj_w3 = window.window;
obj_w4 = window.self;

window（現在のウィンドウオブジェクトを取得）【読取専用】

現在のウィンドウオブジェクトを取得します。


// window オブジェクトの window プロパティは、window オブジェクト自身を示しますので、以下の記述は、すべて等価です
obj_w1 = window.window;
obj_w2 = window.window.window;
obj_w3 = window.window.window.window;
　・
　・
　・

L12.3.3 window オブジェクト（メソッド）

windows オブジェクトは、画面に表示されているすべてのオブジェクトが格納されている最上位のオブジェクトです。多くのメソッドがありますが、ここでは主要なメソッドについて説明します。

windows オブジェクトを使用する場合は、「window.メソッド名()」と記述しますが、特例として「window.」を省略した記述が認められています。本説明では、「window.」を省略して「メソッド名()」と記述しています。

主要なメソッドは、以下の通りです。

全ての説明を開く

alert（メッセージダイアログを表示し閉じられるまで待機）

メッセージダイアログを表示し、ダイアログが閉じられるまで待機します。引数には、文字列またはオブジェクトを指定します。戻値はありません。


alert("メッセージ"); 					// メッセージダイアログを表示

blur（ウィンドウからフォーカスを外す）

ウィンドウからフォーカスを外します。引数も返値もありません


blur();									// ウィンドウからフォーカスを外す

clearInterval（インターバルタイマーの取り消し）

setInterval メソッドで起動したインターバルタイマーの動作を取り消します。引数には、setInterval メソッドで返却されたタイマー識別子を指定します。返値はありません。


clearInterval(intervalID);				// インターバルタイマーの取り消し

clearTimeout（タイムアウトの取り消し）

setTimeout メソッドで起動したタイムアウトの動作を取り消します。引数には、setTimeout メソッドで返却されたタイマー識別子を指定します。返値はありません。


clearTimeout(timeoutID);				// タイムアウトの取り消し

close（ウィンドウのクローズ）

そのページで開いたウィンドウを閉じます。返値はありません。


let winObj;								// ウィンドウオブジェクト
function openWindow() {					// ウィンドウオープン
	winObj = window.open("sample.htm");
}
function closeWindow() {				// ウィンドウクローズ
	winObj.close();
}

confirm（メッセージダイアログを表示し承認かキャンセルすまで待機）

メッセージダイアログを表示し、ダイアログを承認するかキャンセルするまで待機します。引数には、文字列を指定します。戻値は、承認（true）かキャンセル（false）が返却されます。


if (confirm("メッセージ")) {
										// 承認された時の処理
}
else {
										// キャンセルされた時の処理
}

focus（ウィンドウを最前面にするように要求）

ウィンドウを最前面にするように要求します。引数も返値もありません。


focus();								// ウィンドウを最前面にするように要求

moveBy（現在のウィンドウを相対位置で移動）

現在のウィンドウを相対位置で移動させます。引数には移動位置を指定します。戻値はありません。

移動位置は、ピクセル数で指定し、水平方向は、正の値（右）、負の値（左）で指定し、垂直方向は、正の値（下へ）、負の値（上へ）で指定します。


moveBy(xDelta, yDelta);					// xDelta：水平方向の移動位置
										// yDelta：垂直方向の移動位置

moveTo（現在のウィンドウを絶対位置で移動）

現在のウィンドウを絶対位置で移動させます。引数には移動位置を指定します。戻値はありません。

移動位置は、ピクセル数で指定し、水平座標、垂直座標を指定します。


moveTo(x, y);							// x は水平座標
										// y は垂直座標

open（ウィンドウのオープン）

ウィンドウを作成します。ウィンドウは新しい、または既存の指定された名前を持つ閲覧コンテキストに読み込まれます。引数には、URL、作成するウィンドウの状態や特性を指定します。戻値は、作成した window オブジェクトが返却されます。


// 空ページを作成
open();

// 指定した URL のページを作成
open("sample.html");

// 指定した URL のページを指定のコンテキストに作成
open("sample.html", target);			// target には、以下の値を指定
										// _self	：現在の閲覧コンテキスト（規定値）
										// _blank	：新しいタブ（ブラウザの設定によっては新しいウィンドウ）
										// _parent	：現在の親の閲覧コンテキスト（親がない場合は、_self と同等）
										// _top		：最上位の閲覧コンテキスト（最上位がない場合は、_self と同等）

// 指定した URL のページを指定の特性で作成
open("sample.html", target, features);	// features は name=value 形式でカンマ（,）で区切って以下の値を指定
										// popup（ポップアップウィンドウので作成を要求（実際の作成はブラウザの設定による））
										// width=スクロールバーを含むコンテンツ領域の幅（最小は、100）
										// height=スクロールバーを含むコンテンツ領域の高さ（最小は、100）
										// left=作業領域の左端からの距離（ピクセル値）
										// top=作業領域の上からの距離（ピクセル値）

postMessage（window オブジェクト間でのメッセージ通信）

window オブジェクト間でメッセージ通信を行います。引数には、メッセージ、送信先、メッセージと一緒に移譲されるオブジェクトを指定します。戻値はありません。


postMessage(message, targetOrigin, transfer);
										// message		：メッセージ
										// targetOrigin	：送信先
										// transfer		：移譲オブジェクト【省略可】

print（印刷ダイアログを開く）

文書を印刷するための印刷ダイアログを開きます。引数も戻値もありません。


print();								// 印刷ダイアログを開く

prompt（テキスト入力ダイアログを表示し入力かキャンセルするまで待機）

テキスト入力ダイアログを表示し、テキスト入力するかキャンセルするまで待機します。引数には、文字列と入力時のデフォルト値を指定します。戻値は、入力文字列かキャンセル（null）が返却されます。


str = prompt(message, default);			// message には、入力促進文字列を指定（省略可）
										// default には、テキストフィールドに表示される規定値（省略可）

resizeBy（ウィンドウの相対値リサイズ）

現在のウィンドウを指定した大きさにリサイズします。引数には、広げるピクセル数を指定します。戻値はありません。


resizeBy(xDelta, yDelta);				// xDelta：水平ピクセル数
										// yDelta：垂直ピクセル数

resizeTo（ウィンドウの絶対値リサイズ）

現在のウィンドウを指定した大きさにリサイズします。引数には、ウィンドウのサイズ（スクロールバーやタイトルバーを含む）をピクセル数を指定します。本メソッドで指定する値は、outerWidth、outerHeigth プロパティの値と同じです。戻値はありません。


resizeTo(width, height);				// width：ウィンドウ幅のピクセル数
										// height：ウィンドウ高さのピクセル数

scroll（ウィンドウを指定位置までスクロール）

ウィンドウを文書内の指定位置までスクロールします。引数には、スクロール位置とスクロール効果を指定します。戻値はありません。scrollTo メソッドと同等です。


// 即値指定
scroll(xPos, yPos);						// xPos：左上を基準とした水平ピクセル位置
										// yPos：左上を基準とした垂直ピクセル位置

// オブジェクト指定
scroll({
	top: yPos,							// yPos：左上を基準とした垂直ピクセル位置
	left: xPos,							// xPos：左上を基準とした水平ピクセル位置
	behavior: behStr					// behStr：スクロール時の動作を以下の値で指定
										//		smooth：スムーズアニメーション
										//		instant：単一のジャンプ
										//		auto：CSS の scroll-behavior プロパティ値（規定値）
});,

scrollBy（ウィンドウを指定量だけスクロール）

ウィンドウを指定量だけスクロールします。引数には、スクロール数とスクロール効果を指定します。戻値はありません。


// 即値指定
scrollBy(xCnt, yCnt);					// xCnt：水平ピクセル数
										// yCnt：垂直ピクセル数

// オブジェクト指定
scrollBy({
	top: yCnt,							// yCnt：垂直ピクセル数
	left: xCnt,							// xCnt：水平ピクセル数
	behavior: behStr					// behStr：スクロール時の動作を以下の値で指定
										//		smooth：スムーズアニメーション
										//		instant：単一のジャンプ
										//		auto：CSS の scroll-behavior プロパティ値（規定値）
});,

scrollTo（ウィンドウを指定位置までスクロール）

ウィンドウを文書内の指定位置までスクロールします。引数には、スクロール位置とスクロール効果を指定します。戻値はありません。scroll メソッドと同等です。


// 即値指定
scrollTo(xPos, yPos);					// xPos：左上を基準とした水平ピクセル位置
										// yPos：左上を基準とした垂直ピクセル位置

// オブジェクト指定
scrollTo({
	top: yPos,							// yPos：左上を基準とした垂直ピクセル位置
	left: xPos,							// xPos：左上を基準とした水平ピクセル位置
	behavior: behStr					// behStr：スクロール時の動作を以下の値で指定
										//		smooth：スムーズアニメーション
										//		instant：単一のジャンプ
										//		auto：CSS の scroll-behavior プロパティ値（規定値）
});,

stop（ウィンドウの読み込みを停止）

ウィンドウの読み込みを停止します。ブラウザの停止ボタンを押下するのと同等の効果があります。引数および戻値はありません。


stop();									// ウィンドウの読み込み停止

setInterval（インターバルタイマーの設定）

一定の間隔でコールバック関数呼び出しを行うインターバルタイマーを設定します。引数には、コールバック関数、時間、関数への引数を指定します。戻値は、インターバルタイマー識別子を返却します。


intervalID = setInterval(func, delay, arg0, ... argN);
										// インターベルタイマーの設定
										// intervalID：インターバルタイマー識別子
										// func：コールバック関数
										// delay：呼び出し間隔（ミリ秒で指定（10 より小さい場合は、10 を採用））【省略可】
										// arg0, ... argN：コールバック関数に渡す引数【省略可】

function func(arg0, ... argN) {			// コールバック関数
										// コールバック関数での処理
}

clearInterval(intervalID);				// インターバルターマーの取り消し

setTimeout（タイムアウトの設定）

指定時間経過時にコールバック関数呼び出しを行うタイムアウトを設定します。引数には、コールバック関数、時間、関数への引数を指定します。戻値は、タイムアウト識別子を返却します。


timeoutID = setTimeout(func, delay, arg0, ... argN);
										// タイムアウトの設定
										// timeoutID：タイムアウト識別子
										// func：コールバック関数
										// delay：呼び出し時間（ミリ秒で指定（省略するか 0 を指定すると即時実行））【省略可】
										// arg0, ... argN：コールバック関数に渡す引数【省略可】

function func(arg0, ... argN) {			// コールバック関数
										// コールバック関数での処理
}

clearTimeout(timeoutID); 				// タイムアウトの取り消し

L12.3.4 window オブジェクト（イベント）

windows オブジェクトは、画面に表示されているすべてのオブジェクトが格納されている最上位のオブジェクトです。多くのイベントがありますが、ここでは主要なイベントについて説明します。

イベントを受け取るためには、addEventListener メソッドでイベントハンドラを登録します。多くのイベントでは「onイベント名」プロパティにイベントハンドラを登録することでも受け取りが可能です。たとえば以下の記述は同一の効果になります。


window.addEventListener("resize", function(event) {
	console.log("ウィンドウの大きさが幅（%s)と高さ（%s）に変更されました。", window.innerWidth, window.innerHeight);
});


window.onresize =  function(event) {
	console.log("ウィンドウの大きさが幅（%s)と高さ（%s）に変更されました", window.innerWidth, window.innerHeight);
};

主要なイベントは、以下の通りです。

全ての説明を開く

afterprint（文書印刷の開始か印刷プレビューが閉じた場合に発生）

関連する文書の印刷が開始されたか印刷プレビューが閉じた場合に発生します。


window.addEventListener("afterprint", function(event) {
	console.log("印刷が開始されました");
});

window.onafterprint =  function(event) {
	console.log("印刷が開始されました");
};

beforeprint（文書印刷の開始直前か印刷プレビューが開く直前に発生）

関連する文書の印刷される直前か印刷プレビューが開く直前に発生します。


window.addEventListener("beforeprint", function(event) {
	console.log("これから印刷を開始します");
});

window.onbeforeprint =  function(event) {
	console.log("これから印刷を開始します");
};

beforeunload（ウィンドウがアンロードされる直前に発生）

ウィンドウ、文書、およびそのリソースがアンロードされる直前に発生します。文書は、まだ表示されていますのでイベントのキャンセルが可能です。


window.addEventListener("beforeunload", (event) => {
	event.preventDefault();				// イベントのキャンセル（標準）
	event.returnValue = "";				// イベントのキャンセル（Chrome）
});

blur（フォーカスを失った場合に発生）

要素がフォーカスを失った場合に発生します。逆にフォーカスを受け取った場合には、focus イベントが発生します。


window.addEventListener("blur", function(event) {
	console.log("フォーカスが無くなりました");
});

window.onblur =  function(event) {
	console.log("フォーカスが無くなりました");
};

copy（コピー操作が発生）

ユーザーがブラウザのコピー操作を実行した場合に発生します。


window.addEventListener("copy", function(event) {
	console.log("コピー操作が行われました");
});

window.oncopy =  function(event) {
	console.log("コピー操作が行われました");
};

cut（切り取り操作が発生）

ユーザーがブラウザの切り取り操作を実行した場合に発生します。


window.addEventListener("cut", function(event) {
	console.log("切り取り操作が行われました");
});

window.oncut =  function(event) {
	console.log("切り取り操作が行われました");
};

error（リソース読み取り失敗やスクリプト実行エラーが発生）

リソースの読み取りに失敗したりスクリプトに実行エラーが発生した場合などで発生します。

onerror イベントは、他のイベントと異なり複数の引数を受け取ります。受け取る引数は、エラーメッセージ（message／ErrorEvent.message と同じ）、ソースファイル名（source）、行番号（lineno）、列位置（colno）、エラー内容（error／通常は、Error オブジェクト）になります。また、onerror イベントは、他のイベントハンドラープロパティに割り当てられたイベントハンドラーとは動作が異なります。他のハンドラーでは、false を返却することでイベントの規定値の動作を取り消すことができますが、onerror イベントでは、true を返すことでイベントの規定値を取り消すことができます。これらの動作は、onerror に割り当てられたハンドラーにのみ適用され addEventListener を使用して追加したハンドラーには適用されません。


window.addEventListener("error", function(event) {
	console.log(event);
	console.log(event.message);
});

window.onerror =  function(message, source, lineno, colno, error) {
	console.log(`message: ${message}`);
	console.log(`source: ${source}`);
	console.log(`lineno: ${lineno}`);
	console.log(`colno: ${colno}`);
	console.log(`error: ${error}`);
};

focus（フォーカスを受け取った場合に発生）

要素がフォーカスを受け取った場合に発生します。逆にフォーカスを失った場合には、blur イベントが発生します。


window.addEventListener("focus", function(event) {
	console.log("フォーカスを受け取りました");
});

window.onfocus =  function(event) {
	console.log("フォーカスを受け取りました");
};

hashchange（URL のフラグメント識別子の変化が発生）

URL のフラグメント識別子（URL のハッシュ（#）に続く文字列）に変化があった場合に発生します。


window.addEventListener("hashchange", function(event) {
	console.log("ハッシュ識別子が変更されました");
});

window.onhashchange =  function(event) {
	console.log("ハッシュ識別子が変更されました");
};

languagechange（ユーザー推奨原語の変更が発生）

ユーザー推奨言語が変更された場合に発生します。


window.addEventListener("languagechange", function(event) {
	console.log("ユーザー推奨言語が変更されました");
});

window.onlanguagechange =  function(event) {
	console.log("ユーザー推奨言語が変更されました");
};

load（ページ全体の読み込み完了が発生）

ページ全体（スタイルシートや画像などを含む全てのリソース）の読み込みの完了した場合に発生します。


window.addEventListener("load", function(event) {
	console.log("ページ全体の読み込みが完了しました");
});

window.onload =  function(event) {
	console.log("ページ全体の読み込みが完了しました");
};

message（他ウィンドウ送られたメッセージの受信が発生）

他ウィンドウが postMessage() で送信したメッセージを受信した場合に発生します。


// メッセージ受信側の処理
// メッセージ受信時の event には、以下の値が格納
// event.data：メッセージ送信元が指定したメッセージデータ
// event.origin：メッセージ送信元のオリジン
// event.lastEventId：メッセージイベントの一意 ID
// event.source：メッセージ送信元（MessagePort、ServiceWorker などのオブジェクト）
// event.ports：メッセージ送信チャネル情報（MessagePort オブジェクト配列）
window.addEventListener("message", function(event) {
	console.log(event.data);
});

window.onmessage =  function(event) {
	console.log(event.data);
};

// メッセージ送信側の処理
const target = window.top.frames[1];
const data = "メッセージデータ";
const origin = "https://sample.com";
target.postMessage(data, origin);

messageerror（解読できないメッセーの受信が発生）

解読できないメッセージの受信した場合に発生します。


// メッセージ受信側の処理
// メッセージ受信時の event には、以下の値が格納
// event.data：メッセージ送信元が指定したメッセージデータ
// event.origin：メッセージ送信元のオリジン
// event.lastEventId：メッセージイベントの一意 ID
// event.source：メッセージ送信元（MessagePort、ServiceWorker などのオブジェクト）
// event.ports：メッセージ送信チャネル情報（MessagePort オブジェクト配列）
window.addEventListener("messageerror", function(event) {
	console.log(event.data);
});

window.onmessageerror =  function(event) {
	console.log(event.data);
};

offline（ネットワークの切断検出時に発生）

ブラウザがネットワークの切断を検出した場合に発生します。本イベントは、Navigator.online プロパティが false に切り替わった場合に発生します。


window.addEventListener("offline", function(event) {
	console.log("ネットワークの切断を検出しました");
});

window.onoffline =  function(event) {
	console.log("ネットワークの切断を検出しました");
};

online（ネットワークの接続検出時に発生）

ブラウザがネットワークの接続を検出した場合に発生します。本イベントは、Navigator.online プロパティが true に切り替わった場合に発生します。


window.addEventListener("online", function(event) {
	console.log("ネットワークの接続を検出しました");
});

window.onoffline =  function(event) {
	console.log("ネットワークの接続を検出しました");
};

pagehide（ページの非表示時に発生）

ブラウザは、他ページを表示するために、現在のページを非表示にした場合に発生します。例えば、ブラウザの「戻る」ボタンを押下した場合には、前のページが表示される前に本イベントが発生します。


window.addEventListener("pagehide", function(event) {
	console.log("ページの非表示を検出しました");
});

window.onpagehide =  function(event) {
	console.log("ページの非表示を検出しました");
};

pageshow（ページの表示時に発生）

ブラウザがページを表示にした場合に発生します。例えば、ブラウザが最初にページを表示した場合や他のページから移動してきた場合などで本イベントが発生します。


window.addEventListener("pageshow", function(event) {
	console.log("ページの表示を検出しました");
});

window.onpageshow =  function(event) {
	console.log("ページの表示を検出しました");
};

paste（貼り付け操作が発生）

ユーザーがブラウザの貼り付け操作を実行した場合に発生します。


window.addEventListener("paste", function(event) {
	console.log("貼り付け操作が行われました");
});

window.onpaste =  function(event) {
	console.log("貼り付け操作が行われました");
};

popstate（アクティブなページ履歴項目の変更が発生）

ユーザーがセッション履歴を操作してアクティブなページ履歴項目が変更された場合に発生します。


window.addEventListener("popstate", function(event) {
	console.log("アクティブなページ履歴項目の変更が発生しました");
});

window.onpopstate =  function(event) {
	console.log("アクティブなページ履歴項目の変更が発生しました");
};

resize（ウィンドウの大きさの変更が発生）

文書ビュー（ウィンドウ）の大きさが変更された場合に発生します。


window.addEventListener("resize", function(event) {
	console.log("ウィンドウの大きさが幅（%s)と高さ（%s）に変更されました", window.innerWidth, window.innerHeight);
});

window.onresize =  function(event) {
	console.log("ウィンドウの大きさが幅（%s)と高さ（%s）に変更されました", window.innerWidth, window.innerHeight);
};

L12.3.5 document オブジェクト（プロパティ）

document オブジェクトは、window オブジェクトの document プロパティを示し HTML ツリー（DOM：Docement Object Model）が格納されるオブジェクトです。多くのプロパティがありますが、ここでは主要なプロパティについて説明します。

document オブジェクトを使用する場合は「window.document.プロパティ名」と記述しますが、特例として「window.」を省略した記述が認められていますので、本説明では「window.」を省略して「document.プロパティ名」と記述しています。

主要なプロパティは、以下の通りです。

全ての説明を開く

activeElement（フォーカスを持っている要素の取得）【読取専用】

DOM 内で現在フォーカスを持っている要素（Element）を取得します。現在、フォーカスのある要素がない場合は、<body> または null になります。


const activeElement = document.activeElement;
console.log(activeElement);

body（<body> または <frameset> 要素の取得）

<body> または <frameset> 要素を取得します。そのような要素がない場合は、null になります。


const element = document.body;			// body 要素の取得

const newElement = document.createElement("body");
document.body = newElement;				// body 要素の設定

characterSet（文字エンコーディングの取得）

文書の文字エンコーディングを表す文字列を取得します。


const str = document.characterSet;		// 文字エンコーディングの取得
console.log(str);

childElementCount（文書の子要素の数の取得）【読取専用】

文書の子要素の数を取得します。


const documentChildCount = document.childElementCount;	// document の子要素数を取得
const elementChildCount = Element.childElementCount;	// Element の子要素数を取得

compatMode（表示モードの取得）

文書の表示が互換モードか標準モードかを取得します。

BackCompat が返却された場合は、互換モードであることを示し、CSS1Compat が返却された場合は、互換モード以外（標準モード）で表示されていることを示します。


const str = document.compatMode;		// 表示モードの取得
console.log(str);

cookie（クッキー（cookie）の読み書き）

文書に関連付けられたクッキー（cookie）の読み書きをします。

クッキーの読み込みは、複数のクッキー（key=value）がセミコロンで区切って取得されます。それぞれの key および value の周囲にはホワイトスペース (空白やタブ文字) をおくことができます。規格では、セミコロンの後に空白 1 文字を入れることを必須としていますが一部のユーザーエージェントはこれに従っていません。。

クッキーの書き込み（設定・更新）で、一度に書き込めるクッキー（key=value）は、一つだけです。「key=value」の後にセミコロン（;）で区切ってオプションを指定することができます。

;path=パス
文書の位置を指定します。省略時は、現在の文書の位置になります。
;domain=ドメイン
ドメインを設定します。省略時は、現在の文書のホスト部分になります。ドメインは、JavaScript のオリジンと一致している必要があり外部ドメインへのクッキー設定は無視されます。
;max-age=寿命（秒）
クッキーの有効秒数を指定します。
;expires=GMTString 形式の日付
クッキーの有効日を指定します。max-age も expires も指定されていない場合の有効期限は、セッション終了までになります。


const allCookies = document.cookie;		// クッキーの読み込み

document.cookie = "key1=value1";		// クッキーの書き込み
document.cookie = "key2=value2";		// クッキーの書き込み

currentScript（<script> 要素の取得）

現在、処理中の HTMLScriptElement を取得します。対象の HTMLScriptElement がない場合は、null が返却されます。


bool = document.currentScript.async;	// true：非同期で実行中／false：同期で実行中

defaultView（window オブジェクトの取得）【読取専用】

文書に関連付けられている window オブジェクトを取得します。


const win = document.defaultView;		// window オブジェクトを取得

designMode（文書全体が編集可能かの状態の取得）

文書全体を編集可能かを取得します。"on" は編集可能で "off" は編集不可能なことを示します。初期値は、"off" です。"on" または "off" を代入することで編集の可否を設定することができます。


iframeNode.contentDocument.designMode = "on";	// iframe の文書を編集可能に設定

dir（文書の書字方向の取得）

文書の書字方向を取得します。"rtl" は右書き（右から左）であることを示し "ltr" は左書き（左から右）であることを示します。


const str = document.dir;				// 書字方向の取得

doctype（文書型宣言（DTD：Document Type Declaration）の取得）【読取専用】

文書に関連付けられた文書型宣言（DTD：Document Type Declaration）を取得します。返却されるオブジェクトは、DocumentType 形式になります。


const doctype = document.doctype;		// 文書型宣言の取得
console.log(
	"doctype.name: " + doctype.name + "\n" +
	"doctype.internalSubset: " + doctype.internalSubset + "\n" +
	"doctype.publicId: " + doctype.publicId + "\n" +
	"doctype.systemId: " + doctype.systemId,
);

documentElement（文書のルート要素の取得）

文書のルート要素（HTML 文書の場合は、<html> 要素）を取得します。返却されるオブジェクトは、Element 形式になります。


const root = document.documentElement;	// ルート要素の取得
const childs = root.childNodes;			// ルート直下の子要素の取得
for (const child of childs) {
	console.log(child);
}

documentURI（文書の位置（URI）の取得）

文書の位置（URI）の文字列を取得します。


const str = document.documentURI;		// 文書の位置（URI）の取得
console.log(str);

embeds（文書の埋め込み要素（<object>）のリストの取得）【読取専用】

文書の埋め込み要素（<object>）のリストを取得します。


const nodeLists = document.embeds;		// 埋め込み要素リストの取得
console.log(nodeLists);

fonts（文書のフォントセットの取得）

文書のフォントセットを取得します。返却されるオブジェクトは、FontFaceSet 形式になります。


const fontSets = document.fonts;		// フォントセットの取得
console.log(fontSets);

forms（文書のフォーム要素（<form>）の取得）

文書のフォーム要素（<form>）を取得します。返却されるオブジェクトは、HTMLCollection 形式になります。


const forms = document.forms;		// フォーム要素（<form>）の取得
console.log(forms);

fullscreenElement（全画面モードで表示されている要素の取得）【読取専用】

全画面モードで表示されている要素を取得します。返却されるオブジェクトは、Element 形式になります。全画面モードを使用していない場合は、null が返却されます。


const element = document.fullscreenElement;		//全画面モードで表示されている要素の取得
console.log(element);

fullscreenEnabled（全画面モードへの移行可能かを取得）【読取専用】

全画面モードに移行可能かを取得します。全画面モードに移行できる場合は、true が返却され Element.requestFullscreen() を呼び出すことで全画面モードに移行します。全画面モードに移行できない場合が、false が返却されます。


const bool = document.fullscreenEnabled;	// 全画面モードに移行可能かを取得

head（文書のヘッド要素（<head>）の取得）【読取専用】

文書のヘッド要素（<head>）を取得します。返却されるオブジェクトは、HTMLHeadElement 形式になります。


const head = document.head;				// ヘッド要素（<head>）の取得
console.log(head);

images（文書の画像要素（<img>）の取得）

文書の画像要素（<img>）を取得します。返却されるオブジェクトは、Image 形式になります。


const img = document.images;		// 画像要素（<img>）の取得
for (let i = 0; i < img.length; i++) {
	console.log(img[i].src);			// <img> の src 属性値を表示
}

lastModified（文書が最後に更新された日付と時刻を含む文字列の取得）

文書が最後に更新された日付と時刻を含む文字列を取得します。


const str = document.lastModified;		// 最終更新日時の取得
console.log(str);

const num = Date.parse(document.lastModified);	// 1970年1月1日 00:00:00 からの経過ミリ秒数の取得
console.log(num);

links（文書のリンク属性（href 属性の値を持つ <area> 要素と <a> 要素）の取得）

文書のリンク属性（href 属性の値を持つ <area> 要素と <a> 要素）のリストを取得します。


const links = document.links;			// href 属性を持つ要素リストの取得
for (let i = 0; i < links.length; i++) {
	console.log(links[i].href);			// href 属性の値を表示
}

location（文書の URL に関する情報の取得）【読取専用】

文書の URL に関する情報の取得します。返却されるオブジェクトは、Location 形式になります。返却された Location オブジェクトには、URL の変更や他の URL の読み込みを行うためのメソッドも提供されます。返却される Location オブジェクトは、読取専用ですが document.location = "https://sample.com" は、document.location.href = "https://sample.com" の別名で代入したサイトの読み込みが実行されます。URL を取得するだけであれば URL オブジェクトを使用することもできます。


const locObj = document.location;		// URL 情報の取得
console.log(locObj);
console.log(
	"href : " + locObj.href + "\n" +
	"protocol : " + locObj.protocol + "\n" +
	"host : " + locObj.host + "\n" +
	"hostname : " + locObj.hostname + "\n" +
	"port : " + locObj.port + "\n" +
	"pathname : " + locObj.pathname + "\n" +
	"search : " + locObj.search + "\n" +
	"hash : " + locObj.hash);

document.location.href = "https://sample.com";	// ページの読み込み
document.location = "https://sample.com";		// ページの読み込み（上記の別名）

const url = document.URL;				// URL の取得だけであればこちらも可能
console.log(url);

pictureInPictureElement（ピクチャーインピクチャーモード要素の取得）【読取専用】

ピクチャーインピクチャーモードで表示されている要素を取得します。返却値は、Element オブジェクトになります。ピクチャーインピクチャーモードで表示されていない場合は、null が返却されます。


const picObj = document.pictureInPictureElement;	// ピクチャーインピクチャーモード要素の取得
console.log(picObj);

pictureInPictureEnabled（ピクチャーインピクチャーモードが利用可能かの取得）【読取専用】

ピクチャーインピクチャーモードが利用可能かを取得します。true が返却された場合は、ピクチャーインピクチャーモードが利用可能なことを示し、HTMLVideoElement.requestPictureInPicture() を呼び出すことでピクチャインピクチャモードになります。false が返却された場合は、ピクチャインピクチャモードが利用できないことを示します。


const bool = document.pictureInPictureEnabled;	// ピクチャーインピクチャーモードが利用可能かの取得
console.log(bool);

plugins（文書内の <embed> 要素のリストの取得）【読取専用】

文書内の <embed> 要素のリストを取得します。返却値は、HTMLCollection オブジェクトになります。文書内に <embed> 要素がなければ、null になります。


const plugins = document.plugins;		// <embed> 要素のリストの取得
console.log(plugins);

readyState（文書の読み込み状態の取得）【読取専用】

文書の読み込み状態を取得します。この値が変化すると、readystatechange イベントが document オブジェクトに発行されます。

loading
文書は、まだ読み込み中です。
interactive
文書の読み込みが完了し、文書の解釈はできましたが、スクリプト、画像、スタイルシート、フレームなどのサブリソースはまだ読み込み中です。この状態は、DOMContentLoaded イベントが発行されようとしていることを示しています。
complete
文書とすべてのサブリソースの読み込みが完了しました。この状態は load イベントが発行されようとしていることを示しています。


const str = document.readyState;		// 文書の読み込み状態を取得
console.log(str);

referrer（ページにリンクしていたページの URI の取得）

ページにリンクしていたページの URI を取得します。ユーザーがリンクではなく直接移動（URL 入力やブックマークなど）の場合は、空文字列が返却されます。


const uri = document.referrer;			// リンク元 URI の取得
console.log(uri);

scripts（文書内の <script> 要素のリストの取得）【読取専用】

文書内の <script> 要素のリストを取得します。返却値は、HTMLCollection オブジェクトになります。文書内に <script> 要素がなければ、null になります。


const scripts = document.scripts;		// <script> 要素のリストの取得
console.log(scripts);

scrollingElement（スクロール可能要素の取得）

文書のスクロール可能要素を取得します。返却値は、Element オブジェクトになります。標準モードでは、document.documentElement になります。後方互換モードでは、<body> 要素になります。<body> 要素がない場合は、null になります。


const element = document.scrollingElement;	// スクロール可能要素の取得
console.log(element);

styleSheets（文書内のスタイルシートオブジェクトのリストの取得）【読取専用】

文書内のスタイルシートオブジェクトのリストを取得します。返却値は、CSSStyleSheet オブジェクトのリスト（StyleSheetList）になります。<link> 要素から受け取ったスタイルシートが先に並びDOM から受け取ったスタイルシートが後に並びます。


const sheets = document.styleSheets;	// スタイルシートオブジェクトのリストの取得
console.log(sheets);
for (let i = 0; i < sheets.length; i++) {
	console.log(sheets[i]);
}

title（文書のタイトルの取得・設定）

文書のタイトルを取得・設定します。


const str = document.title;				// 文書のタイトルの取得
console.log(str);

document.title = "New Title";			// 文書のタイトルの設定

URL（文書の URL の取得）【読取専用】

文書の URL を取得します。


const str = document.URL;				// 文書の URL の取得
console.log(str);

visibilityState（文書の可視性状態の取得）【読取専用】

文書の可視性状態を取得します。値が変更されると、visibilitychange イベントが Document に送信されます。

visible
ページのコンテンツは、少なくとも部分的に表示される場合があります。実際には、これはページが最小化されていないウィンドウのフォアグラウンドタブであることを意味します。
hidden
ページのコンテンツはユーザーには表示されません。実際には、これは文書がバックグラウンドタブまたは最小化されたウィンドウの一部であるか、 OS の画面ロックがアクティブであることを意味します。


const str = document.visibilityState;	// 可視性状態の取得
console.log(str);

L12.3.6 document オブジェクト（メソッド）

document オブジェクトは、window オブジェクトの document プロパティを示し HTML ツリー（DOM：Docement Object Model）が格納されるオブジェクトです。多くのメソッドがありますが、ここでは主要なメソッドについて説明します。

document オブジェクトを使用する場合は「window.document.メソッド名()」と記述しますが、特例として「window.」を省略した記述が認められていますので、本説明では「window.」を省略して「document.メソッド名()」と記述しています。

主要なメソッドの使用例は、以下の通りです。

全ての説明を開く

adoptNode（文書のノードの取り出し）

文書内のノードを取り出します。取り出し元のノードは削除されます。元のノードを残しておきたい場合は、document.importNode を使用します。


const importedNode = document.adoptNode(externalNode);	// ノードの取り出し

下記のコードは、old という id 名が付与された要素内の <img> 要素を new という id 名が付与された要素内に移動させる例です。

HTML


<div id="old">
	<img src="images/img01.jpg" alt="img01">
	<img src="images/img02.jpg" alt="img02">
	<img src="images/img03.jpg" alt="img03">
</div>
<hr>
<div id="new">
</div>

JavaScript


const oldParent = document.getElementById("old");
const imgs = oldParent.querySelectorAll("img");
const newParent = document.getElementById("new");

imgs.forEach(function (img) {
	newParent.appendChild(document.adoptNode(img));
});

caretPositionFromPoint（ノード内のキャレットと文字オフセットの取得）

ノード内のキャレットとキャレットの文字オフセットを取得します。返却値は、CaretPosition オブジェクトになります。


const caret = caretPositionFromPoint(x, y);		// x：ポイントの水平座標
												// y：ポイントの垂直座標

下記のコードは、caretPositionFromPoint メソッドを使用して <p> 要素内でマウスカーソルでクリックした位置に <br> 要素を挿入する例です。caretPositionFromPoint が対応していないブラウザの場合は、caretRangeFromPoint で代替します。

JavaScript


function insertBreakAtPoint(e) {
	let range;
	let textNode;
	let offset;

	if (document.caretPositionFromPoint) {
		range = document.caretPositionFromPoint(e.clientX, e.clientY);
		textNode = range.offsetNode;
		offset = range.offset;
	}
	else if (document.caretRangeFromPoint) {
		// WebKit 独自の代替メソッドを使用
		range = document.caretRangeFromPoint(e.clientX, e.clientY);
		textNode = range.startContainer;
		offset = range.startOffset;
	}
	else {
		// どちらのメソッドも対応していなければ、何もしない
		return;
	}
	// TEXT_NODE のみを分割
	if (textNode?.nodeType === 3) {
		let replacement = textNode.splitText(offset);
		let br = document.createElement("br");
		textNode.parentNode.insertBefore(br, replacement);
	}
}

let paragraphs = document.getElementsByTagName("p");
for (const paragraph of paragraphs) {
	paragraph.addEventListener("click", insertBreakAtPoint, false);
}

close（文書への書き込みを終了）

文書への書き込みを終了します。返却値はありません。


document.open();							// 書きこむ文書を開く
document.write("<p>書き込み文書の例</p>");	// 文書の内容を書き込む
document.close();							// 文書を閉じる

createAttribute（属性ノードの生成）

新しい属性ノードを生成します。返却値は、Attr を実装したノードです。


createAttribute(name);					// name：属性名

下記のコードは、box1 という id 名が付与された要素に attr="value" という属性を付与する例です。

HTML


<div id="box1"></div>

JavaScript


const node = document.getElementById("box1");
const a = document.createAttribute("attr");
a.value = "value";
node.setAttributeNode(a);
console.log(node.getAttribute("attr"));

createDocumentFragment（新しい空の DocumentFragment の作成）

新しい空の DocumentFragment を作成して DOM ノード／DOM ツリーを作成可能にします。


let fragment = document.createDocumentFragment();

下記のコードは、ul という id 名が付与された <ul> 要素に <li> 要素を追加する例です。

HTML


<ul id="ul"></ul>

JavaScript


let element = document.getElementById("ul");
let fragment = document.createDocumentFragment();
let browsers = ["Firefox", "Chrome", "Opera", "Safari", "Internet Explorer"];

browsers.forEach(function (browser) {
	var li = document.createElement("li");
	li.textContent = browser;
	fragment.appendChild(li);
});

element.appendChild(fragment);

createElement（指定されたタグ名の要素の生成）

tagName で指定されたタグ名の Element オブジェクトを生成します。tagName で指定されたタグ名が認識できない場合は、HTMLUnknownElement をオブジェクトを生成します。


let element = document.createElement(tagName);	// tagName：生成するタグ名

下記のコードは、新しい div 要素を生成し文字列を設定後に box1 という id 名が付与された <div> 要素の前に生成した要素を追加する例です。

HTML


<div id="box1">元から設定されているテキスト</div>

JavaScript


function addElement() {
	const newDiv = document.createElement("div");	// 新しい div 要素を作成
	const newContent = document.createTextNode("生成して追加するテキスト");
	newDiv.appendChild(newContent);					// テキストノードを新規作成した div に追加
	const currentDiv = document.getElementById("box1");
	document.body.insertBefore(newDiv, currentDiv);	// DOM に新しく作られた要素とその内容を追加
}

addElement();

createEvent（イベントオブジェクトの生成）

イベントオブジェクトを生成します。生成されるオブジェクトは、呼び出し時に指定した type により異なります。


let event = document.createEvent(type);	// type：作成するイベントタイプ
										//		Event（基本的なイベント）
										//		UIEvents（DOM など UI に関するイベント）
										//		MouseEvents（マウスに関するイベント：click, mouseover など）
										//		MutationEvents（要素の変更に関するイベント：DOMNodeInserted など）
										//		HTMLEvents（HTML要素に関するイベント）
										//		TextEvent（文字列に関するイベント）

下記のコードは、customEvent の登録、作成、初期化、発火の例です。

JavaScript


var elem = document.getElementById('sample');

// イベントハンドラを登録
elem.addEventListener('customEvent', function(e) {
	// e.target が elem に対応
	alert('OK');
}, false);

// クリックしたらカスタムイベントを作成・初期化して発火
elem.addEventListener('click', function() {
	var event = document.createEvent('HTMLEvents');
	event.initEvent('customEvent', true, false);
	this.dispatchEvent(event);
}, false);

createRange（Range オブジェクトの生成）

Range オブジェクトを生成します。


let range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

createTextNode（Text ノードの生成）

Text ノードを生成します。このメソッドは HTML 文字をエスケープするのに利用できます。


let text = document.createTextNode(data);	// data：ノードに設定する文字列

下記のコードは、文字列の後ろに指定した文字列を追加する例です。

HTML


<div id="box1">元から設定されているテキスト</div>

JavaScript


function addTextNode(text) {
	let newtext = document.createTextNode(text),
	t = document.getElementById("box1");
	t.appendChild(newtext);
}

addTextNode(' → 追加テキスト1');
addTextNode(' → 追加テキスト2');

elementFromPoint（指定座標の最上位の要素を取得）

指定した座標の最上位の要素（Element）を取得します。指定座標に要素が存在しない場合は、null が返却されます。


let element = document.elementFromPoint(x, y);	// x：水平座標（左端からの相対座標）
												// y：垂直座標（上端からの相対座標）

下記のコードは、クリックした位置にある要素に文字色を赤にするスタイルを設定します。

JavaScript


document.addEventListener("click", function(event) {
	let x = event.pageX;
	let y = event.pageY;
	elem = document.elementFromPoint(x, y);
	elem.style.color = 'red';
});

elementsFromPoint（指定座標に属する全ての要素を取得）

指定した座標に属する全ての要素（Element）の配列を取得します。取得する要素は、最上位から最下位の順に並べられます。


let element = document.elementsFromPoint(x, y);	// x：水平座標（左端からの相対座標）
												// y：垂直座標（上端からの相対座標）

下記のコードは、クリックした位置にある全ての要素をコンソールに表示します。

JavaScript


document.addEventListener("click", function(event) {
	let x = event.pageX;
	let y = event.pageY;
	elems = document.elementsFromPoint(x, y);
	for (let i = 0; i < elems.length; i++) {
		console.log(elems[i]);
	}
});

exitFullscreen（全画面モードの終了）

全画面モードで表示されている要素が全画面モードを抜け、画面を以前の状態に戻すことを要求します。全画面モードから抜けようとしてエラーが発生した場合は、catch() ハンドラーが呼び出されます。


document.exitFullscreen();

下記のコードは、クリックするたびに通常モードと全画面モードを反転させます。

JavaScript


document.addEventListener("click", function(event) {
	if (document.fullscreenElement) {
		document
			.exitFullscreen()
			.then(function() {
				console.log("フルスクリーンモードを終了");
			})
			.catch(function(err) {
				console.error(err);
			});
	}
	else {
		document.documentElement.requestFullscreen();
	}
});

exitPictureInPicture（ピクチャインピクチャモードの終了）

ピクチャインピクチャモードで浮動表示されている動画をピクチャインピクチャモードから外し、画面を以前の状態に戻すことを要求します。ピクチャインピクチャモードから外そうとしてエラーが発生した場合は、catch() ハンドラーが呼び出されます。


document.exitPictureInPicture();

下記のコードは、クリックするたびに通常モードとピクチャインピクチャモードを反転させます。

JavaScript


document.addEventListener("click", function(event) {
	if (document.pictureInPictureElement) {
		document
			.exitPictureInPicture()
			.then(function() {
				console.log("ピクチャインピクチャモードを終了");
			})
			.catch(function(err) {
				console.error(err);
			});
	}
	else {
    	video.requestPictureInPicture();
	}
});

getAnimations（Animation オブジェクトの取得）

文書に格納されている Animation オブジェクトの配列を取得します。


let allAnimations = Document.getAnimations();	// Animation オブジェクトの取得

下記のコードは、文書に格納されている Animation オブジェクトを取得しコンソールに表示します。

JavaScript


let animes = document.getAnimations();
animes.forEach(function (a) {
	console.log(a);
});

getElementById（指定された id 名が付与されている要素を取得）

指定した id 名が付与されている要素を取得します。id 名と一致した要素が検出できれば対象要素の Element オブジェクトが返却されます。id 名と一致した要素が検出できない場合は、null が返却されます。


let element = document.getElementById(id);	// id：id 名

下記のコードは、id-name が付与された要素を取得しコンソールに出力します。

JavaScript


let element = document.getElementById("id-name");	// id-name が付与された要素の取得
console.log(element);

getElementsByClassName（指定された class 名が付与されている HTMLCollection オブジェクトを取得）

指定した class 名が付与されている HTMLCollection オブジェクトを取得します。 class 名は空白で区切って複数指定することができ、複数指定されている場合は、すべての class 名が指定されている要素を検索します。本メソッドは、document オブジェクト以外に任意の要素に対しても使用することができます。

注：HTMLCollection オブジェクトに対しては、forEach メソッドは使用できません（定義されていません）。


let elements = document.getElementsByClassName(names);	// names：class 名（複数指定可）

下記のコードは、指定した class 名での要素を取得してコンソールに表示します。

JavaScript


// test という class 名が付与された HTMLCollection オブジェクトの取得とコンソールへの出力
let e1 = document.getElementsByClassName('test');
for (let i = 0; i < e1.length; i++) {
	console.log(e1[i]);
}

// red と blue の両方の class 名が付与された HTMLCollection オブジェクトの取得
let e2 = document.getElementsByClassName('red blue');
console.log(e2);

// main という id 名が付与された要素配下で test という class 名が付与された HTMLCollection オブジェクトの取得
let e3 = document.getElementById("main").getElementsByClassName("test");
console.log(e3);

getElementsByName（指定された name 属性が付与されている NodeList コレクションを取得）

指定した name 属性が付与されている NodeList コレクションを取得します。


let elements = document.getElementsByName(name);	// name：name 属性の値

下記のコードは、指定した name 属性のコレクションを取得しコンソールに表示します。

JavaScript


// test という name 属性が付与された NodeList コレクションの取得とコンソールへの出力
let n1 = document.getElementsByName('test');
n1.forEach((n) => {
	console.log(n);
});

for (let i = 0; i < e1.length; i++) {
	console.log(e1[i]);
}

getElementsByTagName（指定されたタグ名を使用している HTMLCollection オブジェクトを取得）

指定したタグ名を使用している HTMLCollection オブジェクトを取得します。本メソッドは、document オブジェクト以外に任意の要素に対しても使用することができます。

注：HTMLCollection オブジェクトに対しては、forEach メソッドは使用できません（定義されていません）。


let elements = document.getElementsByTagName(name);	// name：タグ名

下記のコードは、指定したタグ名を使用している要素を取得してコンソールに表示します。

JavaScript


// div タグを使用している HTMLCollection オブジェクトの取得とコンソールへの出力
let e1 = document.getElementsByTagName('div');
for (let i = 0; i < e1.length; i++) {
	console.log(e1[i]);
}

getSelection（選択した文字列の Selection オブジェクトを取得）

選択した文字列の範囲または、キャレットの現在位置を表す Selection オブジェクトを取得します。返却された Selection オブジェクトを選択文字列に変換する場合は、toString メソッドを呼び出してください。


let sel = document.getSelection();		// Selection オブジェクトの取得

下記のコードは、選択した文字列をコンソールに表示します。

JavaScript


document.addEventListener("selectionchange", function () {
	var selText = document.getSelection();
	console.log(selText);				// オブジェクト内容の表示
	console.log(selText.toString());	// 選択文字列の表示
});

hasFocus（何れかの要素がフォーカスを持っているかを取得）

何れかの要素がフォーカスを持っているか否かを取得します。true が返却された場合は、何れかの要素がフォーカスを持っていることを示し、false が返却された場合は、文書内の要素にフォーカルがないことを示します。


let bool = document.hasFocus();			// フォーカスの有無を取得

importNode（他の文書から Node または DocumentFragment の複製を作成）

文書への挿入のために、他の文書から Node または DocumentFragment の複製を作成します。実際に文書への挿入を行うためには、appendChild や insertBefore などの挿入メソッドを呼び出す必要があります。adoptNode とは異なり、元の文書のノードは削除されることなく返却されるノードは、元のノードの複製です。


let node = importNode(externalNode, deep);	// externalNode：複製を行う元ノード
											// deep：子孫要素を含めるか否かの指定（省略可で省略時は false）
											//		true：子孫要素を含める
											//		false：子孫要素を含めない（子ノードは無い状態で複製）

open（文書への書き込みのためのオープン）

文書への書き込みのためのオープンを行います。文書へのオープンを行うことで文書内のノードや登録されているイベントリスナーがすべて除去されます。


document.open();

下記のコードは、文書に新しい要素を書き込みます。

JavaScript


document.open();
document.write("<p>新しい要素の書き込み！</p>");
document.close();

querySelector（指定されたセレクターに一致する最初の要素（Element）の取得）

指定されたセレクターに一致する文書内の最初の要素（Element）を取得します。一致するものが見つからない場合は null を返却します。


let element = querySelector(selectors);	// selectors：CSS セレクター

下記のコードは、指定したセレクターの最初の要素を取得してコンソールに表示します。

JavaScript


let sel = document.querySelector('div');	// 最初の div 要素の取得
console.log(sel);

querySelectorAll（指定されたセレクターに一致する NodeList の取得）

指定されたセレクターに一致する NodeList を取得します。


let nodeList = querySelectorAll(selectors);	// selector：CSS セレクター

下記のコードは、指定したセレクターの要素を取得してコンソールに表示します。

JavaScript


let nodeList = document.querySelectorAll('div');	// 全ての div 要素の取得
nodeList.forEach((n) => {
	console.log(n);
});

write（文書へ文字列の書き込み）

文書へ文字列の書き込みを行います。


document.write(markup);					// markup：書き込み文字列

下記のコードは、文書に文字列を書き込みます。

JavaScript


document.open();
document.write("");
document.write("文字列の書き込み！");
document.write(" → 追加文字列１");
document.write(" → 追加文字列２");
document.write("");
document.close();

writeln（書へ文字列（改行付き）の書き込み）

文書へ文字列の書き込みを行います。書き込み時に指定した文字列の後ろに改行を付加します。


document.writeln(markup);				// markup：書き込み文字列

下記のコードは、指定した文字列の後ろに改行を付加して文書に書き込みます。

JavaScript


document.open();
document.writeln("");
document.writeln("文字列の書き込み！");
document.writeln(" → 追加文字列１");
document.writeln(" → 追加文字列２");
document.writeln("");
document.close();

L12.3.7 document オブジェクト（イベント）

document オブジェクトは、window オブジェクトの document プロパティを示し HTML ツリー（DOM：Docement Object Model）が格納されるオブジェクトです。多くのイベントがありますが、ここでは主要なイベントについて説明します。


document.addEventListener("scroll", function(event) {
	console.log("スクロールが発生しました");
});


document.onscroll =  function(event) {
	console.log("スクロールが発生しました");
};

主要なイベントは、以下の通りです。

全ての説明を開く

copy（コピー操作が発生）

ユーザーがブラウザのコピー操作を実行した場合に発生します。このイベントの本来の対象は、コピー操作を対象とする Element です。


document.addEventListener("copy", function(event) {
	console.log("コピー操作が発生しました");
});

document.oncopy =  function(event) {
	console.log("コピー操作が発生しました");
};

cut（切り取り操作が発生）

ユーザーがブラウザの切り取り操作を実行した場合に発生します。このイベントの本来の対象は、切り取り操作を対象とする Element です。


document.addEventListener("cut", function(event) {
	console.log("切り取り操作が発生しました");
});

document.oncut =  function(event) {
	console.log("切り取り操作が発生しました");
};

DOMContentLoaded（初期文書の読み込み・解釈完了が発生）

HTML の初期文書の読み込みおよび解釈が完了した時点で発生します。スタイルシート、画像、サブフレームなどの読み込みが完了するのを待ちません。


document.addEventListener("DOMContentLoaded", function(event) {
	console.log("初期文書の読み込み・解釈が完了しました");
});

fullscreenchange（フルスクリーンへの移行・終了が発生）

ブラウザがフルスクリーンモードに移行または終了した時に発生します。本イベントは、フルスクリーンモードに移行または終了しようとしている Element に送られ、それから Document に送られます。

フルスクリーンに移行しようとしているか終了しようとしているかの判別は、Document.fullscreenElement の値をチェックしてください。この値が null ならばフルスクリーンモードを終了するところであり、そうでなければフルスクリーンモードに移行するところです。


document.addEventListener("fullscreenchange", function(event) {
	console.log("フルスクリーンへの移行・終了が発生しました");
});

document.onfullscreenchange =  function(event) {
	console.log("フルスクリーンへの移行・終了が発生しました");
};

下記の例は、画面をクリックするたびにフルスクリーンモードに移行・終了を行うと同時に移行・終了イベントを受け取る例です。


document.addEventListener("fullscreenchange", function(event) {
	if (document.fullscreenElement) {
		console.log("フルスクリーンモードに移行しました");
	}
	else {
		console.log("フルスクリーンモードを終了しました");
	}
});

document.addEventListener("click", function(event) {
	if (document.fullscreenElement) {
		document
			.exitFullscreen()
			.then(function() {
				console.log("フルスクリーンモードを終了");
			})
			.catch(function(err) {
				console.error(err);
			});
	}
	else {
		document.documentElement.requestFullscreen();
	}
});

fullscreenerror（フルスクリーンへの移行でエラーが発生）

ブラウザがフルスクリーンに移行できない時に発生します。本イベントは、フルスクリーンに移行しようとした Element に送られ、それから Document に送られます。


document.addEventListener("fullscreenerror", function(event) {
	console.log("フルスクリーンへの移行ができませんでした");
});

document.onfullscreenerror =  function(event) {
	console.log("フルスクリーンへの移行ができませんでした");
};

paste（貼り付け操作が発生）

ユーザーがブラウザの貼り付け操作を実行した場合に発生します。このイベントの本来の対象は、貼り付け操作を対象とする Element です。


document.addEventListener("paste", function(event) {
	console.log("貼り付け操作が発生しました");
});

document.onpaste =  function(event) {
	console.log("貼り付け操作が発生しました");
};

scroll（スクロールが発生）

文書のビューまたは要素がスクロールした場合に発生します。


document.addEventListener("scroll", function(event) {
	console.log("スクロールが発生しました");
});

document.onscroll =  function(event) {
	console.log("スクロールが発生しました");
};

selectionchange（テキスト選択の変更が発生）

文書におけるテキストの選択が変更された場合に発生します。


document.addEventListener("selectionchange", function(event) {
	console.log("テキストの選択変更が発生しました（%s）", document.getSelection());
});

document.onselectionchanget =  function(event) {
	console.log("テキストの選択変更が発生しました（%s）", document.getSelection());
};

visibilitychange（コンテンツの表示・非表示が発生）

コンテンツが表示状態または非表示状態になった場合に発生します。


document.addEventListener("visibilitychange", function(event) {
	console.log("コンテンツの表示・非表示変更変更が発生しました");
});

document.onvisibilitychange =  function(event) {
	console.log("コンテンツの表示・非表示変更変更が発生しました");
};

PAGE
TOP

Lesson-12 JavaScript / jQuery を始める前に

目次

L12.1 はじめに

L12.1.1 概要

L12.1.2 アプリケーションと各機能の関係

(1) アプリケーション

(2) 個別ライブラリィ

(3) jQuery

(4) JavaScript

L12.1.3 CDN（Content Delivery Network）

L12.1.4 JavaScript / jQuery の動作確認

L12.2 じゃんけんアプリケーション

L12.2.1 じゃんけんアプリケーションについて

L12.2.2 JavaScript 版

L12.2.3 jQuery 版

(1) jQuery 版（その1：HTML アクセス）

(2) jQuery 版（その2：イベント取得）

(3) jQuery 版（その3：イベント統合）

(4) jQuery 版（その4：エフェクト付加）

L12.2.4 PHP 版（参考）

L12.3 window / document オブジェクト

L12.3.1 window / document オブジェクト

L12.3.2 window オブジェクト（プロパティ）

L12.3.3 window オブジェクト（メソッド）

L12.3.4 window オブジェクト（イベント）

L12.3.5 document オブジェクト（プロパティ）

L12.3.6 document オブジェクト（メソッド）

L12.3.7 document オブジェクト（イベント）

Lesson-12
JavaScript / jQuery を始める前に