JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのwindow.alert()にdocument.titleでページのタイトルをアラート表示

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

JavaScriptのwindow.alert()にdocument.titleでページのタイトルをアラート表示

JavaScriptのwindow.alert()にdocument.titleでページのタイトルをアラート表示

JavaScriptの window.alert() を使って、ウィンドウのアラート表示にページのタイトルを表示させてみます。

かかかず
かかかず

非常に簡単なコードなので、コードを見てJavaScriptの構造を学ぶにはちょうどいいかもしれません。

このスニペットについて解説していきます。

window.alert()とdocument.title

JavaScriptの window.alert()document.title は、それぞれ以下の動きや役割を持ちます。

  • window.alert() … 表示されたダイアログを閉じる「OK」 ボタンと指定した文字列を表示させるメソッド
  • document.title … 現在のページの <title> タグの名前を取得したり、設定するプロパティ

この2つを掛け合わせて、アラート表示にページのタイトルを表示させてみます。

アラート表示のサンプル

早速サンプルですが、以下のボタンクリックでウィンドウのアラート内にこのページのタイトルが表示されます。

かかかず
かかかず

アラートでタイトルが出ます。

サンプルのコード

HTMLは、ボタンクリックのトリガー用に「titleBtn」というidを付与したボタンのみです。このid名は、JavaScriptの .addEventListener のトリガーにする名称と同じものにします。

<button id="titleBtn">titleを表示するボタン</button>

そしてJavaScriptは、.addEventListener のクリックイベントで、ボタンクリックされたらアラート表示の window.alert() が発動し、その中にこのページのタイトルを取得する document.title を記述することで、アラートの中にタイトルを表示させています。

document.getElementById('titleBtn').addEventListener('click', () => {
     window.alert(document.title) //アラート表示
});
かかかず
かかかず

このように組み合わせと記述が簡単なスニペットです。