반복문 (Loop)
반복문 (Loop)
프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문이다.
for 문
- 어떤 특정한 조건이 거짓으로 판별될 때까지 반복한다.
for(i = 0; i < 100; i++){ console.log(i); document.querySelectorAll("p")[i].innerText="내용"; }
버튼을 눌렀을 때, p 요소의 color를 "red로 변경
<button onclick="change()">바꾸기</button> <script> let change = function () { for (let i = 0; i < 10; i++) { document.querySelectorAll("p")[i].style.color="red"; }; }; </script>
버튼을 누르면 배열에 저장된 문자열이 li 요소의 innerText로 출력
<button onclick="print()">출력하기</button> <script> let names = ["김구라", "해골", "원숭이", "주뎅이", "덩어리"]; let print = function () { for (i = 0; i < names.length; i++) { document.querySelectorAll("li")[i].innerText = names[i]; } }; </script>👉 배열의 size 만큼 반복문 수행 (xxx.length)
forEach 문
- Array 객체에서만 사용가능한 메서드로 배열의 요소들로 반복하여 작업을 수행한다.
- 배열의 값을 하나씩 순차적으로 해당 함수에 전달한다.
- 배열이 가진 모든 값으로 순차적으로 리턴값이 없는 함수를 처리한다.
arr.forEach (func (value, index, arr) { };버튼을 누르면 배열에 담긴 숫자가 p요소에 출력되도록 프로그래밍 #1
<button onclick="print()">출력하기</button> <script> let nums = [10, 20, 30, 40, 50]; let print = function () { nums.forEach(function (item, index) { document.querySelectorAll("p")[index].innerText = item; }) }; </script>버튼을 누르면 배열에 담긴 숫자가 p요소에 출력되도록 프로그래밍 #2
<button onclick="print()">출력하기</button> <script> let nums = [10, 20, 30, 40, 50]; let ps = document.querySelectorAll("p"); let print=()=>{ nums.forEach(function(item, index){ ps[index].innerText=item; }); }; </script>
조건문
if / else 문
- if ( 조건식 ) 영역이 참이면, { } 코드 블록 사이의 실행문을 1회 실행하고, 거짓이면 if문을 탈출한다.
<script> if ( 조건식 ) { 실행문 A; //조건식이 참이면 실행 } else if ( 조건식 ) { 실행문 B; //조건식이 거짓일 경우 실행 } else { 실행문 C; }; ... </script>입력한 이름이 "현근"이면 p 요소에 "주인님 반갑습니다." 라고 출력
<p id="one"></p> <script> let name = prompt("이름을 입력하세요 !"); if (name == "현근"){ document.querySelector("#one").innerText="주인님 반갑습니다." } else { document.querySelector("#one").innerText="나가" };
양자 택일의 조건부 블럭 구성
<p id="one"></p> <script> let isMan = confirm("당신이 남성이면 확인을 누르고, 여성이면 취소를 누르세요."); let result = isMan ? "당신은 남성이군요" : "당신은 여성이군요"; document.querySelector("#one").innerText= result; </script>
- 논리 연산자 테스트
<유아 전용 놀이기구 탑승조건>
- 몸무게는 30kg 미만
- 키는 150cm 미만
확인하기
<input type="text" id="weight" placeholder="몸무게 입력 . . ."> <input type="text" id="height" placeholder="키 입력 . . ."> <button onclick="check()">확인하기</button> <p id="result"></p> <script> let check = function () { let w = document.querySelector("#weight").value; let h = document.querySelector("#height").value; let canRide = w<30 && h<150; let result = canRide ? "탑승 가능" : "탑승 불가"; document.querySelector("#result").innerText = result; }; </script>
EventListner
- Dom객체(eventTarget객체)로부터 이벤트가 발생할 때, 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다.
- 특정 DOM에 위에 말한 Javascirpt 이벤트가 발생할 때 특정 함수를 호출한다.
// 1. 전송 버튼을 눌렀을 때 알림창에 "전송합니다"를 출력 //id가 sendBtn인 요소에 "click" 이벤트가 일어나면 호출될 callback 함수 등록 document.querySelector("#sendBtn").addEventListener("click", ()=>{ alert("전송합니다"); }); --------------------------------------------------------------------- // 2. 마우스 이벤트 처리하기 document.querySelector(".box").addEventListener("mousemove", function(event){ console.log(event); //이벤트가 일어난 상대 좌표 얻어내기 let x = event.offsetX; let y = event.offsetY; //이벤트가 일어난 요소(div)의 innerText로 출력해보기 event.target.innerText="x : " + x + " y : " + y; }); --------------------------------------------------------------------- // 3. key event 활용 <input type="text" id="inputMsg" placeholder="입력..."> <p id="result"></p> <input type="text" id="result2" placeholder="입력..."> <script> document.querySelector("#inputMsg").addEventListener("keyup", function(event){ //입력한 문자열을 읽어와서 let msg=event.target.value; //p 요소의 innerText로 출력하기 document.querySelector("#result").innerText=msg; //만일 Enter 키를 눌렀다면 if (event.key == "Enter"){ event.target.value=""; document.querySelector("#result").innerText=""; document.querySelector("#result2").value=msg; } }); </script> ---------------------------------------------------------------- // 4-1. 박스 클릭 시 색깔 변경 #1 <div class="wrapper"> <div class="box">box1</div> <div class="box">box2</div> <div class="box">box3</div> </div> <script> for(let i=0; i<3; i++){ document.querySelectorAll(".box")[i].addEventListener("click",(e)=>{ e.target.style.backgroundColor="yellow" }); } </script> // 4-2. 박스 클릭 시 색깔 변경 #2 let divs = document.querySelectorAll(".box"); divs.forEach((item) => { item.addEventListener("click", (e) => { e.target.style.backgroundColor = "yellow"; }); }); ---------------------------------------------------------------- // 5. 클릭한 box 우측으로 100px씩 이동시키기 let divs = document.querySelectorAll(".box"); for (let i=0; i<divs.length; i++){ let mLeft = 0; divs[i].addEventListener("click", (e) => { mLeft += 100; e.target.style.marginLeft = mLeft + "px"; }); }
<함수를 만들어서 변수에 담고 call 하기>
let a = function(){}; a()<함수를 바로 call 하기>
(function(){ })();👉 변수에 담는 이유는 담아놓고 필요한 시점에 여러번 call 하기 위해서다. 만약 함수를 오직 1번만 call 할 예정이라면 위와 같이 바로 call 하면 된다.
Call back function
- 위의 이벤트리스너 코드들에서 function 부분을 콜백이라고 부른다.
- 이벤트가 실행됐을 때, 사용자에게 다시 알려주는 것을 말한다.
- onload, onclick 같은 속성에 콜백을 등록하거나 대입하면 된다.
- 함수의 인자로 전달된 함수의 경우 언제든 원하는 시점에 실행을 시킬 수 있다. 콜백함수는 전달받은 즉시 실행될 필요가 없다는 점이 포인트다.
function one(value){ console.log(value); }; function two(callback){ const value = 'callback test'; callback(value); }; two(one);
ㅎㅇ