JavaScript2

17838 ワード
テキストリンク

学習内容



<div>
                <h4><a href="./index.html">DAY +4</a> </h4>
                <input type="button" id="dnbtn" value="Night" onclick="
                    let button = this;
                    if (button.value==='Night'){
                        document.querySelector('body').style.
                        backgroundColor='black';
                        document.querySelector('body').style.
                        color='White';
                        button.value='Light'
                        
                    }else{
                        document.querySelector('body').style.
                        backgroundColor='white';
                        document.querySelector('body').style.
                        color='black';
                        button.value='Night'                        
                    }
                ">
            </div>

if構文とelseを使用して、既存の各Night/Lightボタンを1つのボタンに結合します。

<html>
  <body>
  	        <div id="container">
            <div>
                <h4><a href="./index.html">DAY +4</a> </h4>
                <input type="button" id="dnbtn" value="Night" onclick="
                    let button = this;
                    if (button.value==='Night'){
                        document.querySelector('body').style.
                        backgroundColor='black';
                        document.querySelector('body').style.
                        color='White';
                        button.value='Light'
                        
                    }else{
                        document.querySelector('body').style.
                        backgroundColor='white';
                        document.querySelector('body').style.
                        color='black';
                        button.value='Night'                        
                    }
                ">
            </div>
  </body>
</html>

for文の繰り返し文featを使用します。整列

<h1> 배열 Array</h1>
  <script>
      let topics = ['html','css','js'];
      let members = ['egoing','less','dim'];
      console.log(topics.length);
      console.log(topics[0]);        
  </script>
  
  <h1>반복문 Loop</h1>
  <script>
      console.log(1);
      for ( let i=0; i<3 ;i=i+1 ){
          console.log(2);
          console.log(3);
      }
      console.log(4);
  </script>
  
  <h1>Array+ Loop</h1>
  <script>
      topics = ['html','css','js']
      for(let i=0; i<topics.length; i=i+1){
          document.write('<li>'+topics[i]+'</li>');
      }
  </script>

わからないところ


繰り返し文に対する理解度が足りない

<script>
      console.log(1);
      for ( let i=0; i<3 ;i=i+1 ){
          console.log(2);
          console.log(3);
      }
      console.log(4);
</script>

ソリューション


繰り返した文にどのような文法があるかを見つけます.
繰り返し文を使用して、すべてのaラベルの色を変更してみます.

for文を使用する場合:


繰り返し回数が確定しました.
アレイとの併用

while文を使用する場合:


無限ループまたは特定の条件が満たされるまで繰り返さなければなりません.
主にファイルの読み取りと書き込みに使用

while構文を使用してコードを記述する

<input type="button" id="dnbtn" value="Night" onclick="
                let button = this;
                if (button.value==='Night'){
                    document.querySelector('body').style.
                    backgroundColor='black';
                    document.querySelector('body').style.
                    color='White';

                    let alist = document.querySelectorAll('a');
                    let i = 0;
                    while(i<alist.length){
                    alist[i].style.color = 'snow';
                    i+=1
    }

                    button.value='Light'
                    
                }else{
                    document.querySelector('body').style.
                    backgroundColor='white';
                    document.querySelector('body').style.
                    color='black';

                    let alist = document.querySelectorAll('a');
                    let i = 0;
                    while(i<alist.length){
                        alist[i].style.color = 'black';
                        i+=1
                    }
                    button.value='Night'                        
                }

学習の心得.


条件文ifとelsedの使用を理解し,困難な重複文の使用と使用に基づいて,他の重複文構造についてより多くの理解を得た.
State prev
[プログラマー:Lv 2]オープンチャットルーム(ft.kakao)