🔻JavaScript의 구성🔻 1. Core 언어 자체의 기능과 문법을 포함한다. 변수, 연산자, 제어 구조(if문, for문 등), 함수, 객체, 배열 등과 관련된 모든 것을 다룬다. 2. BOM 브라우저와 관련된 정보와 동작을 다룬다. 일부 태그 조작할 수 있다. DOM에 비해 기능이 부족하다. 정적인 트리구조로 이뤄져있다. 3. DOM HTML 문서를 트리 구조로 나타내어 각 요소를 객체로 다룰 수 있게 합니다 모든 태그를 조작할 수 있다. 기능이 풍부하다 HTML 문서의 내용, 구조, 스타일 등을 동적으로 변경할 수 있다. 🔻DOM🔻 Documet Object Mode의 약어 식별자로 인식할 수 있는 것이 늘어났다. (기존 BOM은 name만 인식했는데 DOM에서는 name, id, class도 ..
🔻타이머🔻 일정한 시간 후에 또는 일정한 간격으로 함수를 실행하거나, 일정한 시간 후에 코드를 실행한다. 타이머 시작 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..
🔻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..
🔻radio 핸들링🔻 기초코드 라디오 버튼 흰색 검은색 빨간색 노란색 파란색 선택한 값의 value를 가져오기 alert(event.target.value); event.target.value 를 이용하여 가져온다. 배열 상태의 라디오버튼들이 변화가 이뤄질 때 m1 메소드가 실행된다. 라디오 버튼 선택에 따라 배경 색 변경하기 배경이 검정색 일 때 글자색 바꿔주기 🔻전체 코드🔻 라디오 버튼 흰색 검은색 빨간색 노란색 파란색
🔻checkbox 핸들링🔻 버튼으로 checkbox 체크/체크해지 전체 체크 박스 만들기 전체 체크를 할 요소들을 for으로 이벤트 객체의 결과를 반영한다. for (var i=0; i
🔻회원가입 시, 유효성 검사 코드🔻 기본 코드 회원 가입 이름 나이 아이디 암호 암호확인 버튼( submit VS button) 회원 가입 submit 버튼은 전송만을 목적으로 하는 객체이므로 되도록 조건을 걸지 않는다. 조건을 작성하고자하면 submit 버튼이 아닌 일반 button으로 작성한다. 'document.form1.submit();' 을 사용하면 폼이 전송된다. 이름 유효성 검사 txtname.focus(); 빈 칸인 경우에는 focus 메소드를 사용하여 칸에 포커스가 가도록 한다. txtname.select(); 값을 수정해야하는 경우에는 select 메소드를 사용하여 전체 드래그 상태로 만들어준다. txtname.value=''; 텍스트 박스 초기화 할 때는 위와 같이 작성한다. //이름..
🔻메시지 박스🔻 다른 언어에서는 대화상자(Dialog Box)라고 한다. 1. alert void alert(message) 사용자에게 메시지 전달하기 위해 사용한다. 메시지 박스 2. confirm boolean confirm(message) 사용자에게 확인을 받아 그 결과값으로 진행한다. 메시지 박스 3. prompt string prompt(message, value) 사용자에게 값을 입력받는다. 디자인 바꾸기가 어려워서 잘 사용하지 않는다. 메시지 박스
이미지 크기 변경 및 사진 변경 이미지 롤오버 이미지 이미지 이미지로 토글 버튼 만들기 이미지 18개 이미지 연속 변경 이미지 viewer : 방향키로 이미지 이동 이미지 숫자를 입력받아 이미지 변경하기 이미지
collection 내장 배열(=컬렉션) 문서 내용(HTML)을 기반으로 자동 생성되는 배열을 제공한다. 태그에 접근하기 위한 도구이다. 1. window.document.images 현재 문서에 있는 모든 요소들의 컬렉션을 반환한다. 페이지에 있는 이미지를 접근하고 조작하는 데 사용된다. 이미지 2. window.document.links 현재 문서에 있는 모든 href 속성을 가진 요소들의 컬렉션을 반환한다. 페이지에 있는 모든 하이퍼링크에 접근할 수 있다. 링크 네이버 구글 다음 앵커 앵커1 앵커2 3. window.document.anchors 현재 문서에 있는 모든 name 속성을 가진 (앵커) 요소들의 컬렉션을 반환한다. 주로 링크의 목적지로 사용되는 앵커 태그에 접근하는 데 사용된다. 링크 ..
window 자식 객체로는 history, screen, navigator, location, document가 있다. 이 중 screen, location, history 객체를 알아보고자 한다. 🔻screen 객체🔻 화면 정보를 제공한다. 속성 availWidth, availHeight : 작업표시줄을 제외한 화면크기 🔻location 객체🔻 현재 창의 페이지주소와 관련된 객체를 참조한다. 🔶전역이벤트로 단축키 만들기 네이버(n) 구글(g) 다음(d) 화면에서 n, g, d를 누르면 네이버, 구글, 다음으로 접속된다. 🔻history 객체🔻 브라우저가 방문한 탐색 기록을 접근한다. 메소드 back : 이전페이지로 이동 forword : 다음페이지로 이동 go(위치) : -1(이전페이지), 1(다음페이..
