생활코딩 WEB2-JavaScript (객체 ~ 수업을 마치며) (for in문)

객체

영어로는 object 라고 한다. 정리정돈의 수단.  서로 연관된 함수와 서로 연관된 변수를 같은 이름으로 그룹핑해서 잘 정리정돈 하기 위한 도구를 객체라고 할 수있다. 쉽게 생각하면 폴더라고 생각을 해도 됨 그리고 객체에 속해있는 함수는 메소드 라고 부른다.

document.querySelector('body') 
// document 여기가 객체 querySelector('body')가 함수 즉 객체에 속해있으니 메소드 라고 한다

객체 쓰기와 읽기

배열과는 달리 객체는 순서없이 정보를 저장할 수있는것이다. 객체를 만들때 사용하는 기호는 중괄호 이다.

문법을 코드로 보면 

var coworkers = {"programmer":"oenomel" , "designer":"chulsu"};

중괄호 안에 콤마로 구분되어있는것들을 속성이라고 한다. 쉼표로 구분을 한다. programmer 와 designer를 key라고 하고 oenomel과 chulsu를 값(value) 라고 한다. key는 문자열만 가능하고 따옴표가 없어도 상관없다. 단 key가 띄어쓰기가 있다면 반드시 따옴표로 감싸주어야 함  값을 꺼내오고 싶을때는 변수이름.key 이렇게 하면 된다. 코드로 보자면 

document.write(coworkers.programmer);

그렇다면 정보를 추가를 하고 싶다면 변수이름.key = value 이런식으로 하면 된다.

coworkers.bookkeper = "duru";

위에 처럼 값을 꺼내오고 싶을때는 주로 변수이름.key를 이용하지만 대괄호를 해도 되는데 이때는 key 이름이 띄어쓰기가 있을때 그때 대괄호를 이용한다 

coworkers["data scientist"] = 'daeho' // 따옴표는 꼭 써야한다 띄어쓰기가 있을때
// 값을 가져올때 점을 이용하면 안됨 
document.write(coworkers["data scientist"]) // 'daeho'가 출력됨 (22.06.28 수정)

객체와 반복문

객체에 key와 value를 다 가져올 수 있는 방법이 있는데 바로 for in 문을 이용하는 것이다. 예제를 보면 

<script>
let coworkers = {
            'programmer' : "egoing",
            'designer' : 'leeche' 
};


        for(let key in coworkers) {
            document.write(key + ':'+coworkers[key]+'<br>');
        }
</script>

 

key를 입력하면 객체에 key 값들이 출력이 되고 (굳이 key라고 안해도 됨 이건 변수명일 뿐임) coworkers[key]를 하게 되면 객체에 value값이 출력이 되서 위 코드는 

programmer:egoing
designer:leeche
book:dru

이렇게 출력을 한다.

for in문은 객체에서 사용할수 있고 객체의 키값의 갯수만큼 반복하여 첫번쨰키값부터 마지막 키값까지 반복한다.

 

프로퍼티와 메소드

객체에는 함수도 담을 수있다. 객체에 메소드를 추가하고 싶다면 

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

var showAll = function() {

}

function showAll() {

}
// 함수 정의 같은 표현임 2번째 3번째

coworkers.showAll();

위 처럼 할 수있는데 좋은 방법은 아님 함수 안에 객체 이름이 박혀있기 때문에 만약 객체 이름이 바뀐다면 함수에서 데이터를 못가져오는 현상이 발생할 수있음 이때 해결할 방법은 저 showAll 이라는 이 함수 안에서 (function 안에 코드들)

이 함수가 소속되어 있는 객체를 가리키는 약속된 기호가 있는데 바로 this다. this를 쓰면 변수이름이 다른것으로 변해도 영향을 안받음 

이 객체에 소속된 변수에 값으로 함수를 지정할 수있고 그렇게 되면 객체에 소속된 함수를 만들 수있게된다.

객체에 소속된 변수를 프로퍼티 라고 한다.

객체의 활용

var Links = {
            setColor:function(color) {
            var alist = document.querySelectorAll('a');
                var i = 0;
                while( i < alist.length) {
                    alist[i].style.color = color;
                    i++
                }
        }
    }
        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');
            }
        }

아직 완전히 이해는 안가서 계속 해서 봐야할듯함 

 

파일로 쪼개서 정리정돈 하기 (22.06.29 수정)

이제껏 구현한 저 script 태그안에 있는 코드들을 다른 페이지에서도 구현을 할려면 이 코드들을 복붙해야 한다.

하지만 페이지가 만약 1억개라면? 페이지도 페이지 지만 어찌저찌 다 복붙을 했다고 쳐도 만약 글자색을 다른색으로 

바꿔야 한다면 1억개 페이지에 코드들을 일일히 다 변경을 해주어야 할것이다...

그런 불상사를 방지하기 위해서 복붙하려는 공통된 코드를 새로운 js파일에 복붙을 하고 붙여 넣으려는 페이지에 

<script src='원하는 파일명.js'></script>

이렇게 해주면 만약 나중에 글자색을 바꾸고 싶을때 js파일에 코드만 수정을 해주면 싹다 변경한 글자색으로 변하는 

마법같은 일이 일어날 것이다! 

 

라이브러리 프레임 워크

자바스크립트중 유명한 라이브러리는 JQuery 라고 한다.. 라이브러리는 부품 가져오기 라고 치면 프레임 워크는 템플릿 같은거? 쨋든 둘다 다른사람과 협력하는 모델이다.

 

UI vs API (22.06.29)

UI는 User Interface의 약자 , API는 Application Programming Interface의 약자이다

"UI는 사용자가 시스템을 제어하기 위해 사용하는 조작 장치이고, 그 조작 장치를 만들려면 API를 가져와서 만들 수 있다

일단 이렇게만 알아두기

 

이제부터 자신의 프로젝트를 시작해야 한다