5 bài code JavaScript

Bài 1

ren2_1.html

四角形の面積を求める。

1<!DOCTYPE html>2<html>3    <head>4        <meta charset="UTF-8">5        <title>JavaScript前期試験練習 問題1</title>6    </head>7    <body>8        <h1>四角形の面積を求める。</h1>9        <img src="../img/rect.png" alt="四角形の幅と高さ"><br>10        <script>11            let width = Number(window.prompt('四角形の幅を入力してください。'));12            let height = Number(window.prompt('四角形の高さを入力してください。'));13            let area = width + height;14            document.write('幅 ' + width + '／高さ' + height +15                'の四角形の面積は、' + area);16        </script>17    </body>18</html>

Bài 2

ren2_2.html

洋服のサイズを判定する

1<!DOCTYPE html>2<html>3    <head>4        <meta charset="UTF-8">5        <title>JavaScript前期試験練習 問題2</title>6    </head>7    <body>8        <h1>洋服のサイズを判定する</h1>9        <script>10            let height = window.prompt('あなたの身長を入力してください。');11            height = Number(height);12            if (height < 160) {13                document.write('サイズは「S」です。');14            } else if (height < 170) {15                document.write('サイズは「M」です。');16            } else if (height < 180) {17                document.write('サイズは「L」です。');18            } else {19                document.write('サイズは「XL」です。');20            }21        </script>22    </body>23</html>

Bài 3

ren2_3.html

おみくじ

1<!DOCTYPE html>2<html>3    <head>4        <meta charset="UTF-8">5        <title>JavaScript前期試験練習 問題3</title>6        <link rel="stylesheet" href="../css/style.css">7    </head>8    <body>9        <h1>おみくじ</h1>10        <script>11            let kuji = Math.floor(Math.random() * 5);12            switch(kuji){13                case 0:14                    document.write("大吉");15                    break;16                case 1:17                    document.write("吉");18                    break;19                case 2:20                    document.write("中吉");21                    break;22                case 3:23                    document.write("小吉");24                    break;25                default:26                    document.write("凶");27                    break;28            }29        </script>30    </body>31</html>

Bài 4

ren2_4.html

ループを使った配列の表示

1<!DOCTYPE html>2<html>3    <head>4        <meta charset="UTF-8">5        <title>JavaScript前期試験練習 問題4</title>6    </head>7    <body>8        <h1>ループを使った配列の表示</h1>9        <script>10            let animals = ['ライオン','ゾウ','キリン'];11            // 配列に'ゴリラ'と'パンダ'を追加する12            animals.push('ゴリラ','パンダ');13            // 配列をループ（for文）を使って表示14            for(let i = 0; i < animals.length; i++) {15                document.write(animals[i] + '<br>');16            }17        </script>18    </body>19</html>

Bài 5

ren2_5.html

画像要素のCSSの値を変更する

1<!DOCTYPE html>2<html>3    <head>4        <meta charset="UTF-8">5        <title>JavaScript前期試験練習 問題5</title>6    </head>7    <body>8        <h1>画像要素のCSSの値を変更する</h1>9        <!-- 「縮小」ボタンと「拡大」ボタンを表示して、関数を呼び出す -->10        <input type="button" value="縮小" onclick="small()" />11        <input type="button" value="拡大" onclick="big()" />12        <img id="traImg" src="../img/tiger.jpg" alt="トラの写真">13        <script>14            // 変数imgは「id="traImg"」の要素を取得する。15            let img = document.getElementById("traImg");16            // 画像を縮小する関数smallを作成する17            let small = function(){18                img.style.width = '200px';19            }20            // 画像を拡大する関数bigを作成する21            let big = function(){22                img.style.width = '500px';23            }24        </script>25    </body>26</html>