Javascript -JQUERY 입문

<a onclick = "document.getElementById('photo').src = 'images/seoul.png';">Seoul</a>

 

Javascript 코드가 길어지면 너무 지저분하겠다. 

 

<script>

//사진을 바꿔주는 함수

function clickSeoul() {

document.getElementById('photo').src = 'images/seoul.png';

}

-> <a onclick = "clickSeoul();">Seoul</a>

 

document.getElementById('paris').style.fontWeight = 'normal';

 

--> 너무 길고 지저분하잖아. 그래서 Jquery라는 library를 사용한다. 

Jquery cdn , mini

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

 

$('#photo').attr('src','images/seoul.png') 

attr : attribute : 속성을 바꾼다. -> png로!

 

    function clickSeoul() {
      $('#photo').attr('src','images/seoul.png');
      $('#seoul').css('font-weight', 'bold');
      $('#home').css('font-weight', 'normal');
      $('#tokyo').css('font-weight', 'normal');
      $('#paris').css('font-weight', 'normal');
    }

 

이벤트 event : HTML요소들에게 일어날 수 있는 일들

예 ) 사용자가 요소를 클릭한다(onclick = '') // 마우스 hover , out // 페이지 로딩이 끝남 // 사용자가 키보드 누름 등 

 

event handling 

-키보드에서 'q'를 누르면(event) // 게임이 끝난다 (handling)

 

    //사진에 그림자
    function mouseEnterPhoto(){
      $('#photo').css('box-shadow', '5px 10px');
    }
    function mouseLeavePhoto(){
      $('#photo').css('box-shadow', 'none');
    }

 

--> 

  <img id="photo" src="images/home.png" width="90%" onmouseenter="mouseEnterPhoto();" onmouseleave="mouseLeavePhoto();">

 

onclick = "clickSeoul();"

->

<script>

$('#home').on('click', clickHome);                여기에는 clickHome이라는 함수만 있고 괄호 없다!!!

...

$('#photo').on('mouseEnter', mouseEnterPhoto);

$('#photo').on('mouseLeave', mouseLeavePhoto);

</script>