-
[Javascript] 객체 예고Web/Javascript 2020. 5. 16. 04:50
객체 예고
function nightdayhandler(self) {
var target= document.querySelector('body')
if (self.value ==='야간 모드') {
target.style.backgroundColor='#736D71';
target.style.color='white';
document.querySelector('h1').style.color='yellow';
self.value='주간 모드'
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length){
alist[i].style.color='#BEF3E8';
i = i + 1;
}
}
else {
target.style.backgroundColor='white';
target.style.color='black';
document.querySelector('h1').style.color='purple';
self.value='야간 모드'
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length){
alist[i].style.color='gray';
i = i + 1;
이 코드는 이 웹 페이지에 있는 모든 <a> 태그에 대해 색상을 '#BEF3E8'와 'gray'로 지정하는 코드
setcolor 로 함수명을 지정하고 매개변수로 color를 설정한 다음 중괄호 안에 중복된 코드를 붙여넣음.
그리고 nightdayhandler 함수에는 setcolor('#BEF3E8'); 와 setcolor('gray');를 호출하도록 함.
<script>
function setColor(color){
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length){
alist[i].style.color= color;
i = i + 1;
}
}
function nightdayhandler(self) {
var target= document.querySelector('body')
if (self.value ==='야간 모드') {
target.style.backgroundColor='#736D71';
target.style.color='white';
document.querySelector('h1').style.color='yellow';
self.value='주간 모드';
setColor('#BEF3E8');
}
else {
target.style.backgroundColor='white';
target.style.color='black';
document.querySelector('h1').style.color='purple';
self.value='야간 모드';
setColor('gray');
}
}
</script>
함수 대신 객체를 이용해 정리 정돈하기
function nightdayhandler(self) {
var target= document.querySelector('body')
if (self.value ==='야간 모드') {
Body.setBackgroundColor='#736D71';
Body.setColor='white';
document.querySelector('h1').style.color='yellow';
self.value='주간 모드';
Links.setColor('#BEF3E8');
}
else {
Body.setBackgroundColor='white';
Body.setcolor='black';
document.querySelector('h1').style.color='purple';
self.value='야간 모드';
Links.setColor('gray');
}
}
</script>
위 코드는 현재 동작하지 않음.
객체 쓰기와 읽기
배열: 서로 연관된 정보를 정리 정돈하기 위한 도구. 정보를 담는 그릇이면서 동시에 정보가 순서대로 저장된다는 특징
1. 콘솔에서 배열 실행
var cats=['bangeul','haneul'];
cats[1];
"haneul"
cats[0];
"bangeul"
2. 객체의 만들기
<!doctype HTML>
<HTML>
<HEAD>
<meta charset="utf-8">
<TITLE>객체 쓰기와 읽기</TITLE>
</HEAD>
<BODY>
<h1>object</h1>
<h2>create</h2>
<script>
var cats = {
}
</script>
</BODY>
</HTML>
cat이라는 변수에 객체를 담을 건데, 객체를 만들 때 사용하는 기호를 객체 리터럴이라고 함. 배열은 대괄호로 쓰지만 객체는
중괄호로 적음.
3. 객체에 정보 담기
<!doctype HTML>
<HTML>
<HEAD>
<meta charset="utf-8">
<TITLE>객체 쓰기와 읽기</TITLE>
</HEAD>
<BODY>
<h1>object</h1>
<h2>create</h2>
<script>
var hanhak = {
"cat": "bangeul",
"human": "haneul"
}
</script>
</BODY>
</HTML>
hanhak 이라는 객체에 "bangeul" 이라는 정보를 "cat" 이라는 딱지를 붙여서 저장한 것.
4. 객체에서 정보 가져오기
<!doctype HTML>
<HTML>
<HEAD>
<meta charset="utf-8">
<TITLE>객체 쓰기와 읽기</TITLE>
</HEAD>
<BODY>
<h1>object</h1>
<h2>create</h2>
<script>
var hanhak = {
"cat": "bangeul",
"human": "haneul"
}
document.write("cat: " + hanhak.cat + "<br>");
document.write("human: " + hanhak.human + "<br>");
</script>
</BODY>
</HTML>
hanhak 다음에 있는 점(.)은 객체 접근 연산자.
5. 객체에 정보 추가하기
<!doctype HTML>
<HTML>
<HEAD>
<meta charset="utf-8">
<TITLE>객체 쓰기와 읽기</TITLE>
</HEAD>
<BODY>
<h1>object</h1>
<h2>create</h2>
<script>
var hanhak = {
"cat": "bangeul",
"human": "haneul"
}
document.write("cat: " + hanhak.cat + "<br>");
document.write("human: " + hanhak.human + "<br>");
hanhak.dead = "yerim";
</script>
</BODY>
</HTML>
그런 다음 위 코드로 추가한 정보를 다음과 같이 가져올 수 있음.
<!doctype HTML>
<HTML>
<HEAD>
<meta charset="utf-8">
<TITLE>객체 쓰기와 읽기</TITLE>
</HEAD>
<BODY>
<h1>object</h1>
<h2>create</h2>
<script>
var hanhak = {
"cat": "bangeul",
"human": "haneul"
}
document.write("cat: " + hanhak.cat + "<br>");
document.write("human: " + hanhak.human + "<br>");
hanhak.dead = "yerim";
document.write("dead: " + hanhak.dead + "<br>");
</script>
</BODY>
</HTML>
"bangeul mom" 을 추가한다고 했을 때
hanhak.bangeul mom: "jungwoo";
하지만 위 코드에는 이름에 공백이 들어가므로 문법적으로 오류. 대괄호를 써서 문자열 형태로 넣으면 똑같은 효과를 가져올 수 있음.
hanhak["bangeul mom"] = "jungwoo";
document.write("bangeul mom: " + hanhak["bangeul mom"] + "<br>");
객체와 반복문
</script>
<h2>Iterate</h2>
<script>
for(var key in hanhak) {
}
</script>
여기서 사용된 for는 hanhak이라는 변수가 가리키는 객체에 있는(in) key 값을 가져오는 반복문.
그리고 여기서 말하는 key 값은 "cat", "human", "dead", "bangeul mom"를 가리킴. 즉, key라는 것은
우리가 가져오고 싶은 정보에 도달할 수 있는 열쇠.
hanhak에 있는 key를 하나하나 꺼내서 중괄호에 있는 코드를 실행하는 명령어가 for. 다시 말해 hanhak이라는 객체에 있는
데이터의 수만큼 중괄호 안에 있는 코드가 실행되는데, 실행될 때마다 key 값이 하나하나 변수값으로 설정된다는 뜻.
1. 반복문에서 객체의 키 값 출력
</script>
<h2>Iterate</h2>
<script>
for(var key in hanhak) {
document.write(key + '<br>');
}
</script>
2. 반복문에서 객체의 키 값에 해당하는 데이터 출력
</script>
<h2>Iterate</h2>
<script>
for(var key in hanhak) {
document.write(hanhak[key] + '<br>');
}
</script>
3. 반복문에서 객체의 키 값과 데이터 모두 출력
for(var key in hanhak) {
document.write(key + ": " + hanhak[key] + '<br>');
}
객체 프로퍼티와 메서드
객체는 데이터를 담을 수 있음. 이전에는 문자열을 담았지만 배열을 담을 수도 있고 숫자를 담을 수도 있으며 함수를 담을 수도 있음.
1. 객체에 함수 담기
<h2>property & method</h2>
<script>
hanhak.showAll = function() {
}
</script>
위의 코드는 showAll이라는 메서드를 추가하는 코드. 위의 코드는 function showAll(){} 과 똑같은 표현.
2. showAll() 함수에 있는 코드를 showAll 메서드에 붙여넣기
<h2>property & method</h2>
<script>
hanhak.showAll = function() {
for(var key in hanhak) {
document.write(key + ": " + hanhak[key] + "<br>");
}
}
</script>
3. showAll 메서드 호출
<h2>property & method</h2>
<script>
hanhak.showAll = function() {
for(var key in hanhak) {
document.write(key + ": " + hanhak[key] + "<br>");
}
}
hanhak.showAll();
</script>
이는 hanhak의 이름이 showAll() 함수 내에도 있기 때문에 hanhak이라는 객체의 이름이 바뀐다면 showAll() 함수에서 데이터를 가져오지 못하는 현상이 생길 수 있음.
이 문제를 해결하기 위해 showAll() 함수 내에서 이 함수가 소속된 객체를 가리키는 약속된 기호를 사용하면 됨. 바로 this
4. hanhak 이라는 객체 이름 대신 this 사용
<h2>property & method</h2>
<script>
hanhak.showAll = function() {
for(var key in this) {
document.write(key + ": " + this[key] + "<br>");
}
}
hanhak.showAll();
</script>
hanhak의 변수명이 다른 것으로 바뀌어도 this는 자기 자신을 가리키기 때문에 영향을 받지 않음. 그리고 showAll() 조차도 hanhak에 소속된 데이터이기 때문에
showAll() 도 화면에 표시됨. 이를 없애기 위해 if 문으로 showAll()을 제외하는 코드를 작성해도 됨.
www.evernote.com/l/AlcxqTIDXpBAspyNVCfTro9NRsMX572o6e0/
객체 예고
객체 예고 function nightdayhandler(self) { var target= document.querySelector('body') if (self.value ==='야간 모드') { target.style.backgroundColor='#736D71'; target.style.color='white'; document.querySelecto...
www.evernote.com
'Web > Javascript' 카테고리의 다른 글
[Javascript] 라이브러리와 프레임워크, 제이쿼리, UI, API (0) 2020.05.16 [Javascript] 객체의 활용, 파일로 쪼개서 정리 정돈하기 (0) 2020.05.16 [Javascript] 함수 (0) 2020.05.16 [Javascript] 배열과 반복문 (0) 2020.05.16 [Javascript] 제어할 태그 선택하기, 비교 연산자와 불리언, 조건문, 리팩터링 (0) 2020.05.16