본문 바로가기
반응형

html145

[JavaScript] 자바스크립트를 활용하여 숫자에 ,(콤마) 넣는 방법 !! 정규식사용 [JavaScript] 자바스크립트를 활용하여 숫자에 ,(콤마) 넣는 방법 !! 정규식사용예제코드 (정규식)function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}// 사용 예시let number = 1234567;console.log(numberWithCommas(number)); // 출력: "1,234,567" 여기서 사용된 정규식 /\B(?=(\d{3})+(?!\d))/g는 다음과 같은 의미를 가집니다:\B: 단어 경계가 아님을 의미합니다. 이는 숫자 앞이나 뒤에 콤마를 잘못 삽입하지 않도록 합니다.(?=(\d{3})+(?!\d)): 3자리 숫자 그룹 앞에 콤마를 삽입합니다. 이는 다음과.. 2024. 7. 19.
[JavaScript] keydown, keyup, keypress 함수의 기능 및 차이점 [JavaScript] keydown, keyup, keypress 함수의 기능 및 차이점keydown, keyup, 그리고 keypress는 웹 개발에서 키보드 이벤트를 처리할 때 사용되는 이벤트 타입입니다.이 이벤트들은 각각의 키보드 동작에 반응하여 특정 작업을 수행하도록 도와줍니다.이들 이벤트의 차이점은 다음과 같습니다1. keydown 이벤트설명: 사용자가 키보드를 누르는 순간 발생합니다.트리거 시점: 키가 눌린 직후.특징:모든 키에 대해 발생합니다(알파벳, 숫자, 특수 문자, 화살표 키, 기능 키 등).키가 계속 눌려있으면 반복적으로 발생합니다.key 값(키의 실제 값)과 code 값(키보드의 물리적 위치)을 확인할 수 있습니다.2. keyup 이벤트설명: 사용자가 눌린 키를 놓는 순간 발생합니.. 2024. 5. 31.
[JavaScript] <p> 태그안에 있는 텍스트 가지고 오는 방법 !! [JavaScript] 태그안에 있는 텍스트 가지고 오는 방법 !!p태그 안에 있는 텍스트 가져오는 방법 입니다 :) 안녕하세요 포스트it 개발자입니다.// p 태그에 있는 텍스트 가져오기let text = document.getElementById("post-result").innerText;console.log(text); 2024. 5. 8.
[JavaScript] 텍스트를 입력 받아 해시태그를 추가하는 방법 !! (# 추가하기) [JavaScript] 텍스트를 입력 받아 해시태그를 추가하는 방법 !! (# 추가하기)input창에 텍스트를 넣으면 자동으로 해시태그(#)를 붙여주는 함수 입니다 ㅎ 예제코드Automatic Hashtag 값을 넣어주세요: Click 결과값Automatic Hashtag 값을 넣어주세요: Click 2024. 5. 3.
[JavaScript] 자바스크립트를 활용하여 단어 치환하는 방법 !! [JavaScript] 자바스크립트를 활용하여 단어 치환하는 방법 !! 자바스크립트를 활용해서 특정 단어를 치환하여 결과값을 뿌려주는 코드입니다. 예제코드 단어 리스트와 치환하기 텍스트 입력: 치환할 단어: 대체할 단어: 치환하기 결과: 결과값 2024. 4. 15.
[JavaScript] 자바스크립트를 활용하여 클립보드에 텍스트 복사하는 방법 !! [JavaScript] 자바스크립트를 활용하여 클립보드에 텍스트 복사하는 방법 !! 특정 태그에 담겨있는 텍스트를 클립보드에 복사하는 함수를 만들어 봤습니다 ㅎ 예제코드 function clipboardCopy() { const textToCopy = document.getElementById('post-result').innerText; if (!navigator.clipboard) { console.error('클립보드 API를 지원하지 않는 브라우저입니다.'); return; } navigator.clipboard.writeText(textToCopy) .then(() => { console.log('텍스트가 클립보드에 복사되었습니다.'); }) .catch(err => { console.error.. 2024. 4. 3.
[Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (옆으로 회전 모양) #10 [Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (옆으로 회전 모양) #10 햄버거 버튼 10째 햄버거 모양이 오른쪽으로 회전하는 모양 입니다 ! 예제코드 결과 2024. 3. 25.
[Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (동그라미 x자 모양) #9 [Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (동그라미 x자 모양) #9 햄버거 버튼 9째 동그라미안에 X자 모양 입니다 ! 예제코드 결과 2024. 3. 19.
[Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (+ 플러스 모양) #8 [Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (+ 플러스 모양) #8 햄버거 버튼 8번째 플러스(+) 모양 입니다 ! 예제코드 결과 2024. 3. 12.
728x90
반응형

티스토리툴바