toggle

54078 ワード
js テキストリンク
toggle
ある設定値から別の設定値に切り替えます.「切り替え」という言葉は、2つの状態しかない場合、スイッチを押すと1つの値になり、もう一度押すと別の値になるという意味です.
Day and night toggle
event効果のあるボタンの作成(onclick)
---html---
<input type="button" value="night" onclick="
                                            
  document.querySelector('body').style.backgroundColor='black';
  document.querySelector('body').style.color='white';
">
<!--input 태그(value값이 'night')의 onclick 속성으로 body태그를 소환 후, style을 '배경색=black', '글자색=white'로 지정-->

<input type="button" value="day" onclick="
                                          
  document.querySelector('body').style.backgroundColor='white';
  document.querySelector('body').style.backgroundColor='black';
">
<!--input 태그(value값이 'day')의 onclick 속성으로 body태그를 소환 후, style을 '배경색=white', '글자색=black'로 지정-->
//총 버튼이 2개 생긴다('night', 'day')
条件文(if文)を使用して2つのボタンを1つのボタンに結合
---html(2)---
<input id="night_day" type="button" value="night" onclick="
                                                           
 if(document.querySelector('#night_day').value === 'night') {
       document.querySelector('body').style.backgroundColor='black';
       document.querySelector('body').style.color='white';
       document.querySelector('#night_day').value = 'day';                                                           
  } else {
       document.querySelector('body').style.backgroundColor='white';
       document.querySelector('body').style.backgroundColor='black';  
       document.querySelector('#night_day').value = 'night';
  }
">
<!--
if문에 참거짓(bullean)을 주기 위해 id값을 지정한다. 
if문 내에 'id값(#night_day)을 소환한 뒤 value가 night'인 조건을 지정한다(=참)
if조건이 참이기 때문에 night버튼을 (on)click하면 '배경색이 black, 글자색이 white, value값이 day로 바뀜'인 효과가 표현된다.
그렇지 않을 경우(else, false)는 '배경색이 white, 글자색이 black, value값이 night로 바뀜'인 효과가 표현된다.
-->
簡略化されたコードを再パッケージ(重複除外)
---html---
<!--
document.querySelector('#night_day')는 자기 자신을 참조하기 때문에 this로 바꾸기
this로 대체했기 때문에 id값은 지워주기(this자체는 속한 태그 자신을 가리킴)
--> 
<input type="button" value="night" onclick="
                                                          
 if(this.value === 'night') {
       document.querySelector('body').style.backgroundColor='black';
       document.querySelector('body').style.color='white';
       this.value = 'day';                                                           
  } else {
       document.querySelector('body').style.backgroundColor='white';
       document.querySelector('body').style.backgroundColor='black';  
       this.value = 'night';
  }
">

<!--
document.querySelector('body')의 중복을 제거하기 위해 target이라는 이름의 변수로 지정. 
전부 target으로 대체한다(target변수로 핸들링 가능)
--> 
<input type="button" value="night" onclick="
                                      
 var target = document.querySelector('body');
                                            
 if(this.value === 'night') {
       target.style.backgroundColor='black';
       target.style.color='white';
       this.value = 'day';                                                           
  } else {
       target.style.backgroundColor='white';
       target.style.color='black';  
       this.value = 'night';
  }
">
繰り返し文を使用してbodyのすべてのタグスタイル効果をループ
---html---
<!--
body내 모든 a태그를 소환(document.querySelectorAll('a'))하여 links라는 이름의 변수 지정.
while반복문 실행(실행내용: links에 style.color 효과 주기)
--> 
var links = document.querySelectorAll('a');

var i = 0;
while ( i &lt; links.length){
   links[i].style.color='red';
   i=i+1;
}    

<!--
links를 반복문(while)에 적용하여 속성을 지정한 위 코드를 if문 내에 적용하기
if가 참이면 night모드(a.color=red), if가 거짓(else)이면 day모드(a.color=blue) 적용
--> 
<input type="button" value="night" onclick="
                                      
 var target = document.querySelector('body');
                                            
 if(this.value === 'night') {
     target.style.backgroundColor='black';
     target.style.color='white';
     this.value = 'day';                                           
                                            
<!--links가 red가 되는 while문 적용-->       
     var links = document.querySelectorAll('a');
     var i = 0;
     while ( i < links.length){
        links[i].style.color='red';
        i=i+1;
     }                                      
                                                                                
  } else {
     target.style.backgroundColor='white';
     target.style.color='black';  
     this.value = 'night';

<!--links가 blue가 되는 while문 적용-->  
     var links = document.querySelectorAll('a');
     var i = 0;
     while ( i < links.length){
        links[i].style.color='blue';
        i=i+1;
     }                                             
}
">
jsに分割
(1)
---html---
<input type="button" value="night" onclick="
  // onclick안의 event handler 내용은 전부 script로 빼주기
">


---js---
<script>
  
 function nightDayHandler () {     //nightDayHandler 함수로 전체 감싸준다
   
   var target = document.querySelector('body');

   if(this.value === 'night') {
       target.style.backgroundColor='black';
       target.style.color='white';
       this.value = 'day';                                           

       var links = document.querySelectorAll('a');
       var i = 0;
       while ( i < links.length){
          links[i].style.color='red';
          i=i+1;
       }                                      

    } else {
       target.style.backgroundColor='white';
       target.style.color='black';  
       this.value = 'night';

       var links = document.querySelectorAll('a');
       var i = 0;
       while ( i < links.length){
          links[i].style.color='blue';
          i=i+1;
       }                                             
  }
}

</script>
(2)
---html---
<input type="button" value="night" onclick="
  nightDayHandler (this)   
// nightDayHandler (this) onclick 안에 추가하여 실행 연결고리 만들기
// onclik 내에는 self가 아닌 this로 써준다.
">

/*
this: 현재 context(객체)를 참조한다(자신의 객체 변수를 가리킴), instance의 함수나 변수를 가리킨다 
self: window를 참조한다. 클래스 자체에 속하는 함수나 변수를 가리킬 때 사용한다
*/

---js---
<script>
  
function nightDayHandler (self) {     
  //nightDayHandler 함수의 매개변수를 self로 바꾸고 script 내 모든 this를 self로 바꿔준다
   
   var target = document.querySelector('body');

   if(self.value === 'night') {
       target.style.backgroundColor='black';
       target.style.color='white';
       self.value = 'day';                                           

       var links = document.querySelectorAll('a');
       var i = 0;
       while ( i < links.length){
          links[i].style.color='red';
          i=i+1;
       }                                      

    } else {
       target.style.backgroundColor='white';
       target.style.color='black';  
       self.value = 'night';

       var links = document.querySelectorAll('a');
       var i = 0;
       while ( i < links.length){
          links[i].style.color='blue';
          i=i+1;
       }                                             
  }
}
</script>
関数の作成による再パッケージ
(1)
---html---
<input type="button" value="night" onclick="
  nightDayHandler (this)   
">

---js---
<script>
  
// 'link 변수를 통해 선언된 반복문 내용'을 함수로 만들어주기
 
function linksSetColor (color) {     
  //linksSetColor라는 함수와 (color)매개변수를 통해 함수를 만들어주고 links의 내용을 넣는다
  //매개변수 지정을 통해 어떤 값이든 유연하게 넣을 수 있음
      var links = document.querySelectorAll('a');
      var i = 0;
      while ( i < links.length){
        links[i].style.color=color;  //(color)매개변수를 넣는다
          i=i+1;
       }    
}

 function nightDayHandler (self) {     
   
   var target = document.querySelector('body');

   if(self.value === 'night') {
       target.style.backgroundColor='black';
       target.style.color='white';
       self.value = 'day';                                                                             
       
       linksSetColor ('red');   // 위에서 함수로 정의한 linksSetColor함수로 표현한다
     
    } else {
       target.style.backgroundColor='white';
       target.style.color='black';  
       self.value = 'night';

       linksSetColor ('blue');   // 위에서 함수로 정의한 linksSetColor함수로 표현한다                                      
  }
}
                                
</script>
(2)
---html---
<input type="button" value="night" onclick="
  nightDayHandler (this)   
">

---js---
<script>
  
// 'target.style.color' 의 중복을 없애기 위해 함수로 만들어주기
 
function bodySetColor (color) {     
  //bodySetColor라는 함수와 (color)매개변수를 통해 함수를 만들어주고 'target.style.color'의 내용을 넣는다
  //nightDayHandler 내에 "var target = document.querySelector('body');"라고 정의되어 있기 때문에 target부분을 document.querySelector('body')로 변환한다
     document.querySelector('body').style.color=color;  //매개변수(color) 지정을 통해 어떤 값이든 유연하게 넣을 수 있음
}

function linksSetColor (color) {     
      var links = document.querySelectorAll('a');
      var i = 0;
      while ( i < links.length){
        links[i].style.color=color;  
          i=i+1;
       }    
}

 function nightDayHandler (self) {     
   
   var target = document.querySelector('body');

   if(self.value === 'night') {
       target.style.backgroundColor='black';
       bodySetColor ('white');  // 위에서 함수로 정의한 bodySetColor함수로 표현한다
       self.value = 'day';                                                                             
       
       linksSetColor ('red');   
     
    } else {
       target.style.backgroundColor='white';
       bodySetColor ('black');  // 위에서 함수로 정의한 bodySetColor함수로 표현한다
       self.value = 'night';

       linksSetColor ('blue');                                
  }
}
                                
</script>                                
(3)
---html---
<input type="button" value="night" onclick="
  nightDayHandler (this)   
">

---js---
<script>
  
// 'target.style.backgroundColor' 의 중복을 없애기 위해 함수로 만들어주기

function bodySetBackgroundColor (color) { 
  //bodySetBackgroundColor라는 함수와 (color)매개변수를 통해 함수를 만들어주고 'target.style.backgroundColor'의 내용을 넣는다
  //nightDayHandler 내에 "var target = document.querySelector('body');"라고 정의되어 있기 때문에 target부분을 document.querySelector('body')로 변환한다
     document.querySelector('body').style.backgroundColor=color;
  
function bodySetColor (color) {     
     document.querySelector('body').style.color=color;  
}
  
function linksSetColor (color) {     
      var links = document.querySelectorAll('a');
      var i = 0;
      while ( i < links.length){
        links[i].style.color=color;  
          i=i+1;
       }    
}
  
 function nightDayHandler (self) {     
   
   var target = document.querySelector('body');

   if(self.value === 'night') {
       bodySetBackgroundColor ('black');  // 위에서 함수로 정의한 bodySetBackgroundColor함수로 표현한다
       bodySetColor ('white');  
       self.value = 'day';                                                                             
       
       linksSetColor ('red');   
     
    } else {
       bodySetBackgroundColor ('white');  // 위에서 함수로 정의한 bodySetBackgroundColor함수로 표현한다
       bodySetColor ('black');  
       self.value = 'night';

       linksSetColor ('blue');                                
  }
}

</script>
オブジェクト(関連する関数または変数をバインド)グループを作成する
---html---
<input type="button" value="night" onclick="
  nightDayHandler (this)   
">

---js---
<script>
  
  /* 함수 bodySetBackgroundColor, 함수  bodySetColor 모두 body가 공통이므로
  body라는 이름의 객체 생성 후 공통부분(body)을 제외한 변수명의 함수를 넣어준다 */
  
var body = {
 
  setColor: function (color) {     
     document.querySelector('body').style.color=color;  
  },  // body객체 내 함수를 배열해 주므로 콤마(,)로 구분지어준다
  setBackgroundColor: function (color) { 
     document.querySelector('body').style.backgroundColor=color;
  }

}

  /* 함수 linksSetColor에 대해 links라는 이름의 객체 생성 후 links를 제외한 변수명의 함수를 넣어준다  */

var links = {
 
 setcolor: function (color) {     
      var links = document.querySelectorAll('a');
      var i = 0;
      while ( i < links.length){
        links[i].style.color=color;  
          i=i+1;
       }    
  }

}

//객체 body와 links로 묶어준 뒤 함수를 재정의 하였기 때문에 (객체).(메소드) 방식으로 다시 정의한다  
 function nightDayHandler (self) {     
   
   var target = document.querySelector('body');

   if(self.value === 'night') {
       body.setBackgroundColor ('black');  //(객체=body).(메소드=setBackgroundColor)
       body.setColor ('white');   //(객체=body).(메소드=setColor)
       self.value = 'day';                                                                             
      
       links.setColor ('red');   //(객체=links).(메소드=setColor)
     
    } else {
       body.setBackgroundColor ('white');  
       body.setColor ('black');  
       self.value = 'night';

       links.setColor ('blue');                                
  }
}
                                
</script>
Android実戦テクニックの三十九:メール送受信
【MySQL学習ログ】実戦項目