TIL 210619

31502 ワード
JavaScript TIL テキストリンク

今日やったこと

  • 生活符号JavaScript講の対象

    • 学習の内容


    アレイと繰り返し文


    アレイ


    データ量が増加するにつれて、関連するデータをクリーンアップします.
    var fruits = ["apple", "banana"]; // 배열을 변수에 담기
document.write(fruits[0]); // 배열의 첫 번째 자리의 값(apple)
document.write(fruits[1]); // 배열의 두 번째 자리의 값(banana)

document.write(fruits.length); // 배열의 들어있는 값 개수 확인 (2개)

fruits.push('melon'); 
fruits.push('watermelon'); // 배열에 값 추가

document.write(fruits.length);  // 배열의 들어있는 값 개수 확인 (4개)
    Array - JavaScript | MDN

    ループステートメント


    順序で実行されるプログラムの実行順序を制御する制御文.
  • 条件文のように、カッコにはtrueまたはfalse値が含まれている必要があります.
    • document.write('<li>1</li>');
var i = 0; // i의 값은 현재 0이다.
while(i < 3) {  // i의 값은 3보다 작다(true) -> 실행
		document.write('<li>2</li>');
		document.write('<li>3</li>');
		i = i + 1; //i의 값은 현재 1이 된다 -> 반복
}
document.write('<li>4</li>');

    アレイと繰り返し文

    <h1>fruits</h1>
  <script>
    var fruits = ['apple', 'banana', 'melon', 'watermelon'];
  </script>
  <ul>
    <script>
      var i = 0;
      while(i < fruits.length) {
        document.write('<li>' +fruits[i]+ '</li>');
        i = i + 1;
      }
    </script>
  </ul>
    // night & day 모드 버튼 만들기
<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';

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'powderblue';
        i = i + 1;
      }
    } else {
      target.style.backgroundColor = 'white';  
      target.style.color = 'black';
      this.value = 'night';

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

    関数＃カンスウ＃


    関数を使用する理由

  • コードの数が多ければ多いほど、Webページのサイズが大きくなり、コスト、時間、努力が必要になります.
  • 不連続な繰り返しは繰り返し文
    • を書くのが難しい.

    基本構文


    コード
  • 未使用関数
    <body>
  <ul>
    <script>
      document.write('<li>1</li>');
      document.write('<li>2-1</li>');
      document.write('<li>2-2</li>');
      document.write('<li>3</li>');
      document.write('<li>2-1</li>');
      document.write('<li>2-2</li>');
    </script>
  </ul>
</body>
  • 関数を使用するコード
    • <body>
  <ul>
    <script>
      function two(){
        document.write('<li>2-1</li>');
        document.write('<li>2-2</li>');
      }
      document.write('<li>1</li>');
      two();
      document.write('<li>3</li>');
      two();
    </script>
  </ul>
</body>
    実行結果はまったく同じ結果を生成しますが、内部にはまったく異なるメカニズムがあります.

    パラメータとパラメータ


    関数の入力値に対応するものをパラメータ、パラメータと呼びます.
    function sum(left, right){ // left, right의 값을 매개변수라고 함
 document.write(left+right);
}
sum(2,3); //2와 3에 해당하는 값을 인자 라고 함
sum(3,4);

    リターンマッチ


    関数を実行した後、その結果値を関数の外に渡します.
  • 原子化機能は、異なる環境で使用することができ、
    • の自由度を得ることができる.
    function sum2(left, right){
  return left+right;
}
document.write(sum2(2,3)+'<br>');
document.write('<div style="color:red">'+sum2(2,3)+'</div>');
document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');

    オブジェクトオブジェクトオブジェクト


    関数とその相関変数が増加すると,複雑度の限界に達する.
    →相互に関連付けられた関数と相互に関連付けられた変数を同じ名前で組み合わせてオブジェクトと呼ぶ
    var coworkers = {
	"programmer":"egoing",
	"designer":"leezche"
}; // 객체를 만드는 방법

document.write("programmer : "+coworkers.programmer);
document.write("designer : "+coworkers.designer);
// 만들어져있는 객체에서 데이터를 가져오는 방법

coworkers.bookeeper = "duru";
document.write("bookeeper : "+coworkers.bookeeper);
// 객체에 데이터를 추가하는 법

coworkers["data scientist"] = "teaho";
document.write("data scientist : "+coworkers["data scientist"]+"<br>");

    オブジェクトと繰り返し文

    for(var key in coworkers) { 
	document.write(key+' : '+coworkers["data scientist"]+"<br>");
}
//coworkers라는 변수가 가리키는 객체에 있는 Key 값들을 가져오는 반복문

    オブジェクトの構成とメソッド

    coworkers.showAll = function(){ 
	for(var key in this) { 
		document.write(key+' : '+coworkers["data scientist"]+"<br>");
	}
} 
coworkers.showAll();
// 객체에 소속된 변수(프로퍼티)의 값으로 객체에 소속된 함수(메소드)를 만들 수 있음
  • オブジェクトオブジェクトオブジェクトの輪郭と輪郭を区別するときにカンマ
    • を付ける

    最終「night&dayモード」ボタンコード

    // night & day 모드 버튼 만들기
var Links = {
	setColor:function(color){
		var alist = document.querySelectorAll('a');
    var i = 0;
    while(i < alist.length){
	    alist[i].style.color = color;
	    i = i + 1;
	  }
	}
}
var Body = { 
  setColor:function (color){
    document.querySelector('body').style.color = color;
  },
  setBackgroundColor:function (color){
    document.querySelector('body').style.backgroundColor = color; 
  }
}
    
function nightDayHandler(self){
  var target = document.querySelector('body');
  if (self.value === 'night') {
	  Body.setBackgroundColor('black');  
	  Body.setColor('white'); 
	  self.value = 'day';

	  Links.setColor('powderblue')
  } else {
	  Body.setBackgroundColor('white');  
	  Body.setColor('black');
	  self.value = 'night';

	  Links.setColor('blue')
  }
}
    知っているようですがよくわかりません.復習しよう復習...!
    を入手してtraefik
    38)田舎選択DTO