step04. - 01~03. loop
<h1>반복문 익히기</h1>
<script>
// 참조값을 변수에 담는 이유는 필요한 시점에 사용하기 위해서
// 사용한다는 것은?
// item 추가, 참조, 수정, 삭제
let greet = [];
// "hello~" string을 10, 100, 10000개 저장하려면?
/*
for (let index = 0; index < array.length; index++) {
const element = array[index];
}
*/
for(let i=0; i<10; i++){
greet.push(i+"hello~");
}
// greet array 안에 있는 item을 순서대로 console 창에 출력하는 코드를 작성해 보세요.
// for 문 활용
for(let i=0; i<greet.length; i++){
console.log(i+"번 방입니다."+greet[i]);
}
</script>
- loop : 특정 javascript를 원하는 만큼 반복해서 수행하고 싶은 경우에 사용한다.
- greet에 array의 참조값을 받아서 push function을 사용해서 array에 item을 추가한다.
- let i=0 : 방 번호로 사용할 문자와 그 시작점을 표기한다. 문자가 꼭 i일 필요는 없다.
i<10 : 해당 조건이 false가 될 때까지 loop를 반복한다.
i++ : 각 step을 나타낸다. 이 경우 i에서 1을 더하게 된다.
21.04.13. 해당 내용 추가
++ / -- 는 증감 연산자이다.
for문의 시행 순서를 외우고 이해하도록 해야한다.
우선 let i=0은 최초 한 번만 수행된다.
그리고 다음 i<10 에 해당하는 결과가 true이면 중괄호 { } 의 내용을 수행한다.
그리고 i++로 가서 i를 증가시키고 다시 i<10 의 true/false 여부를 확인한다.
i<10 이 false가 될 때, 순서가 for 밖으로 나오게 된다.
경우에 따라 다음의 for문을 사용할 수도 있을 것이다.
for(let i=1; i<10; i+=2){ }
for(let i=10; i>=0, i--){ }
(ex) 뒤에서부터 참조하고 싶을 때
let names=["kim", "lee", "park", "jo", "yang"];
for(let i=0; i<names.length; i++){ }
for(let i=names.length; i>=0; i--){ }
- array의 item 개수와 loop를 일치시키고 싶다면 .length 를 이용한다. i가 0부터 시작하기 때문에 가능하다. 만약 i를 0부터 시작하지 않을 경우에는 주의한다.
<h1>forEach function을 이용한 반복 작업</h1>
<script>
let nums = [10, 20, 30, 40, 50, 60, 70];
// 배열 내장함수인 forEach() 를 호출하면서 함수를 전달함
// 전달된 함수는 바로 호출된다.
/*
전달된 function은 array의 방의 개수만큼 반복 호출되고,
function의 첫 번째 인자로 array에 저장된 item을 전달해준다.
두 번째 인자로 item의 index value가 전달된다.
*/
nums.forEach(function(a,b){
console.log(a);
console.log(b);
});
</script>
- forEach(function(a, b){ }) : array의 item 개수만큼 전달하는 함수를 호출한다.
- a와 b를 console 창에 찍어보면 a는 item value, b는 index를 출력한다.
<h1>forEach function을 함수로 활용한 반복작업</h1>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
<div>div6</div>
<div>div7</div>
<div>div8</div>
<div>div9</div>
<div>div10</div>
<button id="changeBtn">바꾸기</button>
<script>
// 모든 div의 참조 값을 array로 얻어내기
let divs = document.querySelectorAll("div");
divs.forEach(function(item, index){
divs[index].innerText = "김구라";
// item.innerText = "김구라"
//
});
/*
바꾸기 버튼을 눌렀을 때 모든 div의 innerText를 "해골"로 바꾸기
*/
document.querySelector("#changeBtn").addEventListener("click", function(){
divs.forEach(function(item){
item.innerText="해골"
})
})
</script>
- 때문에 단순히 의미 없는 a, b보다 item, index 등의 바로 확인할 수 있는 naming을 한다.
example.1~3
<h1>반복문 활용하기</h1>
<div id="one">div1</div>
<div id="two" class="my-class">div2</div>
<div class="my-class">div3</div>
<div>div4</div>
<div class="my-class">div5</div>
<div>div6</div>
<div>div7</div>
<div>div8</div>
<div>div9</div>
<div>div10</div>
<button id="changeBtn">바꾸기</button>
<button id="changeBtn2">올려보셈</button>
<button id="changeBtn3">포커스를 주셈</button>
<script>
/*
div1~div10까지 모든 div의 innerText를 "김구라" 로 바꾸려면?
*/
document.querySelector("#changeBtn").addEventListener("click", function(){
for(let i=0; i<10; i++){
document.querySelectorAll("div")[i].innerText = "김구라";
}
});
/*
마우스를 올려보셈 버튼에 마우스를 올렸을 때(mouseover)
div1 ~ div10까지 모든 div의 innerText를 "해골" 로 바꾸려면?
*/
document.querySelector("#changeBtn2").addEventListener("mouseover", function(){
for(let i=0; i<10; i++){
document.querySelectorAll("div")[i].innerText = "해골";
}
});
/*
버튼에 focus가 있을 때(mouseover) tab으로
div1 ~ div10까지 모든 div의 innerText를 "해골" 로 바꾸려면?
*/
document.querySelector("#changeBtn3").addEventListener("focus", function(){
for(let i=0; i<10; i++){
document.querySelectorAll("div")[i].innerText = "원숭이";
}
});
</script>
- div{div$}*10 : div1~10까지를 inner text로 하는 <div> 요소 10 개가 생긴다.
이런 내용들은 Emmet — the essential toolkit for web-developers 에서 찾을 수 있다.
이 emmet의 code가 vscode에 내장되어 있다고 했다.
Cheat Sheet (emmet.io) 궁금하면 구경해보도록 한다.
- 각 <div> 요소의 참조값을 어떤 방식으로 가져올 수 있을까? querySelector vs. querySelectorAll
이전에는 필요한 요소에 id를 부여해서 참조값을 가져왔다. #id를 통해 id로 참조값을 얻어오는 경우 하나에 대한 참조값을 얻게 되는 것이 맞다. 만약 class로 참조값을 얻어오려고 하는 경우에는 # 대신 .을 사용해서 .class의 방식으로 참조값을 얻을 수 있다. 대신에 단순히 querySelector를 사용하게 되면 web browser을 읽으면서 가장 먼저 읽게되는 해당 class를 가진 첫 번째 요소만 읽어온다. 단순히 요소 정보를 넣어 div로 querySelector를 사용해도 같은 결과이다. 그래서 querySelectorAll을 사용한다. 이를 사용하면 해당 class나 해당 요소인 모든 문서 객체의 참조값을 array로 받아온다. 때문에 javascript에서 문서 객체를 조작할 때 주로 사용한다고 했다.
- focus event : tab을 이용해서 조작하는 중에 해당 객체에 focus가 갔을 때를 의미한다.
<h1>반복문 활용하기</h1>
<input type="text" id="inputMsg">
<button id="saveBtn">배열에 저장</button>
<button id="printBtn">저장된 내용을 순서대로 console에 출력하기</button>
<script>
let msgs=[];
/*
배열에 저장 버튼을 눌렀을 때
input 요소에 입력한 value 값을 읽어와서
msgs 배열에 저장해보세요
*/
document.querySelector("#saveBtn").addEventListener("click", function(){
let val = document.querySelector("#inputMsg").value;
msgs.push(val);
})
/*
console에 출력하기 버튼을 눌렀을 때
msgs 배열에 저장된 문자열을 모두 순서대로
console창에 출력해보세요.
*/
document.querySelector("#printBtn")
.addEventListener("click", function(){
for(let i=0; i<msgs.length; i++){
console.log(msgs[i])
}
});
</script>
- 예시의 하단처럼 줄 변경을 해도 된다.
- 작성한 code가 맞는지 확인하는 작업을 debug라고 한다. 지금은 console 창에서 하지만 나중에는 다른 것으로 한다고 했다. 혹은 console 창에 등장하는 특정 시점에서의 오류를 통해 debuging이 가능하다고 했다.
<h1>반복문 활용하기</h1>
<div id="one">div1</div>
<div id="two" class="my-class">div2</div>
<div class="my-class">div3</div>
<div>div4</div>
<div class="my-class">div5</div>
<div>div6</div>
<div>div7</div>
<div>div8</div>
<div>div9</div>
<div>div10</div>
<input type="text" id="inputName" placeholder="이름입력...">
<button id="changeBtn">바꾸기</button>
<script>
/*
div1~div10까지 모든 div의 innerText를 "김구라" 로 바꾸려면?
*/
// 모든 div의 참조값이 들어있는 배열의 참조값을 미리 얻어낸다.
let divs=document.querySelectorAll("div");
// id가 inputName인 input 요소의 참조값 얻어내기
let inputName = document.querySelector("#inputName")
// 바꾸기 버튼을 눌렀을 때 input element에 입력한 이름을
// 모든 div의 innerText로 지정해보세요
// let val = document.querySelector("#inputName").value;
document.querySelector("#changeBtn").addEventListener("click", function(){
//let val = document.querySelector("#inputName").value;
for(let i=0; i<divs.length; i++){
// divs[i].innerText = val;
divs[i].innerText = inputName.value;
}
// 입력창 지우기
inputName.value = "";
// focus 주기
inputName.focus();
});
// loading시 focus
inputName.focus();
</script>
- 함수 안에서 바깥의 변수를 참조할 수 있다. global과 local에 입력하는 변수를 잘 구분해야 한다.
- placeholder : input box의 배경에 메시지를 작성해둘 수 있다.
- 입력창 지우기에서 확인할 수 있는 "" 는 아무것도 적히지 않은 빈 문자열이다.
아무것도 없는 것이 아니고, undefined와도 다르다.
- focus( ) : 해당 객체에 focus를 주는 함수이다.
- let과 const
let : 얘는 내용을 바꿀 수 있다.
const : 얘는 내용을 바꿀 수 없다. 바꾸려면 에러가 난다. 때문에 계속 같은 내용으로 변수를 사용하려면 let보다 const를 사용하는 것이 좋다고 했다. 혼동하지 않아야 하는 것이 예를 들어 const nums=[10, 20, 30]; 이 있을 때, array의 참조값에 해당하는 nums가 불변인 것이지 array의 내용이 불변인 것은 아니다.
댓글