★ 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..
★ Event 사건 객체(혹은 태그)에서 발생하는 사건 언제 발생할지 예측 불가능(시간) ★ Event Handling 이벤트 등록(구현) 사건 처리 언제 발생할지 예측 불가능한 사건에 대해 처리를 하고 싶다. > 언젠가 사건이 발생하면 처리하기 위한 코드를 미리 준비한다. > 사건과 연결 > 이벤트 처리, 이벤트 매핑, 이벤트 구현 등.. 1. 정적 : HTML 태그에 직접 적용 2. 동적 : JavaScript 코드를 사용 window.document.form1.btn2.onclick = m1; //함수 포인터 function m1() { //코드 작성 window.document.form1.txt1.value = '아무개'; } ■ HTML 코드 Event ■ 실행 ex) ex1) 오전인지 오후인지..
★ 조작 1. CSS 선택자 > 태그 검색 > 접근 > 서식 조작 2. JavaScript 검색도구 > 태그 검색 > 태그 조작 HTML 계층 구조 활용 + JavaScript 탐색 (1) BOM, Browser Object Model 초창기 모델 현재까지 계속 사용 선택적 모델 > 일부 태그만 관리 > 일부 태그만 조작 가능 > 빠진 태그는 조작 불가능 일부 태그 : 이미지, 폼 태그 이외에는 조작 불필요하다고 판단. 태그의 name을 사용해서 접근 id, class는 인식 불가능 (2) DOM, Document Object Model BOM > 개선한 모델 현재까지 계속 사용(주력) BOM 기반 + 기능 추가 모든 태그를 인식 > 모든 태그를 조작 name, id, class 모두 인식 가능 ★ BO..
★ 배열, Array 자바스크립트 배열 Array(외형) + ArrayList(길이 가변, 자료형 자유) // 자바 사용시 : int[] nums = new int[3]; // 자바 스크립트 사용시 var nums = new Array(); //데이터 삽입 nums[0] = 100; nums[1] = 200; nums[2] = 300; nums[5] = 500; //이렇게 건너 뛰어서 되지만, 되도록 사용 금지!! (클린코드 X) //데이터 출력 for (var i=0; i //int[] nums = new int[] {100, 200, 300}; //int[] nums = {100, 200, 300}; //자바 스크립트 사용시 -> var nums2 = new Array(100, 200, 300); v..
