HOME 転職について 副業について お問い合わせ

【基本構文】HTMLファイルにJavaScriptを記入する方法

目次 非表示
1 JavaScriptとは？
1.1 HTMLファイルにも記述できる
2 HTMLファイルにJavaScriptのコードを記述
2.1 ループ
2.2 配列
2.3 条件分岐
2.4 switch文

この記事は分で読み終わります。

JavaScriptとは？

JavaScriptはWebアプリケーションで利用される事が多いプログラミング言語で、クライアント側、サーバー側どちらでも動作する言語です。

 

クライアント（私たちのパソコン）で動作させることが可能なため、サーバーへの負荷を軽減できます。

基本的にはHTMLやPHPを用いて記述したページは再読み込みする事で内容を更新できますが、JavaScriptを利用すればページを更新しなくても表示内容を変える事も可能です。

 

例えばJavaScriptで可変するプログラムを作った場合、ボタンをクリックして文字や画像の変更ができます。

ユーザーもわざわざページを更新しなくてもよい事から、通信量を抑えれたり、ユーザーを読み込みで待たせることがなくなります。

 

Javaとは全く別物ですが、JavaScriptも変数や関数などが利用できるため、様々なアプロケーションを構築できます。

HTMLファイルにも記述できる

基本的にJavaScripを記述したプログラムは拡張子が「js」というファイルに記述しますが、Webサイトを作るHTMLファイルにも記述が可能です。

 

HTMLファイルは普段と変わらず拡張子は「.html」で問題ありません。

 

JavaScriptを利用することでJSONファイルを読み込んだり、API連携が可能なため外部からデータを取得する事も可能です。

HTMLファイルにJavaScriptのコードを記述

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>

<body>

    <script>
        document.write("<p>scriptで囲むとJavaScriptが実行されます。</p>");
    </script>

</body>

</html>

ループ

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>

<body>

    <script>
        for (var i=0; i<5; i++) {
            document.write("<p>"+i+"</p>");
        }
    </script>

</body>

</html>

配列

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>

<body>

    <script>
        var lists = ['東京', '名古屋', '福岡'];

        document.write("<p>"+lists[0]+"</p>");
        document.write("<p>"+lists[1]+"</p>");
        document.write("<p>"+lists[2]+"</p>");
    </script>

</body>

</html>

条件分岐

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>

<body>

    <script>
        var temperature = 21

        if (temperature < 0) {
            document.write("極寒");
        } else if (temperature > 0 && temperature <= 10) {
            document.write("寒い");
        } else if (temperature > 10 && temperature <= 20) {
            document.write("暖かい");
        } else {
            document.write("暑すぎる");
        }
    </script>

</body>

</html>

switch文

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>

<body>

    <script>
        var temperature = 3;

        switch (temperature) {
            case 1:
                document.write("<p>あなたは1を選びましたね</p>");
                break;
            case 2:
                document.write("<p>あなたは2を選びましたね</p>");
                break;
            case 3:
                document.write("<p>あなたは3を選びましたね</p>");
                break;
            default:
                document.write("<p>３までしか覚えられません</p>");
        }
    </script>

</body>

</html>



 


 


 


 


 


 

    







©Copyright2022 FICH-LABO.All Rights Reserved.