1

More than 3 years have passed since last update.

@miriwo(大川峻)in

JavaScript 超基礎処理を外部ファイルに記載する

Last updated at 2020-12-03Posted at 2020-11-06

目的

JavaScriptの処理をHTMLに記載するのではなく別のファイルに記載する方法をまとめる

実施条件

下記の手順でダイアログボックスを表示するソースが手元にあること。
- JavaScript 超基礎ダイアログボックスを表示する

概要

準備
JavaScriptの記載場所変更
確認

詳細

準備
1. index.htmlが設置してあるディレクトリに移動する。
2. 下記コマンドを実行してJavaScriptのファイルを作成する。
```
$ touch daialog_box.js
```
3. index.htmlとdaialog_box.jsが同じディレクトリ内にあることを確認する。

JavaScriptの記載場所変更

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

script要素の中に記載されている処理を削除しJavaScriptのファイルを指定する。

修正前

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>

修正後

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 src="daialog_box.js">
    </script>
</body>
</html>

下記コマンドを実行してJavaScriptのファイルを開く。
```
$ vi daialog_box.js
```

下記の内容を記載する。

daialog_box.js

window.alert('ダウンロードを開始します！');

確認
1. フォルダからindex.htmlを探しダブルクリックで開く。
2. ブラウザが起動し下記のようなダイアログボックスが表示されることを確認する。

1

Register as a new user and use Qiita more conveniently

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

1