やりたいこと①
・下の画像と同じalertをJSを使って表示させる。
書いてみたコード①
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>alert</title>
</head>
<body>
<script>
alert("件名と本文を入力せずに、このメッセージを送信しますか")
</script>
</body>
</html>
ブラウザで表示させてみた①
・キャンセルボタンが無いから他の関数あるかも！
・mail.google.comの文字列を書くのを忘れた。
・このalertが表示してある間は検証ボタン使えなかったからコード見れなかった。
alartみたいな関数があるか調べてみた。
- window.alert()
- ダイアログボックスを表示する。
- ユーザーにメッセージを表示する。
- window.confirm()
- OKとキャンセルのボタンがあるダイアログボックスを表示する。
- ユーザーに確認を求める。
- confirmって確認するという意味だったことを思い出す。
- window.prompt()
- テキスト入力できるダイアログボックスを表示する。
- ユーザーに入力を求める。
ちなみにこのwindowはオブジェクトであり、どこでからでもアクセスすることができるグローバルオブジェクトである。
書いてみたコード②
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>confirm</title>
</head>
<body>
<script>
confirm("件名と本文を入力せずに、このメッセージを送信しますか？")
</script>
</body>
</html>
ブラウザで表示させてみた②
・キャンセルとOKボタンがある！
・127.0.0.1:5500の部分はgmailだと↓のアドレスとリンクしてるらしいので
私の力では「mail.google.com の内容」は表示できないことに気づく。
やりたいこと②
・「今日、ジム行った？」をブラウザに表示させる。
・confirmの様なユーザーに確認を求める はい or いいえ ボタンを設置する。
調べたこと②
・confirmはJSの組み込み関数だからボタンの種類を変更できないことに気づく。
・やりたいこと②を叶えるにはhtmlとcssでボタンカスタマイズして設置する。
調べたこと③
・あるサイトに以下のように書いてあったけどブラウザに表示されないから調べてみた。
<div id="dialog">
<p>ボタンをクリックしてください</p>
<button id="yes">はい</button>
<button id="no">いいえ</button>
</div>
適当な単語にしてみたらブラウザに表示されたので何が原因なのか調査してみた。
<div id="dialoggg">
<p>ボタンをクリックしてください</p>
<button id="yesss">はい</button>
<button id="nooo">いいえ</button>
</div>
「html 予約語 一覧」で検索したら「dialog」が出てこないので
「html 予約語 一覧 dialog docs」で検索したらどうやらdialogは要素らしい。
id属性にdialogを指定したらブラウザに表示されない理由。
・id属性は識別するために使うらしいから、htmlの要素であるdialogは使えない。（現状の理解）
コードを書き直してみた
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>custom-dialog</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="custom-dialog">
<p>今日、ジム行った？</p>
<button id="yes">はい</button>
<button id="no">いいえ</button>
</div>
<script>
</script>
</body>
</html>
ブラウザで表示させてみた
・最低限の表示はできたって感じ。
・はい ボタン押したらカレンダーにスタンプ押されるみたいなことしたい。
・いいえ ボタン押したら何時いくの？みたいな催促するテキスト表示したい。
用語の整理
- ダイアログボックス
- ユーザーにアクションを促すためのメッセージを表示するためのウィンドウ。
気になってるところメモ
・タグと要素の違いがよく理解してない。