옥수수와 식빵 그리고 코딩

29. 객체(object) 본문

2023/생활코딩

29. 객체(object)

옥식 2023. 9. 30. 16:04

괸장히 중요하지만 엄청 어려움..!

프로그래밍의 큰 산 두개

1. 함수 2. 객체

객체는 함수라는 기반 위에 존재하는 것.

객체를 알기에는 너무나 많음 그래서 여기서는 그 한가지. 하나의 객체의 특성, 존재 이유, 또는 기능에 집중에서 앞으로 나아가고, 앞으로 나아가면서 주변을 둘러보고 익숙해 지도록 하자.

 

객체의 얼굴 중 하나는 정리정돈의 수단!

정리정돈에는 함수도 있음.

함수가 많아지면 함수와 연관되어있는 변수도 엄청나게 많아짐 그럼 복잡도의 한계에 도달하는데 

이런 상황에서 서로 연관된 함수와 서로 연관된 변수들을 같은 이름으로 그룹핑해서 잘 정리정돈하기 위한 도구를 일단 객체라고 할 수 있음.

 

vs code 팁
중복되는 단어 한번에 수정은 
command + shift + L

 

target.style.color='white';

웹페이지의 바디태그 배경색을 흰색으로 한다는 뜼.

한줄짜리라 함수화 하는게 의미가 없을 수도 있지만, 한줄이더라도 나중에 의미를 파악하는게 어려워 질 수 있는 경우 함수를 통해 그 로직에 의미를 부여하는 것도 아주 좋음!

 

만약에 함수이름을이 중복되는 경우 (같은 함수이름)

앞에 있던 함수가 뒤에 있던 함수로 덮여져 삭제되어버림

 

그래서 SetColor 이렇게 하는 것보다 LinksSetColor, BodySetBAckgroundColor이럭식으로 구체적으로 적어줘야 중복을 피할 수 있음.

그런데 이런게 일억개라면..?

이런것도 점점 힘들어짐.

 

그래서 객체!. 객체는 폴더라고 보면 됨. 여러개의 파일을 종류별로 폴더속에 착착 정리할 수 있듯이 엄청 많은 함수나 변수가 있어도 객체가 있으면 잘 정리해 둘 수 있음. 

그리고 기존 함수들은 이미 개체속에 저장되어 있는 것들이 많은데 이렇게 객체속에 저장되어있는 함수들은 함수가 아니라 메소드(method)라고 부름.

 

객체 없이 함수 여러개로 만든 웹페이지

<!doctype html>
<html>
<head>
  <title>WEB1 - JavaScript</title>
  <meta charset="utf-8">
  <script>
    function LinksSetColor(color){ //매개변수 이름으로 color줌
      var alist = document.querySelectorAll('a') ; //어두워지면 <a>태그 글자색 하늘색으로
        var i = 0;  
        while (i<alist.length) {
            alist[i].style.color = color; //그래서 여기도 원하는 인자를 매개변수로 받기때문에 매개변수랑 동일한 값으로.
            //console.log(alist[i]);
            i = i+1;
        }
    }

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

    function nightDayHandler(self){ //웹브라우저에게 이게 이 함수의 이름이다라른걸 알림
        var target = document.querySelector('body');
        if(self.value === 'night'){
        BodySetBackgroundColor('black');
        BodySetColor('white');
        self.value = 'day';

        LinksSetColor('powderblue');

      } else {
        BodySetBackgroundColor('white');
        BodySetColor('black');
        self.value = 'night';

        LinksSetColor('blue');

      }
    }
  </script>

</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
    ">
    
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>JavaScript</h2>
  <p>
    JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
    내가해냄
  </p>
</body>
</html>

 

검사하기로 잘못된 부분 찾아내는건 정말.. 정말 최고다..!

오늘읠 틀린그림 찾기

합수() 안에는 ''따움표가 들어가야 한다!

+ 철자 앞 뒤 바꿔쓰지 않기...

black을 balck이라 쓰면 어떡하니..

저작자표시

'2023 > 생활코딩' 카테고리의 다른 글

30. 객체  (1) 2023.10.03
About Github  (0) 2023.10.02
28. 함수 활용 (실습)  (0) 2023.09.29
24. 함수..!  (0) 2023.09.29
23. 배열과 반복문의 활용  (1) 2023.09.28
'2023/생활코딩' Related Articles more
Comments