ホームプログラミング言語 Web関連 javascript 最初の JavaScript プログラム

最初の JavaScript プログラム

JavaScriptプログラムは単独では実行できず、ホスト環境でのみ実行できます。通常、 Java Script コードは Web ページに配置し、ブラウザ環境を使用して実行できます。

コンテンツ 表示

JavaScript コードを HTML ドキュメントに埋め込む

JavaScript スクリプトを HTML ページに埋め込むには、<script> タグを使用する必要があります. ユーザーは <script> タグに直接 JavaScript コードを記述できます. 具体的な手順は次のとおりです.

ステップ 1、新しい HTML ドキュメントを作成し、test.html として保存します。

ステップ 2、<head> タグ内に <script> タグを挿入します。

ステップ 3、<script> タグにtype="text/javascript"属性を設定します。

最近のブラウザの <script> タグのデフォルトのスクリプトタイプは JavaScript であるため、type 属性は省略できますが、以前のバージョンのブラウザとの互換性を考慮する場合は、type 属性を設定する必要があります。

ステップ4. <script>タグ内にJavaScriptコードdocument.write("<h1>IT基礎：it-kiso.com</h1>");入力します。

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初めてのJavaScriptプログラム</title>
    <script type="text/javascript">
        document.write("<h1>IT基礎：it-kiso.com</h1>");
    </script>
</head>
<body></body>
</html>

JavaScript スクリプトでは、document は Web ページのドキュメントオブジェクトを表し、document.write() は Document オブジェクトの write() メソッドを呼び出して、HTML 文字列"<h1>IT基礎：it-kiso.com</h1>"を書き込むことを意味します。 .

ステップ 5、Web ドキュメントを保存し、ブラウザでプレビューすると、表示効果は図のようになります。

スクリプトファイルに JavaScript コードを記述する

JavaScript プログラムは、HTML ドキュメントに直接配置できるだけでなく、JavaScript スクリプトファイルにも配置できます。 JavaScript スクリプトファイルは、拡張子が.jsのテキストファイルで、任意のテキストエディターで編集できます。

一般的に使用されるテキストエディターには、Windows システムの Notepad、Vim、Sublime Text、Linux システムの Notepad++ などがあります。初心者の方は、まずテキストエディタを使用して JavaScript コードを記述することをお勧めします。これにより、JavaScript の構文、キーワード、関数などを覚えやすくなります。実際の開発段階になると、Visual Studio Code (「VS Code」と呼ばれます)、WebStorm (マテリアル付き)、Atom など、より専門的なコードエディターを選択して、開発効率を向上させることができます。

新しい JavaScript ファイルを作成する手順は次のとおりです。

ステップ 1、新しいテキストファイルを作成し、test.js として保存します。拡張子が.jsであることに注意してください。これは、テキストファイルが JavaScript タイプのファイルであることを示します。

ステップ 2、test.js ファイルを開き、次の JavaScript コードを記述します。

alert(“IT基礎: it-kiso.com”);

上記のコードでは、alert() は Window オブジェクトのメソッドを表します。このメソッドを呼び出すと、プロンプトダイアログボックスがポップアップ表示され、パラメータ文字列 “Hi, JavaScript!” が表示されます。

ステップ 3、JavaScript ファイルを保存します。 JavaScript ファイルと Web ページファイルは同じディレクトリに配置することをお勧めします。

JavaScript ファイルは独立して実行することはできず、Web ページにインポートしてブラウザーを介して実行する必要があります。 JavaScript ファイルは <script> タグを使用してインポートできます。

ステップ 4、新しい HTML ドキュメントを作成し、test.html として保存します。

ステップ 5、<head> タグ内に <script> タグを挿入します。 src 属性を定義し、属性値を外部 JavaScript ファイルを指す URL 文字列に設定します。コードは以下のように表示されます:

 <script type="text/javascript" src="test.js"></script>

注: <script> タグを使用して外部 JavaScript ファイルを含める場合、デフォルトのファイルタイプは Javascript です。したがって、読み込まれたファイル拡張子が .js であるかどうかに関係なく、ブラウザーはそれを JavaScript スクリプトとして解析します。

ステップ 6、Web ページドキュメントを保存し、ブラウザでプレビューすると、表示効果は図のようになります。

src 属性を定義する <script> タグに JavaScript コードを含めないようにしました。コードが埋め込まれている場合、外部 JavaScript ファイルのみがダウンロードされて実行され、埋め込まれたコードは無視されます。

ブラウザーが HTML ドキュメントを解析するとき、ドキュメントフローに従って上から下に 1 行ずつ解析して表示します。 JavaScript コードも HTML 文書の不可欠な部分であるため、JavaScript スクリプトの実行順序も <script> タグの位置に従って決定されます。

例

ブラウザーを使用して次の例をテストすると、JavaScript コードが上から下まで段階的に解析されるプロセスが表示されます。

 <!DOCTYPE html>
<script>
    alert("トップのスクリプト");
</script>
<html>
<head>
    <meta charset="UTF-8">
    <title>テスト</title>
    <script>
        alert("ヘッドのスクリプト");
    </script>
</head>
<body>
    <h1>ウェブページのタイトル</h1>
    <script>
        alert("ページのスクリプト");
    </script>
    <p>本文の内容</p>
</body>
<script>
    alert("フッターのスクリプト");
</script>
</html>

上記の例の Web ページをブラウザーで参照すると、プロンプトテキスト「top script」が最初にポップアップし、次に Web ページタイトル「test」がポップアップし、次にプロンプトテキスト「head script」がポップアップし、第 1 レベルのタイトルが表示されます。テキスト “webpage title” が下に表示され、引き続きプロンプトテキスト “Page Script” がポップアップ表示され、次に段落テキスト “Body Content” が表示され、最後にプロンプトテキスト “Bottom Script” がポップアップ表示されます。

インポートされた JavaScript ファイルの場合、それらは <script> タグがドキュメントに表示される順序でも実行されます。実行プロセスはドキュメントの解析の一部であり、個別に解析または延期されることはありません。

JavaScriptファイルの実行順序を変更したい場合は、 <script> タグに defer 属性や async 属性を追加してください. 知りたい読者はこちらへ: JSファイルの遅延と非同期読み込み (defer属性とasync属性)