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) //アラート表示
});かかかず
このように組み合わせと記述が簡単なスニペットです。
