★ 키 관련 이벤트, 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..
★ DATE 시간을 다루는 내장 객체 현재 시각 var now = new Date(); //new 생성자함수() console.log(now); console.log(now.toString); //javascript는 자동으로 toString을 해줌 요소 추출 console.log(now.getYear()); //123 console.log(now.getFullYear());//2023 console.log(now.getMonth());//3(0부터) console.log(now.getDate());//21 console.log(now.getDay());//5(일(0)~토(6)) console.log(now.getHours());//10 console.log(now.getMinutes());//20 co..
★ 문자열 함수 문자열 선언 var txt = "Hello~ Hong~"; 1. 문자열 길이 console.log(txt.length); //자바(field), 자바스크립트(property) 2. 검색 indexOf() : 필드의 위치를 찾아주세요 lastIndexOf() : 끝에서부터 위치를 찾아주세요 console.log(txt.indexOf('~')); //5 console.log(txt.indexOf('~', 6)); //11 console.log(txt.lastindexOf('~')); //11 3. 대소문자 변환 console.log(txt.toUpperCase()); console.log(txt.toLowerCase()); 4. 추출 console.log(txt.substring(2,8));..
★ 형변환, Casting 1. number parseInt(value) 정수형으로 형변환 하여주는 함수 parseInt는 소수점 이하를 절삭한다. var n1 = 3.14; console.log(parseInt(n1)); n1= 3.99; console.log(parseInt(n1)); var n2 = '300'; console.log(parseInt(n2)); // number console.log(n2); // String 2. number parseFloat(value) float 형식으로 형변환 하여주는 함수 var n3 = 100; console.log(parseFloat(n3)); var n4 = '3.14' console.log(parseFloat(n4)); 숫자+문자열 처음부터 숫자가 나..
