JavaScript

givemacdonalds·2023년 12월 20일

JavaScript

TIL

목록 보기

13/16

JavaScript 기초

CSS 기초 (style 태그)

CSS 기초 선택자

~~클래스 선택자 : 그룹핑 할때사용~~
id 선택자 : 예외적으로 쓰고 싶을때 사용
span

~~누구에게 정확하게 타겟팅 할 것인가 할 때 필요함~~

HTML은 프로그래밍언어가 아님
JavaScript는 프로그래밍언어임

Program 순서
Programing 순서를 정하기
Programmer 순서를 정하는 사람

코딩을 잘하는 법
중복을 제거

객체란?

중요하고 어려운 존재임
함수 기반에 객체가 존재함

정리정돈의 도구
코드가 많아지면 복잡 -> 함수 생성 -> 함수 많아져서 복잡 ...

비록 한줄의 코드여도 코드로 봤을때 의미가 모호해지는 코드들은 함수로 리팩토링 해줍니다. 그리고 함수명을 명확하게 알 수 있도록 작명할 것!
함수명을 작명하는데 함수명이 중복 되지 않도록 구체적으로 명시 해야합니다.

<script>
function BodySetColor(color){
	document.querySelector('body').style.color=color;
}
function BodySetBackgroundColor(color){
	document.querySelector('body').style.backgroundcolor=color;
}

BodySetColor('black');
BodySetBackgroundColor('white');

</script>

BodySetColor와 BodySetBackgroundColor는 서로 body의 폰트 컬러와 백그라운드 컬러를 변경해주는 함수입니다. 공통점으로는 body태그에 대해서 지칭하고 있다는 점이 있습니다.

<script>
function BodySetColor(color){
	document.querySelector('body').style.color=color;
}
function BodySetBackgroundColor(color){
	document.querySelector('body').style.backgroundcolor=color;
}

Body.SetColor('black');
Body.SetBackgroundColor('white');

</script>

서로 연관된 함수와 변수들을 그룹핑 해서 정리정돈 할 수 있는 수납상자가 객체입니다.
Body 라는 객체는 폴더로 봐도 무방합니다.

<script>
document.querySelector('body').style.color=color;
</script>

여기서 document는 객체이고 거기에 속한 querySelector()는 함수임을 알 수 있습니다.하지만 객체에 속한 함수는 함수라고 하지 않고 메소드라고 합니다.

객체 쓰기와 읽기

배열은 []를 사용하고 객체 {} 를 사용합니다.
예제를 보면서 객체를 이해해보려고 합니다.

객체 생성

<body>
	<script>
    	var coworkers = {
        	"hanry"
        };
    </script>
</body>

이렇게 바로 hanry라는 정보만 넣는 것은 안 되며 정보에 대한 이름을 넣어 줘야 합니다.

<body>
	<script>
    	var coworkers = {
        	"programmer" : "hanry",
            "designer" : "leezche"
        };
    </script>
</body>

다음과 같이 coworkers라는 객체가 생성 되었습니다.

객체의 정보 읽기

coworkers라는 객체에서 hanry와 leezche의 정보를 꺼내오는 방법은 다음과 같습니다.

<body>
	<script>
    	var coworkers = {
        	"programmer" : "hanry",
            "designer" : "leezche"
        };
        document.write('programmer : ' +coworkers.programmer);
		document.write('designer : ' +coworkers.designer);
    </script>
</body>

브라우저에는 다음과 같이 정보를 읽을 수 있게 됩니다.

programmer : hanry
designer : leezche

객체쓰기

이미 생성된 객체에 정보를 추가적으로 쓰고 싶다면 다음과 같습니다.

<body>
	<script>
    	var coworkers = {
        	"programmer" : "hanry",
            "designer" : "leezche"
        };
        document.write('programmer : ' + coworkers.programmer +"<br>");
		document.write('designer : ' + coworkers.designer+"<br>");
        coworkers.bookkeeper = "duru";
        document.write('bookkeeper : ' + coworkers.bookkeeper+"<br>");
        coworkers["data scientist"] = "teo";
        document.write("data scientist :"  + coworkers["data scientist"]+"<br>");
    </script>
</body>