★ 문제 1 아래와 같은 문서를 생성하시오. 조건 새창을 띄운 뒤 우편 번호 검색을 하시오. 우편번호, 주소 : 새창에서 선택하면 자동 채우기 상세주소 : 포커스 맞추기 ■ HTML 코드 우편 번호 검색 우편번호 주소 상세주소 ■ css 코드 ■ JavaScript ■ 008search.html ■ 실행 결과 ★ 문제 2 아래와 같은 문서를 생성하시오. 조건 주문하시는 분 정보를 받으시는 분으로 복사하시오. ■ HTML 코드 주문하기 주문하시는 분 이름 : 주소 : 주문하시분과 정보과 동일합니다. 받으시는 분 이름 : 주소 : ■ CSS 코드 X ■ JavaScript ■ 실행 결과 ★ 문제 3 아래와 같은 문서를 생성하시오. 조건 주민번호 입력 시 나머지 컨트롤(생년월일, 성별) 제어를 하시오. 주민등..
★ Radio HTML 코드 라디오 버튼 흰색 빨간색 노란색 파란색 검은색 CSS 코드 JavaScript 실행 결과 ★ Range HTML 코드 배경색(RGB) R : G : B : CSS 코드 JavaScript 실행 결과 ★ Select HTML 코드 셀렉트 박스 강아지 고양이 돼지 닭 사자 호랑이 낙타 태어난 년도 : CSS 코드 X JavaScript 실행 결과
★ 회원가입 form HTML 코드 회원 가입 이름 나이 아이디 암호 암호확인 JavaScript 코드 document.form1.btn.onclick = m1; function m1() { var txtname = document.form1.txtname; var txtage = document.form1.txtage; var txtid = document.form1.txtid; var txtpw = document.form1.txtpw; var txtpwc = document.form1.txtpwc; } 유효성 검사 > 잘못된 값을 찾기!! 1. 이름 유효성 검사 //유효성 검사 > 잘못된 값을 찾기!! //이름 //- 필수값 //- 2~5자 이내 //- 한글만 if(txtname.value == '..
★ 문제 1 아래와 같은 문서를 생성하시오. 조건 롤 오버 이미지를 구현하시오. 고양이 강아지 cat01.jpg dog01.jpg ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 문제 2 아래와 같은 문서를 생성하시오. 조건 롤 오버 이미지를 구현하시오. 버튼을 클릭하면 새창으로 이미지를 띄우시오. dog01.jpg(기본 크기) dog01_big.jpg(큰 크기) ■ HTML 코드 강아지1 강아지2 강아지3 강아지4 강아지5 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 문제 3 아래와 같은 문서를 생성하시오. 조건 롤 오버 이미지를 구현하시오. img01.jpg img04.jpg img02.jpg img05.jpg img03.jpg img06.jpg 이미지에 맞게 ..
★ Event > 다량의 요소(태그)의 (일괄) 처리 버튼을 통한 배경색 변경 방법 1 : 정적으로 일일이 각자 생성 방법 2 : 동적으로 일일이 각자 생성 document.all.btnRed2.onclick = m4; document.all.btnYellow2.onclick = m5; document.all.btnBlue2.onclick = m6; function m4() { document.body.bgColor = 'red'; } function m5() { document.body.bgColor = 'yellow'; } function m6() { document.body.bgColor = 'blue'; } 방법 3 : 함수 하나로, 매개변수를 받아 설정 방법 4 : this를 이용한 함수 방법 ..
★ 메시지 박스, 대화상자 1. void alert(message); document.form1.btn1.onclick = m1; function m1() { // alert(); // alert(100); alert('문자열'); } 실행 결과 2. boolean confirm(message); document.form1.btn2.onclick = m2; function m2() { if(confirm('정말 삭제하겠습니까?')){ document.body.bgColor = 'blue'; }else { document.body.bgColor = 'white'; } } 실행 결과 3. string prompt(message, value); document.form1.btn3.onclick = m3; fu..
★ Image 자바 스크립트를 이용한 다양한 알고리즘 ex1) 롤오버 이미지 //롤오버 이미지 cat2.onmouseover = m2; cat2.onmouseout = m3; function m2() { cat2.src = 'images/cat02.jpg'; } function m3() { cat2.src = 'images/cat01.jpg'; } 실행 결과 ex2) Toggle Button //Toggle Button document.images['sw1'].onclick = m4; function m4() { // http://127.0.0.1:5500/javascript/images/switch_off.png if (document.images['sw1'].src.endsWith('on.png'))..
★ Link BOM document.links['link1'].href = 'http://google.com'; document.links['link1'].target = '_blank'; document.links['link1'].title = '구글로 이동합니다.'; DOM // document.links['link1'].innerText = '구글'; //비표준 document.links['link1'].textContent = '구글'; //표준 네이버 링크 뉴스스탠드 바로가기 주제별캐스트 바로가기 타임스퀘어 바로가기 쇼핑캐스트 바로가기 로그인 바로가기 매일 쓰는 브라우저 보안이 걱정된다면, 안전하고 빠른 최신 브라우저 웨일로 업데이트 하세요.다운로드 3일 동안 보지 않기 네이버 네이버를 시작페이..
