개발자의 끄적끄적

[javascript/jquery] jquery mouse event list / jquery 마우스 이벤트 종류 jquery 에서 마우스에 관련된 이벤트를 제어해야 하는 경우가 종종 있습니다. 이번에는 자주 사용하는 jquery 마우스 이벤트들을 공유해보고자 합니다! 1. 마우스 클릭시 동작 click() 2. 마우스 더블클릭시 동작 dbclick() 3. 마우스가 움직일때 동작 mousemove() 4. 마우스가 영역을 벗어날때 동작 mouseleave() 5. 마우스가 영역으로 들어올때 동작 mouseover() 이벤트들이 몇가지 더 있지만, 가장 자주 사용되는 5가지라고 보셔도 될듯합니다! 참고들 하세요!

[javascript/jquery] jquery visible element count example / jquery visible 엘리먼트 갯수 구하는 방법 jquery 에서 hide / hidden 상태가 아닌 특정 태그를 확인해야 하는 경우 visible 를 이용하시면 됩니다. 아래와 같이 input 태그가 4개 있고 그중에 하나만 hidden 상태라고 가정하고, 위 input 태그들 중에서 hidden 상태가 아닌 갯수를 구하려면 아래와 같이 visible 를 이용해서 length 를 구하면 됩니다! $("input:visible").length; 위 결과를 출력하면 hidden 인 태그가 1개 hidden 이 아닌 태그가 3개 따라서, 결과는 아래와 같이 3이 출력됩니다! 3 참고들 하세요!

[javascript/jquery] jquery mouseover event example / jquery 마우스오버 이벤트 예제 jquery 에서 특정영역에 마우스를 가져 갔을때 이미지를 교체한다든가 특정 문구를 노출한다든가, 알럿창을 띄우는 등 특정 액션을 취해야 하는 경우가 종종 있습니다. 그때는 아래와 같이 mouseover 이벤트를 이용하시면 됩니다! 예를들어 아래와 같이 id_div 라는 id 를 가지는 div 태그가 있다고 가정하고, 마우스를 위 div 영역으로 옮겼을때 특정 액션을 취하고 싶으면 아래 코드처럼 mouseover 이벤트를 등록하고 취하고자 하는 액션을 작성해 주시면 됩니다! $( document ).ready(function() { $("#id_div").mouseover(f..

[javascript/jquery] javascript toLowerCase example / 자바스크립트 대문자를 소문자로 변경하는 방법 javascript 에서 알파벳 대문자로 된 문자열을 소문자로 변경하고 싶은 경우에는 toLowerCase 라는 함수를 이용하시면 됩니다. 아래와 같이 ABC 라는 알파벳 대문자로된 문자열이 있다고 가정하고, var text = "ABC"; 이것을 소문자로 변경하고 싶으면 toLowerCase 를 이용하시면 됩니다. var new_text = text.toLowerCase(); console.log 를 이용하여 출력하면 console.log(new_text); 결과는 아래와 같이 소문자로된 abc 가 출력되게 됩니다! abc 참고들 하세요!

[javascript/jquery] javascript toUpperCase example / 자바스크립트 소문자를 대문자로 변경하는 방법 javascript 에서 알파벳 소문자로 된 문자열을 대문자로 변경하고 싶은 경우에는 toUpperCase 라는 함수를 이용하시면 됩니다. 예를들어 아래와 같이 abc 라는 알파벳 소문자로된 문자열이 있다고 가정하고, var text = "abc"; 이것 전체 대문자로 변경하고 싶으면 아래처럼 toUpperCase 를 이용하시면 됩니다. var new_text = text.toUpperCase(); 위 내용을 아래와 같이 console.log 를 이용하여 출력하면 console.log(new_text); 결과는 ABC 가 나오게 됩니다! 참고들 하세요!

[javascript/jquery] javascript mouse scroll event example / 자바스크립트 마우스 스크롤 이벤트 예제 javascript 에서 마우스 스크롤 액션이 일어날때마다 특정 행동을 취하도록 로직을 작성해야 하는 경우에는 아래와 같이 scroll 이벤트를 이용하시면 됩니다. $(function() { $(window).scroll(function() { // to do } }); 위 내용처럼 페이지 시작시 scroll 이벤트를 선언해서 안에 로직을 작성해 놓으면 마우스 스크롤이 일어날때마다 해당 내용이 동작하게 됩니다! 참고들 하세요!

[javascript/jquery] javascript querySelectorAll example / 자바스크립트 특정 태그 전체 가져오는 방법 javascript 에서 현재 페이지에 있는 특정태그들 리스트를 가져오고 싶은 경우가 있습니다. 그럴때는 아래 나와 있는 내용처럼 querySelectorAll 을 이용하시면 됩니다. var input_list = document.querySelectorAll("input"); 예를들어 현재 페이지에 있는 input 태그를 전체 담고 싶으면 위처럼 작성해서 input_list 에 담으면 됩니다. 내용을 확인해보려면 아래처럼 console.log 로 출력해보면 바로 확인할 수 있습니다! console.log(input_list); 참고들 하세요~!

[javascript/jquery] javascript window.open 팝업차단 확인 방법 javascript 에서 새창을 열기 위해서 window.open 을 사용합니다. 하지만, 가끔 팝업이 차단되어 있는 경우 새창이 열리지 않게됩니다. 그럴때는 아래와 같은 방법으로 팝업이 차단되어 있는지 체크를 해서 alert 창을 띄워줄 수 있습니다. 위 내용 보시면 아시겠지만, try catch 문을 이용해서 exception 이 발생하면 팝업이 차단되어 있다고 보고 alert 을 띄워주는 내용입니다. 참고들 하세요!