본문 바로가기

JavaScript228

[javascript] Table의 Row요소 drag&drop 안녕하세요. 이전에 자바스크립트로 drag&drop을 구현해본 적 있는데요, 오늘은 테이블의 row를 drag&drop으로 옮기는 것을 구현해보려고 합니다. dragableTable.html 이름 나이 성별 홍길동 20 남 이순신 35 남 유관순 17 여 강감찬 45 남 dragableTable.css table { padding:10px; border-collapse: collapse; width: 50%; margin:auto; } th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; } /*옮길때 불투명으로 보이는 부분*/ tr.dragging { opacity: 0.5; } dragableTable.js // 드래그 앤 .. 2023. 4. 25.
[JavaScript] 두 개의 range slider로 최소/최대 지정하기 안녕하세요. 이번 시간에는 두 개의 range slider로 최소/최대 값을 지정하는 방법을 구현하려 합니다. 쇼핑몰과 같은 사이트에서는 상품들을 조회할 때 최소/최대 가격을 slide bar를 활용해서 범위를 지정하는 경우가 많은데요. 태그와 약간의 자바스크립트 코드를 통해 간단하게 구현이 가능합니다. index.php 최소 최대 0 50 index.js const sliderOne = document.getElementById("slider-1"); // 최솟값 range slider const sliderTwo = document.getElementById("slider-2"); // 최댓값 range slider const displayValOne = document.getElementById(".. 2023. 4. 21.
[ javascript ] EJS 사용해서 서버가 보낸 값 출력하기 php에서는 과 같은 형식으로 서버에서 보낸 값을 클라이언트의 화면에 출력할 수 있습니다. Node.js에서는 이를 지원하는 여러 방법이 있는데요. 오늘은 EJS (Embedded JavaScript templating)라는 단순한 템플릿 언어를 사용해보겠습니다. express, router pattern 등을 미리 알고 있다는 전제 하에 시작하겠습니다. 우선 디렉토리 구조를 다음과 같이 만듭니다. 디렉토리로는 public, routes, view가 꼭 필요하고, 파일으로는 package.json, server.js가 꼭 필요합니다. package.json { "name": "230303-stickode-upload", "version": "0.0.0", "private": true, "scripts":.. 2023. 4. 14.
[JavaScript]i18next을 활용한 언어 변환 처리 안녕하세요. 이번 시간에는 자바스크립트에서 간단하게 언어를 변환 처리 할 수 있는 방법을 알아보려 합니다. i18next는 자바스크립트에서 언어 변환등의 국제화(i18n)처리를 가능하게 해주는 라이브러리입니다. i18n이란 국제화 (internationalization)의 약자로 첫 글자 i와 마지막 글자 n 사이에 18글자가 들어가 있다는 의미입니다. 이번 포스팅에서는 국제화 라이브러리인 i18next을 활용하여 웹페이지의 한/영 변환을 할 수 있는 예제를 만들어보겠습니다. i18next 활용 예시 English Korean 결과 영상 구현한 페이지는 한국어/영어에 대한 선택이 가능하게 되어 있고, 다른 언어를 추가하고 싶을 경우 다른 나라의 언어 코드를 추가한 뒤 분기처리 할 수 있습니다. i18ne.. 2023. 4. 8.
[JavaScript] 입력한 내용을 텍스트 파일에 저장하기 안녕하세요. 이번 시간에는 입력한 내용을 텍스트 파일에 저장해보겠습니다. 먼저 실행 결과입니다. 입력한 내용을 Blob 객체에 담은 뒤 해당 객체를 나타내는 URL 생성, a element 에 url연결, download 속성 설정. a element click하면 입력한 내용이 텍스트 파일에 저장됩니다. 전체 코드입니다. 다운로드 2023. 4. 7.
[javascript] mousemove 이벤트 사용하여 마우스 효과 주기. 안녕하세요. 오늘은 mousemove 이벤트를 사용해서 마우스 효과를 주는 방법을 알아보겠습니다. mousemove 이벤트는 이름 그대로 마우스(포인팅)이 움직일 때 발생하는 이벤트입니다. 아래와 같은 방법으로 이벤트를 사용할 수 있습니다. addEventListener("mousemove", (event) => { ~ }); onmousemove = (event) => { ~ }; mousemove 이벤트 객체에서 사용할 수 있는 내용들은 아래와 같습니다. 1. (스크롤 무시하고 브라우저 상단을 0으로 측정, 스크롤해도 값 동일 : 클라이언트 좌표) event.x 또는 event.clienX : 현재 보이는 화면 영역 내 마우스 x 좌표 값을 가져옴. event.y 또는 event.clientY: 현재.. 2023. 4. 5.
[JavaScript] clipboard api를 사용해서 클립보드에 특정 텍스트를 복사하는 방법 아래의 코드를 사용하면 "텍스트"라는 글자를 클립보드에 복사할 수 있습니다. navigator.clipboard.writeText("텍스트"); navigator.clipboard api를 사용해서 System clipboard 에 접근합니다. System clipboard는 컴퓨터 Ram에 있는 Buffer입니다. * 클립보드에 텍스트를 복사하려면 "clipboard-write" 권한이 필요합니다. "clipboard-write" 의 권한은 활성 탭에 있을 때 페이지에 자동으로 부여됩니다. 포커싱을 잃으면 비활성화 탭이 되어 클립보드 복사에 실패합니다. 이 외에도 비활성화 탭이 되는 경우는 더 있습니다. 포커싱을 잃으면 비활성화 탭이 되어 클립보드 복사에 실패하는지 테스트를 해봤고, 아래는 테스트 코드.. 2023. 4. 3.
[JavaScript] client에서 쿠키 생성, 수정, 삭제하는 방법 안녕하세요. 이번 시간에는 client에서 쿠키 생성, 수정, 삭제하는 방법에 대해 알아보겠습니다. document.cookie 를 사용해서 구현해보겠습니다. 먼저 쿠키 생성, 삭제하는 방법입니다. 아래의 함수를 실행하면 (개발자도구 -> 애플리케이션 -> 쿠키 )에 쿠키가 생성, 삭제 됩니다. 삭제하는 것은 만료기간을 과거로 설정해서 삭제되는 방식입니다. setCookie()함수를 실행해서 생성한 쿠키는 브라우저를 종료하면 자동으로 삭제됩니다. 원하는 이름의 쿠키를 삭제하는 방법 deleteCookie("user") : user라는 이름의 쿠키가 삭제됨. function deleteCookie(name) { document.cookie = name + "=; expires=Thu, 01 Jan 1970.. 2023. 4. 2.
[JavaScript] 마우스 드래그로 일괄 선택하기 안녕하세요. 이번 시간에는 마우스 드래그를 통해 한번에 이벤트를 발생시키는 방법에 대해 알아보겠습니다. 자바스크립트에는 마우스와 관련된 다양한 이벤트를 제공하는데, 아래의 예제에서는 mousedown(마우스를 누르고 있을 때), mousemove(마우스를 움직일 때), mouseup(마우스를 뗄 때) 이 세 가지를 사용하여 드래그를 했을 때 버튼 색깔을 바꾸는 방식입니다. index.php 버튼1 버튼2 버튼3 버튼4 버튼5 index.js for (const button of document.querySelectorAll('.btn')) { mouseMove(button, function (event) { // 드래그했을 때 해당 부분이 버튼이 아닐 경우에는 return if (!(event.targe.. 2023. 3. 31.

티스토리툴바