Javascript #4

황현근·2023년 4월 13일
0

Acorn-Academy

목록 보기
7/28
post-thumbnail

반복문 (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);

1개의 댓글

comment-user-thumbnail
2023년 4월 18일

ㅎㅇ

답글 달기