[생활코딩] WEB2 JavaScript - 3

WEB2 JavaScript - 29.객체 예고

document.querySelector('body')

// document는 객체
// querySelector는 document라는 객체에 속해있는 함수
// 객체에 속해 있는 함수는 함수라고 하지 않고 메소드(method)라고 함.

---

WEB2 JavaScript - 30.객체 쓰기와 읽기

<script>
    var coworkers = {
      "programmer": "Jason",
      "designer": "leezche"		
    };
      // coworkers라는 변수에 
      // Jason이라는 정보를 programmer라는 딱지를 붙여서 저장.
      // leezche라는 정보를 designer라는 딱지를 붙여서 저장함. 


    document.write("programmer : " + coworkers.programmer + "<br>");
     // coworkers.programmer => Jason 이 나옴
    document.write("designer: " + coworkers.designer + "<br>");
    coworkers.bookkeeper = "duru";
     // 이미 객체가 만들어진 다음에 정보를 추가하는 법
    document.write("bookkeeper: " + coworkers.bookkeeper + "<br>");
    coworkers["data scientist"] = "Chang";
     // 이름에 공백이 들어갈때 정보를 추가하는 법
     // bookkeeper의 경우와 같은 결과
    document.write("data scientist: " + coworkers["data scientist"] + "<br>");
     // 호출할때도 대괄호 안에 따옴표 (.은 빼야함)
</script>

---

WEB2 JavaScript - 31.객체와 반복문

• 배열에 있는 데이터를 모조리 다가져와야 하는 경우

for(var key in coworkers) { }

// for는 coworkers에 있는 key를 하나하나 꺼내 중괄호에 있는 코드를 실행해 주는 명령

• for라고 하는 걸 쓰면 coworkers라는 변수가 가리키는 객체에 있는 key 값들을 가져오는 반복문
• key는 programmer designer bookkeeper 등 우리가 가져오고 싶은 정보에 도달할 수 있는 열쇠 (프로퍼티)

    <script>
        for (var key in coworkers) {
            document.write(key + "<br>");
        }
    </script>
 
 	// programmer
 	// designer
 	// bookkeeper
 	// data scientist

    <script>
        for (var key in coworkers) {
            document.write(coworkers[key] + "<br>");
        }
    </script>
    
    // Jason
	// leezche
	// duru
	// Chang

---

WEB2 JavaScript - 32.객체프로퍼티와 메소드

• 객체에 소속된 함수(method) 만들기

    <script>
        coworkers.showAll = function() { }

        var showAll = function() { }

        function showAll() { }
        
        // 위 3가지는 모두 똑같이 함수를 선언하는 것 
        // (첫번째는 coworkers라는 객체 안에서 함수를 선언이지만) 
    </script>

	coworkers.showAll = function () {
            for (var key in coworkers) {
                document.write(key + " : " + coworkers[key] + "<br>");
            }
        }

// 만약 coworkers라는 객체의 이름이 바뀐다면 이 함수는 작동하지 않음

    coworkers.showAll = function () {
            for (var key in this) {
                document.write(key + " : " + this[key] + "<br>");
            }
        }

// this : 이 함수가 소속된 객체를 가리킴 

• showAll도 coworkers에 포함된 데이터이기 때문에 화면에 출력됨.
  • 이를 없애기 위해선 if문 사용

---

WEB2 JavaScript - 33.객체의 활용

        var Body = {
            setColor: function (color) {
                document.querySelector('body').style.color = color;
            },
            setBackgroundColor: function (color) {
                document.querySelector('body').style.backgroundColor = color;
            }
        }

        var Links = {
            setColor: function (color) {
                var linkCol = document.querySelectorAll('a');
                var j = 0;
                while (j < linkCol.length) {
                    linkCol[j].style.color = color;
                    j++;
                }
            }
        }
        
        // Body, Links : 객체
        // 객체안에 함수를 넣음
        
        
        
        
        
        
       Body.setBackgroundColor('black')
       Body.setColor('white');
       Links.setColor('aqua');

		// document.querySelector('body')과 유사한 형식으로 함수(메서드)를 호출 가능

---

갑자기 드는 의문점 : script태그를 어디에 위치시켜야 하는지 head안이든 body안이든 상관없나?

WEB2 JavaScript - 34.파일로 쪼개서 정리 정돈하기

• <script src="colors.js"></script>
  css 처럼 js 파일을 따로 만들어서 여러 페이지에 사용 가능

---