불로구

이벤트 종류 - HTML5 표준 이벤트는 70개가 넘는다. - 여기서는 몇 가지만 나열하겠습니다. onkeydown 아무 키가 누르는 순간 onclick 객체에 클릭할 때 onmousedown 객체에 마우스 버튼이 눌러지는 순간 onmousemove 객체 위에서 마우스가 움직이는 동안 발생 onmouseover 마우스 커서가 객체 안으로 들어가는 순간 onmouseout 마우스 커서가 객체에서 벗어나는 순간 ​ 이벤트 리스너 만들기 - HTML 태그 내에 작성 - DOM 객체의 이벤트 리스너 프로퍼티에 작성 - DOM 객체의 addEventListener() 이용 ​ 여기서는 addEventListener()을 이용해서 이벤트를 만들어 보겠습니다. 안녕하세요 초기 마우스 올렸을 때 마우스 올렸다가 내렸을..

자바스크립트를 활용해서 HTML 문서의 로드가 완료된 document에 새로운 HTML 태그를 추가할 수 있다. ​ DOM 객체 동적 생성 - 키워드 : createElement() - document.createElement("태그이름")을 이용해서 HTML 태그의 DOM 객체를 생성할 수 있다. - DOM 객체를 생성했으면 innerHTML 프로퍼티를 이용해서 생성한 객체 태그에 HTML 텍스트를 삽입한다. - 또한, CSS3 스타일 시트도 설정할 수 있다. let newDiv = document.createElement("div"); newDiv.innerHTML = "새롭게 생성했다!"; newDiv.setAttribute("id", "Ndiv"); newDiv.style.backgroundCol..

HTML DOM 객체 - 브라우저는 HTML 페이지를 로드하는 과정에서 각 HTML 태그를 하나의 객체로 만든다! - HTML DOM 이란 HTML 문서의 각 요소를 객체화한 것이다 - HTML 태그를 동적으로 제어하려면 HTML DOM에 대해 알고 있어야 한다. ​ DOM의 목적 - HTML 태그가 출력된 모양과 콘텐츠 제어 ​ DOM 트리 - HTML 태그의 포함 관계에 따라 DOM 객체들을 트리 구조로 만든다. 이것을 DOM 트리라고 함 하이요~ 버튼1 버튼2 위 소스의 DOM 트리는 2번째 사진과 같다! HTML 태그마다 하나의 DOM 객체가 생성된 것을 볼 수 있고, HTML 태그의 포함 관계에 따라 DOM 객체들이 부모 자식의 계층 관계로 구성됨을 볼 수 있다. ​ DOM 트리 특징 - DOM..

자바스크립트의 배열 만드는 방법 1) [ ]를 사용해서 만들기 2) Array 객체를 사용해서 배열 만들기 ​ ​ 1) [ ]를 사용해서 배열 만들기 [ ] 안에 만들고자 하는 원소들의 초기 값들을 작성하면 된다! ​ 배열 크기와 원소 추가 자바스크립트 배열은 자바와 다르게 처음 만들어진 크기를 고정시키기 않고, 원소를 추가하여 늘릴 수 있다! 여기서는 일부로 name[4]를 지정하지 않고, name[5],name[6]을 추가하여 배열의 길이를 6으로 늘렸다 출력에 보면 undefined를 볼 수 있을 것이다! 원소의 값을 추가할 때 빈 공간이 발생하면 원소의 값은 undefined가 되므로 주의하자!! ​ 배열의 원소 변경 ex) name[0] = "둘리"; 그냥 변경하고 싶은 위치에 수정해 주면 된다..