자바스크립트 + 제이쿼리 입문 day 5

자바스크립트 + 제이쿼리 입문 day 5

---

 

자바스크립트에서 함수를 만드는 방법 

 

function incre(){
            num++;
            elLikes.innerHTML = num;
        }
        
elIncrement[0].onclick = incre;

 

함수 종류 

 

function 함수명(){

   구현 로직

}

 

let 함수명 = function() {

   구현 로직

};

 

 function test(){
        }

 

var, 함수선언식 => 브라우저가 상위로 끌어올려주기 때문에 위치에 상관없이 실행 가능하다.

=> 호이스팅

 

 

변수에 담아서 사용하기 

 

let test1 = function(){

console.log('변수에 함수를 담아서 써보자')

}

 

let과 const에는 호이스팅이 일어나지 않는다. 

 

 

실행이 아니라 그냥 전체가 출력되기 

 let test1 = function(){
            console.log('변수에 함수를 담아서 써보자')
        }
        test1();

        console.log(test);

 

 

 

for문을 사용해서 idx를 불러오고 해당 값을 호출해주기 

const elIncre = document.querySelectorAll(".incre button");

      for (let i = 0; i < 3; i++) {
        let num = 0;
        elIncre[i].onclick = function () {
          num++;
          elIncre[i].innerHTML = num;
        };
      }

 

 

 

함수를 이용해서 이미지를 지정해보기 

 

버튼 클릭시 이미지를 dom에 출력한다 ! 

 

 <div class="photo">
      <figure></figure>

      <button>1</button>
      <button>2</button>
      <button>3</button>
    </div>

    <script>
      const elPhoto = document.querySelector(".photo figure");
      const elBtn = document.querySelectorAll(".photo button");

      let photoUrl = ["04.jpg", "05.jpg", "06.jpg"];

      for (let i = 0; i < 3; i++) {
        elBtn[i].onclick = function () {
          elPhoto.innerHTML = `<img src ="./img/${photoUrl[i]}">`;
        };
      };

    </script>

---

 

랜덤 함수를 사용해서 이미지를 출력해보기 ! 

 

    <div class="photo2"> </div>
    <script>
        const elPhoto2 = document.querySelector(".photo2");

        
        let randomNumber = Math.floor(Math.random() * 3);
        
        elPhoto2.innerHTML = `<img src ="./img/${photoUrl[randomNumber]}">`;

    </script>