www

基本編

  • 変数を使うその2

    var の役割

    [renshu-31.html]

    
  <script>
    function aaa(){
        var a = 123;
        console.log(a);

    }
    
    aaa()  ;// 関数は呼び出さないと動きません

  </script>

  • 要素の取得

    var 変数名

    [renshu-3.html]

    
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <div class="eee">
        <ul>
            <li class="fff">1つ目</li>
            <li class="fff">2つ目</li>
            <li class="fff">3つ目</li>
        </ul>
    </div>
    
</body>
</html>

<script>

    function bbb(){
        var fff = document.querySelector(".fff");
        console.log(fff);

    }
    
    bbb()  ;// 関数は呼び出さないと動きません

</script>

  • 要素の書き換え

    var 変数名

    [renshu-33.html]

    
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <div class="eee">
        <ul>
            <li class="fff">1つ目</li>
            <li class="fff">2つ目</li>
            <li class="fff">3つ目</li>
        </ul>

        <input type="button" id="myfunc" value="ぼたん">
    </div>
    
</body>
</html>

<script>
    const myfunc = document.getElementById("myfunc");

    myfunc.onclick = function (){
        var fff = document.querySelector(".fff");
        fff.textContent = "11つ目";

    }
    

</script>

  • クリックイベント

     

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <div class="eee">
        <ul>
            <li class="fff">1つ目</li>
            <li class="fff">2つ目</li>
            <li class="fff">3つ目</li>
        </ul>

        <input type="button" id="myfunc" value="ぼたん">
    </div>
    
</body>
</html>

<script>
    const myfunc = document.getElementById("myfunc");

    myfunc.onclick = function (){
        var fff = document.querySelector(".fff");
        fff.textContent = "11つ目";

    }
    

</script>

  • アラートの練習

    Hello,world をアラートで出してみましょう

    [renshu-1.php]

     

 <script>
   
 </script>

  • こんにちは と出してみましょう

    [renshu-2.html]

    
  <script>
  // body に出力
   
  </script>

  • 変数の練習

    台形の面積を計算してコンソールに出してみましょう

    var 変数名

    [renshu-3.html]

    
  <script>
    var jotei = 10;
    var katei = 5;
    var takasa = 4;
    
   
    
  </script>

    *デベロッパーツールのコンソールを開いてください

  • 条件式の練習

    num3が50よりちいさいか,等しいか,おおきいかをif文で判定してみましょう

  • 繰り返し文の練習

    [renshu-5.html]

    1から31まで選択肢を出してみましょう

    
<select>
  <script>

  </script>
</select>

  • コンフォームを使った分岐の練習

    削除してもいいですか? という確認文字に対してOKなら「削除しました」キャンセルなら「削除を踏みとどまりました」と
    divの中に出してください

    
<script>
 <div id="respo"> </div>
 const respo = document.querySelector("#respo");

</script>