JavaScriptの基本

        
① ボタンを押したらメッセージを表示
        
        概略：

        buttonをクリック
        hello()関数が実行される
        alert()でメッセージを表示

        👉 JavaScriptの「イベント処理」の一番基本的な例です。

    

<button onclick="hello()">クリック</button> <script> function hello() { alert("こんにちは！"); } </script>
test.php コピー 実行 終了

        
② HTMLの文字を変更する
    
        getElementById()で要素を取得して、textContentで文字を書き換える        
    

<p id="message">おはよう</p> <button onclick="changeText()">変更</button> <script> function changeText() { document.getElementById("message").textContent = "こんにちは"; } </script>
test.php コピー 実行 終了

        
③ 入力された文字を取得する
        入力領域が表示されますので、そこに文字を入力します、
        「表示」ボタンを押してみてください。
    

<input type="text" id="name"> <button onclick="showName()">表示</button> <script> function showName() { const name = document.getElementById("name").value; alert("こんにちは、" + name + "さん！"); } </script>
test.php コピー 実行 終了

        
④ 数字を計算する
        ２つの入力領域に数字を入れると、足し算が行われます。
        結果は、「p」タグのidが「result」に設定される。
    

<input type="number" id="num1"> <input type="number" id="num2"> <button onclick="calc()">計算</button> <p id="result"></p> <script> function calc() { const a = Number(document.getElementById("num1").value); const b = Number(document.getElementById("num2").value); const answer = a + b; document.getElementById("result").textContent = answer; } </script>
test.php コピー 実行 終了

        
⑤ 配列を使って繰り返し処理する

        関数内に書かれた、配列データをid「list」にボタンクリックで設定します。
        （表示されます）
    

<button onclick="showList()">表示</button> <div id="list"></div> <script> function showList() { const fruits = ["りんご", "みかん", "バナナ"]; let html = ""; for (let i = 0; i < fruits.length; i++) { html += fruits[i] + "<br>"; } document.getElementById("list").innerHTML = html; } </script>
test.php コピー 実行 終了

        
⑥ if文で条件を判断する
        JavaScriptの条件分岐の基本の書き方になります
    

<script> function checkAge() { const age = 20; if (age >= 18) { alert("成人です"); } else { alert("未成年です"); } } // 関数の呼び出し checkAge(); </script>
test.php コピー 実行 終了

        
⑦ for文で繰り返す
        繰り返しの基本の書き方です、
        最初の「i=1」が初期値、
        ２番めの「i<=5」が条件であり、この条件の間繰り返します。

        処理の流れ

            i = 1       （１番目、初回だけ処理される）
            ↓
            i <= 5      （２番目の条件が満たされている間は繰り返す）
            ↓
            処理
            ↓
            i++         （３番目の処理）
            ↓
            繰り返し

    

<script> for (let i = 1; i <= 5; i++) { console.log(i); } </script>
test.php コピー 実行 終了

        
⑧ 配列からデータを取り出す
    

<script> const fruits = ["りんご", "みかん", "バナナ"]; alert(fruits[0]); alert(fruits[1]); alert(fruits[2]); </script>
test.php コピー 実行 終了

        
⑨ ボタンをJavaScriptから作る

        「createElement」でボタンを作成（何でもできる）
        ポイントは、作りたいところに、「appendChiled」をすること。
    

<div id="area"></div> <script> function createButton() { const button = document.createElement("button"); button.textContent = "クリック"; document.getElementById("area").appendChild(button); } createButton(); </script>
test.php コピー 実行 終了

        
⑩ 色を変更する
        ある要素の色を変更するには、JavaScriptからCSSを変更する必要があります
        このサンプルでは、色の他にサイズも変更してみます
    

<p id="message">こんにちは</p> <button onclick="changeColor()">変更</button> <script> function changeColor() { const message = document.getElementById("message"); // alert("color=" + message.style.color); console.log("color=",message.style.color); message.style.color = "red"; message.style.fontSize = "30px"; } </script>
test.php コピー 実行 終了
[問題]　変更した色を元に戻したい場合は？
ヒント

        
変更した色を元に戻したい
        変更したカラーを空文字「""」にすると、変更前の色になります。
        デフォルト色に戻るのではなく、以下のように指定してあった場合は、
        その色に戻りますので注意です。
    

<!-- ここで色指定があると、この色に戻るので注意 --> <style> /* #message { color: blue; } */ </style> <p id="message">こんにちは</p> <button onclick="changeStyle()">変更</button> <button onclick="resetStyle()">元に戻す</button> <script> function changeStyle() { const message = document.getElementById("message"); message.style.color = "red"; } function resetStyle() { const message = document.getElementById("message"); message.style.color = ""; } </script>
test.php コピー 実行 終了