객체, object JavaScript에는 클래스가 없다. 하지만 내장 객체를 제공한다. 1. 내장 객체 Array, Date, Math, Object 등 new Array() new Date() Math.메소드() 2. BOM 객체 window, document, form, text, button 등 3. DOM 객체 element, attribute, text, comment 등 (create 문을 통해 만들 수 있는 객체) 4. 사용자 정의 객체 JavaScript에는 클래스가 없어 원하는 형태의 객체를 생성하기 어렵다. 사용자 정의 객체를 사용하면 원하는 형태의 객체를 만들 수 있다. 객체 생성 방법 Object 내장 객체를 사용한다. const obj1 = new Object(); 객체 리터럴 ..
🔻호이스팅, hoisting🔻 호이스팅에는 변수 호이스팅과 함수 호이스팅이 있는데 호이스팅이라고하면 보통 함수 호이스팅을 의미한다. 함수 호이스팅 자바스크립트를 실행하기 전에, 변수/함수 선언문을 해당 스코프의 최상단으로 끌어올린다.(코드 재배치) 함수 m2를 정의하기 전에 호출을 먼저하지만 에러나지않고 'm1', 'm2'가 제대로 실행된다. 이런것을 함수 호이스팅이 발생했다고 한다. 변수 호이스팅 변수 선언을 현재 스코프의 최상단으로 끌어올리는 현상이다. 러나 변수의 초기화는 호이스팅되지 않는다. 원래라면 'not defined variable a' 라고 에러가 발생 a를 선언하기 전에 alert으로 a를 호출했다. 호이스팅은 발생하지만 내부적으로 에러를 내자로 합의를 했다.
🔻변수 선언하기🔻 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는 문자열만 인식하므로 태그를..
