어제 놀았으니 오늘 더 열심히 아자!👊🏻배열 + 반복문
let coworkers = ['A', 'B', 'C', 'D'];
let i = 0;
while (i < 4) {
document.write('<li>'+coworkers[i]+'</li>');
i += 1;
}코드해석:
coworkers에 들어있는 인수를 모두 다 가져오고 싶다면 반변수를 만들고 반복문 while을 만들어 주고 i의 값은 1씩 늘어난다고 하면 while은 0,1,2,3이 되며 마지막에 coworkers[i]를 만들어주면 모든 인덱스 즉 모든 coworkers의 이름이 불러와진다. 하지만 이 코드는 완벽하지 않다.
-위의 코드를 수정해보면 이렇게 된다.
let coworkers = ['A', 'B', 'C', 'D'];
let i = 0;
while (i < coworkers.length) {
document.write('<li><a href="#'+coworkers[i]+'">'+coworkers[i]+'</a></li>');
i += 1;
}코드해석:
while문에 coworkers.lenth라고 적어주면 인수가 얼마만큼 늘어나던 알아서 값을 추가해준다. 그리고 <a herf ="#'+coworkers[i]+'">라는 태그를 추가해주면 각 이름마다 링크가 생겨서 들어갈 수 있게 변한다.
배열과 반복문의 활용
document.querySelector는 하나만 선택을 해주고
document.querySelectorAll은 여러개를 같이 선택해준다.
함수
함수 = 수납상자
코드가 많아지면 코드를 잘 정리정돈을 하기위한 도구가 필요하다. 그 첫번째 도구가 '함수' / 좀 더 큰 도구는 '객체'라고 부른다.
어떤 긴 코드를 function A라는 함수에 담고 이 함수를 쓰기만 하면 코드안을 수정해도 함수 이름을 쓴 1억개의 모든 코드가 일제히 수정이 된다. 함수란 소중한 존재.
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>'); 이라는 코드가 있으면 계속 반복되어야하는 경우가 생길경우 우리는 처음엔 반복문을 쓸 것이다. 하지만 연속적이지 않게 반복되는 것이면 반복문을 쓰는 것이 어려워질 것이다.
만약에 1억번의 중복이 반복되고 있는데 연속적이지않는다면 반복문으로 할 수 없고, 함수라는 것을 써야할 것이다.
-함수를 써서 위에 코드를 바꿔보자
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();함수를 만들었고 결과는 같지만 내부적으로는 전혀 다르게 변한 것을 볼 수 있다. two라는 함수를 만들었다. ( ) 가 나오면 이 함수를 실행하고 싶구나 라고 알아듣게 된다.
함수: 매개변수와 인자
세상의 모든 것들은 입력과 출력으로 이루어져있다고 본다. 입력과 출력이 해당하는 것이 함수라는 것
함수의 입력을 담당하는 것이 Parameter = 매개변수 와 Argument = 인자
함수의 출력을 담당하는 것이 Return
function onePlusOne(){
document.write(1+1);
}
onePlusOne(); 이 함수는 계속 2만 호출하는 함수가 될 것입니다.
언제나 똑같이만 동작하죠. 하지만 우리는 이 함수에 어떤 입력값을 줘서 함수가 입력값에 따라서 다른 결과를 출력하게 한다면 더 멋진 코드가 될 것입니다. 예를들면 sum(2,3)이라고 했을 때 결과는 5가 됩니다. sum(3,4)를 하면 7이 나올 수 있습니다. sum이라는 단 하나의 함수로 입력값에 따라 다른 결과가 출력되게 할 수 있다면 얼마나 더 멋진 코드가 되겠습니까.
function onePlusOne(){
document.write(1+1);
}
onePlusOne();
function sum(left,right) {
document.write(left+right+'<br>')
}
sum(2,3); //5
sum(3,4); //7function sum에 매개변수 (left,right)를 만들어줘서 5와 7을 화면에 나타낼 수 있게 된다. 여기서 함수로 전달하는 sum(2,3)안에 있는 2와3을 Argument = 인자 라고 부르고 left와 right를 Parameter = 매개변수 라고 합니다. 둘 다 함수로 들어오는 입력값이다.
함수: 리턴
함수의 결과값을 그냥 보여주기만 하는 것이 아니라 결과의 값을 써먹을 수 있게 돌려주는 return
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>>');
코드해석:
계산이라고 하는 기능만을 sum2라는 함수가 구현함으로써, 원자화된 기능을 다양한 맥락에서 활용할 수 있는 자유도가 생기게 되었습니다. 매개변수를 통해서 들어간 값을 return을 통해서 출력됨으로써, 다양한 용도로 함수를 사용할 수 있게 된 것.
코드 리펙토링
function nightDayHandler(self) {
let target = document.querySelector('body');
if (self.value === 'night') {
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.value = 'day';
let alist = document.querySelectorAll('a');
let i = 0;
while (i < alist.length) {
alist[i].style.color = 'powderblue';
i += 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
self.value = 'night';
let alist = document.querySelectorAll('a');
let i = 0;
while (i < alist.length) {
alist[i].style.color = 'blue';
i += 1;
}
}
}
<h1> <a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">코드해석:
self : 매개변수 (파라미터) - 매개변수는 말그대로 변수라서 아무거나 이름을 붙여도 무관하다.
this : argument (인자) - 이벤트 포함 태그를 가르킴, this 자체가 인식이 가능한 코드. 즉 원래 있는 코드
함수에 다양한 값의 argument를 넣어야 하는 경우 매개변수 이름을 부여해주면 된다.
예상 코드실행 순서 (해당 부분):
1. input태그의 this가 <input> 지목
2. function nightDayHandler(self){} 실행 // 또는 self가 아닌 임의의 문자, 단, self부분의 문자는 전부 통일 할 것
3. self(또는 임의의 문자)에 'this'가 대입되면서 input코드를 지목
4. input을 지목한 상태로 함수 nightDayHandler(self){} 실행
객체 예고
- 객체는 함수를 모아둔 폴더라고 생각하면 된다.
- 객체의 속해있는 함수를 메소드 라고 부른다.
- 정보를 순서대로 저장 = 배열 / 순서 없이 저장 = 객체
예) document.querySelector('body') 에서 document는 객체이고 querySelector('body')는 메소드 이다.
