★ 문제 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일 동안 보지 않기 네이버 네이버를 시작페이..
★ 내장 배열 문서 코드를 기반으로 자동 생성되는 배열을 제공한다. 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); //..
