🔻변수 선언하기🔻 1. var BOM, DOM, ES6 버전에서 사용한다. function-scoped 성격을 지닌다. 제어문을 자기 영역으로 인식을 못한다. 상수 선언이 불가능하다. 중복 선언이 가능하다. a를 중복 선언을 한 뒤 console.log로 찍어보면 20으로 나온다. 2. let ES6(ECMAScript 2015)에서 생성되었다. block-scoped 성격을 지닌다. block-scoped : 함수와 제어문을 자신의 영역으로 인식한다. 중복 선언이 불가능하다. 변수를 지원하는 키워드이다. 함수 m1에서 선언된 b는 함수 밖에서 호출하면 'Uncaught ReferenceError: b is not defined' 에러가 발생한다. 조건문 내에서 선언된 c는 조건문 내에 있는 지역변수이기..
🔻동적으로 태그 생성하기🔻 1. innerHTML 쉽고 작성 비용이 저렴하다 모든 것을 문자열로 조작하기에 복잡한 작업은 무리이다. div1.innerHTML = ''; 2. createXXX 복잡하고 작성 비용이 고가이다. 체계적인 작업이 가능하다. 🔻태그 생성하기🔻 생성 순서 1. 객체를 생성한다 createElement(nodename) : 태그 생성 createTextNode(text) : 텍스트 생성 createAttribute(attributename) : 속성 생성 createComment(text) : 주석 생성 //2.1 태그 생성 var input = document.createElement('input'); // //2.2 속성 생성 var type = document.createAt..
DOM에서 Invocation List를 통해 이벤트 메소드 관리를 한다. 🔻이벤트 등록🔻 element.addEventListener(event, function); 🔻이벤트 삭제🔻 element.removeEventListener(event, function); 🔻등록 및 삭제🔻 기본 뼈대 DOM event BOM 방법 onclick 으로 등록하고 null를 대입하여 이벤트을 중지시킨다. 그리고 동일한 버튼에 다른 이벤트가 걸려있으면 코딩 순서에 따라 맨 뒤에 있는 이벤트만 실행된다. (btn1.onclick 에 대해 m3만 실행된다.) DOM 방법 addEventListener로 등록하고 removeEventListener로 이벤트를 중지시킨다. 그리고 동일한 버튼에 다른 이벤트가 걸려있으면 코딩 ..
🔻DOM 노드(태그) 검색 도구🔻 1,2번 적절히 같이 사용한다. 1. 식별자 검색 도구 obj.getElementById() obj.getElementByClassName() 아래 글 참고한다. https://steady-record.tistory.com/entry/JavaScript-DOM-%ED%83%9C%EA%B7%B8-%EA%B2%80%EC%83%89-%EB%8F%84%EA%B5%AC [JavaScript] DOM - 태그 검색 도구1 : 식별자 검색 🔻DOM에서 제공하는 태그 검색 도구(함수)🔻 1. id 검색(★) document.getElementById('id') 2. class 검색(★) 배열로 반환한다. document.getElementsByClassName('class') 3. n..
🔻DOM에서 제공하는 태그 검색 도구(함수)🔻 1. id 검색(★) document.getElementById('id') 2. class 검색(★) 배열로 반환한다. document.getElementsByClassName('class') 3. name 검색 배열로 반환한다. DOM에서는 name검색을 거의 하지않는다. id나 class 검색을 더 자주 사용한다. document.getElementsByName('name') 4. 태그명 검색 document.getElementsByTagName('tag') 5. CSS 선택자 검색(★) ES6 에서 추가된 기능이다. 다른 라이브러리에서 제공하던 기능을 도입했다. document.querySelector('CSS selector')//단수 반환 docum..
🔻우클릭 금지🔻 설정한 태그영역에 context 메뉴가 실행되지 않는다. body영역에 설정해놓으면 해당 페이지의 우클릭이 실행되지 않는다. 🔻더블 클릭 금지🔻 설정한 태그영역에 더블 클릭을 하여도 드래그가 잡히지 않는다. 우클릭 금지와 같이 사용하며 무단 복제를 방지할 수 있다. *context 메뉴 마우스 우클릭시 뜨는 메뉴이며, 상황에 따라 다른 메뉴를 제공한다.
🔻마우스 클릭하여 이미지 생성하기🔻 기본 뼈대 테이블에 이벤트 추가 마우스 좌 클릭, 우 클릭, 휠 클릭 마다 다른 이미지가 생성된다. 🔻클릭한 썸네일을 하단에 출력하기 & 한번에 삭제하기🔻 기본 뼈대 하단에 출력하기 한번에 삭제하기 사용자에게 값을 입력받아 확인을 받으면 삭제한다.
🔻Content 조작🔻 Content 조작한다는 것은 시작 태그와 끝 태그 사이의 내용물(PCDATA, 자식(Element) 조작하는 것이다. 접근법 1. innerText 시작 태그와 끝 태그 사이의 문자열을 읽고 쓰는 프로퍼티 문자열만 인식한다. textContent와 동일한 기능을하지만 innetText는 MS에서 만든 비표준이다. 2. innerHTML(★) 시작 태그와 끝 태그 사이의 문자열을 읽고 쓰는 프로퍼티 문자열과 태그를 인식한다. 3. textContent 시작 태그와 끝 태그 사이의 문자열을 읽고 쓰는 프로퍼티 문자열만 인식한다. 표준 기본 뼈대 content 콘텐츠 영역 innerText 와 textContent innerText 와 textContent는 문자열만 인식하므로 태그를..
🔻JavaScript의 구성🔻 1. Core 언어 자체의 기능과 문법을 포함한다. 변수, 연산자, 제어 구조(if문, for문 등), 함수, 객체, 배열 등과 관련된 모든 것을 다룬다. 2. BOM 브라우저와 관련된 정보와 동작을 다룬다. 일부 태그 조작할 수 있다. DOM에 비해 기능이 부족하다. 정적인 트리구조로 이뤄져있다. 3. DOM HTML 문서를 트리 구조로 나타내어 각 요소를 객체로 다룰 수 있게 합니다 모든 태그를 조작할 수 있다. 기능이 풍부하다 HTML 문서의 내용, 구조, 스타일 등을 동적으로 변경할 수 있다. 🔻DOM🔻 Documet Object Mode의 약어 식별자로 인식할 수 있는 것이 늘어났다. (기존 BOM은 name만 인식했는데 DOM에서는 name, id, class도 ..
🔻타이머🔻 일정한 시간 후에 또는 일정한 간격으로 함수를 실행하거나, 일정한 시간 후에 코드를 실행한다. 타이머 시작 1. id setTimeout(function , milliseconds) 1회성 타이머 function: 실행할 함수를 지정한다. milliseconds: 함수가 실행될 대기 시간(밀리초)을 지정한다. 2. id setInterval(function , milliseconds) 반복 타이머 function: 실행할 함수를 지정한다. milliseconds: 함수가 실행될 대기 시간(밀리초)을 지정한다. 타이머 종료 1. void clearTimeout(id) setTimeout()에 의해 설정된 타이머를 취소한다. id: setTimeout()에서 반환된 타이머 식별자 2. void c..
