🔻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(다음페이..
🔻window 객체🔻 최상위 root 객체이다. window. 생략이 가능하다. 메소드 window.open(URL, name, options) : url 주소 페이지를 새창을 통해 나타낸다. URL : 새창의 URL (외부/내부 URL) name : 새창 이름 (빈 칸으로 두면 새창이 계속 열리고, 지정하면 창이 하나만 열린다.) options : 새창 옵션들 (주로 크기를 설정한다.) window.close() : 현재 윈도우를 닫는다. 🔶새 창 열기 및 닫기 window 객체 창 제어하기 window.open이 object 를 반환하는 특성을 이용한다. 새로 생성한 자식 창을 child 변수로 저장하여 새 창에 접근할 때 child로 접근한다. 🔶자식창에서 부모창 접근하기 자식 페이지 부모창의 wi..
🔻HTML 속성 조작하기🔻 1. 태그를 찾아 속성을 조작할 수 있다. 2. 내용물(PCDATA)을 조작할 수 있다. 🔶조작 규칙 1. HTML의 대부분 속성은 JavaScript에서 동일한 이름의 프로퍼티로 제공한다. txt1.value = '홍길동' 2. HTML 속성명이 복합어로 되어 있으면 JavaScript에서는 캐멀표기법으로 제공한다. txt1.maxLength = 5; 3. 플래그 타입의 속성은 boolean 값으로 조작한다. txt1.readOnly = true; 4. 열거형 타입의 속성 및 색상 속상은 문자열로 조작한다. window.document.body.bgColor = 'blue'; 🔶조작 하기 JavaScript로 태그의 속성 제어하기 버튼을 누를 때마다 배경색이 변경되고 버튼의 ..
