[JavaScript]JavaScript 기본 문법 (3)

JavaScript의 기본 문법

객체

객체는 이름과 값으로 구성된 프로퍼티들(properties)의 집합
키와 값으로 구성된 프로퍼티들의 집합
전역 객체를 제외한 자바스크립트 객체는 프로퍼티를 동적으로 추가하거나 삭제 가능
자바스크립트의 함수는 일급 객체이므로 값으로 사용할 수 있다. 따라서 프로퍼티의 값으로 함수를 사용가능 (함수의 인자를 함수로 가능???) -> 콜백(call back) 함수와 연결!!!
배열은 순서대로 정보를 저장하는 반면에, 객체는 순서 없이 정보를 저장할 수 있다고 보면 됨

객체 계층 구조

Window
- Document
- Form
  - Text
  - Password
  - Checkbox(다중 선택)
  - Radio
  - Submit
  - Reset
  - Button
  - ...
- Location
- History
- ...

내장 객체

자동으로 객체 생성 제공됨
Window: window
- 생략 가능
Document, Location
Array
String
Date
Match

사용자 정의 객체

객체 리터럴
Object() 생성자 함수
생성자 함수 정의해서 사용
패키지 선언

예시)

Student
Book
Order
function 기반 정의

JSON(JavaScript Object Notation)

자바스크립트에서 객체를 표기하는 방법

key:value 형태

{
	key: [
		{key:value, key:value, ...},
		{key:value, key:value, ...},
		{key:value, key:value, ...},
		...
	],
	key: [
		{key:value, key:value, ...},
		{key:value, key:value, ...},
		{key:value, key:value, ...},
		...
	]
}

객체 쓰기와 읽기

여기서 coworkers의 programmer, designer, bookkeeper, data scientist를 객체의 프로퍼티(속성)이라 함

<script>
	var coworkers = {
	"programmer":"111",
	"designer":"222"
	};
	document.write("programmer : "+coworkers.programmer+"<br>");
	document.write("designer : "+coworkers.designer+"<br>");
            
	// coworkers에 bookkeeper 객체 쓰기
	coworkers.bookkeeper = "333";

	document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");

	// data scientist 객체는 공백이 있으므로 coworkers["data scientist"]로 객체 쓰기
	coworkers["data scientist"] = "444";

	document.write("data scientist : "+coworkers["data scientist"]+"<br>");
</script>

배열에서의 index → 객체에서의 key
JavaScript를 처음 접했을 때 이 자유도?라 해야되나... 암튼 이 자유도에 되게 놀랐고 신기했음. 그리고 되게 헷갈렸음 ㅋㅋㅋㅋㅋ 물론 편리할 수도 있겠으나 내가 자바를 먼저 배우고 얘를 배워서인지 좀 당황스러웠음

위의 코드에서 이렇게 객체의 멤버를 추가하면서 초기화를 해줄 수 있다는게 너무,,,, 뭐랄까 신박함?

// coworkers에 bookkeeper 객체 쓰기
coworkers.bookkeeper = "333";

객체와 반복문

for문 → coworkers의 key값을 하나하나 꺼내서 (coworkers의 key값을 하나하나 변수 값으로 세팅해서) { } 안의 코드를 실행

coworkers의 key값들을 하나하나 출력

for(var key in coworkers){
	document.write(key+"<br>");
}

coworkers의 key에 뭐가 들어있는지 하나하나 출력 (순회)

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

for in 반복문 말고도 for of 반복문도 있음!

for in 반복문은 객체!
for of 반복문은 배열(자바에서 foreach문 같이)

객체 프로퍼티와 메소드

함수 선언 방법 (둘 다 같음)

객체의 키값으로는 메소드가 들어갈 수도 있음

coworkers.showAll = function(){

}

function showAll(){
                
}

Body와 Links 객체를 새로 만들어서 코드를 단순화

객체 안에는 메소드도 선언할 수 있음

<script>
        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 aList = document.querySelectorAll('a');
                var i = 0;
                while (i < aList.length) {
                    aList[i].style.color = color;
                    i += 1;
                }
            }
        }
        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');
            }
        }
</script>

파일로 쪼개서 정리 정돈하기

💡 html 파일에 있는 공통된 <script></script> 태그는 같은 폴더 안에 파일이름.js를 만들어서 넣어준 후, 각 html 파일의 <head></head> 태그 안에 <script src="파일이름.js"></script> 를 추가해주면 모든 파일에 js가 적용됨!

💡 이렇게 하는 경우 각각의 html 파일을 네트워크가 화면에 띄울 때 .html 파일과 .js 파일을 같이 다운 받아서 띄워야 한다. 그렇게 되면 html 파일만 다운 받아서 띄울 때 보다 더 손해인 것 같지만, 캐시(cache) 때문에 결국은 이득이다!

💡 캐시 : 한번 웹페이지에 웹브라우저에 다운된 파일은 웹브라우저가 보통 저장을 해두고, 다음에 접속할 때 저장된 파일을 읽어서 네트워크를 통하지 않게 하는 것

💡 서버 입장에서는 훨씬 더 비용을 절감할 수 있고, 사용자 입장에서도 네트워크 트래픽을 절감할 수 있고 훨씬 더 빠르게 웹페이지를 화면에 띄울 수 있기 때문에 파일로 쪼개는 것이 훨씬 효율적이고, 돈도 적게 들고, 시간도 적게 든다고 할 수 있다.