ホーム プログラミング言語 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 coding sample
javascript coding sample

スクリプト ファイルに 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 ページ ドキュメントを保存し、ブラウザでプレビューすると、表示効果は図のようになります。

javascript alert sample
javascript alert sample

src 属性を定義する <script> タグに JavaScript コードを含めないようにしました。コードが埋め込まれている場合、外部 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属性)

 

「最初の JavaScript プログラム」についてわかりやすく解説!絶対に観るべきベスト2動画

【JavaScript超入門講座】わずか50分で知識ゼロから基礎をマスター!
【第2回】JavaScript入門 初めてのJavaScriptプログラム 環境構築