사자자리

[웹기초] 생활코딩 JavaScript 22 ~ JavaScript 29 본문

웹기초/생활코딩 WEB 2 - JavaScript

[웹기초] 생활코딩 JavaScript 22 ~ JavaScript 29

renne 2022. 6. 19. 17:58

배열과 반복문을 통해, 리스트의 항목들을 웹페이지에 목차로 표기하기

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script>
      var blacks = ['Bellatrix', 'Andromeda', 'Narcissa', 'Sirius', 'Regulus'];
    </script>
    <ol>
      <script>
        var i = 0;
        while (i < blacks.length) {
          document.write('<li>' + blacks[i] + '</li>');
          i += 1;
        }
      </script>
    </ol>
  </body>
</html>

 

document.querySelectorAll('a')

 - 웹페이지의 모든 a 태그를 선택한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Black</h1>
    <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';

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

        a_list = document.querySelectorAll('a');
        var i = 0;
        while (i < a_list.length){
            a_list[i].style.color = 'blue';
            i += 1;
        }
      }
    ">
    <ol>
      <li><a href="Bellatrix.html">Bellatrix</a></li>
      <li><a href="Andromeda.html">Andromeda</a></li>
      <li><a href="Narcissa.html">Narcissa</a></li>
      <li><a href="Sirius.html">Sirius</a></li>
      <li><a href="Regulus.html">Regulus</a></li>
    </ol>
  </body>
</html>

 

function

 - 함수: 많아진 코드를 정리정돈하기 위한 도구

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script>
      function sum(left, right){
        document.write(left + right + '<br>');
      }
      sum(19, 61);	//80
      sum(19, 79);	//98
    </script>
  </body>
</html>

매개변수(parameter): 인자를 함수 안으로 매개해주는 변수 ex) left, right

인자(argument): 함수로 전달되는 값. ex) 19, 61

 

return

 - 반환

 - 함수의 기능을 다양한 맥락에서 활용할 수 있는 자유도가 생긴다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script>
      function sum(left, right){
        return (left + right);
      }
      document.write('<div style = "color: green">' + sum(19, 61) + '</div>')	//sum(19,61) === 80
    </script>
  </body>
</html>

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
    function day_night_button(self){
      var target = document.querySelector('body');
      if (self.value === 'night'){
        target.style.backgroundColor = 'black';
        target.style.color = 'white';
        self.value = 'day';

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

        a_list = document.querySelectorAll('a');
        var i = 0;
        while (i < a_list.length){
            a_list[i].style.color = 'blue';
            i += 1;
        }
      }
    }
    </script>
  </head>
  <body>
    <h1>Black</h1>
    <input type="button" value="night" onclick="day_night_button(this)">
    <ol>
      <li><a href="Bellatrix.html">Bellatrix</a></li>
      <li><a href="Andromeda.html">Andromeda</a></li>
      <li><a href="Narcissa.html">Narcissa</a></li>
      <li><a href="Sirius.html">Sirius</a></li>
      <li><a href="Regulus.html">Regulus</a></li>
    </ol>
    <input type="button" value="night" onclick="day_night_button(this)">
  </body>
</html>

onclick의 기능을 함수로 따로 만들 때, this는 input 태그를 가리키던 것이었으므로 self 매개변수로 대체하고, 함수를 호출할 때 this를 인자로 입력해야 한다.

 

객체(object)

 - 정리정돈의 수단: 서로 연관된 함수와 변수를 같은 이름으로 그룹핑해서 정리정돈하기 위한 도구

 - 폴더, 디렉토리를 보는 관점으로 볼 수 있다.

 - 메소드(method): 객체에 속해있는 함수

<script>
    document.write() //document라는 객체에 속한 함수 write()
</script>

 

저작자표시 (새창열림)

'웹기초 > 생활코딩 WEB 2 - JavaScript' 카테고리의 다른 글

[웹기초] 생활코딩 JavaScript 30 ~ JavaScript 35  (0) 2022.06.26
[웹기초] 생활코딩 JavaScript 15 ~ JavaScript 21  (0) 2022.05.29
[웹기초] 생활코딩 JavaScript 9 ~ JavaScript 14  (0) 2022.05.22
[웹기초] 생활코딩 JavaScript 1 ~ JavaScript 8  (0) 2022.05.15
'웹기초/생활코딩 WEB 2 - JavaScript' Related Articles more
Comments