🍁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..
🍁Select Box 모든 입력 컨트롤은 입력된 값이 value 속성이다. 이로 인해 사용자가 무엇을 선택했는지 알 수 있게 된다. 셀렉트 박스 사과 딸기 바나나 키위 망고 위 코드를 가지고 Select Box에 대해서 알아보도록 하자. value sel1.value = 'f3'; value가 f3인 데이터는 바나나이다. 초기값은 사과지만, 위 코드를 실행하면 바나나가 선택된다. selectedIndex alert(sel1.selectedIndex); sel1.selectedIndex = 1; selectedIndex로 현재 선택된 옵션의 인덱스를 확인할 수 있다. 이 속성으로 선택 인덱스를 변경해 줄 수 있다. 동적으로 항목 추가 new Option 옵션이라는 내장 객체가 존재한다. 태그를 생성하여 동..
🍁Check Box 체크 박스 버튼에 이벤트를 걸어서 체크 박스를 클릭했을 때 외에도 버튼을 클릭했을 때 체크 박스에 체크가 되게 할 수 있다. 🍁장바구니 장바구니 상품명 수량 가격 노트북 1 2,000,000원 노트북 1 2,000,000원 노트북 1 2,000,000원 노트북 1 2,000,000원 노트북 1 2,000,000원 노트북 1 2,000,000원 노트북 1 2,000,000원 노트북 1 2,000,000원 노트북 1 2,000,000원 노트북 1 2,000,000원 제일 위의 체크박스를 클릭하면 전체 선택이 되고, 상품별로 체크를 할 수 있게 한다. 체크 박스를 눌렀을 때 클릭이라는 행동을 하므로 onclick 이벤트를 걸어도 되고, 입력 컨트롤이 자기가 가진 값을 변할 때를 인식하는 o..
🍁유효성 검사 유효성 검사는 잘못된 값을 찾는 것이다. [HTML] Form (폼) 💡Form Form은 입력양식 즉, 입력 컨트롤을 의미한다. 클라이언트(사용자)로부터 입력장치(키보드, 마우스, 터치 등)를 통해서 데이터를 입력받는 역할을 한다. 입력 데이터를 서버로 전송하며, 이 isaac-christian.tistory.com 폼 태그에 대해서는 위 글을 참고하도록 하자. 유효성 검사 조건 이름 필수값 2~5자 이내 입력 한글만 입력 나이 필수값 숫자만 입력 범위 검사 아이디 필수값 4~12자 이내 영어, 숫자, _ 혼용 사용 가능 숫자로 시작 불가 위 요구사항에 맞게 유효성 검사를 해보도록 하자. 회원 가입 이름 나이 아이디 암호 암호확인 유효성 검사를 하여 값을 올바르게 입력했을 때에만 전송이 ..
🍁Message Box 메시지 박스를 다른 말로 하면 대화 상자(Dialog Box)이다. 3종류의 메시지 박스(대화 상자)가 있다. void alert(message): 메시지 전달용 boolean confirm(message): 의사 전달용 string prompt(message, value): 데이터 입력용 void alert(message) 사용자에게 메시지를 전달하는 용도로 사용한다. boolean confirm(message) confirm은 확인과 취소 버튼이 있어 사용자의 의사를 물어볼 수 있다. 취소라는 개념은 지금 하려던 것을 안 하겠다는 의미이기 때문에 else는 잘 적지 않는다. string prompt(message, value) prompt는 인자값이 2개이다. 첫 번째는 메시지..
