Study Record

여러가지 이벤트 처리   이벤트 리스너/이벤트 핸들러 삭제하기 ① 이벤트 핸들러 삭제하기이벤트 핸들러를 삭제하려면 onxxxxx 메소드에 대해 null 값을 설정하기만 하면 된다.// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.document.addEventListener('DOMContentLoaded', function() { var button = document.getElementById('btn'); // 이벤트 핸들러 등록 button.onclick = function() { window.alert('안녕하세요, 자바스크립트!'); }; // 이벤트 핸들러 삭제하기 button.onclick = null;}, false);  ② 이벤트 리스너 ..

JavaScript 로 스타일 시트 조작하기HTML을 조작하는 방법 외에 DOM을 이용하면 스타일 시트를 조작할 수 있다. DOM 으로 스타일 시트를 조작하는 방법에는 인라인 스타일로 액세스하는 방법과 외부의 스타일 시트를 적용하는 방법이 있다.   인라인 스타일로 액세스하기 - style 프로퍼티인라인 스타일이란 개개의 노드에 대해 설정된 스타일이다. 붉은 문자입니다. 인라인 스타일로 액세스하려면 style 프로퍼티를 사용한다.elem.style.prop [= value]// elem : 요소 객체, prop : 스타일 프로퍼티, value: 설정값 예시 코드) 마우스 포인터를 올려놓은 타이밍에 배경색 변경하기// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.document.addEventListe..

data-xxxxx 속성data-xxxxx 속성은 개발자가 목적에 따라 값을 자유롭게 값을 설정할 수 있는 특별한 겂이다. 주로 스크립트(이벤트 리스너)에서 사용하기 위한 파라미터를 삽입하기 위한 속성이다. 'xxxxx' 부분은 알파벳 소문자, 하이픈 밑줄 등의 문자를 사용하여 자유롭게 명명할 수 있다. 사용자 정의 데이터 속성이라고도 한다.네이버구글  HTMLCollection/NodeList 반복 처리 주의점getElementsByTagName/getElementsByName/getElementsByClassName 메소드는 반환값으로서 HTMLCollection 또는 NodeList 객체를 반환한다. 이 객체들은 살아있는(Live) 객체이다. 살아있다는 것은 객체가 문서 트리를 참조하고 있어 문서 ..

노드 추가/치환/삭제DOM 으로 기존의 노드에 접근하여 값을 설정하거나 취득할 수 있다. 더 나아가 문서 트리에 새 노드를 추가하거나 기존의 노드를 대체 또는 삭제할 수 있다. innerHTML 프로퍼티로도 HTML 코드를 추가할 수 있지만 좀 더 복잡한 콘텐츠를 추가할 경우를 설명하고 있다.   신규 노드 생성하기메소드생성하는 노드createElement(요소명)요소 노드createAttribute(속성명)속성 노드createTextNode(텍스트)텍스트 노드createCDATASection(텍스트)CDATA 섹션createComment(텍스트)주석 노드createEntityReference(실체명)실제 참조 노드createProcessingInstruction(타깃명, 데이터)처리 명령 노드creat..

폼 요소에 액세스하기자바스크립트에서 폼(form)은 사용자의 입력을 받는 대표적인 수단이다. 이러한 폼에서 값을 취득하고 설정하는 방법을 알아본다.   입력 상자/선택 상자의 값 취득하기입력 상자/선택 상자의 값을 취득하는 방법은 value 프로퍼티에 액세스하기만 하면 된다. 설정하는 것도 value 프로퍼티의 값을 변경하면 된다.document.addEventListener('DOMContentLoaded', function() { document.getElementById('btn').addEventListener('click', function() { var name = document.getElementById('name'); // 입력 상자 값 취득하기 ..

속성값 컨트롤하기스크립트로 페이지를 조작하는 방법이다.   요소 노드 속 같은 이름의 프로퍼티로 액세스 가능대부분의 요소 노드에 액세스했다면 속성값에 액세스하는 것은 간단하다. 대부분의 속성은 요소 노드 속의 동일한 이름의 프로퍼티로 액세스가 가능하기 때문이다. var naver = document.getElementsByClassName('naver');// 속성값 취득console.log(naver[0].href);// 속성값 변경naver[0].href = "http://www.google.com"; 하지만 그렇지 않은 경우도 있다. CSS 클래스를 나타내는 속성명은 'class' 이지만 DOM 프로퍼티는 'className'이다.var naver = document.getElementsByClas..

DOM외부 서비스에서 어떤 입력을 받아 이를 처리한 결과를 페이지에 반영시킨다는 흐름이 자바스크립트의 흐름이다. 결과를 페이지에 반영시킨다는 것은 HTML을 JavaScript에서 편집한다는 뜻이다. DOM 은 마크업 언어로 작성된 문서에 액세스하기 위한 표준적인 구조로 JavaScript에 한정하지 않고 현재 주로 사용되는 언어의 대부분에서 지원하고 있다. DOM 은 문서를 문서 트리로서 취급한다. DOM 이라는 이름처럼 문서에 포함되는 요소나 속성, 텍스트를 각각 객체로 보기 때문에 객체의 집합(계층 관계)이 문서라고 생각한다. 문서를 구성하는 요소나 속성, 텍스트 등의 객체를 노드라고 부른다. 종류에 따라 요소 노드, 속성 노드, 텍스트 노드 등으로 부른다. DOM 은 노드를 추출, 추가, 치환, ..

반응형 웹 디자인웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법이다. 다양한 화면 크기의 모바일 기기들의 웹 사이트를 표시하면 화면 디스플레이 값이 다양해지고 있는 때에 화면 크기에 반응해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것이 바로 반응형 웹 디자인이다. 단, 반응형 웹 기술이 최신 웹 표준인 CSS3의 일부 최신 모던 웹 브라우저에서만 지원된다.   뷰포트(viewPort)뷰포트란 실제 내용이 표시되는 영역을 뜻한다. PC 화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문에 모바일 화면에서 의도한대로 표시되지 않는다. 뷰포트를 지정하면 기기 화면에 맞춰 확대/축소해서 내용을 표시한다.   뷰포트 지정하기  태그 안에서 태그를 이용해 뷰포트를 ..