★ 회원가입 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'))..
★ 내장 배열 문서 코드를 기반으로 자동 생성되는 배열을 제공한다. 1. window.document.images > 문서내의 모든 태그 2. window.document.links > 문서내의 모든 태그 3. window.document.anchors > 문서내의 모든 태그 4. window.document.forms > 문서내의 모든 태그 5. window.document.forms[index].elements > 특정 폼태그 내의 모든 입력태그 6. window.document.forms[index].select.options > 태그 7. window.document.all > 문서상의 모든 태그 > 비표준(MS) 사용 ex) // console.log(document.images.length);..
★ Location window의 자식 현재 창의 페이지(URL)와 관련된 조작 사용 ex) // JavaScript + 페이지 이동 // window.location.href = 'https://naver.com'; console.log(window.location.host); //127.0.0.1:5500 console.log(window.location.hostname); //127.0.0.1 console.log(window.location.protocol); //http: console.log(window.location.port); //5500 window.location.reload(); // 새로고침(F5) window.location.href = 'ex19_loaction.html'; /..
★ 자바스크립트 배열 Array(외형) + ArrayList(길이 가변, 자료형 공유) 사용 ex) var nums = new Array(); nums[0] = 100; nums[1] = 200; nums[2] = 300; nums[5] = 500; // 되도록 사용금지!! 차곡차곡 넣을것!! 출력 for(var i =0; i 스택처럼 활용 var list = []; list.push(10); console.log(list); list.push(20); console.log(list); list.push(30); console.log(list); console.log(list.pop()); console.log(list); 예외 처리 try { var m = 0; console.log(100/m); //..
