2021.06.23
ex07_casting.js
형변환
// 형변환 함수
// 1. 정수 parseInt(값)
// 2. 실수 parseFloat(값)
var n1 = 3.14;
console.log(parseInt(n1)); // 실수 -> 정수
var n2 = '100';
console.log(parseInt(n2), typeof parseInt(n2)); // 문자열 -> 정수
var n3 = 200;
console.log(parseFloat(n3), typeof parseInt(n3)) // 정수 -> 실수
var n4 = '5.21';
console.log(parseFloat(n4), typeof parseFloat(n4)); // 문자열 -> 실수
// 실수 -> 정수
// 문자열 -> 정수, 실수
console.log('100' + 100); // 100100
console.log(parseInt('100') + 100); // 200
console.log('100' * 2); // 200 -> 에러 안남, 우리가 모르게 형변환 된다. -> 왠만하면 Java하는 것 처럼 형변환 함수 써서 할 것.
console.log(parseInt('100') * 2); // 200
// -----------------------------------------------------
// CSS 속성 조작
// box > width: 150px > *2 > width: 300px
var width = '150px';
console.log(width * 2); // NaN(난, Not a Number)
// 시작부터 연속된 숫자만을 취하고 나머지는 버린 뒤 형변환한다.
// 숫자 뒤에 붙어있는 단위를 없애준다.
console.log(parseInt(width)); // '150px' -> 150
console.log(parseInt('20세')); // '20세' -> 20
console.log(parseInt('나이20세')); // NaN
console.log(parseInt('123ABCD567EFG'));
var fontSize = '1.5em';
console.log(parseFloat(fontSize));
// boolean isNaN(값)
// - is not a number?
// - 숫자면? false, 숫자가 아니면? true
var age = "20"; //입력
var age1 = "20";
// 유효성 검사(숫자만 입력했는지??)
console.log(isNaN(age)); // false
console.log(isNaN(age1)); // true
console.log(isNaN(age) ? '나이를 올바르게 입력하세요' : '통과');ex08_string.js
문자열 함수
// 문자열 함수
var txt = "hello!! hong!!";
// 문자열 길이(문자 수)
// - 메소드X, 프로퍼티O
console.log(txt.length);
// 검색
// - indexOd()
// - lastIndexOf()
// - zero-based index
console.log(txt.indexOf('o')); // 4
console.log(txt.indexOf('o', 5)); // start위치 설정 -> 9
console.log(txt.indexOf('a'));
console.log(txt.lastIndexOf('o'));
// 대소문자 변환
console.log(txt.toUpperCase());
console.log(txt.toLowerCase());
// 치환
// - replace
// - 1번만 치환된다.(1회 치환)
// - 모든 대상을 치환하려면 정규 표현식을 사용해야 한다.
console.log(txt.replace('hong','lee'));
console.log(txt.replace('!', '?'));
console.log(txt.replace(/!/gi, '?'));
// 추출
// - substring(beginIndex, endIndex)
// - substr(beginIndex, length)
// - charAt(index)
// - charCodeAt(index)
txt = 'abcdefgijk';
console.log(txt.substring(2, 5)); // cde
console.log(txt.substring(2)); // cdefgijk
console.log(txt.substr(2,5)); // 2번째부터 5글자를 가져와라
console.log(txt.substr(2));
console.log(txt.charAt(2));
console.log(txt.charCodeAt(2));
console.log('A' > 'B'); // 문자코드 비교 지원
console.log('홍길동' > '아무개');
// 공백 제거
txt = ' 하나 둘 셋 ';
console.log(txt.trim());
console.log(txt.trimStart());
console.log(txt.trimEnd());
console.log(txt.trimLeft());
console.log(txt.trimRight());
// 패턴 검색
txt = 'hong';
console.log(txt.startsWith('h'));
console.log(txt.endsWith('.'));
// 분할
txt = '홍길동,아무개,하하하,호호호';
var temp = txt.split(',');
console.log(temp);
console.log(temp[0]);
console.log(txt.bold()); // 해당 문자열을 PCDATA로 해서 출력해줌 -> 활용도 떨어져서 사용 안함.ex09_date.js
날짜
// 날짜시간 자료형 + 함수
// 현재 시각
// Calendar c = Calendar.getInstance();
// Date d = new Date();
var now = new Date();
console.log(now); // Wed Jun 23 2021 10:16:53 GMT+0900 (대한민국 표준시)
// 요소 추출
// c.get(Calendar.YEAR);
console.log(now.getYear()); // 121, 1999년 이전 2자리 표기 함수
console.log(now.getFullYear()); // 2021, 2000년 이후
console.log(now.getMonth()); // 0~11, 월
console.log(now.getDate()); // 23, 일
console.log(now.getDay()); // 3, 요일(0~6)
console.log(now.getHours()); // 시
console.log(now.getMinutes()); // 분
console.log(now.getSeconds()); // 초
console.log(now.getMilliseconds()); // 밀리초
console.log(now.getTime()); // 틱
// 덤프(+ 출력)
// - 자바: %tF(2021-06-23), %tT(10:22:30), %tA(요일)
console.log(now);
console.log(now.toString());
console.log(now.toLocaleString()); // 현지 설정 (********)
console.log(now.toDateString());
console.log(now.toTimeString());
console.log(now.toLocaleDateString()); // 년,월,일
console.log(now.toLocaleTimeString()); // 시,분,초
// javascript moment.js -> 라이브러리
// 특정 시각
var christmas = new Date();
christmas.setFullYear(2021);
christmas.setMonth(11);
christmas.setDate(25);
christmas.setHours(0);
christmas.setMinutes(0);
christmas.setSeconds(0);
console.log(christmas.toLocaleString());
// 연산 -> 크리스마스가 몇일 남았는지?
// - tick 연산
console.log(christmas - now);
console.log((christmas - now) / 1000 / 60 / 60 / 24); // 184일
// 오늘 + 100일
var tick = now.getTime() + (100 * 24 * 60 * 60 * 1000); // + 100일분량의 tick값
var hday = new Date(); // 더미데이터
hday.setTime(tick); //tick 수정
console.log(hday.toLocaleString());ex10_arry.js
배열
// ex10_array.js
// 배열, Array
// - 자바의 Array + Collection
// int[] nums = new int[3];
var nums = new Array(); // new ArrayList();랑 비슷한 느낌..
//Indexer 지원
nums[0] = 10;
nums[1] = 20;
nums[2] = 30;
console.log(nums);
nums[5] = 50; // 사용 금지(중간에 빈 방 두지 말것)
console.log(nums);
console.log(nums[3]);
console.log(nums[6]);
console.log('-----------------------------------');
// 배열 초기화 리스트
// int[] nums = new int[] { 10, 20, 30 };
// int[] nums = { 10, 20, 30 };
nums = new Array(10, 20, 30); // X 잘 안씀
nums = [10, 20, 30]; // O
console.log(nums);
console.log('-----------------------------------');
// 빈 배열 만들기
nums = new Array(); // O
nums = []; // O
// 길이
nums = [10, 20, 30, 40, 50];
console.log(nums.length); // 5
console.log('-----------------------------------');
// 메소드
nums.push(60); // append, 배열 끝에 추가(index 미사용). Stack.push()
nums.push(70);
console.log(nums);
console.log(nums.pop()); // 마지막 방 가져오기. Stack.pop()
console.log(nums); // 가져오면 삭제된다.
console.log(nums.shift()); // 첫번째 방 가져오기. 삭제 <-> pop()
console.log(nums); // 가져오면 삭제된다.
console.log('-----------------------------------');
//탐색
for (var i = 0; i < nums.length; i++) {
console.log(i, nums[i]);
}
//for in: 기존 향상된 for문과 다르다.
for (var i in nums) {
console.log(i);
}
console.log('-----------------------------------');
// ES6 -> 향상된 for문(= iterator)
// 자바스크립트는 함수를 값으로 취급한다. -> 변수에 넣거나, 매개변수로 사용하거나, 반환값으로 사용 할 수 있음.
// nums.forEach(함수);
// forEach는 인자값을 2개 갖는 익명함수(다른 곳에서 사용하지 않기 때문에)를 사용한다.
nums.forEach(function (item, index) {
console.log("forEach", item, index);
});
// 배열의 길이가 5개라서 5번 호출됨 (첫번째 방에 가서 데이터를 가져오고 익명함수를 호출한다.
// item-> 배열에 있던 데이터. index -> 방번호))ex11_object.js
object
/*
JavaScript 전체 구성
1. Core(ECMAScript, 언어 기본)
2. BOM(브라우저 조작)
3. DOM(브라우저 조작)
JavaScript Object
1. 내장 객체
- Array, Date, Math, RegExp 등..
2. BOM 객체
- window, document, location, form..
3. DOM 객체
- element, attribute, text..
4. 사용자 정의 객체
- 개발자가 직접 정의한 객체
*/
// 사용자 정의 객체 만들기
// - 자바스크립트는 클래스가 없다.
// 1. Object 생성자 함수 사용하기
// 2. 객체 리터럴 표기법({}) 사용하기
// 요구사항] User 클래스 정의(멤버 구성) -> 홍길동 객체 생성하기
// 요구사항] User 클래스 정의(멤버 구성) -> 아무개 객체 생성하기
/*
[자바]
class User {
private String name;
private int age;
private String address;
}
User hong = new User();
hong.name = "홍길동";
hong.age = 20;
hong.address = "서울시";
*/
// Object -> 내장 객체
var hong = new Object(); // 無
// 객체 프로퍼티(Property)
// - 추가: 객체에 마음대로 지정해서 추가
hong.name = '홍길동';
hong.age = 20;
hong.address = '서울시';
console.log(hong.name);
console.log(hong.age);
console.log(hong.address);
console.log(hong);
// --------------------------------------------
// 같은 성질의 객체 만들기
var aaa = new Object();
// 오타가 나면 다른 성질이 되기 때문에 최대한 오타가 나지 않게 해야한다. (물리적 통제 어려움.)
// amu.meme = '아무개';
aaa.name = '아무개';
aaa.age = 25;
aaa.address = '부산시';
console.log(aaa);
// ----------------------------
// 객체 리터럴 사용
hong = {}; //new Object()
hong.name = 'hong';
hong.age = 22;
hong.address = 'seoul';
console.log(hong); // { name: 'hong', age: 22, address: 'seoul' }
// 객체 리터럴을 사용해서 objcet를 만드는 방법 (*******)
hong = {
name: '홍길동', //프로퍼티
age: 20,
address: '서울시'
};
console.log(hong); // { name: '홍길동', age: 20, address: '서울시' }
// --------------------------------------------------
// 프로퍼티 접근 방법
// 1. 멤버 접근 연산자 -> .
// 2. key 접근
console.log('1', hong.name); // 작성하기 쉬움, 프로퍼티 이름이 온전한 식별자여야한다.
console.log('2', hong['name']); // 작성하기 불편함, 프로퍼티 이름이 온전하지 않아도 괜찮다. 변수로 치환이 가능하다.
var prop = 'name'; // 변수로 치환 가능
console.log(hong[prop]);
//hong.phone-number = "010"; -> 식별자에 - 기호를 넣을 수 없다.
hong['phone-number'] = '010'; // 문자열로 만들면 사용 가능 -> 권장X
console.log(hong);
// -----------------------------------------------------
// 프로퍼티 삭제
delete hong.age;
console.log(hong);
// 객체 탐색(= 프로퍼티 탐색)
// - 해당 객체가 어떤 프로퍼티들을 가지고 있는지 순차적으로 탐색
// - for in : 객체가 가진 프로퍼티를 탐색하는 전용 for문
for (var prop in hong) {
console.log(prop, hong[prop]); // key형식으로 탐색.
}
// -------------------------------------------------------
// 객체의 멤버
// 1. 변수
// 2. 메소드
hong = new Object();
hong.name = '홍길동';
hong.age = 20;
// hong이라는 객체에 hello라는 프로퍼티를 추가. 프로퍼티에는 함수를 넣음.
hong.hello = function () {
console.log('안녕하세요.');
};
console.log(hong); // { name: '홍길동', age: 20, hello: [Function (anonymous)] }
hong.hello(); // 안녕하세요.
// 객체의 메소드는 본인의 정보를 사용한 행동을 해야한다.(자신의 멤버를 활용하는 것이 좋다.)
hong.info = function () {
// var name = "";
console.log('저는 %s입니다. 나이는 %s세입니다.', this.name, this.age); // 객체 안에 들어있는 프로퍼티 사용하기
};
hong.info();
// *****
hong = {
name: '홍길동',
age: 20,
//address: '서울시 강남구 역삼동 20번지',
// 객체 안에 객체
address: {
sido: '서울시',
gugun: '강남구',
dong: '역삼동',
bunji: '20번지'
},
info: function () {
console.log(this.name, this.age);
}
};
console.log(hong.name); // 홍길동
console.log(hong.age); // 20
console.log(hong.address); // { sido: '서울시', gugun: '강남구', dong: '역삼동', bunji: '20번지' }
console.log(typeof hong.name); // string
console.log(typeof hong.age); // number
console.log(typeof hong.address); // object (자바스크립트의 모든 객체의 자료형은 object)
// 프로퍼티 접근 방법
console.log(hong.address.dong); // 역삼동
console.log(hong.address['dong']); // 역삼동
console.log(hong['address']['dong']); // 역삼동
console.log('-----------------------------------');
// 함수 -> 변수의 지역
// 자바 : 지역 변수(메소드, 제어문), 멤버 변수
// 자바스크립트: 지역 변수(***), 전역 변수(***)
// - 자바스크립트의 지역 변수는 함수만 인식한다.(제어문은 인식하지 못한다.******** 자바와 다름)
// 전역 변수, Global Variable
// - 어디에도 소속되지 않은 변수
// - 적용 범위: 현재 파일 전체
var n1 = 10;
function m1() {
//지역 변수, Local Variable
var n2 = 20;
console.log(n2);
if (true) {
var n3 = 30; // Scope: m1
console.log(n3);
}
console.log(n3); // 30 (제어문 바깥쪽의 지역이 영역이 된다.)
}
// console.log(n2);
m1();
console.log('-----------------------------------');
// 같은 식별자 사용 -> ?
// 자바스크립트의 var 키워드는 중복 선언이 가능하다.
var num = 10;
var num = 20;
var num = 30;
console.log(num); // 30
// 변수 선언 키워드(var) 없이도 변수를 선언 가능하다. -> 전역 변수가 된다.
// -> 사용 금지!!!!(가독성 저하)
color = '노랑';
console.log(color);
function test() {
var width = 100; // 지역변수(test())
height = 200; // 전역변수 -> 지역변수
}
// console.log(width);
// console.log(height);
console.log('-----------------------------------');
// 선언 -> 호출
// 호출 -> 선언
// Hoisting
// - 함수 호이스팅 : 함수선언은 어느 위치든 상관없다.
// - 변수 호이스팅 -> 사용 안함
// - 자바스크립트 엔진이 구문(문장)을 실행하기 전에 소스상의 모든 변수 선언문과 함수 선언문을 소스의 최상단으로 이동시킨다.(끌어 올린다.)
console.log(nick);
print();
//변수 호이스팅 : var nick 선언문만 끌어올린다. -> undefined -> 남은 코드 nick = '강아지';가 나중에 실행된다.
// nick = '강아지';
var nick = '강아지';
function print() {
console.log('고양이');
}
console.log('-----------------------------------');
function f1() {
console.log('f1');
//지역 함수(nested function)
function f2() {
console.log('f2');
}
f2();
console.log('f1');
}
f1();
//f2();
console.log('-----------------------------------');
// 즉시 실행 함수
// - 코드 관리 기법
// - 폐쇄적인 환경을 만들기 위해서
// - 네임 충돌 발생 방지
// - 자원 관리 편함
(function () {
//이곳에 코딩하는 모습을 자주 볼 수 있다.
var num = 100; // 안에서만 유효한 지역변수
function test() {
console.log('test');
}
})();
console.log(num);
test();
// --------------------------------------------------
//클래스(X) -> 생성자 함수
//요구사항] 동일한 타입의 객체를 3개 생성
var m1 = {
name: '홍길동',
age: 20
};
var m2 = {
name: '아무개',
age: 25
};
var m3 = {
name: '하하하',
age: 26
}; // -> 문제점: 강제성을 가지지 않고 객체를 만들때마다 정의하는 것이기 때문에 누락되거나 오타로 인해 다른 형식의 객체가 될 위험이 있다.
// 생성자 함수
// - 이름이 파스칼 표기법(대문자로 시작)
// - this: 나중에 생성될 객체
function User() {
this.name = '홍길동';
this.age = 20;
this.hello = function () {
console.log(this.name, this.age);
};
}
// 생성자 함수는 단독 호출(X) -> 반드시 new 연산자와 함께 사용
var user = new User();
console.log(user);
user.hello();
// --------------------------------------
// 틀처럼 사용할 수 있다.
function Member(name, age) {
this.name = name;
this.age = age;
}
var m1 = new Member('홍길동', 20);
var m2 = new Member('아무개', 25);
var m3 = new Member('하하하', 26);
console.log(m1);
console.log(typeof m1); //object
// constructor 프로퍼티
console.log(m1.constructor); //[Function: Member] 생성자 이름
console.log(user);
console.log(typeof user); //object
console.log(user.constructor); //[Function: User]
//객체를 구분할 땐 typeof 아니라 constructor를 확인한다.(******)
var list = [];
list = new Array(); //Array라는 이름의 생성자 함수
console.log(typeof list); //object
console.log(list.constructor); //[Function: Array]
var now = new Date(); //Date란 이름의 생성자 함수
console.log(typeof now); //object
console.log(now.constructor); //[Function: Date]
console.log(m1 == m2);
console.log(m1 == user);
console.log(m1.constructor == m2.constructor); //true
console.log(m1.constructor == user.constructor); //falseex12_BOM.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!--
BOM, Browser Object Model
- HTML 문서의 내용을 읽어들여 트리 구조로 만들어 놓은 모델
- 정적 구조 : HTML 코드에 상관없이 구조가 고정
- BOM 트리에 존재하는 태그는 맵핑이 되는데, 트리에 존재하지 않는 태그는 맵핑 불가
-> BOM 트리에 없는 태그는 조작이 불가능하다!!
- 태그를 접근할 때 접근 가능 태그 or 접근 불가능 태그
- 접근 가능 태그 -> BOM 트리 참조
- 태그 접근 시 사용하는 식별자 -> name 사용 (*****)
- 이미지, 링크, 폼 -> 어떤 태그는 name 있고, 어떤 태그는 name 없다.(BOM 트리구조 안에 있는 태그만 name을 갖는다.)
-->
<h1>BOM</h1>
<form name="form1">
<input type="text" name="txt1" value="" />
<div></div> <!-- BOM 트리에 없는 태그 -->
<input type="button" value="확인" name="btn1" />
</form>
<!-- 태그를 조작하는 <script>는 보편적으로 태그를 먼저 읽고 난 뒤 <script>를 짠다. -->
<script>
// *** JavaScript로 찾은 태그의 참조 객체는 여러 프로퍼티를 제공
// -> 상당수는 html 태그가 가지던 속성의 이름과 동일하게 제공된다.(해당 속성을 조작 가능한 프로퍼티로 제공된다.)
// 예약어
// - window
// - document
// window.document.form1.txt1 - 태그 검색(****)
// window.document.form1.txt1.value - 속성 접근(****)
// window.document.form1.txt1.value = '홍길동'; - 속성 조작(****)
// window.document.form1.txt1.value = '홍길동';
window.document.form1.txt1.value = new Date().toLocaleDateString();
</script>
</body>
</html>ex13_event.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!--
<<< BOM 모델에 이벤트 거는 방법 >>>
이벤트, Event
- 사용자(사람)와 상호 작용을 하면서 마우스(키보드, 터치, 펜 등)를 조작하면 그에 대한 반응을 정의하는 모델
이벤트 걸기 -> 이벤트 맵핑(Event Mapping)
- 특정 태그 검색 + 이벤트 정의 + 코드 등록(함수 등록)
1. 정적 방식 > BOM 정적 이벤트 모델
- 이벤트가 발생할 태그에 onXXX 속성을 미리 정의한다.
- onXXX 속성: 이벤트 핸들러, Event Handler > 사건이 발생하면 일을 처리하는 담당자
- 하는 일이 고정일 때..(변화가 없을 때) 많이 사용.
2. 동적 방식 > BOM 동적 이벤트 모델
- 자바스크립트로 객체를 찾아서 이벤트를 정의한다.
- 태그객체.onXXX = 익명함수;
- 태그객체.onXXX = 실명함수;
-->
<h1>Event</h1>
<form name="form1">
<input type="text" name="txt1" />
<input type="button" value="확인1" name="btn1" onclick="txt1.value='click';" /> <!-- 정적 이벤트 모델 -->
<input type="button" value="확인2" name="btn2">
</form>
<!-- 하단부 코딩 -->
<script>
var btn1 = window.document.form1.btn1;
var btn2 = window.document.form1.btn2;
var txt1 = window.document.form1.txt1;
// 동적 이벤트 모델
// btn1.onclick = function () {
// //alert();
// txt1.value = '클릭';
// };
// 익명함수(가장 많이 사용하는 방식 *****)
btn1.onclick = function() { // 익명함수는 여기에서만 사용 가능
};
// 실명함수
function test() {
}
btn1.onclick = test;
test(); // 실명함수는 다른 용도로 호출 가능
// ------------------------------------
var now = new Date();
// 동적 이벤트 모델은 이벤트 제어할 수 있다.
// 수요일에만 btn2를 클릭할 수 있다. -> 조건부 클릭 이벤트
if (now.getDay() == 3) {
btn2.onclick = function() {
alert('click');
};
}
</script>
</body>
</html>ex14_event.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 상단부 코딩
// 에러 : Cannot read property 'txt1' of undefined --> form1을 못찾았다는 뜻
// window.document.form1.txt1.value = new Date(); --> form1을 읽기도 전에 접근해서 에러남.
//<body>
// - HTML 문서의 모든 내용이 브라우저에 의해 로딩되고 난 직후에 발생하는 이벤트
// - 상단부에 코딩할 때 많이 사용하는 방법.
function init() {
window.document.form1.txt1.value = new Date();
}
//<body> 유사
window.onload = function() { // 동적 이벤트 모델
//alert();
};
</script>
</head>
<!-- <body> --> <!-- 정적 이벤트 모델 -->
<body>
<h1>Event</h1>
<form name="form1">
<input type="text" name="txt1" size="50" />
</form>
<script>
// 하단부 코딩
// window.document.form1.txt1.value = new Date();
</script>
</body>
</html>ex15_event_mouse.html
마우스 관련 이벤트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea { width: 500px; height: 300px; resize: none; font-size: 2.5em; cursor: default; }
textarea, input { display: block; margin-bottom: 10px;}
</style>
</head>
<body>
<h1>마우스 관련 이벤트</h1>
<form name="form1">
<textarea name="txt1" onmouseover="m1();"></textarea> <!-- 정적 이벤트 -->
<input type="button" value="버튼" name="btn1">
</form>
<img src="images/cat01.jpg" name="cat1">
<script>
var txt1 = window.document.form1.txt1;
var btn1 = window.document.form1.btn1;
/*
*** 이벤트!!! > 어떤 행동을 했을 때 발생하는지!!!를 알아야한다.
마우스 관련 이벤트
- onmouseXXX
1. onmouseover: 해당 객체 영역 위에 마우스 커서가 진입하는 순간 발생
2. onmouseout: 해당 객체 영역 위에 마우스 커서가 빠져나가는 순간
3. onmousedown: 해당 객체 영역 위에서 마우스 버튼을 누르는 순간
4. onmouseup: 해당 객체 영역 위에서 마우스 버튼을 떼는 순간
5. onmousemove: 해당 객체 영역 위에서 마우스 커서가 움직일 때마다 발생
6. onclick: 마우스 이벤트가 아니다!!! 키보드를 사용해서 발생 가능하다. 좌표를 얻어내지 못한다. -> 독립적 이벤트
-> 좌표를 얻어내려면 onmousedown 이벤트를 사용해야한다.
*/
// 동적 이벤트 모델
function m1() {
// txt1.value = 'mouseover';
// txt1.value = 'mouseover\n' + txt1.value; // 마우스가 영역 위에 올라갔을 때 메세지가 위로 찍힘.
// window.document.body.bgColor = "tomato";
}
// 정적 이벤트 모델
txt1.onmouseout = function() {
// txt1.value = 'mouseout\n' + txt1.value;
// window.document.body.bgColor = "white";
};
// 버튼에도 사용 가능
btn1.onmouseover = function() {
btn1.value = '하하';
};
btn1.onmouseout = function() {
btn1.value = '버튼';
};
txt1.onmousedown = function() {
//txt1.value = 'mousedown\n' + txt1.value;
//event 객체
// - 이벤트가 발생하면 자동으로 제공되는 객체
// event.buttons
// - 마우스의 버튼 종류
// - 1: 왼쪽 버튼
// - 2: 오른쪽 버튼
// txt1.value = event.buttons + '\n' + txt1.value;
// 우측버튼을 누르면 경고창 띄우기.
// if (event.buttons == 2) {
// // 브라우저 -> 오른쪽 버튼 클릭 -> Context Menu 호출
// alert('오른쪽 버튼을 사용할 수 없습니다.');
// event.preventDefault();
// return false;
// }
/*
event -> 마우스 커서의 좌표
1. x, y
- 마우스 좌표값
- 기준점: 문서 좌측 상단
- 비표준(MS) -> 특정 브라우저에만 사용 가능, 사용 권장 X
2. clientX, clientY *****
- 기준점: 문서 좌측 상단
- 1번과 동일
- 표준(정식) -> 권장 O
- CSS의 absolute과 동일한 좌표계
3. screenX, screenY
- 기준점: 모니터 좌측 상단
4. offsetX, offsetY *****
- 기준점: 이벤트가 걸린 태그의 좌측 상단
- CSS의 relative와 동일한 좌표계(자신을 기준) -> 특정 위치 찾기 좋음
*/
// txt1.value = event.x + ',' + event.y + '\n' + txt1.value;
// txt1.value = event.clientX + ',' + event.clientY + '\n' + txt1.value;
// txt1.value = event.screenX + ',' + event.screenY + '\n' + txt1.value;
// txt1.value = event.offsetX + ',' + event.offsetY + '\n' + txt1.value;
};
txt1.onmouseup = function() {
// txt1.value = 'mouseup\n' + txt1.value;
};
txt1.onmousemove = function() {
// txt1.value = 'mousemove\n' + txt1.value;
// mouse tracking - 마우스 움직일때마다 좌표 추적
txt1.value = event.offsetX + ',' + event.offsetY + '\n' + txt1.value;
};
window.document.all.cat1.onmousedown = function() {
if (event.offsetX > 100 && event.offsetX < 125
&& event.offsetY > 70 && event.offsetY < 100) {
alert('거기는 고양이 코!');
}
};
btn1.onclick = function() {
btn1.value = "click";
};
</script>
</body>
</html>
모르면 괴롭고 알면 즐겁다.