jquery

[JS] 드래그 이동이 가능한 draggable 요소 만들기

JQuery에 존재하는 draggable 메서드를 직접 순수 자바스크립트로 제작할 수 있습니다. draggable 메서드는 지정한 요소를 드래그로 이동시킬 수 있도록 만들어줍니다. 이때 draggable로 설정된 요소는 position: absolute 속성을 가지게 되며, left, top 속성으로 움직이게 됩니다. 코드 See the Pen Draggable HTML Element by hyukson (@hyukson) on CodePen. 코드 풀이 drag 먼저 드래그 이동이 가능하도록 만들 요소를 하나 생성해줍니다. let isPress = false, // 마우스를 눌렀을 때 prevPosX = 0, // 이전에 위치한 X값 prevPosY = 0; // 이전에 위치한 Y값 const $tar..

[JS] 숫자 카운트 애니메이션 만들기

홈페이지에서 수치를 표현할 때 효과적으로 시선을 이끌 수 있는 방법 중 하나가 바로 카운트 애니메이션 효과를 사용하는 것입니다. 코드 See the Pen JS Number CountDown by hyukson (@hyukson) on CodePen. 예를 들어 17242까지 증가한다고 할 때, 일정한 간격으로 증가하는 것이 아닌 점점 증가하는 수치가 줄어들면서 훨씬 자연스러운 숫자 카운트 애니메이션으로 보이게 제작해 보았습니다. 코드 풀이 0 // 카운트를 표시할 요소 const $counter = document.querySelector(".count"); // 목표수치 const max = 17242; counter($counter, max); counter 함수를 하나 제작하고, 해당 함수로 카운..

[JS] 특정 요소 스크롤 최하단 고정 시키기

실시간 채팅 기능을 제작하던 중 특정 요소에 다른 요소가 추가되어도 overflow 스크롤 속성이 적용된 영역이 아래로 내려가지 않고 상단에 고정되어 추가되는 현상을 해결해보았습니다. 코드 const $element = document.querySelecotr("div"); $element.scrollTop = $element.scrollHeight; scrollHeight 는 스크롤이 가능한 높이를 뜻합니다. 즉 해당 높이는 스크롤의 최하단을 의미하므로 특정 요소의 scroll을 가능한 길이 만큼 강제로 이동시킵니다. const $element = document.querySelecotr("div"); // 현재의 최하단 구하기 const eh = $element.clientHeight + $eleme..

[JS] 이미지 src 변경하는 방법

자바스크립트에서 이미지의 src를 바꾸는 방법을 소개하겠습니다. 위와 같은 예시 html에서 이미지에 접근하는 간단한 방법은 querySelector 메서드를 이용하는 것입니다. // JavaScript $img = document.querySelector(".imgbox > img"); $img.src = `change.png`; 해당 메서드를 사용하여 img DOM 객체를 가져올 수 있으며, 해당 DOM 객체에서 src를 바꾸는 방법은 아래와 같습니다. Jquery를 사용하면 아래와 같은 한 줄로 끝낼 수 있습니다. $(`.imgBox > img`).attr({ src: "change.png" });

[JS] 스크롤 방향 감지하기

아래로 이동하고 있는지, 위로 이동하고 있는지를 scroll 이벤트로 감지할 수 있습니다. 예제 코드 See the Pen Untitled by hyukson (@hyukson) on CodePen. 이전 위치를 기록하여 비교하기 let lastScrollY = 0; addEventListener("scroll", e => { const scrollY = window.scrollY; // 이전의 스크롤 위치와 비교하기 const direction = scrollY > lastScrollY ? "Scroll Down" : "Scroll Up"; // 현재의 스크롤 값을 저장 lastScrollY = scrollY; console.log(direction); }); 현재의 scroll 된 위치는 window..

[JS] 클릭한 요소의 index 구하기

1 2 3 4 5 6 위와 같은 HTML 코드에서 div를 클릭, 클릭한 요소의 index (순서)를 구하는 방법입니다. JS const boxs = document.querySelectorAll(".boxList > div"); boxs.forEach((el, index) => { el.onclick = () => { console.log(index); } }); 가장 쉬운 방법은 다수의 이벤트를 걸어주는 반복문에서 index를 가져오는 방법입니다. 하지만 다수의 이벤트를 걸어주지 못하는 상황에서는 아래와 같은 방법으로 index를 가져올 수 있습니다. const $box = document.querySelector(".boxList"); $box.onclick = (e) => { const nodes..

[JS] 체크박스 전체 선택 , 해제

코드 See the Pen Untitled by 장혁수 (@hyukson) on CodePen. 코드 풀이 전체 선택, 해제 기능을 추가할 input에 change 이벤트를 걸어 해당 element를 받아옵니다. target으로 받아온 input element의 체크상태를 checked로 접근이 가능합니다. 리스트에 있는 input들을 모두 해당 checked 속성 값과 같게 만들어 주면 됩니다.

[JS] select에서 선택한 값 가져오기

코드 빨강색 노랑색 초록색 const changeValue = (target) => { // 선택한 option의 value 값 console.log(target.value); // option의 text 값 console.log(target.options[target.selectedIndex].text); } 코드 설명 See the Pen select 선택한 값 by bolgang13 (@bolgang13) on CodePen. select 요소에서 value 키워드로 접근, value 값을 가져올 수 있습니다. 선택한 text 값은 해당 select 요소에서 현재 선택한 option의 인덱스 값으로 가져올 수 있고, 해당 값에서 option 목록을 지정해 해당 text 값을 가져올 수 있습니다.

[JS] 전화번호 자동 하이픈(-) 정규식

첫 번째 코드 const phone = '01012345678'; phone.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`); // '010-1234-5678' 00-000-0000 또는 000-0000-0000 전화번호를 (2, 3) - (3, 4) - (4) 자리에 숫자 그룹을 지어 묶어줍니다. replace() 메서드로 각 그룹($1, $2, $3)을 순서대로 배치하고 사이에 하이픈을 추가시켜 하이픈이 추가된 전화번호를 완성시켜 줍니다. const phone = "010-12345678"; phone .replace(/[^0-9]/g, '') // 숫자를 제외한 모든 문자 제거 .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-..

[JS] 별점 드래그 구현

완성본 코드 See the Pen Drag Star by hyukson (@hyukson) on CodePen. 코드 풀이 ★★★★★ ★★★★★ // JAVASCRIPT CODE const drawStar = (target) => { document.querySelector(`.star span`).style.width = `${target.value * 10}%`; } // JQUERY CODE const drawStar = (target) => { $(`.star span`).css({ width: `${target.value * 10}%` }); } 별점 뒤에 숨겨진 input range의 값을 드래그로 조절할 수 있습니다. 해당하는 value값만큼 별 width를 늘려주는 방식입니다. 먼저 이미지..

[JS] base64 이미지 용량 줄이기 (File API)

코드 // const file = ().files[0] // file type을 가진 input DOM에 files로 파일 데이터를 가져올 수 있습니다. const fr = new FileReader(); fr.onload = (base64) => { const image = new Image(); image.src = base64.target.result; image.onload = (e) => { const $canvas = document.createElement(`canvas`); const ctx = $canvas.getContext(`2d`); $canvas.width = e.target.width; $canvas.height = e.target.height; ctx.drawImage(e.ta..

[JS] 체크박스 하나만 선택

코드 first second third // Javascript function clickCheck(target) { document.querySelectorAll(`input[type=checkbox]`) .forEach(el => el.checked = false); target.checked = true; } 코드 풀이 3개의 체크박스 각각에 클릭 이벤트를 걸어주며 클릭 시 clickCheck 함수를 호출합니다. 체크 박스를 체크 시 자기 자신 element를 같이 넘겨줍니다. checkbox 타입을 가진 모든 input의 checked 속성을 false로 바꿔 선택 상태를 해제시켜줍니다.그 후 매게변수로 받아온 체크한 elmeent의 checked 속성만을 true로 바꿔줍니다.