JavaScript204 [JavaScript]JavaScript에서 배경색 변경하는 방법 JavaScript에서 배경색 변경하는 방법 JavaScript에서 특정 이벤트가 발생하면 HTML 요소의 배경색(Background Color)을 변경해야 하는 상황이 존재할 수 있습니다. 이번 포스팅은 HTML 요소의 배경색을 변경할 수 있는 몇 가지 방법을 소개합니다. 웹 페이지의 배경색 변경하는 방법 버튼을 클릭했을 때, 웹 페이지의 배경색을 변경하는 방법입니다. 1. HTML 요소에 click 이벤트 리스너를 추가합니다. 2. document.body.style.backgroundColor 프로퍼티에 배경색을 설정합니다. 아래는 HTML 마크업입니다. 배경색 yellow로 변경 배경색 red로 변경 배경색 blue로 변경 아래는 JavaScript 파일입니다. 버튼을 클릭하면 웹 페이지의 배경색.. JavaScript/DOM 2022. 11. 11. [JavaScript]OnClick 이벤트에서 DOM 요소 제거하는 방법 OnClick 이벤트에서 DOM 요소 제거하는 방법 DOM 요소를 클릭했을 때, 해당 요소를 제거하려면 다음 순서대로 코드를 작성합니다. 1. DOM 요소를 가져옵니다. 2. click 이벤트 리스너를 추가합니다. 3. 이벤트 핸들러에서 가져온 요소에 대한 remove() 메서드를 호출합니다. 예를 들어, id 속성이 parent인 요소를 클릭했을 때, 요소를 제거하는 코드는 다음과 같습니다. const parentDiv = document.getElementById('parent'); parentDiv.addEventListener('click', () => { parentDiv.remove(); }); getElementById() 메서드를 사용하여 id 속성이 parent인 요소를 가져온 다음 cl.. JavaScript/DOM 2022. 11. 11. [JavaScript]HTMLCollection과 NodeList 차이점 HTMLCollection과 NodeList HTMLCollection과 NodeList의 주요 차이점은 HTMLCollection은 동적이고 NodeList는 정적이라는 것입니다. 즉, DOM에 새로운 요소(Element)가 추가되면 HTMLCollection은 새로운 요소를 가져오지만, NodeList는 가져오지 못합니다. HTMLCollection 다음 두 메서드는 HTMLCollection 객체를 반환합니다. - getElementByTagName() - getElementByClassName() NodeList 다음 두 메서드는 NodeList 객체를 반환합니다. - getElementByName() - querySelectorAll() 차이점 1. 텍스트 노트 포함 여부 다음은 간단한 HTML.. JavaScript/DOM 2022. 11. 10. [JavaScript]태그의 이름으로 요소(Element) 가져오는 방법 태그의 이름으로 요소(Element) 가져오는 방법 JavaScript에서 태그의 이름으로 요소를 가져와야 하는 경우가 있을 수 있습니다. 예를 들어, 다음 html 문서에서 태그에 해당하는 요소만 가져와야 하는 상황이 발생할 수 있습니다. JavaScript React Vue div tag1 div tag2 이번 포스팅은 JavaScript에서 getElementsByTagName() 및 querySelectorAll() 메서드를 사용하여 태그 이름으로 하나 이상의 HTML 요소를 가져오는 방법을 소개합니다. getElementsByTagName() 메서드 getElementsByTagName() 메서드는 태그 이름에 해당하는 모든 요소를 가져옵니다. 다음 HTML 예제의 body에는 3개의 p 요소와.. JavaScript/DOM 2022. 11. 10. [JavaScript]함수로 클래스 만드는 방법 클래스 기반의 언어와 프로토타입 기반의 언어 ES6부터 JavaScript에서 class 키워드를 사용하여 클래스를 정의할 수 있지만, C++, C#, Java와 같은 클래스 기반의 언어에서 사용하는 클래스와 100% 동일하게 동작하지 않습니다. 따라서, JavaScript에서 class 키워드를 사용하여 클래스를 정의하는 문법을 이해하기 전에 클래스 기반의 언어와 프로토타입 기반의 언어에 대해 간단하게 구분할 수 있어야 하고 class 키워드가 도입되기 전에 JavaScript에서 클래스를 어떻게 정의했는지 알아야 할 필요가 있습니다. 클래스 기반의 언어는 클래스로 객체의 기본적인 형태와 기능(필드와 메서드)을 정의하고 new 키워드와 생성자로 객체를 생성할 수 있습니다. 다음 예제는 클래스 기반의 언.. JavaScript/함수 2022. 11. 9. [JavaScript]Target과 CurrentTarget 차이점 Target과 CurrentTarget 차이점 Target과 CurrentTarget은 DOM Event Interface의 프로퍼티라는 공통점을 가지고 있지만, 이 두 개의 프로퍼티는 결코 동일한 프로퍼티가 아닙니다. 이번 포스팅은 DOM Event Interface의 프로퍼티인 Target과 CurrentTarget 차이점을 소개합니다. 이벤트 이 둘의 차이점을 설명하기 전에 JavaScript에서 이벤트가 무엇이며 어떻게 동작하는지 이해해야 합니다. 웹 사이트를 사용하는 사용자가 HTML 요소에 대한 사건을 일으키는 행위를 이벤트(Event)라고 말합니다. HTML 요소에 대한 사건은 다음과 같은 행위입니다. - 로그인 버튼을 클릭 - 로그인하기 위해 아이디를 입력 - 검색창에 검색 키워드를 입력 .. JavaScript/Tip 2022. 11. 8. [JavaScript]div 태그에서 텍스트 입력하는 방법 div 태그에서 텍스트 입력하는 방법 이번 포스팅은 input, textarea 태그를 사용하지 않고 div 태그에서 텍스트를 입력할 수 있는 방법을 소개합니다. contenteditable 속성 div 태그에 텍스트를 입력할 수 있는 방법은 contenteditable 속성을 true로 설정하는 것입니다. div 태그의 contenteditable 속성을 true로 설정하고 텍스트를 입력하면 다음 스크린샷처럼 파란색 테두리가 활성화되고 텍스트를 입력할 수 있습니다. 파란색 테두리를 비활성화하려면 div 태그의 스타일에 outline을 none으로 설정합니다. 텍스트 가져오는 방법 div 태그에는 onChange 이벤트가 존재하지 않으므로 div 태그에 입력한 텍스트를 가져오려면 jQuery를 사용하거나.. JavaScript/Tip 2022. 11. 8. [JavaScript]XMLHttpRequest의 readyState 이해하기 XMLHttpRequest의 readyState란? XMLHttpRequest의 readyState 프로퍼티는 XMLHttpRequest 객체의 상태를 보여줍니다. readyState 프로퍼티의 값이 변경될 때마다 readystatechange 이벤트가 실행되므로 해당 이벤트에서 readyState 프로퍼티의 값을 확인하는 것이 좋습니다. 값 상태 설명 0 UNSENT XMLHttpRequest 객체는 생성되었지만 open() 메서드가 호출되지 않았습니다. 1 OPENED open() 메서드가 호출되었습니다. 2 HEADERS_RECEIVED send() 메서드가 호출되었습니다. 3 LOADING 응답을 로드 중입니다. 4 DONE 요청 완료되었습니다. 이번 포스팅은 readyState가 변경되는 과정을.. JavaScript/JavaScript 문법 2022. 11. 7. [JavaScript]XMLHttpRequest 사용 방법 XMLHttpRequest란? JavaScript에서 XMLHttpRequest 객체를 사용하여 서버에 동기 또는 비동기식 요청을 보낼 수 있으며, 요청에 대한 응답 정보를 웹 페이지에 로드할 수 있습니다. 따라서, 웹 페이지를 다시 로드하지 않아도 웹 페이지의 일부를 변경할 수 있습니다. XMLHttpRequest() 객체 사용 방법을 요약하면 다음과 같습니다. - XMLHttpRequest 객체를 생성합니다. - open() 메서드로 요청에 필요한 정보를 설정합니다. - send() 메서드로 서버에 요청을 보냅니다. - 응답에 대한 콜백 함수를 생성합니다. 이번 포스팅은 XMLHttpRequest 객체 사용 방법을 설명합니다. XMLHttpRequest 객체 생성 new 키워드를 사용하여 XMLHtt.. JavaScript/JavaScript 문법 2022. 11. 7. [JavaScript]콘솔 로그 스타일 적용하는 방법 콘솔 로그 스타일 적용하는 방법 콘솔(console)은 애플리케이션 개발 프로세스에서 매우 유용합니다. 주로 변수에 할당된 값을 확인하거나 연산 결과를 확인하기 위한 용도로 사용합니다. JavaScript에서는 console.log() 메서드를 사용하여 콘솔에 특정 데이터를 출력할 수 있으며, 출력 결과에 스타일을 적용할 수 있습니다. 예를 들어, 티스토리 접속 후 크롬 개발자 도구의 콘솔 탭을 들어가면, 스타일이 적용된 문자열을 볼 수 있습니다. console.log() 메서드 출력 결과에 스타일을 적용한다고 개발 프로세스에 큰 영향은 없지만, 특정 웹 사이트에 대해 특별함을 각인시킬 수 있습니다. 물론, 개발자 한정이겠지만요... 이번 포스팅은 console.log() 메서드 출력 결과에 스타일을 적.. JavaScript/Tip 2022. 10. 13. [JavaScript]객체의 값으로 키를 가져오는 방법 객체의 값으로 키를 가져오는 방법 JavaScript에서 객체의 프로퍼티는 Key-Value 쌍 구조로 이루어진 데이터 집합입니다. 예를 들어, Person이라는 객체의 name 프로퍼티의 Key는 name이고 Value는 'Hong Gil Dong'입니다. const Person = { name: 'Hong Gil Dong', // Key: name, Value: '홍길동' age: 20, // Key: age, Value: 20 gender: 'male' // Key: gender, Value: 'male' }; 객체의 키에 해당하는 값은 점(.) 표기법 또는 대괄호([]) 표기법을 사용하여 가져올 수 있지만, 값에 해당하는 키를 가져오는 방법은 쉽지 않습니다. 값에 해당하는 키를 가져오려면, Obj.. JavaScript/객체 2022. 10. 12. [JavaScript]URLSearchParams 객체 사용 방법 URLSearchParams 객체 사용 방법 Query String이란 URL에서 물음표(?)부터 시작하는 문자열입니다. 주로 검색 기능이 있는 웹 사이트에서 검색 키워드를 Query String으로 설정합니다. 제가 개발 자료를 참고하는 stackabuse 사이트에서 url이란 키워드를 검색하면, URL은 다음과 같습니다. https://stackabuse.com/search/?q=url 위에서 언급했듯이 Query String은 물음표(?)부터 시작하므로 해당 URL의 Query String은 q=url입니다. JavaScript 개발자는 위 예시와 같은 URL에서 Query String 추출 후 원하는 정보를 가져와야 하는 상황이 발생할 수 있는데, JavaScript는 친절하게도 복잡한 Query.. JavaScript/Tip 2022. 10. 10. 이전 1 2 3 4 5 6 7 ··· 17 다음