JavaScriptとPHPの違い

javascriptを使うシーン

• 1. モーダル
  2. アラート
  3. 郵便番号入力
  4. パスワード照合
  5. htmlアラート

• 1. アニメーション,
  2. 無限スクロール,
  3. アコーディオン,
  4. リストレイアウト,
  5. ローダー

• 1. スライダー,
  2. 音声読み上げ,
  3. イベントカレンダー
  4. カウントダウン

• 1. 色ツール,
  2. パララックス

＊ javascriptはプラウザがhtmlを読み込んだあとに,もともとは存在しなかったタグ要素を新たに追加したり、変更、削除する事ができます

[renshu-1.php]

 
<?php
 echo "hello";
?> 

 <script>
  alert("こんにちは"); //文字列の表示
 </script>

ブラウザのデベロッパツールで確認しましょう

[renshu-2.html]

  <script>
  // body に出力
    document.body.innerText = "Hello World!!"; 
  </script>
   

phpと違って変数は宣言してから使わなければなりません

var 変数名

[renshu-3.html]

  <script>
    var num1 = 10;
    var num2 = 5;
    var num3 = "
";

    console.log( num1 + num2 );  //足し算
    console.log( num1 - num2 );  //引き算
    console.log( num1 * num2 );  //掛け算
    console.log( num1 / num2 );  //割り算
    console.log( num1 % num2 );  //余り
    console.log( num3 + num1 );  //文字列の結合
  </script>
   

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

*コードの実行中に値が変わらない場合はvarではなく,constで宣言します

*phpと同じです
ifの複数条件の練習

[renshu-5.html]

  <script>

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

*phpと同じです

[renshu-6.html]

  <script>

    var yobi = [];
    yobi[0] = "日曜日";
    yobi[1] = "月曜日";
    yobi[2] = "火曜日";

    console.log(yobi);
  </script>
   

*phpと同じですが,インデックスの0,1,2は省略できません

cssと同じように独立したファイルに書くこともできます.この場合の拡張子は.jsです

[renshu-6.js]

    var yobi = [];
    yobi[0] = "日曜日";
    yobi[1] = "月曜日";
    yobi[2] = "火曜日";

    console.log(yobi);
   

renshu-6.htmlからスクリプトを切り取って,renshu-6.js を新たに作って貼り付けてください

[renshu-6.html]

OKかキャンセルが選べるアラートです,ユーザーの選択で結果を分岐することができます

[renshu-7.html]

  <script>

    var flg; //真偽を入れる変数の宣言
    
    flg = confirm("背景の色を変えてもいいですか？"); //真偽の代入
    
    if (flg == true) {
      document.bgColor = "green"; //真なら背景色変更
    }else{
      document.body.innerText = "キャンセルしたので変えてません"; 
    }
    
   </script>
   

    function 関数名(引数1, 引数2, ...){
      実行する処理1;
      実行する処理2;
      ...

      return 戻り値;
    }
  

関数を宣言するには function のあとに関数名を指定します。
関数名のあとの ( から ) の中に引数を指定します。複数の引数がある場合にはカンマ(,)で区切って記述して下さい。
引数が無い場合には何も記述しなくてもいいのですがその場合でも ( と ) は記述する必要があります。

  関数名(引数, ...);
  

[renshu-8.html]

<select name="thismonth"> </select>
<input type="button" value="28まで" onclick="boxCheck(28)">
<input type="button" value="29まで" onclick="boxCheck(29)">
<input type="button" value="30まで" onclick="boxCheck(30)">


    <script>
    
    function boxCheck(endday){
    
      const thismonth = document.querySelector("[name='thismonth']");
      var option = '';

      for( i = 1; i <= endday; i++ ){
        option += '<option>' + i ;
      }

      thismonth.innerHTML = option;
      
    }
    
    </script>
   

呼び出す際に関数に渡したい値を（）の中に入れて呼び出します
関数側では（）の中に書いた文字が変数として扱われ,渡された値(引数)が代入されます