★ 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); //..
★ 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 키를 누르면 크기를 원래대로 줄이시오. ■ 소스코드 고양이 ■ 실행결과
★ JavaScript로 HTML의 속성 제어하기 1. HTML 태그의 대부분의 속성은 JavaScript의 프로퍼티로 제공된다. HTML : JavaScript : txt1.size 2. HTML 태그의 속성명을 그대로 JavaScript 프로퍼티명으로 사용된다. 3. 대부분 읽기/쓰기 모두 지원한다. 일부 쓰기 or 읽기 전용이 있다. 4. 태그의 식별자 혹은 근본적인 속성은 조작하지 말것! 5. 플래그 타입의 속성은 boolean으로 조작한다. 6. HTML 속성명 합성어면, 캐멀 표기법으로 작성해야 한다. 7. HTML 속성값이 열거형 or 색상명이면 문자열로 작성한다. // txt1.size = 100; //버튼 클릭 시 사이즈 늘어남 // txt1.value = '홍길동'; //쓰기 alert..
