1. 객체(JSON)
- 제이슨을 → 문자열로 JSON.stringify(data);
- 문자열을 → 제이슨으로 단, 이경우는 엄격한 형식을 지킨다(키, 값이 전부 “ “로 묶여야 한다) JSON.parse(문자열) 꼭, 쌍따옴표
<!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>
<script>
var data = [
{id: 'aaa123', title: 'aaa', content: 'a...'},
{id: 'bbb123', title: 'bbb', content: 'b...'},
{id: 'ccc123', title: 'ccc', content: 'c...'},
];
//console.log(data);
//JS 객체를 JSON 문자열로 형변환
var str = JSON.stringify(data);
console.log(str);
//JSON 문자열을 JS 객체로 형변환
var obj = JSON.parse(str);
console.log(obj);
//단, 문자열을 객체로 변경할 때는 엄격한 규칙이 있습니다.
//key, value가 ""로 처리되어야 합니다.
var result = JSON.parse('{"id": "aaa123"}');
console.log(result);
</script>
</body>
</html>
2. 자바스크립트 이벤트 핸들러
* 이벤트 핸들러
- 이벤트란? 화면에서 클릭이나, 동작시 발생하는 동적인 기능입니다.
- 자바스크립트의 첫번째 강력한 기능이며, 사용방법만 암기하면 충분합니다.
- 태그와 스크립트의 이벤트를 연결하는 방식에는 인라인 이벤트 모델, 기본 이벤트 모델, 표준 이벤트 모델이 있으며 이벤트 앞에 on을 붙입니다.
* 이벤트 종류
1) click: 마우스를 클릭했을 때 이벤트 발생
2) keyup: 키를 떼었을 때 이벤트 발생
3) load: 로딩이 완료되었을 때 이벤트 발생
1] 인라인 이벤트 모델
- 인라인 이벤트 모델은 html요소에 직접 이벤트를 연결하는 방식입니다. 태그 안에 이벤트 종류가 들어가며 on이 붙습니다. onclick같은 이벤트 안에는 모든 스크립트 코드가 들어갈 수 있습니다.
1) onclick은 일반적으로 가장 많이 사용되는 이벤트 입니다.
2) 동일한 함수에 여러 이벤트를 걸어줄 수 있습니다. (재사용 가능)
3) 이때 어떤 이벤트에 대한 동작인지 확인하는 키워드는 this입니다.
<!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>
<button onclick="aaa();">인라인 이벤트</button>
<button onclick="bbb(this);">1</button>
<button onclick="bbb(this);">2</button>
<button onclick="bbb(this);">3</button>
<script>
//인라인 이벤트 - 함수의 선언은 script에 하고, 태그에서 연결
function aaa() {
alert(1);
}
function bbb(a){
//this가 태그에서 사용되면 태그 자기 자신을 가르킵니다.
//console.log(a); //a는 태그 자신
a.innerHTML = 'hello';
}
</script>
</body>
</html>
2] 기본 이벤트 모델
- 기본 이벤트 모델은 HTML요소를 취득 후 이벤트를 익명함수로 연결하는 방식입니다 (선호 합니다) HTML요소를 취득할 때는 순서상 “취득할 요소”가 “요소 취득 명령어” 이전에 있어야 합니다.
- HTML요소를 취득할 때는 순서상 “취득할 요소”가 “요소 취득 명령어” 이후에 오면 반드시 load이벤트를 적용해야 합니다
<!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>
<button id="btn">기본 이벤트</button>
<script>
//취득할 태그보다 아래에 있어야 합니다.
var a = document.getElementById("btn");
a.onclick = function () {
console.log('기본 이벤트');
console.log(this == a); //자기 자신
console.log(a); //태그 자신
}
</script>
</body>
</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>
<script>
// 화면 로딩이 완료된 이후에 실행 - onload는 화면별로 1개만 사용 할 수 있습니다
window.onload = function() {
var a = document.getElementById("btn");
a.onclick = function() {
console.log('기본이벤트');
}
}
</script>
<button id="btn">기본이벤트</button>
</body>
</html>
3] 표준 이벤트 모델
- 표준 이벤트 모델은 객체.addEventListener(이벤트, 함수) 방식으로 연결합니다.
- 이벤트에 on을 붙이지 않습니다
<!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>
<button id="btn">표준이벤트</button>
<script>
//표준이벤트는 동일한 이벤트를 여러개 사용이 가능합니다.
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
console.log("표준이벤트");
});
btn.addEventListener("click", function () {
console.log("표준이벤트2");
});
//1st
// function aaa(){
// console.log("표준 이벤트");
// }
</script>
</body>
</html>
* 예제) 이벤트에서의 this
<!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>
<h3>this의 의미</h3>
<button id = "btn">이벤트에서의 this</button>
<script>
//함수에서의 this → window라는 최상위 객체
//이벤트에서의 this → 태그 자신
var a = 1; //window에 선언됨
function aaa(){
var a = 1; //지역 변수
console.log(a); //지역 변수 접근
console.log(this); //window
console.log(this.a); //전역변수에 접근
}
aaa();
//이벤트
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
console.log(this); //태그 자기자신
});
</script>
</body>
</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>
<select id = "sel">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type = "text" onchange="aaa();">
<div id = "db" >db 클릭 이벤트</div>
<script>
//1. 위에 있는 select와 input에 여러분이 원하는 방법으로 change 걸어보기
//2. div에는 dbclick 이벤트도 걸어보세요.
var sel = document.getElementById("sel");
sel.onchange = function() {
console.log("체인지 이벤트");
}
function aaa() {
console.log("체인지 이벤트");
}
var dbclick = document.getElementById("db");
dbclick.addEventListener("dblclick", function() {
console.log("더블클릭이벤트");
});
</script>
</body>
</html>
3. bom and dom
- 자바스크립트의 두번째 강력한 기능
- BOM은 브라우저 객체 모델이라 하며, 내장객체들을 의미합니다. window, location. history, document 등이 포함됩니다. - DOM은 문서 객체 모델이라 하며, document객체를 의미합니다. DOM은 요소(element)의 선택, 삭제 생성 등을 위해 사용합니다.
- DOM객체를 이용한 요소의 접근은 자바스크립트의 강력한 기능이며 반드시 외워야 하는 기능입니다.
* element(태그) 노드 선택
1) getElementById() : 요소의 id가 xx인 태그를 선택
<!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>
<button id = "btn">버튼</button>
<input type = "checkbox" name = "inter" value = "1"> java
<input type = "checkbox" name = "inter" value = "2"> js
<input type = "checkbox" name = "inter" value = "3"> css
<input type = "checkbox" name = "inter" value = "4"> html
<script>
//element == node == 태그
var btn = document.getElementById("btn");
var inter = document.getElementsByName("inter"); //name이 inter인 태그 - 반환이 배열
btn.onclick = function() {
for(var i = 0; i < inter.length; i++){
console.log(inter[i]);
}
}
</script>
<hr>
<button id = "btn2">버튼</button>
<input type = "radio" name = "aaa" class="hello" value="1" > 프로그램
<input type = "radio" name = "aaa" class="hello" value="2" > 디자인
<input type = "radio" name = "aaa" class="hello" value="3" > 네트워크
<input type = "radio" name = "aaa" class="hello" value="4" > 보안
<script>
var btn2 = document.getElementById("btn2");
var hello = document.getElementsByClassName("hello"); //class명이 hello인 태그 - 반환이 배열
console.log(hello);
btn2.onclick = function(){
for(var i = 0; i < hello.length; i++){
console.log(hello[i]);
}
}
</script>
<hr>
<button id = "btn3">버튼</button>
<ul id = "bye">
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>
<script>
var btn3 = document.getElementById("btn3");
var bye = document.getElementById("bye") //id가 bye인 태그
var li = bye.getElementsByTagName("li"); //bye인 태그에서 탐색
btn3.onclick = function(){
for(var i = 0; i < li.length; i++){
console.log(li[i]);
}
}
</script>
</body>
</html>2) querySelector() : 요소 선택 방법이 css와 동일(첫번째 요소만 선택)
3) querySelectorAll() : 요소 선택 방법이 css와 동일(모든 태그 선택)
<!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>
<button id = "btn">쿼리 셀렉터 확인</button>
<ul class = "box">
<li>hi</li>
<li>bye</li>
<li>good afternoon</li>
</ul>
<script>
var btn = document.querySelector("#btn"); //css 선택자
//var li = document.querySelector(".box > li")
//console.log(li);
var lis = document.querySelectorAll(".box li");
btn.onclick = function(){
for(var i = 0; i < lis.length; i++){
console.log(lis[i]);
}
}
</script>
</body>
</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>
<h3>태그의 속성 제어하기</h3>
<input type = "text" value="" id = "input" required>
<div class = "msg"></div>
<button type = "button" id = "btn">확인</button>
<script>
//태그의 속성은 = .속성명으로 접근합니다.
var input = document.getElementById("input");
//console.log(input.type); //type 속성
//console.log(input.id); //id 속성
//console.log(input.value); //value 속성
//console.log(input.required); //required 속성
//input.value = "변경";
//태그 사이의 값을 HTML 형식으로 얻음 innerHTML
var btn = document.getElementById("btn");
// console.log(btn.innerHTML);
var msg = document.querySelector(".msg");
//버튼을 누르면 사용자가 입력한 value 가지고 와서 msg 태그 사이에 출력.
btn.addEventListener("click", function() {
var a = input.value;
msg.innerHTML = a;
})
</script>
</body>
</html>
* 예제(문제 1~2)
<!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>
<h3>사용자가 버튼을 클릭하면 input 태그의 공백 여부, 체크 박스의 체크 여부</h3>
아이디: <input type="input" id="id">
기억하기: <input type="checkbox" class="remember">
<button id="btn">확인</button>
<script>
var btn = document.getElementById("btn"); //button
var id = document.getElementById("id"); //input
var remember = document.querySelector(".remember") //checkbox
btn.onclick = function () {
if (id.value == "") {
alert("input의 값을 확인하세요!");
}
if (remember.checked == false) {
alert("기억하기를 체크하세요!");
}
}
</script>
<hr>
<h3>인라인 이벤트 - 사용자가 체크박스를 클릭할 때마다 경고창에 value 값을 띄워주세요</h3>
<input type="checkbox" value="1" onclick="check(this)"> 조항1
<input type="checkbox" value="2" onclick="check(this)"> 조항2
<input type="checkbox" value="3" onclick="check(this)"> 조항3
<script>
function check(tag){
// console.log(tag);
if(tag.checked == true){
alert(tag.value + "조항 선택");
}
}
</script>
</body>
</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>
<h2 id = "title">단어를 선택하세요</h2>
<select class = "selector">
<option value = "1">선택</option>
<option value = "2">hello</option>
<option value = "3">안녕하세요</option>
<option value = "4">니하오</option>
</select>
<script>
var title = document.querySelector("#title");
var selector = document.querySelector('.selector');
selector.onchange = function(){
// console.log(this);
// console.log(selector.value);
if(selector.value == '1'){
title.innerHTML = "단어를 선택하세요";
} else if(selector.value == '2') {
title.innerHTML = "영어입니다";
} else if(selector.value == '3') {
title.innerHTML = "한국어입니다";
} else {
title.innerHTML = "중국어입니다";
}
}
</script>
</body>
</html>