CodeGym/Java Course/モジュール 3/JavaScript コードとブラウザーのやり取り

JavaScript コードとブラウザーのやり取り

使用可能

4.1 ブラウザオブジェクト

すでにご存知のとおり、JavaScript 言語はブラウザ内で動作するため、何らかの方法でこの同じブラウザと対話する必要があります。これを行うために、ブラウザには JavaScript から利用できるいくつかのオブジェクトと関数が用意されています。

1 つ目はan object window、ブラウザ ウィンドウを説明するものです。というか、私はブラウザにタブがなかった頃のことをよく説明していました。これで、ウィンドウ オブジェクトは、スクリプトを含むページが読み込まれる現在のブラウザ タブを記述します。

次に、これはan object documentタブに表示されるドキュメントを担当するものです。これは少し混乱するかもしれません。わかりやすくするために、ドキュメントがユーザーに表示されるものであり、ウィンドウがこのドキュメントが表示されるものであるとします。

3 番目に、これはan object consoleブラウザ コンソールへの出力を担当します。はい、ブラウザにもコンソールがあり、主にスクリプトのデバッグやエラー メッセージの表示に使用されます。通常、ブラウザの F12 ボタンを押すと開くことができます。

Object window、すべてのページ オブジェクトのトップレベル オブジェクトです。また、スクリプトdocument内にオブジェクト名を直接記述することもできますが、実際には、オブジェクトの名前と.consolewindow.documentwindow.console

4.2 JavaScript のダイアログ

アラート() メソッド

an object windowページ スクリプトから見える関数もいくつかあります。最も一般的に使用されるのは ですalert()。ユーザーへのメッセージを含むダイアログ ボックスを表示できます。その後、ユーザーが [OK] をクリックするまでスクリプトは一時停止されます。

例:

alert("JavaScript is the best!");

プロンプト() メソッド

ユーザーに何らかの値の入力を求めることができる関数もあります。これが ですprompt()

例:

var age = prompt("Enter Year of Birth");

verify() メソッド

2 つのボタンを備えたダイアログ ボックスを表示してOkCancelユーザーにアクションについて尋ねることができます。

例:

var isOK = confirm("Are you ready");

4.3 onload() イベント

そしてもう 1 つ有益で興味深い瞬間があります。ブラウザ ウィンドウには、ドキュメントが完全にロードされたときに発生するイベントがあります。ドキュメントがロードされて表示された後に実行されるコードを指定できます。

これは 3 つの方法で実行できます。

まず、JavaScript コードを属性値として HTML ページに直接埋め込むことができます。

<body onload="alert('document loaded');">
  <img src="big-image.png">
</body>

次に、HTML ページに JavaScript コードを簡単に埋め込むことができます。

<head>
    <script>
        function load()
        {
            alert('document loaded');
        }
        window.onload = load;
    </script>
</head>
<body>
    <img src="big-image.png">
</body>

3 番目に、匿名関数を宣言することで、もう少し短く書くことができます。

<head>
    <script>
        window.onload = function () {
            alert('document loaded');
        }
    </script>
</head>
<body>
    <img src="big-image.png">
</body>

4.4 onclick() イベント

そして最後に、もう一つの重要な出来事(イベント)は、 ですevent OnClick。これは、ユーザーがクリックした任意の要素で発生します。event OnLoadさまざまな方法で設定できるのと同様に、最も単純な方法だけを示します。

<body>
  <img src="big-image.png" onclick="alert('user clicked on the image');">
</body>

コメント
  • 人気
  • 新規
  • 古い
コメントを残すには、サインインしている必要があります
このページにはまだコメントがありません