JavaScript
-
[JavaScript] 로컬 스토리지에 데이터를 저장JavaScript 2023. 10. 27. 22:20
localStorage.setItem('key', 'value')를 사용하여 로컬 스토리지에 데이터를 저장하는 방법과 관련한 예제를 자세히 설명하겠습니다. 로컬 스토리지는 웹 브라우저에서 데이터를 클라이언트 측에 저장하는 데 사용되며, 저장된 데이터는 브라우저를 닫고 다시 열어도 유지됩니다. 예제 1: 로컬 스토리지에 데이터 저장하기 // 'myKey'라는 키와 'myValue'라는 값을 로컬 스토리지에 저장합니다. localStorage.setItem('myKey', 'myValue'); 이 예제에서는 'myKey'라는 키와 'myValue'라는 값을 localStorage.setItem('myKey', 'myValue')를 사용하여 로컬 스토리지에 저장합니다. 예제 2: 입력 필드에서 데이터 저장하기..
-
[JavaScript] DOM 요소 내용을 비우는 방법JavaScript 2023. 10. 27. 22:18
element.innerHTML = ''를 사용하여 DOM 요소 내용을 비우는 방법과 관련한 예제를 자세히 설명하겠습니다. 예제 1: 요소 내용 비우기 // HTML에서 다음과 같은 요소가 있다고 가정합니다. // 내용 // 요소를 선택합니다. const element = document.getElementById('myElement'); // 요소 내용을 비웁니다. element.innerHTML = ''; 이 예제에서는 id가 'myElement'인 요소를 선택하고, element.innerHTML = ''를 사용하여 해당 요소의 내용을 비웁니다. 결과적으로 해당 요소의 내용이 빈 문자열로 설정됩니다. 예제 2: 버튼 클릭 시 요소 내용 비우기 // HTML에서 다음과 같은 요소와 버튼이 있다고 가정..
-
[JavaScript] DOM 요소에 클래스를 추가하는 방법JavaScript 2023. 10. 27. 22:16
element.classList.add('class')를 사용하여 DOM 요소에 클래스를 추가하는 방법과 관련한 예제를 자세히 설명하겠습니다. 예제 1: 클래스 추가하기 // HTML에서 다음과 같은 요소가 있다고 가정합니다. // 내용 // 요소를 선택합니다. const element = document.getElementById('myElement'); // 'newClass' 클래스를 요소에 추가합니다. element.classList.add('newClass'); 이 예제에서는 id가 'myElement'인 요소를 선택하고, classList.add('newClass')를 사용하여 해당 요소에 'newClass' 클래스를 추가합니다. 이로써 해당 요소에 'newClass' 클래스가 적용됩니다. 예..
-
[JavaScript] 객체를 복사하는 방법JavaScript 2023. 10. 27. 22:13
{ ...originalObject }을 사용하여 객체를 복사하는 방법과 관련한 예제를 자세히 설명하겠습니다. 예제 1: 객체 복사하기 const originalObject = { name: 'John', age: 30 }; // 원본 객체를 복사하여 새로운 객체를 만듭니다. const objCopy = { ...originalObject }; console.log(objCopy); // 출력: { name: 'John', age: 30 } 이 예제에서는 originalObject라는 원본 객체를 복사하여 objCopy라는 새로운 객체를 만들고 있습니다. 복사된 객체에는 원본 객체의 속성과 값을 포함하고 있습니다. 예제 2: 객체를 복사하고 수정하기 const originalObject = { name:..
-
[JavaScript] DOM 요소를 배열로 변환JavaScript 2023. 10. 27. 22:10
Array.from(document.querySelectorAll('selector'))를 사용하여 DOM 요소를 배열로 변환하는 고급 팁과 관련된 예제를 자세히 설명하겠습니다. 예제 1: DOM 요소를 배열로 변환하고 속성 값 얻기 // HTML에서 다음과 같은 요소가 있다고 가정합니다. // // Item 1 // Item 2 // Item 3 // // 'li' 요소를 선택하고 배열로 변환합니다. const listItems = Array.from(document.querySelectorAll('li')); // 배열에는 이제 'li' 요소가 들어 있습니다. // 예제: 첫 번째 'li' 요소의 텍스트 내용을 가져옵니다. const firstItemText = listItems[0].textCont..