WEB/JavaScript
[JavaScript] Content 조작(2) 응용버전
🔻마우스 클릭하여 이미지 생성하기🔻 기본 뼈대 테이블에 이벤트 추가 마우스 좌 클릭, 우 클릭, 휠 클릭 마다 다른 이미지가 생성된다. 🔻클릭한 썸네일을 하단에 출력하기 & 한번에 삭제하기🔻 기본 뼈대 하단에 출력하기 한번에 삭제하기 사용자에게 값을 입력받아 확인을 받으면 삭제한다.
분류 전체보기
WEB/JavaScript
[JavaScript] Content 조작(1) : innerText, innerHTML, textContent
🔻Content 조작🔻 Content 조작한다는 것은 시작 태그와 끝 태그 사이의 내용물(PCDATA, 자식(Element) 조작하는 것이다. 접근법 1. innerText 시작 태그와 끝 태그 사이의 문자열을 읽고 쓰는 프로퍼티 문자열만 인식한다. textContent와 동일한 기능을하지만 innetText는 MS에서 만든 비표준이다. 2. innerHTML(★) 시작 태그와 끝 태그 사이의 문자열을 읽고 쓰는 프로퍼티 문자열과 태그를 인식한다. 3. textContent 시작 태그와 끝 태그 사이의 문자열을 읽고 쓰는 프로퍼티 문자열만 인식한다. 표준 기본 뼈대 content 콘텐츠 영역 innerText 와 textContent innerText 와 textContent는 문자열만 인식하므로 태그를..
WEB/JavaScript
[JavaScript] DOM의 기초
🔻JavaScript의 구성🔻 1. Core 언어 자체의 기능과 문법을 포함한다. 변수, 연산자, 제어 구조(if문, for문 등), 함수, 객체, 배열 등과 관련된 모든 것을 다룬다. 2. BOM 브라우저와 관련된 정보와 동작을 다룬다. 일부 태그 조작할 수 있다. DOM에 비해 기능이 부족하다. 정적인 트리구조로 이뤄져있다. 3. DOM HTML 문서를 트리 구조로 나타내어 각 요소를 객체로 다룰 수 있게 합니다 모든 태그를 조작할 수 있다. 기능이 풍부하다 HTML 문서의 내용, 구조, 스타일 등을 동적으로 변경할 수 있다. 🔻DOM🔻 Documet Object Mode의 약어 식별자로 인식할 수 있는 것이 늘어났다. (기존 BOM은 name만 인식했는데 DOM에서는 name, id, class도 ..
WEB/JavaScript
[JavaScript] 일정 시간 후 함수 실행 : 타이머(★)
🔻타이머🔻 일정한 시간 후에 또는 일정한 간격으로 함수를 실행하거나, 일정한 시간 후에 코드를 실행한다. 타이머 시작 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..
WEB/JavaScript
[JavaScript] select box 핸들링
🔻select box 핸들링🔻 기초 코드 셀렉트 박스 사과 딸기 바나나 키위 망고 동적으로 요소 추가하기 태그로 생성한다. var op = new Option(); 우리 눈에는 object로 보이지만 옵션 태그 가 생성된것이다. value와 text를 추가해준다. function m3() { var op = new Option(); op.value = 'f6'; // op.text = '파인애플'; // 파인애플 } 하지만 부모인 select 태그에 연결을 하지 않아 보이지 않는다. select 에 add로 + 연결을 해준다. function m3() { var op = new Option(); op.value = 'f6'; op.text = '파인애플'; // + 연결 sel1.options.add(o..
WEB/JavaScript
[JavaScript] radio 핸들링
🔻radio 핸들링🔻 기초코드 라디오 버튼 흰색 검은색 빨간색 노란색 파란색 선택한 값의 value를 가져오기 alert(event.target.value); event.target.value 를 이용하여 가져온다. 배열 상태의 라디오버튼들이 변화가 이뤄질 때 m1 메소드가 실행된다. 라디오 버튼 선택에 따라 배경 색 변경하기 배경이 검정색 일 때 글자색 바꿔주기 🔻전체 코드🔻 라디오 버튼 흰색 검은색 빨간색 노란색 파란색
WEB/JavaScript
[JavaScript] checkbox 핸들링
🔻checkbox 핸들링🔻 버튼으로 checkbox 체크/체크해지 전체 체크 박스 만들기 전체 체크를 할 요소들을 for으로 이벤트 객체의 결과를 반영한다. for (var i=0; i
WEB/JavaScript
[JavaScript] 회원가입 시, 유효성 검사 코드
🔻회원가입 시, 유효성 검사 코드🔻 기본 코드 회원 가입 이름 나이 아이디 암호 암호확인 버튼( submit VS button) 회원 가입 submit 버튼은 전송만을 목적으로 하는 객체이므로 되도록 조건을 걸지 않는다. 조건을 작성하고자하면 submit 버튼이 아닌 일반 button으로 작성한다. 'document.form1.submit();' 을 사용하면 폼이 전송된다. 이름 유효성 검사 txtname.focus(); 빈 칸인 경우에는 focus 메소드를 사용하여 칸에 포커스가 가도록 한다. txtname.select(); 값을 수정해야하는 경우에는 select 메소드를 사용하여 전체 드래그 상태로 만들어준다. txtname.value=''; 텍스트 박스 초기화 할 때는 위와 같이 작성한다. //이름..
WEB/JavaScript
[JavaScript] Message Box(alert, confirm, prompt)
🔻메시지 박스🔻 다른 언어에서는 대화상자(Dialog Box)라고 한다. 1. alert void alert(message) 사용자에게 메시지 전달하기 위해 사용한다. 메시지 박스 2. confirm boolean confirm(message) 사용자에게 확인을 받아 그 결과값으로 진행한다. 메시지 박스 3. prompt string prompt(message, value) 사용자에게 값을 입력받는다. 디자인 바꾸기가 어려워서 잘 사용하지 않는다. 메시지 박스
