오늘 한 일
- 생활코딩 자바스크립트 강의 객체까지 수강
공부한 내용
배열과 반복문
배열 Array
데이터가 많아짐에 따라 그 중에 서로 연관된 데이터들을 정리하는 것
var fruits = ["apple", "banana"]; // 배열을 변수에 담기
document.write(fruits[0]); // 배열의 첫 번째 자리의 값(apple)
document.write(fruits[1]); // 배열의 두 번째 자리의 값(banana)
document.write(fruits.length); // 배열의 들어있는 값 개수 확인 (2개)
fruits.push('melon');
fruits.push('watermelon'); // 배열에 값 추가
document.write(fruits.length); // 배열의 들어있는 값 개수 확인 (4개)반복문 loop
순서대로 실행되는 프로그램의 실행 순서의 흐름을 제어하는 제어문
- 조건문 처럼 괄호 안에 true나 false 값이 들어가야 한다.
document.write('<li>1</li>');
var i = 0; // i의 값은 현재 0이다.
while(i < 3) { // i의 값은 3보다 작다(true) -> 실행
document.write('<li>2</li>');
document.write('<li>3</li>');
i = i + 1; //i의 값은 현재 1이 된다 -> 반복
}
document.write('<li>4</li>');배열과 반복문
<h1>fruits</h1>
<script>
var fruits = ['apple', 'banana', 'melon', 'watermelon'];
</script>
<ul>
<script>
var i = 0;
while(i < fruits.length) {
document.write('<li>' +fruits[i]+ '</li>');
i = i + 1;
}
</script>
</ul>// night & day 모드 버튼 만들기
<input type="button" value="night" onclick="
var target = document.querySelector('body');
if (this.value === 'night') {
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
">함수 function
함수를 사용하는 이유
- 코드의 양이 많아지면 웹페이지의 크기가 커지는데 그만큼 비용, 시간, 노력이 들어가게 됨
- 연속적이지 않은 반복은 반복문을 쓰기 어려움
기본 문법
- 함수를 사용하지 않은 코드
<body>
<ul>
<script>
document.write('<li>1</li>');
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
document.write('<li>3</li>');
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
</script>
</ul>
</body>- 함수를 사용한 코드
<body>
<ul>
<script>
function two(){
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
}
document.write('<li>1</li>');
two();
document.write('<li>3</li>');
two();
</script>
</ul>
</body>실행결과는 완전히 똑같은 결과가 나오지만 내부적으로는 완전히 다른 메커니즘을 가지게 된다.
매개변수와 인자
함수의 입력값에 해당하는 것을 매개변수(parameter), 인자(agument) 라고 한다.
function sum(left, right){ // left, right의 값을 매개변수라고 함
document.write(left+right);
}
sum(2,3); //2와 3에 해당하는 값을 인자 라고 함
sum(3,4);리턴
함수를 실행한 후 그 결과값을 함수 밖으로 넘기는 것
- 원자화 된 기능을 다양한 맥락에서 활용할 수 있는 자유도가 생기게 됨
function sum2(left, right){
return left+right;
}
document.write(sum2(2,3)+'<br>');
document.write('<div style="color:red">'+sum2(2,3)+'</div>');
document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');객체 Object
함수와 그 함수와 연관되어 있는 변수들이 많아지면 복잡도의 한계에 다다르게 됨
→ 서로 연관된 함수와 서로 연관된 변수를 같은 이름으로 그룹핑하는 것을 객체라고 함
var coworkers = {
"programmer":"egoing",
"designer":"leezche"
}; // 객체를 만드는 방법
document.write("programmer : "+coworkers.programmer);
document.write("designer : "+coworkers.designer);
// 만들어져있는 객체에서 데이터를 가져오는 방법
coworkers.bookeeper = "duru";
document.write("bookeeper : "+coworkers.bookeeper);
// 객체에 데이터를 추가하는 법
coworkers["data scientist"] = "teaho";
document.write("data scientist : "+coworkers["data scientist"]+"<br>");객체와 반복문
for(var key in coworkers) {
document.write(key+' : '+coworkers["data scientist"]+"<br>");
}
//coworkers라는 변수가 가리키는 객체에 있는 Key 값들을 가져오는 반복문
객체프로퍼티와 메소드
coworkers.showAll = function(){
for(var key in this) {
document.write(key+' : '+coworkers["data scientist"]+"<br>");
}
}
coworkers.showAll();
// 객체에 소속된 변수(프로퍼티)의 값으로 객체에 소속된 함수(메소드)를 만들 수 있음- 객체는 객체의 프로퍼티와 프로퍼티를 구분할 때 콤마를 찍음
최종적인 'night & day 모드 버튼' 코드
// night & day 모드 버튼 만들기
var Links = {
setColor:function(color){
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = color;
i = i + 1;
}
}
}
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')
}
}알 것 같기도 한데 아직 잘 모르겠다... 복습하자 복습..!
