객체(Object)
- Java script에서 여러 데이터를 담을 수 있는 것은 array와 Object가 있다.
- Object 는 어떤 값이든 담을 수 있다.
- 그리고 Object안에 담긴 값을 우리는 속성(attribute)라고 부른다.
1. 객체 기초 내용
<script>
// 오브젝트 만드는 법 1 - 만들면서 값 넣는 방법
var obj = {type:"Benz",model:"e-class",color:"white"};
console.log(obj);
// 오브젝트 만드는 법 2
var person = {};
// 오브젝트 만드는 법 3
var computer = new Object();
// 값 추가하기 1
person.name = "kim";
person.age = 26;
person.married = false;
console.log(person);
// 값 추가하기 2 - 오브젝트는 문자열로 사용하는 배열이다.
computer["cpu"] = "octa core"
computer["ram"] = "16GB";
computer["hdd"] = "2TB";
computer["game"] = false;
computer["price"] = 1400000;
console.log(computer);
// 값 꺼내 오는 방법
console.log("RAM :"+computer["ram"]);
console.log("HDD :"+computer.hdd);
// 자바스크립트 변수에는 함수가 들어갈 수 있었다.
// 오브젝트는 가장 큰 크기의 컵이기 때문에 당연히 함수 들어간다.
person.work = function(){
console.log("오브젝트 안에 함수 실행");
};
person.work(); // 함수실행은 반드시 ()이 들어가야 한다.
</script>2. 하나씩 꺼내기
- Array나 Object 모두 여러 값이 들어있다.
- 때문에 하나씩 모든 값을 꺼내야 하는 상황들이 있다.
- 여러 반복 문을 통해 하나씩 꺼내보자
<script>
var nums = [1,2,3,4,5,6,7,8,9,10];
// 1. for 문
// 시작과 끝을 정할 수 있다.
for(var i=0; i<nums.length; i++){
// console.log(nums[i]);
}
// 2. forEach 문(개별값, 인덱스)
// 시작하면 끝까지 간다.
nums.forEach(function(item, idx){
// console.log(idx+":"+item);
});
// 3. for of 문(구형 브라우저에서 안될 수 있음)
// 시작하면 끝까지 간다.
// 몇 번 인덱스의 값인지 알 수 없다.
for(item of nums){
console.log(item);
};
</script>- 방법
- for문(시작과 끝을 정할 수 있다.)
- forEach문(개별값, 인덱스 // 시작하면 끝까지 간다.)
- for of 문(구형 브라우저에서 안될 수 있음 // 시작하면 끝까지 간다.)
DOM(Document Object Model)
- Java Script 에서는 문서 내 요소(태그)를 가져와 속성을 다루는 역할을 주로 한다.
1. DOM 가져오기
- 태그(Element)의 속성(Attribute)을 다루기 위해서는 우선 태그를 가져와야 한다.
- Java script 에서 원하는 태그를 가져오는 방법은 크게 4가지 이다.
❗ 위 메서드 중 Elements를 유의할 것
가져오기 예제
<body>
<h1>H1 TAG1</h1>
<h1>H1 TAG2</h1>
<h1>H1 TAG3</h1>
<h1>H1 TAG4</h1>
<h2 class="head2">H2 class</h2>
<h2 class="head2">H2 class</h2>
<h2 class="head2">H2 class</h2>
<h2 class="head2">H2 class</h2>
<h3 id="head3">head3 id</h3>
</body>
<script>
var elemTag = document.getElementsByTagName("h1");
console.log(elemTag);
var elemClass = document.getElementsByClassName("head2");
console.log(elemClass);
var elemId = document.getElementById("head3");
console.log(elemId);
console.log('-------------------------------------------');
// css셀렉터 방식으로 가져오기
var elem;
// 1개밖에 못가져오는 단점이 있다.
elem = document.querySelector(".head2");
console.log(elem);
// 여러개를 가져 올 수 있다.
elem = document.querySelectorAll("h2.head2");
console.log(elem);
</script>2. Element내의 속성 활용하기
- 가져온 Element 에서 속성(Attribute)을 다룰 수 있다.
- 다룰 수 있는 속성은 사용자 속성과 기본 속성으로 나눌 수 있다.
두 속성의 차이
- 사용자 속성 : 사용자가 Element 에 명시한 속성
- 기본 속성 : Element 생성시 자동으로 부여된 속성
🔎 속성을 기본적으로 아래와 같이 다룰 수 있다.
Element 속성 예제
<body>
<h1 id="p1"></h1>
<img src="img/img01.jpg" alt="마리오"><br/>
<input type="text" value="아무내용이나..."/>
<a href="javascript:" my-attr="header">링크 클릭</a>
<a href="javascript:" my-attr="main">링크 클릭</a>
<a href="javascript:" my-attr="footer">링크 클릭</a>
</body>
<script>
// my-attr은 내가 만든 사용자 속성
document.getElementById("p1").innerHTML="new text";
document.getElementById("p1").style.backgroundColor="yellow";
// img의 src속성을 변화해 보자
var tag = document.getElementsByTagName("img")[0]; // 변수로 지정
// 가져오기
var val = tag.src;
val = tag.getAttribute("src");
console.log(val);
// 변경하기
tag.src = "img/img02.jpg";
tag.setAttribute("src","img/img03.jpg");
// Elements는 복수이므로 무조건 배열로 가져온다.
// 때문에 꺼낼 때 인덱스 번호를 명시해줘야 한다.
tag = document.getElementsByTagName("input")[0];
tag.type = "button";
tag.value = "click me";
// 사용자 속성
var atag = document.getElementsByTagName("a");
console.log(atag);
for(a of atag){
console.log(a);
// 사용자속성은 직접 접근이 안된다.
// a.my-attr
var attr = a.getAttribute("my-attr");
a.innerHTML="<h1>"+attr.toUpperCase()+"</h1>";
// 콘솔로 속성을 알려면 배열인 상태여야 하는데
// 무엇이든 []를 붙이면 배열이 된다. (기존 배열은 해당X)
}
</script>📌요약(Summary)
- id, class, tag Name 을 통해 원하는 요소를 가져 올 수 있다.
- CSS selector 표현식을 통해 가져 올 수도 있다.
- 가져온 요소의 속성의 값을 가져올 수도 수정 할 수도 있다.
- 속성은 일반 속성과 사용자 속성이 있다.
Event
- Event 는 어떤 “사건” 을 의미 한다.
- “~가 일어난다면…” 이 event 라고 생각 할 수 있다.
아래는 가장 일반적으로 사용하는 이벤트 속성이다.
Event 기본 예제
<head>
<style>
div{
width: 250px;
height: 250px;
background-color: yellowgreen;
}
</style>
</head>
<!-- onload:html 파일이 다 읽히면 일어나는 이벤트 -->
<!-- <body> -->
<body>
<!-- 하나의 태그에 여러 이벤트를 넣을 수 있다. -->
<div onmouseover="mouseEvt('over')" onmouseout="mouseEvt('out')"></div>
<br/>
<!-- span은 특정 문자 영역을 지정할 경우 사용 -->
<h3>오늘의 날짜 : <span id="memo"></span></h3>
<input type="button" value="날짜 추출" onclick="getDate()"/>
<br/>
<input type="text" id="keyon" value="" onkeydown="going()"/>
<input type="text" id="keyup" value="" onkeyup="typing()"/>
<h4 id="typing"></h4>
<select id="mySelect" onchange="selectOne()"> <!-- 무언가 변화가 생겼을때 onchange -->
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Benz">Benz</option>
<option value="Volvo">Volvo</option>
</select>
</body>
<script>
// 이 함수는 매개변수를 받는 함수다.
function mouseEvt(arg){
var tag = document.getElementsByTagName("div");
// console.log(tag);
tag[0].innerHTML="mouse "+arg;
}
function getDate(){
// 1. 이벤트를 적용했으면 정상 동작하는지 꼭 확인 할 것
console.log('click');
// 2. 뭔가 변화를 줄 태그를 가져오는지 확인 할 것
var tag = document.getElementById("memo");
console.log(tag);
// 3. 어떤 속성을 건드릴 것인가?
tag.innerHTML = Date();
}
function going(){
// console.log("key down");
var tag = document.getElementById('typing');
// console.log(tag);
// 입력하고 있는 input의 값을 표시 해보자
var input = document.getElementById("keyon");
// console.log(input.value);
tag.innerHTML = input.value;
}
function typing(){
// console.log("key up");
var tag = document.getElementById('typing');
// console.log(tag);
var input = document.getElementById('keyup');
// console.log(input);
tag.innerHTML = input.value;
}
function selectOne(){
// console.log('change');
// select에서 선택된 value를 h4 태그에 적용해라.
var tag = document.getElementById('typing');
var select = document.getElementById('mySelect');
tag.innerHTML = select.value;
}
</script>1. Event 객체와 This
- 이벤트가 발생할 경우 이벤트 객체 가 반환 된다.
- 그리고 이벤트가 발생한 당사자 요소인 this 도 있다.
- 이 두 객체를 활용하면 복잡한 내용도 쉽게 해결 할 수 있다.
✍ 설명
1. Event 객체 : 발생한 이벤트에 대한 모든 정보를 담고 있는 객체
2. This 객체 : 이벤트가 발생한 당사자 요소를 담고 잇는 객체
Event와 This 예제
<body>
<!-- this는 이벤트가 일어난 해당 태그 -->
<button id="btn1" onclick="arg1(this)">button 1</button>
<!-- event는 발생한 이벤트의 모든 정보-->
<button id="btn2" onclick="arg1(event)">button 2</button>
<p><a href="#" onclick="arg2(event, this)">link 1</a></p>
<p><a href="#" onclick="arg2(event, this)">link 2</a></p>
</body>
<script>
// event객체와 this객체 둘 다 받을 수 있다.
function arg2(evt, obj){
// 현재 클릭한 a태그 안의 텍스트는 무엇인가?
// 콘솔로 찍어보자
console.log(evt);
console.log(obj.innerHTML);
}
function arg1(obj){
/*
console.log('click');
// 현재 클릭이 일어나는 버튼을 가져와 콘솔로 찍어보기
var btn1 = document.getElementById('btn1');
console.log(btn1);
*/
console.log(obj);
}
</script>2. Event Listener
- Event Listener 는 특정 요소에 특정 이벤트를 감시하는 기능을 추가하는 개념이다.
- 아직은 Cross Browser 이슈로 많이 사용되진 않지만 많은 UI Programming 에서 이 개념을 사용 한다.
- Event Listener 에 등록 할 수 있는 이벤트는 속성에 추가한 이벤트 에서 on 만 빠진 형태 이다.
- 아래는 자주 사용하는 일부 이벤트 들이다.
Event Listener 예제
<style>
#eventZone{
width: 250px;
height: 250px;
background-color: yellowgreen;
text-align: center;
}
</style>
</head>
<body>
<h4 id="msg">FOCUS NULL</h4>
<p><input type="text" id="txtinput"/></p>
<div id="eventZone"></div>
<h4>mouse position: <span id="pos"></span></h4>
</body>
<script>
// input에 커서가 들어가고(focus in) 나가고(focus out)에 따라서 무언가를 해줄 예정
// 1. 이벤트를 걸 태그 가져오기
var input = document.getElementById("txtinput");
console.log(input);
// 2. 태그에 이벤트 붙이기
input.addEventListener("focusin",fcsin);
input.addEventListener("focusout",fcsout); // 이벤트 객체는 공짜로 준다.
// 3. 이벤트가 발생했을 때 호출할 함수
function fcsin(){
// h4 태그 사이에 focus in을 찍어보자
input.style.backgroundColor="lightpink";
console.log('focus in!');
var msg = document.getElementById("msg");
msg.innerHTML = 'focus in';
}
function fcsout(e){
// h4 태그 사이에 focus out을 찍어보자
console.log(e.target); // 이벤트 객체에서 이벤트 당한 당사자 정보도 알 수 있다.
e.target.style.backgroundColor="white";
console.log('focus out!');
var mgs = document.getElementById("msg");
msg.innerHTML = 'focus out';
}
// 이벤트 이름, 호출할 함수 이름
// 함수에 이름이 있다는 것은 여러곳에서 여러번 쓰인다는 의미
// 이름이 없다는 것은 딱 여기서만 한번 쓰인다는 의미
input.addEventListener("keyup",function(e){
// console.log(e);
if(e.keyCode==13){ // enter
alert("전송 했습니다.");
}
});
var zone = document.getElementById("eventZone");
zone.addEventListener("click",function(e){
console.log("click");
zone.style.backgroundColor="orange";
});
zone.addEventListener("dblclick",function(e){
console.log("double click");
// e.target == this
e.target.style.backgroundColor="yellow"
});
zone.addEventListener("mouseenter",function(e){
// this를 안줘도 얘는 그냥 쓸 수 있다.
// 만약 this가 안먹히면 e.target으로 사용하자
this.style.backgroundColor="blue"
console.log("mouse enter");
});
zone.addEventListener("mouseout",function(e){
zone.style.backgroundColor="yellowgreen";
console.log("mouse out");
});
document.addEventListener("mousemove",function(e){
console.log(e.screenX+"/"+e.screenY);
document.getElementById("pos").innerHTML = e.screenX+"/"+e.screenY;
});
</script>