[ codeit ] jQuery - jQuery 활용하기(2)

 이벤트 

1강. 이벤트 객체 들여다보기

 

2강. 이벤트 객체 파라미터?

 

함수의 구조

// 함수 선언
function makeLog(str) {
  console.log(str);
}

// 함수 호출
makeLog('안녕하세요');

makeLog함수는 파라미터 하나(str)를 받도록 정의도어, 함수를 호출할 때 파라미터로 값을 하나 넘길 수 있음

 

이벤트 핸들러

$(document).on('keydown', keyboardInput);

이벤트 핸들러 함수(keyboardInput)를 호출하는 코드가 자바스크립트 내부에 구현된 상태, 함수 선언에 파라미터를 넣는 것만으로도 이벤트 객체 전달이 가능

// 이벤트 객체를 사용할 경우
function keyboardInput(e) {
  console.log(e.key);
}

// 이벤트 객체를 사용하지 않을 경우
function keyboardInput() {
  ...
}


//.....................??차이점..?

 

3강. 코드 줄이기

//html
<div id = "menu">
   <a id="home">Home</a>
   <a id="seoul">Seoul</a>
   <a id="tokyo">Tokyo</a>
</div>

//클릭이벤트
$('#home').on('click', clickHome);
$('#seoul').on('click', clickSeoul);
$('#tokyo').on('click', clickTokyo);

function clickHome(){
	$('#home').css('font-weight','bold');
    $('#seoul').css('font-weight','normal');
    $('#tokyo').css('font-weight','normal');
}
function clickSeoul(){
	$('#home').css('font-weight','normal');
    $('#seoul').css('font-weight','bold');
    $('#tokyo').css('font-weight','normal');
}
function clickTokyo(){
	$('#home').css('font-weight','normal');
    $('#seoul').css('font-weight','normal');
    $('#tokyo').css('font-weight','bold');
}

//키보드이벤트
$(document).on('keydown', processKeyEvent);

function processKeyEvent(event){
  if(event['key'] === '1'){
     clickHome();
  } else if(event['key'] === '2'){
     clickSeoul();
  } else if(event['key'] === '3'){
     clickTokyo();
  }
}



//중복코드 줄이기

$('#menu a').on('click', selectMenu);

function selectMenu(event){
	//consnole.log(event.currentTarget.id); //home, seoul  ..?? currentTarget.id??
    
    var targetId = event.currentTarget.id;
    
    $('#photo').attr('src', 'images/' + targetId + '.png');
    
    $('#menu a').css('font-weight','normal');
    $('#' + targetId).css('font-weight','bold');
}

$(document).on('keydown', selectMenu);

function selectMenu(event){
    
    var targetId = '';
    
    if(event.type === 'click'){       //클릭이벤트일 때
    	targetId = event.currentTarget.id; //현재 target인 targetId 실행
        
    } else if(event.type === 'keydown'){   //키보드이벤트 일 때
        if(event['key'] === '1'){
     	   targetId = 'home';
        } else if(event['key'] === '2'){
           targetId = 'seoul';
        } else if(event['key'] === '3'){
           targetId = 'tokyo';				//1,2,3 경우에 따라 targetId 적용
        }
    }
}

//더 줄여보기.. 아직 이해는 못함

function selectMenu(event) {
    var targetId = '';
    // 이미지 변경, 폰트 굵기 변경 여부를 기억할 토글 변수를 설정한다.
    var toggle = 0;
    if(event.type === 'click') {
        targetId = event.target.id;
        toggle = 1;
    } else if(event.type === 'keydown') {
        // event 객체를 chrome dev tool로 분석해 보면 키값을 
        // 가지고 있는 속성이 originalEvent.key 이다.
        var targetIdx = event.originalEvent.key;
        // 키값이 1부터 4일 때만 작동시킨다.
        if(targetIdx > 0 && targetIdx < 5) {
            // 개발자 툴을 사용해 보면 $('#menu a')이라는 jQuery가 반환하는 값이 배열이다.
            // 따라서, (targetInd-1)을 하면 원하는 HTML 소스가 출력된다.
            // (console.log($('#menu a')[0])을 출력해 보면 알 수 있다.)
            // 마지막으로 id를 구하려면 ['id']를 추가하면 된다.
            targetId = $('#menu a')[targetIdx-1]['id'];
            toggle = 1;
        }
    }
    // 앞에서 설정한 토글 변수 값이 1일 때만 이미지 변경과 폰트 굵기 변경을 함으로써
    // 다른 키를 입력할 경우 오작동을 막을 수 있다.
    if(toggle === 1){
        $('#photo').attr('src', 'images/' + targetId + '.png');
        $('#menu a').css('font-weight', 'normal');
        $('#'+targetId).css('font-weight', 'bold');
    }
}

 

4강. 다양한 이벤트 정리

마우스이벤트

mouseover : 마우스 포인터가 영역위로 올라올 경우 발생

mouseout : 마우스 포인터가 영역에서 벗어날 경우 발생

mousedown : 마우스 버튼을 누를 경우 발생

mouseup : 마우스버튼을 눌렀다 놓을 경우 발생

mousemove : 마우스를 움직일 경우 발생

dbclick : 더블클릭시 발생

dragdrop : 마우스를 드래그할 때 발생

 

키보드이벤트

keydown : 키보드 버튼이 내려가는 순간 발생

keypress : 키보드 버튼이 내려가는 순간 발생( enter, esc등 출력하지않는 키에는 반응x)

keyup : 눌러진 키보다버튼이 다시 올라올 때 발생

 

포커스이벤트

focus : 포커스가 위치할 경우 발생

blur : 포커스를 다른곳으로 옮길 경우 발생

 

입력이벤트

change : 선택값을 바꿀 경우 발생

input : 사용자가 입력하는 경우 발생

select : 입력 양식의 하나가 선택될 때 발생

submit : 폼을 전송하는 경우 발생

 

윈도우 창 이벤트

move : 윈도우나 프레임을 움직일 때 발생

resize : 윈도우나 프레임 사이즈를 움직일 때 발생

 

마우스 휠 이벤트

mousewheel : 마우스 휠을 움직일 때 발생 (브라우저에 따라 안되는 경우도)

 

5강. $(document).ready, 그리고 익명함수

일반적으로 script는 body의 하단에 들어가서 html을 먼저 읽은 후 script를 적용하는데

head부분에 들어가서 script가 먼저 읽힐 경우 하단의 html을 읽지못하는 오류가 발생하는데 그 때 사용

//하단에서 불러왔던 코드
$('#hello').on('click', sayHello);

function sayHello(){
  alert($('#hello').text());
  $('#hello').css('background', '#7f8ff4');
}

//를 상단으로 올려서
$(document).ready(whenReady); //페이지 로딩이 끝난 후 함수를 실행시키세요

function whenReady(){
}
//ready코드와 함께 내부에 적용


$(document).ready(whenReady);

function whenReady(){
   $('#hello').on('click', sayHello);

  function sayHello(){
    alert($('#hello').text());
    $('#hello').css('background', '#7f8ff4');
  }
}


//두개의 함수(whenReady, sayHello)가 적용되는 불필요함 제거
$(document).ready(function(){
  $('#hello').on('click', sayHello);

    function sayHello(){
      alert($('#hello').text());
      $('#hello').css('background', '#7f8ff4');
    }
});


//두번 적용되는 sayHello 줄이기
$(document).ready(function(){
  $('#hello').on('click', function(){
  	alert($('#hello').text());
      $('#hello').css('background', '#7f8ff4');
    });
  });

 

  jQuery III 

1강. 요소 숨기기, 보여주기

$('#photo').hide();
$('#photo').attr('src', 'images/' + target +'.png'); //사진을 바꾸는 코드
$('#photo').fadeIn(1000);

 

2강. Furniture Shop

//내코드
//#popup-trigger클릭시 팝업보이기
$('#popup-trigger').on('click', showPop);
      
function showPop(){
  $('#popup').fadeIn(1000);
}

//#close-btn 클릭 또는 esc키보드 선택시 팝업숨기기
$('#close-btn').on('click', hidePop);
$(document).on('keydown', hidePop);

function hidePop(){
  $('#popup').fadeOut(1000);
}


//해설
+ 키보드 키를 확인하는 코드가 없음
$(document).on('keydown', pushEscKey);

function pushEscKey(event){
   if(event.which == '27'){  //esc = 27
     $('#popup').fadeOut(1000);
   }
}

 

3강. 스크롤 I

$(window).scrollTop(); //현재 '스크롤바'의 위치

$(window).on('scroll', function(){
  console.log($(window).scrollTop();
  
  $('.top').css('opacity', 1-$(window).scrollTop() / $('.top').height());
                               //scroll 위치값           요소의 높이값
                               //scroll의 위치값이 요소의 높이값보다 커지면 
                               //($(window).scrollTop() / $('.top').height() 값이 1보다 커지면)
                               //opacity가 1-1로 투명도 0
}

 

4강. 스크롤 II

$(window).scrollTop(100); //스크롤바가 100의 위치로 이동

$('.go-to-top').on('click', function(){
	$(window).scrollTop(0);
    $('html', 'body').animate({scrollTop:0}, 500);
                                     //위치  걸리는 시간
}

 

5강. each

//24개의 홀수짝수 카드

$('.card').each(function(){
  console.log('hello'); //hello가 24번 출력
}
$('.card').each(function(){
  console.log($(this)); //hello가 24번 출력
             //$(this) : card를 클래스로 가진 요소를 모두 순회
}
$('.card').each(function(){
  console.log($(this).text()); //각 카드의 값(text)이 출력
}

 

6강. 홀짝

//내코드
$('#even-btn').on('click', function);
$('#odd-btn').on('click', function);


$('.card').each(function(){
  if($(this).text()%2 === 0){
    $(this).addClass('selected');
  } else{
    $(this).not().addClass('selected');
  };
});


//해설
$('#even-btn').on('click', function(){
  $('.card').removeClasS('selected');
  $('.card').each(function(){
    if(Number($(this).text()) % 2 === 0){
      $(this).addClass('selected');
    }
  });
});

$('#odd-btn').on('click', function(){
  $('.card').removeClasS('selected');
  $('.card').each(function(){
    if(Number($(this).text()) % 2 !== 0){
      $(this).addClass('selected');
    }
  });
});

 

7강. 제이쿼리 애니메이션

CSS 적용하기

$("div").animate({left: '250px'});

 

여러 CSS 동시에 적용하기

$("div").animate({left: '250px', opacity:'0.5'});

 

여러 CSS 순서대로 적용하기

$("div").animate({left: '250px'});
$("div").animate({opacity: '0.5'});

 

CSS 반복 적용하기

$("div").animate({left: '+=250px'});

 

CSS 적용 속도 조절하기

$("div").animate({left: '250px'}, 1000); //또는 slow, fast

 

애니메이션 이펙트 적용하기 ( linear, swing, easeInBounce, easeOutBounce, easeInOutBounce )

$("div").animate({left: '250px'}, 1000, 'easeOutElastic');

 

8강. 음악 스트리밍 사이트 I

//내 코드..
$(window).scrollTop(); //현재 '스크롤바'의 위치

$(window).on('scroll', function(){
  console.log($(window).scrollTop();
  
  $('.playlist').css('opacity', 1-$(window).scrollTop() / $('.playlist').height());

});


//해설
//$('.playlist').css('opacity','1'); //바로 나타남
//$('.playlist').animate({'opacity':'1'}, 1500); //1.5초만에 나타남


function scrollHandler(){
  //console.log('hello'); //스크롤 할때마다 hello출력
  
  //$(window).scrollTop() //스크롤 지점의 상단값
  //$(window).height() //브라우저의 높이값
  //$(window).scrollTop() + $(window).height() //스크롤 지점의 하단값
  
  var windowBottom = $(window).scrollTop() + $(window).height()
  //console.log('windowBottom')
  
  //* 모든 playlist를 하나씩 확인해서
  // 그 playlist의 중간 지점 좌표가 windowBottom보다 작으면
  //  그 playlist가 보이게
  
  //* 해당 부분 내 코드
  //for( var i = 0; i<playlist.length; i++){
  //  if(playlist[i].height/2 < windowBottom){
  //    playlist.animate({'opacity':'1'}, 1000);
  //  }
  //}
  
  //* 해설
  var playlists = $('.playlist'); //해당 html 변수화
  for(var i = 0; i < playlists.length; i++){
    //var playlist = playlists[i];
    var playlist = $(playlists[i]); //제이쿼리화
    //console.log(playlist); //모든 playlist 출력
    
    var playlistHalf = playlist.position().top + playlist.outerHeight / 2
    				//playlist.position().top //playlist요소의 상단값
                    //playlist.outerHeight ///playlist요소의 높이값
                    
    if(playlistHalf < windowBottom){
	  playlist.animate({'opacity':'1'}), 1500);
    }
  }
}
 
$(window).on('scroll', scrollHandler);

//처음 로딩될 때 호출
scrollHandler();

function scrollHandler(){
  
  var windowBottom = $(window).scrollTop() + $(window).height()
  var playlists = $('.playlist');
  
  for(var i = 0; i < playlists.length; i++){

    var playlist = $(playlists[i]);
    var playlistHalf = playlist.position().top + playlist.outerHeight / 2

    if(playlistHalf < windowBottom){
	  playlist.animate({'opacity':'1'}), 1500);
    }
  }
}
 
$(window).on('scroll', scrollHandler);

//처음 로딩될 때 호출
scrollHandler();

 

9강. 음악 스트리밍 사이트 II

for문 -> each문

//내코드

//브라우저의 하단값  
//$windowBottom = $(window).scrollTop() + $(window).height()
//플레이리스트의 중앙값 
//$playlistHalf = $('.playlist').scrollTop() + $('.playlist').height/2

//$playlistHalf < $windowBottom  일 때, playlist block

var playlist = $('.playlist');
var windowBottom = $(window).scrollTop() + $(window).height();
var playlistHalf = $('.playlist').scrollTop() + $('.playlist').height/2

function show(){
  for(var i = 0; i < playlist.length; i++){
    if(playlistHalf[i] < windowBottom){
      playlist[i].fadeIn(1000);
    }
  }
}

show();

//each문 해답
function scrollHandler(){
  var windowBottom = $(window).scrollTop() + $(window).height();
  
  $('.playlist').each(function(){
    //console.log($(this)); //각각의 playlist를 불러옴
    
    var playlist = $(this);
    var playlistHalf = playlist.position().top + playlist.outerHeight()/2;
    
    if(playlistHalf < windowBottom){
      playlist.animate({'opacity':'1'}, 1500);
    }
  });
}

$(window).on('scroll', scrollHandler);

scrollHandler();

 

10강. 음악 스트리밍 사이트 III

//내코드


//브라우저 하단값
//var windowBottom = $(window).scrollTop() + $(window).height();
//플레이리스트 위치값
//var playlistHalf = $('.playlist').position().top + $('.playlist').outerHeight/2

//playlistHalf < windowBottom 일 때 playlist.animate({'opacity', '1'}, 1000);

function scrollHandler(){
  var windowBottom = $(window).scrollTop() + $(window).height();
  
  $('.playlist').each(function(){
    var playlist = $(this);
    var playlistHalf = playlist.position().top + playlist.outerHeight()/2
    var btn = $('.to-top-btn');
    
    if(playlistHalf < windowBottom){
      playlist.animate({'opacity':'1'}, 1500);
    }
    
    if(windowBottom == 0){
      btn.fadeIn(1000);
    }else{
      btn.fadeOut(1000);
    }
  });
}
$(window).on('scroll', scrollHandler);

scrollHandler();

//해답코드

function scrollHandler(){
  var windowBottom = $(window).scrollTop() + $(window).height();
  
  $('.playlist').each(function(){
    var playlist = $(this);
    var playlistHalf = playlist.position().top + playlist.outerHeight()/2

    if(playlistHalf < windowBottom){
      playlist.animate({'opacity':'1'}, 1500);
    }
  });
    console.log($(document).height());
    console.log(windowBottom);
    
    if(windowBottom == $(document).height()){
      $('.to-top-btn').fadeIn();
    }else{
      $('.to-top-btn').fadeOut();
    }
}

$(window).on('scroll', scrollHandler);

scrollHandler();



$('.to-top-btn').on('click', function(){
  $('html, body').animate({scrollTop:0}, 1000);
});

 

 

 프로젝트: 나만의 포트폴리오 

1강. 포트폴리오 :  메뉴 색 바꾸기

//내코드
var Top = $(window).scrollTop();
var headerHeight = $('.header').outerHeight();
var menuTxt = $('.menu-right');

if(Top == headerHeight){
  menuTxt.css('color','#4a4a4a');
}


//해설
function scrollHandler(){
  console.log($(window).scrollTop()); //현재스크롤의 위치
  console.log($('.about').position().top); //about섹션의 상단좌표
  
  if($(window).scrollTop() >= $('.about').position().top){
    $('.menu-right button').css('color','#4a4a4a');
  }else{
    $('.menu-right button').css('color','#ffffff');
  }
}

$(window).on('scroll', scrollHandler);

//처음페이지 로딩시 함수가 불리도록
scrollHandler();

 

2강. 포트폴리오 : 섹션 스크롤

 

3강. 포트폴리오 : 멋있게 나타내기

 

4강. 포트폴리오 : 막대기 애니메이션