LoginSignup
0
1

More than 3 years have passed since last update.

JavaScript 超基礎 ダイアログボックスを表示する

Posted at

目的

  • JavaScriptの超基礎部分としてダイアログボックスの表示方法をまとめる

前提情報

  • windowオブジェクトのalertメソッドを利用してダイアログボックスを実装する。(何を言っているかわからなかったら無視して良い)

概要

  1. 準備
  2. JavaScriptの記載
  3. 確認

詳細

  1. 準備

    1. 下記コマンドを実行して任意のディレクトリにファイルを作成する。

      $ touch index.html
      
    2. 下記コマンドを実行してファイルを開く。

      $ vi index.html
      
    3. 下記の内容を記載する。

      index.html
      <!DOCTYPE html>
      <html lang="ja">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
      </head>
      <body>
          <h1>JavaScript</h1>
      </body>
      </html>
      
  2. JavaScriptの記載

    1. 下記の内容を<body>要素の中に記載する。

      index.html
      <script>
          window.alert('ダウンロードを開始します!');
      </script>
      
    2. 記載後のindex.htmlファイルの全内容を下記に記載する。

      index.html
      <!DOCTYPE html>
      <html lang="ja">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
      </head>
      <body>
          <h1>JavaScript</h1>
      
          <!-- 下記を追記する -->
          <script>
              window.alert('ダウンロードを開始します!');
          </script>
          <!-- 上記までを追記する -->
      </body>
      </html>
      
  3. 確認

    1. フォルダからindex.htmlを探しダブルクリックで開く。

      test.png

    2. ブラウザが起動し下記のようなダイアログボックスが表示されることを確認する。

      このページの内容_と_Document.png

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1