생활코딩 javascript

onclick

<input type="button" onclick="alert('')">
<input type="button" onchange="alert('')">
<input type="button" onkeydown="alert('')">

<input type="button" value="winter" onclick="
  document.querySelector('body').styly.backgroundColor = 'powderblue';
  document.querySelector('body').styly.color = 'white';
    ">

onclick이라는 속성의 값으로는 반드시 자바스크립트가 와야 한다.

비교연산자, boolean

<script>
  document.write(1===1);
  document.write("<br/>1");
  document.write("<br/>2");
  document.write("<br/>3");
  document.write("<br/>4");
  document.write(1<1);
</script>

<script>
    document.write("1<br/>");
    if (true) {
      document.write("2<br/>");
    } else {
      document.write("3<br/>");
    }
    document.write("4<br/>");
</script>

() 안의 boolean값에 따라 실행되는 코드가 다르다.

조건문, 리팩토링

<h2>season</h2>
<input type="button" value="winter" id="season" onclick="
  if (document.querySelector('#season').value === 'winter') {
    document.querySelector('body').style.backgroundColor = 'powderblue';
    document.querySelector('body').style.color = 'white';
    document.querySelector('#season').value = 'summer';
  } else {
    document.querySelector('body').style.backgroundColor = 'green';
    document.querySelector('body').style.color = 'black';
    document.querySelector('#season').value = 'winter';
  }
">

<h2>season</h2>
<input type="button" value="winter" onclick="
  if (this.value === 'winter') {
    document.querySelector('body').style.backgroundColor = 'powderblue';
    document.querySelector('body').style.color = 'white';
    this.value = 'summer';
  } else {
    document.querySelector('body').style.backgroundColor = 'green';
    document.querySelector('body').style.color = 'black';
    this.value = 'winter';
  }
">

리팩토링, 중복을 this라는 키워드로 바꿈

<h2>season</h2>
<input type="button" value="winter" onclick="
var mango = document.querySelector('body');
  if (this.value === 'winter') {
    mango.style.backgroundColor = 'powderblue';
    mango.style.color = 'white';
    this.value = 'summer';
  } else {
    mango.style.backgroundColor = 'green';
    mango.style.color = 'black';
    this.value = 'winter';
  }
">

배열

<script>
  var f = ['mango', 'orange', 'apple'];
</script>

<script>
  f.push('berry');
  f.push('tangerin');
</script>

<script>
  document.write(f[2]+"<br/>");
  document.write(f[0]+"<br/>");
  document.write(f[4]);
</script>

<script>
  document.write(f.length);
</script>

반복문

<ul>
  <script>
    document.write('<li>1</li>');
    var i = 0;
    while ( i < 3 ) {
      document.write('<li>2</li>');
      document.write('<li>3</li>');
      i = i + 1;
    }
    document.write('<li>4</li>');
  </script>
</ul>

배열, 반복문

<script>
  var f = ['mango', 'orange', 'apple'];
</script>

<ul>
  <script>
    var i = 0;
    while ( i < f.length ) {
      document.write('<li>'+f[i]+'</li>')
      i = i +1;
    }
  </script>
</ul>
<br/>
<ul>
  <script>
    var i = 0;
    while ( i < f.length ) {
      document.write('<li><a href="https://www.youtube.com/" target="_blank">'+f[i]+'</a></li>')
      i = i +1;
    }
  </script>
</ul>

<a href="" style="font-size: 30px;">js</a><br/>
<a href="" style="font-size: 30px;">is</a><br/>
<a href="" style="font-size: 30px;">fun</a>  
<h2>season</h2>
<br/>
<input type="button" value="winter" onclick="
  var f = document.querySelector('body');
  if ( this.value === 'winter') {
    f.style.backgroundColor = 'powderblue';
    f.style.color = 'white';
    this.value = 'summer';

    var alist = document.querySelectorAll('a');
    var i = 0;
    while ( i < alist.length ) {
      alist[i].style.color = 'coral';
      i = i + 1;
    }
  } else {
    f.style.backgroundColor = 'green';
    f.style.color = 'black';
    this.value = 'winter';

    var alist = document.querySelectorAll('a');
      alist[0].style.color = 'yellow';
      alist[1].style.color = 'blue';
      alist[2].style.color = 'purple';
    }
">

함수

  <script>
    function no (what) {
      var f = document.querySelector('body');
      if (what.value === 'winter') {
        f.style.backgroundColor = 'powderblue';
        f.style.color = 'white';
        what.value = 'summer';
  
        var alist = document.querySelectorAll('a');
        var i = 0;
        while ( i < alist.length ) {
        alist[i].style.color = 'coral';
        i = i + 1;
         } } else {
          f.style.backgroundColor = 'green';
          f.style.color = 'black';
          what.value = 'winter';
  
          var alist = document.querySelectorAll('a');
          alist[0].style.color = 'yellow';
          alist[1].style.color = 'blue';
          alist[2].style.color = 'purple';
            }}
  </script>  
</head>
<body>
  <a href="" style="font-size: 30px;">js</a><br/>
  <a href="" style="font-size: 30px;">is</a><br/>
  <a href="" style="font-size: 30px;">fun</a>  
  <h2>season</h2>
  <br/>
  <input type="button" value="winter" onclick="
    no(this);
  ">

</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>

<script>
  function koko() {
    document.write(2+3);
  }
  koko();
  function sum(left, right) { //매개변수(파라미터)
    document.write(left+right+"<br/>");
  }
  sum(6,90);//인자

</script>

<script>
 function sum(left, right) {
  return left+right;
 }
 document.write(sum(9,5)+'<br/>');
 document.write('<div style="color: red">'+sum(9,5)+'</div>');
</script>

객체

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

    function body(color) {
      document.querySelector('body').style.color = color;
    }

    function bodyBack(color) {
      document.querySelector('body').style.backgroundColor = color;
    }

    function what(self) {
      var mom = document.querySelector('body');
      if (self.value === 'winter') {
        body('white');
        bodyBack('powderblue');
        self.value = 'summer';

        apple('coral');

      } else {
        body('black');
        bodyBack('green');
        self.value = 'winter';

        apple('yellow');
      }
    }
  </script>

</head>
<body>
  <a href="">apple</a><br/>
  <a href="">mango</a><br/>
  <a href="">melon</a><br/>
  <a href="">orange</a>
  <h2>frontend</h2>
  <br/>
  <input type="text" value="winter" onclick="
    what(this);
  ">

</body>

👆함수로 다 뺐을 때

객체: 서로 연관된 함수와 연관된 변수들을 그룹핑해서 정리 정돈하기 위한 수납 상자.
폴더라고 생각.

예를 들어 document.querySelector는 document라는 객체(폴더)에 속해 있는 querySelector함수.

객체에 속해 있는 함수는 메소드라고 부른다.

  <script>
    var city = {
      "uk" : "london",
      "japan" : "tokyo"
    };
    // 객체 안에 이름을 부여해서 정보 넣기. {} 이용. 
    document.write("uk : "+city.uk+"<br/>");
    document.write("japan : "+city.japan+"<br/>");
    // . = object access operator
    city.america = "new york";
    document.write("america : "+city.america+"<br/>");
    // 객체가 만들어진 상태에서 정보 추가할 때

    // 배열의 형식을 이용해서 index(배열)가 들어가는 곳에
    // key값을 넣어도 정보를 추가할 수 있고, 가져올 수 있음. 
    // 띄어쓰기도 가능. 
    city["ger many"] = "berlin";
    document.write("ger many : "+city["ger many"] );
  </script>

  <h1>iterate</h1>
  <script>
    // city라는 변수가 가르키는 객체에 있는 key값들을 가져오는 반복문 for
    // key는 가지고 오고 싶은 정보에 도달할 수 있는 열쇠. 
    // 배열에서는 key가 아닌 index를 쓴다. (배열은 순서 중요, 객체는 순서x)
    for ( var key in city ) {
      document.write(city[key]+'<br/>')
    }
    for (var key in city ) {
      document.write(key+'<br/>')
    }
    for (var key in city ) {
      document.write(key+" : "+city[key]+'<br/>')
    }
  </script>

👆객체의 데이터를 순회하는 방법

  <h2>property & method</h2>
  <script>
    // 객체에는 함수도 담을 수 있음. 

    city.hi = function () {
      for ( var key in city ) {
        document.write(key+" : "+city[key]+'<br/>')
      }}
    city.hi();
      
    // city.hi = function () {} 은
    // function hi () {} 와 같고
    // var hi = function () {} 와 같은 표현. 
    
  </script>

  <h2>property & method</h2>
  <script>

    city.hi = function () {
      for ( var key in this ) {
        document.write(key+" : "+this[key]+'<br/>')
      }}
    city.hi();
      // hi라는 함수 안에서 함수가 소속되어 있는 객체를 
      // 지칭하는 약속된 기호 -> this
      // city라는 변수의 이름이 바뀌어도 this는 자기 자신을 가리킴. 
  </script>

객체에 소속된 변수(property, ex: uk, japan, hi)의 값으로 함수를 지정할 수 있고, 그러면 객체에 소속된 함수(method)를 만들 수 있다.

<script>
      var fruits = {
        apple : function (color) {
          var alist = document.querySelectorAll('a');
          var i = 0;
          while ( i < alist.length) {
            alist[i].style.color = color;
            i = i + 1;
          }}}

      var uuuuu = {
        bob : function (color) {
          document.querySelector('body').style.color = color;
        },
        // 객체는 property 사이를 구분할 때 , 를 찍는다. 
        ioi : function (color) {
          document.querySelector('body').style.backgroundColor = color;
        }}    

      function what(self) {
        var mom = document.querySelector('body');
        if (self.value === 'winter') {
          uuuuu.bob('white');
          uuuuu.ioi('powderblue');
          self.value = 'summer';

          fruits.apple('coral');

        } else {
          uuuuu.bob('black');
          uuuuu.ioi('green');
          self.value = 'winter';

          fruits.apple('yellow');
        }}

</script>

</head>
<body>
  <a href="">apple</a><br/>
  <a href="">mango</a><br/>
  <a href="">melon</a><br/>
  <a href="">orange</a>
  <h2>frontend</h2>
  <br/>
  <input type="text" value="winter" onclick="
    what(this);
  ">

</body>

공부보단 프로젝트를 먼저 시작해라. 최소한의 도구만을 가지고 문제 해결을 시도해라.
최소한의 도구는 "순서"에 따라 실행되어야 할 명령들이 실행되도록 하는 것.
한계가 오면 그 때 실습을 멈추고 공부를 시작.