DOM 3

Javascript 기본 - 3) Event

- 어떠한 버튼을 클릭했을 때 어떠한 액션이 일어나게 하려면 어떻게 해야 할까? [ Event Listener ] - 위와 같이 마우스를 이용해서 버튼을 클릭할 때는 클릭 "이벤트"가 발생한다. - 이렇게 이벤트가 발생했을 때 어떠한 액션을 위한 함수를 호출하는데 그 함수가 바로 이벤트 리스너 이다. [ addEventListener()] - 이벤트 리스너를 호출하기 위해서는 이벤트 리스너를 해당 객체나 요소에 등록해줘야 한다. - 밑에서부터는 해당 html 을 가지고 예제를 적용할 것이다. Title Email: Submit Submit2 1. 자바 스크립트 코드에서 프로퍼티로 등록 window.onload = function() { // 문..

Javascript 기본 - 2) Window 객체 및 DOM

- window 객체는 브라우저에 의해 자동으로 생성되며 웹 브라우저의 창(window)를 나타낸다. 또한 window는 브라우저의 객체이지 javascript 객체가 아니다. - 이 window 객체를 이용해서 1. 브라우저의 창에 대한 정보를 알 수 있고, 이 창을 제어하고 할 수도 있다. 2. 또한 var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 된다. (ex) - var 로 선언해서 window 객체의 프로퍼티를 만들어야 한다. let과 const는 블록 스코프이기에 window 객체 내부의 블록에서 선언된 것으로 전역 객체의 프로퍼티로 활용될 수 없다.(아래) - 브라우저에서 UI를 볼 수 있는 것은 HTML의 요소를 하나하나 분석해..

Javascript에서의 DOM Functions

HTML이 Javascript와 함께 웹페이지에 무언가를 쓰려고 하려면, 어떻게 해야 할까? CSS에서 HTML에 접근할 수 있는 것과 같이 Javascript에서도 HTML에 접근할 수 있다. 예를 들어, CSS에서는 HTML에서의 id 값에 접근하려고 할 때, # 기호를 통해 접근한다. // html에서 아래와 같이 적혀져 있다면, ... This is title ... // css에서는 이런식으로 접근한다. #title{color : red ;} Javascript에서는 DOM 함수를 통해 접근할 수 있다. console.log 에서처럼 console은 객체이고 log는 함수이다. 마찬가지로 'document'도 객체인데, 이게 무엇인지 구글 홈페이지에서 log를 찍어보면, console.log(d..

반응형