Windowオブジェクト

memo

ダイアログを表示する

・alertメソッド（警告ダイアログ）
指定されたメッセージを警告ダイアログとして表示する。
（）内を数式にすれば、計算結果を表示してくれる。

window.alert('出力したいテキスト');
window.alert(１０＋１０);

・confirmメソッド（確認ダイアログ）
ユーザーに対して確認の意思表示を求めるダイアログを表示する。
confirmメソッドは、ダイアログのボタンクリックに応じて以下の値を返す（リターン）。
「OK」ボタンがクリックされた場合→true
「キャンセル」ボタンがクリックされた場合→false

confirmのリターンの値は、必ずtrueかfalseのいずれかである。
このtrue、falseの両方を合わせてブール値（またはブーリアン値）と言う。

//確認ダイアログボックスを表示する
window.confirm(出力したいテキスト)

//if文
if(条件式)  {
  条件がtrueになるときに実行する処理
} else {
  条件がfalseになるときに実行する処理
}

if文、if-else文（条件分岐）
「もし〜なら」「もし〜でないなら」と言うように、ある条件が成り立つかどうかで動作を変える。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
  if(window.confirm('ゲームスタート！準備はいい？')) {
    console.log('ゲームを開始します。');
  } else {
    console.log('ゲームを終了します。');
  }
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>確認ダイアログテスト用コード</title>
<script>
//　確認ダイアログ表示関数
var showConfirmDialog = function() {
  if(confirm('ページを送信してもいいですか？')) {
  console.log('ページ送信');
  }
}
//　リスナー登録
window.onload = function() {
  document.getElementById('confirmButton').addEventListener('click' , showConfirmDialog, false);
}
</script>
</head>
<body>
  <input type="button" id="confirmButton" value="確認ダイアログ表示">
</body>
</html>

・promptメソッド（入力ダイアログ）
ユーザーに対して入力ダイアログを表示する。
入力ダイアログに入力された文字列は、promptメソッドに戻り値として受け取ることができる。

//プロンプトを表示する
window.prompt(出力したいテキスト)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
  const answer = window.prompt('ヘルプを見ますか？');
  if(answer === 'yes') {
    window.alert('タップでジャンプ、障害物をよけます。');
  }
</script>
</body>
</html>

let 変数

変数を定義し、＝で代入する。
データを変更できる。
再宣言、再代入、繰り返し処理できる。
ブロックスコープ。

//変数を定義し、変数に保存しておきたいデータを入れる（代入する）
let answer = 'yes';
//変数のデータを書き換える
answer = 'no';
//変数からデータを読み取る
console.log(answer);

const 定数

データを変更できない。
再宣言、再代入、繰り返し処理できない。
ブロックスコープ。

スコープとは..

宣言した変数を利用できる範囲のこと。
letとconstはブロックスコープという、ブロックごとに作られるスコープ内で利用できる。
スコープ内で定義された変数はスコープの内側でのみ参照でき、スコープの外側からは参照できない。

ブロックスコープとは..

{と}で囲んだ範囲をブロックと呼ぶ。
ブロックもスコープを作成する。
ブロックによるスコープのことをブロックスコープと呼ぶ。
if文やwhile文などもブロックスコープを作成する。
for文は、ループごとに新しいブロックスコープを作成する。

===　比較演算子

その記号の左側を右側を比較するものは、比較演算子と呼ぶ。
===は、左右が同じであれば評価結果がtrueになる。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>入力ダイアログテスト用コード</title>
<script>
// 入力ダイアログ表示関数
var showPromptDialog = function() {
    var inputName = prompt("あなたのお名前を入力してください", "田中");
    alert("あなたのお名前は" + inputName + "ですね");
}
// リスナー登録
window.onload = function() {
    document.getElementById("promptButton").addEventListener("click", showPromptDialog, false);
}
</script>
</head>
<body>
    <input type="button" id="promptButton" value="入力ダイアログ表示">
</body>
</html>

この記事が気に入ったらサポートをしてみませんか？