반응형

프로그래밍/JavaScript 18

JavaScript 다크, 라이트모드 변경 이벤트 처리하기

사용자가 시스템의 화면모드를 라이트 혹은 다크 모드로 변경시 이에 따른 처리를 위해서 자바스크립트로 해당 이벤트를 받아서 처리하는 방법입니다. CSS 다크모드 처리 2가지 방식 다크모드를 처리하는 두 가지 방식에 대해서 설명드립니다. 일반적인 방법은 "@media"태크의 "prefers-color-schem"를 사용하는 방법이며, 또 다른 방법은 " "에 사용하는 파일로딩 방식입니다. 스크립트 ccusean.tistory.com Node.js Prefers-color-scheme 서버에서 처리하는 방법 서버사이드(Server side)에서 사용자의 Color scheme를 미리 알고, 처리할 수 있는 방법을 공유합니다. Mac, iPhone과 같은 경우 이미 오래전부터 "다크테마"라는 것을 제공하고 있습..

HTML 이벤트 처리하는 3가지 방식

HTML 태그에 달리는 이벤트를 처리하는 3가지 방법에 대해서 설명드립니다. HTML DOM element addEventListener함수 이용 HTML DOM element 속성 이용 HTML 속성 이용 아래의 예제는 HTML button의 onclick 이벤트를 예제로 설명드립니다. HTML DOM element addEventListener함수 이용 가장 권장되는 방식입니다. 기존 이벤트를 유지하고, 이벤트를 추가하는 방식으로 진행됩니다. 실행이 될 때 기존에 추가된 이벤트들이 실행되고, 여기서 추가된 이벤트가 실행 됩니다. 이벤트 선언하는 방식은 이벤트를 연결해줄 DOM객체를 얻어온 후 addEventListener함수를 이용해서 해당 이벤트명과 함수를 연결해 줍니다. ※ 이벤트명은 보통 "on..

JavaScript 태그안의 내용 가져오기, 변경하기

JavaScript로 html 태그로 둘러싸인 내용을 가져오거나, 변경하는 방법입니다. innerText textContent innerHTML HTML 태그안의 내용 가져오기 실습 예제 html 문구 딸기 사과 바나나 innerText 순수 텍스트만 가져옵니다. document.getElementById('fruit').innerText // '딸기\n사과\n바나나' textContent html태그를 제외한 내용을 가져옵니다. document.getElementById('fruit').textContent // '\n 딸기\n 사과\n 바나나\n ' innerHTML html태그를 포함한 선택 요소안의 내용을 가져옵니다. document.getElementById('fruit').innerHTML /..

Javascript 요소 가져오기

HTML DOM Document의 요소를 가져오는 함수들의 정의와 사용법에 대해서 소개합니다. 관련 함수는 아래와 같습니다. getElementById getElementsByClassName getElementsByName getElementsByTagName querySelector querySelectorAll getElementById('아이디') 함수의 인자와 아이디가 일치하는 요소를 가져옵니다. querySelector('#아이디')로 대체 가능합니다. ('#'을 꼭 붙여줍니다.) 꾸션 document.getElementById('blogName') document.querySelect('#blogName') getElementsByClassName('클래스명') 함수의 인자와 클래스가 일치하..

jQuery 접근자

기본 접근자 // html 태그 $('태그명') // $('h2') // id $('#아이디명') // class $('.클래스명') // name 어트리뷰트 $('input[name=이름]') 고급 예제 // 모든 요소 $("*") // 현재 요소 $(this) // class="intro"가 설정된 모든 p태그 요소 $("p.intro") // 첫 번째 p태그 요소 $("p:first") // 첫 번째 ul태그의 첫 번째 li태그 요소 $("ul li:first") // 모든 ul태그의 첫 번째 li태그 요소 $("ul li:first-child") // href어트리뷰트를 갖는 모든 요소 $("[href]") // a태그의 target이 '_blank'로 설정된 모든 요소 $("a[target='_..

JavaScript 배열 다루기(추가, 삭제, 찾기, 변형)

자바스크립트에서 배열을 다룰 때 자주 사용하고 유용한 방법을 소개합니다. 추가/삭제 push, pop: 배열의 제일 뒤에 추가/삭제 let myArray = [1, 2, 3] myArray.push(4) console.log(myArray) // (4) [1, 2, 3, 4] myArray.pop() console.log(myArray) // (3) [1, 2, 3] unshift, shift: 배열의 제일 앞에 추가/삭제 let myArray = [1, 2, 3] myArray.unshift(0) console.log(myArray) // (4) [0, 1, 2, 3] myArray.shift() console.log(myArray) // (3) [1, 2, 3] splice: 배열 임의의 위치에 추가..

JavaScript Spread 구문

객체와 배열의 요소를 쉽게 병합하는 구문입니다. (나머지 구문과 문법은 같지만 혼돈하지 마시기 바랍니다.) 배열 const myArray1 = [3, 4, 5] const myArray2 = [1, 2, ...myArray1, 6, 7] console.log(myArray2) // [1, 2, 3, 4, 5, 6, 7] 객체 const myObject1 = { name: '꾸션', hairColor: '갈색' } const myObject2 = { ...myObject1, age: 29 } console.log(myObject2) // {name: "꾸션", hairColor: "갈색", age: 29}

JavaScript Destructuring

객체나 배열에서 여러 값을 추출하여 동시에 변수에 할당하는 방법입니다. Destructuring 객체 const myObject = { name: '꾸션', age: 29, } const { name, age } = myObject console.log(name, age) //"꾸션" 29 Destructuring 배열 const myArray = [1, 2, 3] const [a, b, c] = myArray console.log(a, b, c) // 1 2 3 Destructuring 함수 const myObject = { name: '꾸션', age: 29, } function myFunction({ name, age }) { return `${name}: ${age}` } console.log(m..

JavaScript 날짜 시간

Javascript에서는 날짜, 시간을 출력 및 계산할 수 있도록 Date 객체를 제공합니다. Date객체에서 제공하는 날짜관련 함수를 이용해서 날짜, 시간과 밀리초를 출력하는 방법과, 성능 검증 및 테스트에 많이 사용하는 경과시간을 계산하는 방법에 대해서 알아 보겠습니다. 1. 현재시간 출력 1) 날짜시간 (년월일 시분초) let now = new Date() // // 로컬 날짜시간 // console.log(now.toLocaleString()) // 2022. 3. 1. 오후 4:51:43 console.log(now.toString()) // Tue Mar 01 2022 16:51:43 GMT+0900 (대한민국 표준시) const myYear = now.getFullYear() const my..

JavaScript JSON

자바스크립트 사용 환경에서 JSON 데이터와 Javascript 객체 간의 양방향으로 변환하는 방법에 대해서 알아봅니다. 1. Javascript 객체에서 JSON 데이터로 변환 "JSON.stringify" 함수를 사용합니다. const myObject = { name: 'David', age: 23, } // Javascript 객체 const myJsonString = JSON.stringify(myObject) console.log(myJsonString) // {"name":"David","age":23} 2. JSON 데이터에서 Javascript 객체로 변환 "JSON.parse" 함수를 사용합니다. const myJsonObject = JSON.parse(myJsonString) conso..

JavaScript로 sleep함수 구현

자바스크립트로 sleep(delay) 함수를 구현하는 방법은 아래 소스와 같습니다. sleep함수 구현 // 화살표 함수로 구현 const sleep = (ms) => { return new Promise((resolve) => setTimeout(resolve, ms)) } // 일반 함수로 구현 function sleep(ms) { return new Promise((resolve) => setTimeout(resolve, ms)) } sleep함수 사용 (2가지 방식) 1) async, await 방식 // 화살표 함수로 구현 const func = async () => { await sleep(3000) // 3초 console.log('Do something...') } // 일반 함수로 구현 ..

JavaScript 태그 사용법

1. 기본 2. 파일 불러오는 방식 or myScript.js 내용 document.getElementById("demo").innerHTML = "Hello World!"; 태그 위치 기본적으로 안에 위치하며, 태그 안에 넣을 수도 있습니다. 태그안에서 아래부분에 넣는 경우는 페이지 로딩(표시)을 빠르게 하기 위한 경우에 사용합니다. 보통, 페이지 로딩 후에 필요한 스크립트들을 body아래쪽에 위치 시킵니다. (예: button 클릭 이벤트, 콤보박스 선택 이벤트)

반응형