開発ノート【JavaScript言語】

制御構文

***文

          var x = 99;
          if (x >= 100) {
            console.log('100以上の値です')
          } else {
            console.log('100未満の値です')
          }
        

***

***文

          var y = 59;
          if (y >= 90) {
            console.log('A');
          } else if (y >= 80) {
            console.log('B');
          } else if (y >= 60) {
            console.log('C');
          } else {
            console.log('D');
          }
        

***

***文

          var n = 4;
          switch (n) {
            case 1:
              console.log('数値は1です');
              break;
            case 2:
              console.log('数値は2です');
              break;
            case 3:
              console.log('数値は3です');
              break;
            default:
              console.log('範囲外です');
              break;
          }
        

***

***文

          for (var i = 1; i <= 3; i++) {
            console.log(i);
          }
        

***

***文

          var j = 1;
          while(j <= 3) {
            console.log (j);
            j++;
          }
        

***

***文

          var k = 1;
          do {
            console.log(k);
            k++;
          } while (k <= 3);
        

***

***文

          var total = 0;
          for (var i = 1; i <= 100; i++) {
            if ((i % 2) == 0) {
              // total = total + i;
              total += i;
            }
          }
          console.log (total);
        

配列

***文

          var colors = ['Red','Green','Blue','Yellow','Black']
          console.log(colors[2]);
          

          var scores = [
          [98,100,99],
          [80,81,97],
          [70,96,85]
          ];
          console.log(scores[1][1]);
          
        

***

***文

          var colors = ['Red','Green','Blue'];
          console.log(colors[0]);
          console.log(colors[1]);
          console.log(colors[2]);
        

連想配列

***文

          var user = {name:'山田花子',gender:'女性',birth:'1990/1/1'};
          console.log(user.name);
          console.log(user.gender);
          console.log(user.birth);
        

***

***文

          var scores = [100, 90, 80, 70 ,60];
          var sum = 0;
          for (var i = 0; i < scores.length; i++) {
            sum += scores[i];
          }
          var average = sum / scores.length;
          // console.log(scores.length);
          console.log('合計値：' + sum);
          console.log('平均値：' + average);
        

関数

***文

          // function 命令
          function getRectangle(height,width) {
            return height * width;
          }
          console.log(getRectangle(3, 5));

          // 関数リテラル（匿名関数、無名関数とも言う）による関数の定義
          var getRectangle = function(height, width) {
            return height * width;
          };
          console.log (getRectangle(3, 5));

          // Function コンストラクター
          var getRectangle = new Function('height','width','return height * width');
          console.log(getRectangle(3, 5));
        

JavaScript DOM操作

***文

          
          
            
pタグの文字列です。
            
            
          

          function show() {
            var result = document.getElementById('result');
            console.log(result.innerText);

            var nowDate = new Date();
            result.innerText = nowDate.toLocaleString();
          }
        

タグ名をキーに要素を取得

***文

          
            
要素1(div)
            
要素2(p)
            
要素3(div)
            要素4(span)
            
要素5(div)
            
            
          

          function showElements() {
            var elements = document.getElementsByTagName('div');
            for (var i = 0; i < elements.length; i++) {
              console.log(elements[i].innerText);
            }
          }/
        

name属性をキーに要素を取得

***文

          
            
            
            
          

          function showElements() {
            var elements = document.getElementsByName('result');
            console.log(elements[0].value)
          }
        

class属性をキーに要素を取得

***文

          
            

              
要素1
              
要素2
              
要素3
              
要素4
              
要素5
            
            
            
          

          function showElements() {
            var elements = document.getElementsByClassName('foo');
            for (var i = 0; i < elements.length; i++) {
              console.log(elements[i].innerText);
            }
          }
        

ノードを追加

***文

          
            

            
            
            
          

          function append() {
            // li要素を生成
            var li = document.createElement('li');
            // テキストノードを生成
            var text = document.createTextNode('追加文字列');
            // liタグの要素に、テキストノード textを追加
            // console.log(text);
            li.appendChild(text);
            // console.log(li);

          　↓↓↓　検証すると変な""が出てくるが、問題ない　↓↓↓

            // idがlistsのulタグに、liを追加。具体的には
追加文字列
が、追加される。
            // lists.appendChild(li);
            var listsElement = document.getElementById( "lists" );
            listsElement.appendChild(li);
          }
        

ノードの置換

***文

          
            

              
古い要素です。
            
            
            
          

          function replace() {
            // 空のli要素を作成
            var newList = document.createElement('li');
            // 生成したノードにid属性"newList"を付与
            newList.setAttribute('id', 'newList');
            // テキストノードを生成
            var newText = document.createTextNode('新しい要素です');
            // 生成したノードを、空のli要素の子ノードとして追加
            newList.appendChild(newText);
            // 置換前の変数oldListの参照を変数oldListに代入。
            // (参照とは、オブジェクトへのリンクのことを言う)
            // https://developer.mozilla.org/ja/docs/Glossary/Object_reference
            var oldList = document.getElementById('oldList');
            // 親ノードulの参照を変数parentNodeに代入
            var parentNode = oldList.parentNode;
            // 既存ノードoldListを、新規に作成したli要素newListと置換
            parentNode.replaceChild(newList, oldList);
          }
        

***

***文

ノードの削除

***文

          
            

              
要素1
              
要素2
              
要素3
              
要素4
              
要素5
            
            
            
          

          function remove() {
            var parentElement = document.getElementById('lists');
            var elements = parentElement.getElementsByTagName('li');
            var removeIndex = elements.length - 1;
            parentElement.removeChild(elements[removeIndex]);
          }
        

入力されたノードを追加

***文

          
            

            
            
            
            
          

          function append() {

            // テキストボックスの要素を取得
            var textbox = document.getElementById('textbox');

            // li要素を生成
            var li = document.createElement('li');
            // テキストノードを生成
            var text = document.createTextNode(textbox.value);
            // liタグの要素に、テキストノード textを追加
            li.appendChild(text);
            // idがlistsのulタグに、liを追加。具体的には
追加文字列
が、追加される。
            // lists.appendChild(li);
            var lists = document.getElementById('lists');
            lists.appendChild(li);
          }
        

***

***文

***

***文

***

***文