객체에 프로퍼티를 자유롭게 추가할 수 있다. 잘 몰랐던 사실 window 객체 window.open() window.close() + window.alert() window.confirm() window.prompt() window.setTimeout() window.stInterval() 이름없이 나오는 함수는 거의 window 객체이다. (최상위 객체 window는 생략이 가능한 특징때문) 콘솔 창에 window라고 검색하면 window의 프로퍼티가 조회된다. JavaScript의 모든 함수는 자동으로 window 객체의 프로퍼티가 된다. JavaScript의 모든 전역변수는 자동으로 window 객체의 프로퍼티가 된다. 엄밀히 따지면 a1은 변수가 아니라 프로퍼티이다. 중복 선언이 가능한 것도 변수..
1급 객체 "함수는 1급 객체이다." or "First Citizen" 이라는 말이 있다. 함수형 언어에서 볼 수 있는 특징이다.(swift, python 등) 함수를 객체처럼 취급한다. 함수를 값(데이터)으로 사용할 수 있다. 함수가 데이터라면 1. 함수를 변수나 데이터 구조를 담을 수 있다.(저장) 2. 함수를 매개변수를 전달할 수 있다. 3. 함수를 반환값으로 사용할 수 있다. JavaScript에서 함수를 선언하는 방법 1. 함수 선언문 2. 함수 표현식(리터럴) == 익명 함수 함수를 변수나 데이터 구조를 담을 수 있다.(저장) 단계 1. m4를 인식하지못해 원래 이름이 필요없어진다. 흔히 볼 수 있는 상황 p1은 btn1의 클릭 이벤트 전용함수 인데 클릭이 아닌 곳에서 호출도 가능하여 원래의 ..
객체, 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 메뉴 마우스 우클릭시 뜨는 메뉴이며, 상황에 따라 다른 메뉴를 제공한다.
