본문 바로가기
반응형

JavaScript122

JavaScript에서 URL 쿼리 파라미터를 변수로 관리하는 방법(GET방식) JavaScript에서 URL 쿼리 파라미터를 변수로 관리하는 방법(GET방식)API 요청을 보낼 때, URL에 여러 쿼리 파라미터를 사용하게 됩니다.이런 경우, 쿼리 파라미터를 변수로 관리하면 코드를 더욱 읽기 쉽고 유지보수하기 쉬워집니다.이번 포스팅에서는 JavaScript에서 쿼리 파라미터를 변수로 관리하는 간단한 방법을 설명하겠습니다.예시 코드// 쿼리 파라미터를 변수로 선언const baseUrl = 'https://api.example.com/products';const userId = 12345;const searchKeyword = 'laptop';const category = 'electronics';const available = true;const page = 1;const pageS.. 2024. 9. 4.
[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.
[DataTables & jquery] 데이터테이블에서 row 클릭 이벤트 사용하는 방법 !! [DataTables & jquery] 데이터테이블에서 row 클릭 이벤트 사용하는 방법 !! 아래와 같이 코드를 사용하면 datatables에서 클릭 된 로우의 데이터를 가지고 올 수 있습니다. 이러한 방법으로 팝업을 띄우거나 ajax통신을 한다던가 사용하시면 됩니다 :) 예제코드 $('#post-table').on('click', 'tbody tr', function() { $("#post-table").DataTable().row($(this)).data(); }); 2024. 4. 11.
[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.
728x90
반응형

티스토리툴바