본문 바로가기

IT875

자바스크립트 이벤트 핸들러 this JavaScript에서 이벤트가 발생하면, 이벤트 핸들러 함수 내부에서 this 키워드를 사용할 수 있습니다. this는 이벤트가 발생한 HTML 요소(element)를 가리킵니다. this를 이용하면, 이벤트 핸들러 함수 내에서 이벤트가 발생한 요소의 속성을 변경하거나, 다른 요소와 상호작용하는 등 다양한 작업을 수행할 수 있습니다. 사용법 예를 들어, 아래 코드는 버튼이 클릭될 때마다 해당 버튼의 텍스트를 변경하는 예시입니다. Click me Click me too 위 코드에서, querySelectorAll() 함수를 사용하여 버튼 요소를 선택하고, forEach() 함수를 사용하여 각 버튼에 이벤트 리스너를 등록합니다. 그리고 이벤트 핸들러 함수 내에서 this를 사용하여 해당 버튼의 textCo.. 2023. 4. 14.
자바스크립트 addEventListener addEventListener는 자바스크립트에서 이벤트를 처리하는 메소드 중 하나로, 지정된 이벤트에 대한 이벤트 핸들러를 등록하는 역할을 합니다. 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수를 의미합니다. 사용법 이 메소드는 다음과 같은 구조를 가집니다. element.addEventListener(event, function, useCapture); element: 이벤트를 등록할 HTML 요소입니다. event: 등록할 이벤트의 종류를 문자열로 지정합니다. function: 이벤트 핸들러로 등록할 함수입니다. useCapture: 이벤트 버블링과 관련된 옵션입니다. 기본값은 false입니다. 예를 들어, 버튼을 클릭했을 때 콘솔에 로그를 출력하는 이벤트 핸들러를 등록하고 싶다면 다음과 같이 .. 2023. 4. 14.
자바스크립트 onclick onclick은 자바스크립트에서 가장 많이 사용되는 이벤트 중 하나입니다. 이벤트는 특정 동작이나 상황이 발생했을 때 자동으로 실행되는 코드를 말합니다. onclick은 HTML 요소가 클릭되었을 때 실행되는 이벤트입니다. 사용법 onclick 이벤트를 사용하기 위해서는 HTML 요소에 onclick 속성을 추가하고, 그 값으로 실행하고자 하는 코드를 입력해야 합니다. 아래는 예시 코드입니다. 클릭하세요 위 코드는 "클릭하세요"라는 문구가 적힌 버튼을 클릭하면 "Hello World!"라는 경고창이 뜨도록 설정한 것입니다. 하지만 위와 같은 방식은 코드가 길어지고 복잡해지면 유지보수하기 어려워질 수 있습니다. 대신 자바스크립트 파일에서 onclick 이벤트를 정의하는 것이 좋습니다. 클릭하세요 const.. 2023. 4. 14.
리눅스 find 명령어 사용법 리눅스에서 find 명령어는 파일 시스템에서 파일이나 디렉토리를 검색하는데 사용됩니다. 이 명령어는 사용자가 지정한 디렉토리와 하위 디렉토리의 모든 파일 및 디렉토리를 검색하며, 조건에 맞는 파일 또는 디렉토리의 경로를 출력합니다. 사용법 사용법: find [경로] [조건] 경로: 검색할 디렉토리 또는 파일의 경로를 지정합니다. 기본값은 현재 디렉토리입니다. 조건: 검색 조건을 지정합니다. 옵션 -name: 파일 이름으로 검색합니다. -type: 파일 타입으로 검색합니다. f는 일반 파일, d는 디렉토리를 의미합니다. -mtime: 수정된 시간으로 검색합니다. +n은 n일 전 이전에 수정된 파일, -n은 n일 이내에 수정된 파일을 의미합니다. -size: 파일 크기로 검색합니다. +n은 n바이트보다 큰 .. 2023. 4. 13.
자바스크립트 remove vs removeChild 차이점 JavaScript에서 remove()와 removeChild() 메소드는 DOM(Document Object Model)에서 요소를 제거하는 데 사용됩니다. 그러나 두 메소드는 약간의 차이가 있습니다. removeChild() removeChild() 메소드는 지정된 부모 요소의 자식 요소 중 하나를 제거합니다. 예를 들어, 다음과 같이 body 요소의 첫 번째 자식 요소를 제거할 수 있습니다. var parent = document.getElementsByTagName("body")[0]; var child = parent.childNodes[0]; parent.removeChild(child); removeChild() 메소드는 반드시 지정된 부모 요소의 자식 요소 중 하나를 제거해야 합니다. 즉,.. 2023. 4. 13.
자바스크립트 append vs appendChild 차이점 JavaScript에서 append()와 appendChild() 함수는 둘 다 DOM(Document Object Model)에서 새로운 요소를 추가하는 메소드입니다. 그러나 두 함수는 약간의 차이점이 있습니다. appendChild() appendChild() 함수는 지정된 부모 노드의 자식 노드 리스트의 끝에 새로운 노드를 추가합니다. 예를 들어, 다음과 같이 새로운 p 요소를 body 요소의 마지막 자식으로 추가할 수 있습니다. var parent = document.getElementsByTagName("body")[0]; var child = document.createElement("p"); parent.appendChild(child); appendChild() 함수는 매개변수로 단일 요소.. 2023. 4. 13.
자바스크립트 setAttribute JavaScript의 setAttribute 메서드는 HTML 요소의 속성 값을 설정할 때 사용됩니다. 이 메서드를 사용하여 지정된 요소의 속성 값을 변경할 수 있습니다. 사용법 setAttribute 메서드는 다음과 같은 구문을 가집니다. element.setAttribute(name, value); 여기서 element는 속성 값을 변경하려는 HTML 요소를 나타냅니다. name은 변경하려는 속성의 이름을 나타내며, value는 새로운 속성 값을 나타냅니다. 예를 들어, 다음 코드는 id가 "myButton"인 버튼의 value 속성 값을 "Click me!"에서 "Clicked!"로 변경합니다. Click me! function myFunction() { var button = document.ge.. 2023. 4. 13.
자바스크립트 getAttribute JavaScript에서 getAttribute() 메소드는 요소의 속성(attribute) 값을 가져오는 메소드입니다. 이 메소드는 DOM 요소 객체에서 호출됩니다. 사용법 예를 들어, 아래와 같은 HTML 코드가 있다고 가정해봅시다. ... getAttribute() 메소드를 사용하여 id, class, data-info 속성의 값을 가져올 수 있습니다. const element = document.getElementById('example'); const idValue = element.getAttribute('id'); // "example" const classValue = element.getAttribute('class'); // "my-class" const infoValue = elemen.. 2023. 4. 13.

티스토리툴바