1. 이벤트 이벤트 개요 - 이벤트(Event) : 마우스 클릭, 키보드 입력, 이미지나 HTML 문서의 로딩, 타임 아웃 등 사용자의 입력 행위, 문서나 브라우저의 상태 변화를 브라우저가 자바스크립트 코드에게 알리는 통지 - 이벤트 리스너(Event Listener) : 발생한 이벤트에 적절히 대처하기 위해 작성된 자바스크립트 코드 이벤트 종류 HTML5 표준 이벤트는 70개 남짓하다 이벤트 리스너의 이름은 이벤트 이름 앞에 on 을 붙인다. ex) mousedown 이벤트의 리스너는 onmousedown 이벤트 리스너 이벤트가 발생하는 경우 onkeydown 사용자가 아무 키가 누르는 순간 onkeyup 사용자가 누른 키를 놓는 순간 ondbclick 객체에 더블 클릭될 때 onclick 사용자가 객..

DOM요소를 다양한 방법으로 찾아주는 함수 - querySelector(), querySelectorAll() - id,class 값을 사용해도 되고, 태그 이름을 사용해도 된다. - id는 (#) class는 (.)을 이용하면 되고 태그 이름은 기호 없이 태그 이름만 사용하면 된다. - class 속성은 한 문서에서 여러번 사용할 수 있기 때문에 querySelectorAll() 함수 이용 (이 역시 배열처럼 사용한다.) getElementById() VS querySelector() 사용법 document.getElementById("container"); document.querySelector("#container"); getElementById()와 querySelector() 함수의 차이 - ..

[ES6] 블록 변수 - ES6 버전부터는 전역 변수와 지역 변수 말고도 '블록 변수'가 추가되었음 - 블록 변수는 변수를 선언한 블록에서만 유효하고 블록을 벗어나면 사용할 수 없는 변수 - let, const 예약어를 사용해 변수를 선언하면 블록 변수가 된다. - const는 값 재할당 불가능 (상수) / 값 재할당이 필요하면 let 사용 블록 레벨 스코프 대부분의 프로그래밍 언어는 블록 레벨 스코프(Block-level scope)를 따르지만 자바스크립트는 함수 레벨 스코프(Function-level scope)를 따른다. 함수 레벨 스코프(Function-level scope) : 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 ..

겜블링 게임 각 숫자를 클릭하면 0에서 2사이의 난수로 바뀝니다. 모두 같은 수가 나오면 승리합니다. 0 0 0 문제에 나와있는 기능말고 내가 직접 더 추가해보았다. 처음 숫자가 0으로 세팅되어 있는데 클릭을 했는데도 만약 0이면 이게 클릭이 된건지 아닌지 잘 모르겠어서 클릭이 안 된 숫자는 파란색, 이미 클릭된 숫자는 노란색으로 표시하게 했고 클릭 횟수를 나타내는 변수를 지정하여 한 숫자는 한 번만 클릭이 가능하도록 두번째 클릭부터는 alert 창이 뜨도록 했다. 그리고 각각의 숫자들은 나란히 정렬해야 하므로 div 안에 span으로 놓을 수도 있었지만,CSS에서 flex를 배웠던게 생각나서 한 번 사용해 보았는데 justify-content를 space-around를 통해 간격을 예쁘게 잘 줄 수 있..

* HTML 문서의 로드가 완료된 document에 새로운 HTML 태그를 추가할 수 있다! → 자바스크립트 코드를 이용하여 추가하고 싶은 HTML 태그를 나타내는 DOM 객체를 생성하여 DOM 트리에 직접 삽입하면 된다. 1) DOM 객체 동적 생성 - document.createElement("태그이름")를 호출하면 HTML 태그의 DOM 객체를 생성할 수 있다. - 다음은 태그의 DOM 객체를 생성하는 코드이다. var newDiv = document.createElement("div"); - 이제 newDiv 객체의 프로퍼티를 이용하여 태그를 완성할 수 있다. - 다음은 innerHTML 프로퍼티를 이용하여 태그에 HTML 텍스트를 삽입하는 코드이다. newDiv.innerHTML="새로 생성된 ..

1. document 개요 -document 객체는 이름 그대로 HTML 문서 전체를 대변하는 객체이며, 모든 DOM 객체를 접근하는 경로의 시작점이다. -또한 HTML 문서에 만들어진 동일한 이름의 HTML 태그들을 배열처럼 접근할 수 있는 컬렉션을 두고 있음 예를 들면, 모든 태그들은 images 컬렉션으로, 모든 태그들은 forms 컬렉션으로 접근 가능 - document 객체는 window 의 자식으로 window.document 또는 document 방법으로 접근 가능 - ★ document 객체는 DOM 객체가 아니다. 연결된 css3 스타일 시트도 없고, 따라서 style 객체도 없다. document.style.color= "red"; // 이 코드는 잘못된 코드 2. document 객체..