본문 바로가기

JavaScript136

Javascript) 이벤트 객체, 이벤트 발생 객체, this 용법(7) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 이벤트 객체 - 이벤트 관련 정보를 가진 객체 - 핸들러의 매개인자로 전달 이벤트 발생 객체 - 이벤트 객체의 target 속성 - 이벤트 핸들러 안의 this 속성 HTML 코드 이벤트객체 | 이벤트발생객체 Javascript 코드 this 용법 7) 이벤트 핸들러 안의 this는 이벤트 발생 객체(일반함수기준) btn5.addEventListener('click', function(event) { console.log(event); console.log(this); console.log(event.target); }); 이벤트 객체의 target 속성과 this 속성이 같은 것을 확인할.. 2022. 5. 30.
Javascript) event-handle binding 방법, 핸들러 삭제 방법, onload 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. https://www.w3schools.com/tags/ref_eventattributes.asp HTML Event Attributes W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com event - 웹 페이지 상에 일어나는 모든 사용자 action, 네트워.. 2022. 5. 30.
Javascript) DOM 객체(Node 계열, Element 계열, 자식 요소-제거, 형제요소, 부모요소, 요소추가) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. DOM (Document Object Model) - window.document - 브라우저가 html 문서를 해석해서 document 객체 하위에 계층구조로써 html 태그 객체를 관리 - document.getElementByXXX, document.querySelectorXXX 메소드는 모두 DOM에서 검색하게 됨 - Node.prototype, Element.prototype 등을 상속하고 있음 HTML 코드 Hello #sample Javascript 코드 Node 계열 - TextNode - CommentNode - 모든 tag(Element)객체 Element 계열 - 모든 .. 2022. 5. 29.
Javascript) BOM 객체 (navigator, location, history, screen) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. BOM (Browser Object Model) navigator - browser에 대한 정보를 가진 객체 - userAgent HTML 코드 navigator Javascript 코드 const test1 = () => { console.log(navigator); }; brower에 대한 정보를 리턴해주는 것을 확인할 수 있습니다. userAgent 속성 console.log(navigator.userAgent); location - 브라우저 주소 표시줄 관련 정보를 가진 객체 HTML 코드 location Javascript 코드 const test2 = () => { console.. 2022. 5. 29.
Javascript) window객체 (open, close, setTimeout, clearTimeout, setInterval, clearInterval) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. window 객체 (웹 페이지의 모든 자원을 관리하는 객체) - BOM (Browser Object Model) → navigator, location, history, screen, XMHttpRequest, frames, ... - DOM (Document Object Model) → document (html로부터 변환된 tag객체) - javascript (Object, String, Array, ...) - 기타 속성 - 기타 메소드 open(url, target, specs) - 새 탭 또는 팝업을 시작하는 메소드 target : window 이름 또는 _self specs : .. 2022. 5. 29.
Javascript) class 기본, class 상속 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. Class - 생성자 함수와 상속 관계를 문법적으로 쉽게 표현 - 생성자 함수의 Syntactic Sugar(문법적 설탕) - class는 동일한 이름의 생성자 함수를 선언 - new 연산자를 통해 생성자 함수를 호출하면 constructor가 호출됨 - 클래스 내에 선언된 메소드(메소드 단축문법)는 prototype에 작성됨 - 클래스 내에 선언한 속성은 현재 객체의 속성이 됨 - static 키워드를 사용하면 생성자 함수의 속성으로 등록할 수 있음 class 기본 HTML 코드 class 기본 Javascript 코드 const test4 = () => { const honggd = n.. 2022. 5. 27.

티스토리툴바