JavaScript alert（）メソッド

JavaScriptのalert() メソッド。Window.alert()とも呼ばれます。 、ユーザーにアラートダイアログボックスを表示します。オプションのメッセージ引数を受け入れて、ユーザーに[OK]ボタンのあるメッセージを表示します。 alert()の一般的な使用法 アクションが成功したことをユーザーに通知するか、エラーを表示します。

alert() メソッドは、開発ツールとしても役立ちます。たとえば、alert()を配置します フォーム送信を処理する関数内。通常、alert() event.preventDefault()の後に配置されます と呼ばれます。

レビューのために、event.preventDefault() 送信ボタンがクリックされた後、リダイレクトのデフォルトの動作をキャンセルするだけです。このクイックチュートリアルを読んで、event.preventDefault()をさらに確認してください。 。

JavaScriptアラート（）とは何ですか？

JavaScript alert() ポップアップダイアログボックスを表示します。文字列形式のオプションのメッセージを渡して、カスタムメッセージを表示できます。 alert()に関する重要な注意事項 [OK]をクリックして確認が必要なメッセージを表示するためにのみ使用する必要があります。アクションを必要とするメッセージは、alert()を利用しないでください 。

alert() ダイアログボックスには多くの用途があります。 fetch()のコンテキストで成功またはエラーを表示するために使用できます リクエスト。もう1つの使用法は、alert()を表示することです。 プログラムが適切に流れるようにする機能で。

alert（）JavaScript構文

alert()の構文 簡潔でわかりやすいです。 alert()を呼び出すだけです 文字列の形式のメッセージ：

alert('message')

これにより、「メッセージ」というダイアログボックスが表示されます。カスタムメッセージを文字列として配置して表示します。

メッセージはオプションです。メッセージが含まれていない場合は、[OK]ボタンのある空白のダイアログボックスが表示されます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

alert()

JavaScript alert（）の例

この記事の紹介では、alert()を使用するためのユーザーと開発者のシナリオを検討しました。 。次に、それぞれがどのように実装されるかを見てみましょう。開発者側から始めましょう。 alert()を配置します フォームの送信を処理する関数の内部。

ユーザー名とパスワードを使用してログインするための基本的なフォームから始めます。

<form>
<label>Name</label>
<input type="text" name="name">
<label>Password</label>
<input type="text" name="name">
<button type="submit">
Log In
</button>
</form>

レンダリングするもの：

次に、JavaScriptフォームのonSubmitプロパティに渡す関数を作成しましょう。

const handleOnSubmit = (event) => {
 event.preventDefault();
 alert("Logged In")
}

次に、この関数をonSubmitプロパティのフォームに渡します。

<form onSubmit="handleOnSubmit(event)">
<label>Name</label>
<input type="text" name="name">
<label>Password</label>
<input type="text" name="name">
<button type="submit">
Log In
</button>
</form>

これで、[ログイン]ボタンをクリックして、関数がフォームに正しく接続されているかどうかを確認できます。ボタンをクリックすると、次のようなダイアログボックスが表示されます。

すごい！定義した関数がフォームと通信していることはわかっています。 JavaScript alert() プログラムの流れを確認する簡単な方法を提供します。

次の例では、fetch()で成功メッセージとエラーメッセージを表示する方法を見てみましょう。 リクエスト。

fetch('/current-cart/', {
      credentials: 'include',
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      },
    })
    .then(resp => resp.json())
    .then(cart => {
      if(cart.error){
        alert(cart.error)
      }

この例では、eコマースアプリにショッピングカートのフェッチリクエストがあります。現在のショッピングカートが保管されているかどうかを確認するためのリクエストを送信しています。リクエストを最後まで実行すると、alert()があります。 エラーがある場合は表示されます。

アクティブなショッピングカートがないため、次のエラーが発生します。

この例は、本番環境よりも開発環境で役立ちますが、たとえばフォームの検証として同じ原則を適用できます。

return fetch('/login', {
      credentials: 'include',
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(creds)
    })
    .then(resp => resp.json())
    .then(response => {
      if (response.error) {
        alert(response.error)
      }

ここでは、alert() ログインフォームに関連付けられたエラーメッセージが表示されます。ユーザーがフォームに入力せずにログインしようとすると、次のエラーが発生します。

これは、alert()を使用してユーザーエクスペリエンスを指示する例です。 検証を表示します。

alert() 開発側とクライアント側の両方で使用できます—ユーザーに表示されます。少し時間を取って、私たちが学んだことを要約しましょう。

結論

JavaScript alert() は、多くの幅広い用途がある単純な方法です。メッセージのオプションの引数を文字列データ型として受け取ります。メッセージと[OK]ボタンを含むダイアログボックスが表示されます。 alert()であることを忘れないでください メッセージを表示することのみを目的としており、アクションを実行することはできません。

この例では、alert() 関数とフォームの通信を追跡するために開発で使用できます。次に、alert()がどのように行われるかを確認しました フェッチ要求の開発側でエラーメッセージを公開する可能性があります。最後の例では、alert()がどのように行われるかを確認しました。 フォームで検証エラーをユーザーに配信するために使用できます。

これで、alert()の一般的な使用法を理解できたはずです。 。さまざまな機能をテストする方法として、次のJavaScriptプロジェクトで試してみてください。