🍁Object 자바스크립트에 클래스는 없는 대신에 내장 객체를 제공한다고 했다. 이건 클래스가 아닌가요? class Test { } 아닙니다. 이건 클래스의 껍데기를 가진 다른 것이에요. 내장 객체 new Array() new Date() Math.메소드() 기타 등등.. 내장 객체에는 Array, Date, Math, Object 등이 있다. BOM 객체 window document form text button 기타 등등.. DOM 객체 element attribute text comment 기타 등등.. DOM 객체는 노드들을 의미한다. 위의 객체들은 이미 타입이 정의되어 있어서 개발자가 가져다 쓰는 것들이다. 그러나 개발을 하다 보면 개발자가 스스로 타입을 정의해야 하는 일이 생긴다. 이럴 때 사..
🍁변수 선언하기 var, let, const를 JavaScript에서 사용할 수 있다. var과 let은 변수를 선언할 때, const는 상수(final 변수)를 선언할 때 사용한다. 1. var var은 BOM때부터 있었고, DOM에 와서도 여전히 지원하며 사용하고 있다. var변수는 function-scoped이기 때문에 제어문을 영역으로 인식 불가능하다. var a = 10; var a = 20; console.log(a); var변수는 중복 선언이 가능하다. 하지만 의도적으로 안 할 뿐이며, 상수 선언을 할 수 없다. 2. let let변수는 ES6(ECMAScript 2015) 때 만들어진 변수이다. let변수는 block-scoped를 가지므로 함수와 제어문에서 사용할 수 있다. let은 변수..
🍁innerHTML을 사용하는 방법 div1.innerHTML = ''; 동적으로 태그 생성하는 방법으로 innderHTML을 사용할 수 있다. 하지만 이 과정에서 속성에 오타가 있을 경우 속성은 적용되지 않으며, 태그명이 틀릴 경우 태그가 적용되지 않게 된다. 이는 문자열로 조작하기 때문에 생기는 문제이다. innerHTML은 쉽고 작성 비용이 저렴한 반면에 문자열로 조작한다는 특징 때문에 문제가 발생할 가능성이 있다. 🍁정석적인 방법 이 방법은 정석적이고 체계적인 방법이지만, innerHTML보다 복잡하고 비용이 더 많이 든다. 1. 태그 생성 var input = document.createElement('input'); // 2. 속성 생성 //input.type = 'text'; //BOM //..
🍁Event 기본 코드 DOM 조작 BOM btn1.onclick = 함수; //btn1.onclick = 함수; btn1.onclick = m1; btn1.onclick = m2; //덮어쓰기 function m1() { alert('BOM'); } 이벤트 제거 btn2.onclick = m2; function m2() { btn1.onclick = null; //이벤트 제거 } BOM에서 이벤트를 제거할 때에는 null을 적용하며, 새로운 이벤트를 적용하면 덮어쓰기가 된다. DOM btn2.addEventListener(이벤트종류, 함수); btn2.addEventListener('click', m3); function m3() { alert('DOM'); } DOM에서는 이벤트 종류와 함수를 인자로..
🍁Axis 태그를 찾는 방법으로 식별자를 이용해서 찾는 방법이 있고, 축을 기준으로 찾는 axis 기능이 있다. 기본 코드 Axis 할아버지 큰아버지 사촌 아버지 큰형 작은형 나 자식 손자 자식 자식 동생 막내동생 작은아버지 사촌 전형적인 계층의 모습을 태그를 이용해 구현해 보았다. 그리고 누가 누구의 자식인지를 알 수 있게 속성을 수정했다. 🍁트리 구조 BOM 트리 구조 [JavaScript] BOM과 DOM: HTML 계층 구조 🍁BOM과 DOM CSS는 태그를 조작할 때 선택자(HTML 태그 검색)로 접근을 하고 나서 조작했다. 마찬가지로 JavaScript에서도 HTML 태그를 검색하여 접근한 뒤에 조작한다. 이는 HTML 계층 구조를 활용하여 Ja isaac-christian.tistory.co..
🍁콘텐츠 조작 1. 태그 검색 (BOM, DOM) 2.1 속성 조작 (BOM, DOM) 2.2 이벤트 조작 (BOM, DOM) 3. 콘텐츠 조작 (DOM) BOM와 DOM 모두 태그를 조작할 수 있는 기능을 가지고 있다. 하지만 콘텐츠 조작은 BOM에서는 못 하며, DOM에서만 할 수 있다. 대부분의 프로퍼티는 읽기, 쓰기 작업을 모두 지원한다. 읽기 작업 alert(div1.innerText); alert(div1.innerHTML); alert(div1.textContent); 쓰기 작업 div1.innerText = 'Isaac'; div1.innerHTML = 'Sopia'; div1.textContent = 'Happy Day'; Content Property Content의 시작 태그와 끝 태..
🍁DOM JavaScript Core Core는 언어 기본 기능이다. BOM BOM은 태그를 일부 태그만을 조작한다. DOM에 비해서 기능이 부족한 편이다. 트리 구조를 지원하지만, 고정(정적) 방식이다. DOM DOM은 모든 태그를 조작할 수 있다. 기능이 풍부한 편이다. 트리 구조를 문서 내용 기반으로 지원한다. [JavaScript] BOM과 DOM: HTML 계층 구조 🍁BOM과 DOM CSS는 태그를 조작할 때 선택자(HTML 태그 검색)로 접근을 하고 나서 조작했다. 마찬가지로 JavaScript에서도 HTML 태그를 검색하여 접근한 뒤에 조작한다. 이는 HTML 계층 구조를 활용하여 Ja isaac-christian.tistory.com 이번 시간에는 DOM에 대해 알아보도록 하자. DOM이..
🍁Timer 타이머 시작 1. id setTimeout(할 일, 시간) 1회성 타이머 2. id setInterval(할 일, 시간) 반복 타이머 타이머 종료 1. void clearTimeout(id) 2. void clearInterval(id) 🍁타이머의 사용 setTimeout setInterval 조작 타이머 주의사항 함수를 실행할 때마다 별도의 타이머가 실행되며 멈춤 버튼이 실행되지 않는다. 타이머를 호출하는 코드를 여러 번 반복하면 이전에 시작한 타이머를 조작할 방법이 없으므로 통제할 수 있도록 해야 한다. 타이머를 단 한 개만 실행하도록 하여 문제를 해결할 수 있다. 🍁타이머의 활용 🍂타이머 중복 실행 금지 var n = 1; var timer = 0; btn3.onclick = m3; f..
