★ 내장 배열 문서 코드를 기반으로 자동 생성되는 배열을 제공한다. 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..
★ 키 관련 이벤트, KeyEvent onkeyXXX 포커스를 가지는 태그에서만 발생(텍스트 박스, 체크 박스 등) 발생 순서 : keydown > keypress > keyup 요즘 키보드 > 연속입력(O) event.keyCode : 어떤키가 눌렸는지 알려주는 기능 1. onkeydown 키를 눌렀을 때 발생 문자에 반응하는 이벤트(X) > 어떤 문자가 입력되었는지 중요(X) 물리키에 반응하는 이벤트 > 어떤 키를 눌렀는지 중요(O) 키보드에 존재하는 모든 키에 반응(****) 방금 입력한 문자는 필요없을 때 사용 평상 시 키 이벤트 > keydown 특별히 누른 키가 관련된 작업 > keyup txt1.onkeydown = m1; function m1() { console.log('keydown')..
★ 마우스 관련 이벤트, MouseEvent onmouseXXX 1. onmouseover(= onmouseenter) 해당 객체의 영역에 마우스(커서)가 진입하는 순간 발생 function message(txt) { var now = new Date(); txt1.value = txt + '-' + now.toLocaleDateString() + '\r\n' + txt1.value; } txt1.onmouseover = m1; function m1() { message('mouseover'); //window.document.body.bgColor = 'gold'; //배경 색 변경 } 2. onmouseout(= onmouseleave) 해당 객체의 영역에 마우스(커서)가 빠져나가는 순간 발생 fun..
