★ 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); //..
★ Window 객체 BOM 최상위 객체 유일 > 브라우저 창을 참조하는 객체 window 객체 조작 > 브라우저 창 조작 열기, 닫기, 이동하기, 사이즈 조절 등.. window.open(); //부모창 > 자식창 생성 window.close(); //자기 스스로 종료 양식 window.open(URL, Name, Options) 1. URL : 새창의 URL 2. Name : 새창 이름 3. Options : 옵션들.. 실행 ex) //네이버를 띄우는 open window.open('https://naver.com','naver', null); //자식 file을 띄우는 open window.open('./ex17_child.html', 'child', 'width=300, height=200, le..
★ 문제 1 아래와 같은 문서를 생성하시오. 버튼을 클릭해서 텍스트 박스의 길이를 변경하시오. Long > size(50) Short > size(20) ■ 소스코드 데이터 입력 이름 : 나이 : 별명 : ■ 실행결과 ★ 문제 2 아래와 같은 문서를 생성하시오. 아이디 유효성 검사를 하시오. 길이 > 4~12자 이내 onkeyup ■ 소스코드 회원 가입 아이디 : ■ 실행 결과 ★ 문제 3 아래와 같은 문서를 생성하시오. 마우스를 올리면 고양이 크기를 키우시오. 고양이를 클릭하면 크기를 원래대로 줄이시오. 숫자(1~5)를 누르면 고양이 크기를 키우시오. esc 키를 누르면 크기를 원래대로 줄이시오. ■ 소스코드 고양이 ■ 실행결과
