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) 때문에 결국은 이득이다!
💡 캐시 : 한번 웹페이지에 웹브라우저에 다운된 파일은 웹브라우저가 보통 저장을 해두고, 다음에 접속할 때 저장된 파일을 읽어서 네트워크를 통하지 않게 하는 것
💡 서버 입장에서는 훨씬 더 비용을 절감할 수 있고, 사용자 입장에서도 네트워크 트래픽을 절감할 수 있고 훨씬 더 빠르게 웹페이지를 화면에 띄울 수 있기 때문에 파일로 쪼개는 것이 훨씬 효율적이고, 돈도 적게 들고, 시간도 적게 든다고 할 수 있다.