티스토리 뷰
3.6 객체
08_datamethod
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/input.css">
<link rel="stylesheet" href="css/list.css">
<link rel="stylesheet" href="08_datamethod.css">
<style>
*
{
list-style: none;
}
</style>
</head>
<body>
<div id="wrapper">
<h2>여행 준비물 점검 목록</h2>
<form action="#">
<input type="text" id="item" autofocus="true">
<button type="button" id="add" class="addBtn">추가</button>
</form>
<div id="itemList"></div>
<script src="08_datamethod.js"></script>
</div>
</body>
</html>var itemlist = [];
// 클릭이벤트를 발생
var addbtn = document.querySelector('#add');
// 클릭할때 addlist함수를 실행하라는 함수(addEventListener)
addbtn.addEventListener('click',addlist);
// 추가 함수
function addlist()
{
// input안의 값을 item에 넣겠다.
var item = document.querySelector("#item").value;
// var item = document.getEl
if(item != null)//입력받은 변수의 값이 있는지 없는지 검사 : 유효성검사
{
itemlist.push(item);
document.querySelector("#item").value = ""; //입력창을 공백으로 변경
document.querySelector('#item').focus();//선택
}
showlist();
// 확인
console.log(item)
}
// 보여주기 함수
function showlist()
{
//추가할 태그를 작성
var list = "<ul>";
for(var i =0; i<itemlist.length; i++)
{
list = list+ "<li>"+itemlist[i]
+ "<span class = 'close' id="
+ i
+ "> X </span></li>";
}
list = list + "</ul>";
//태그를 배치
document.querySelector("#itemList").innerHTML = list; //div
//remove 배열변수가 됨
var remove = document.querySelectorAll(".close");
for(i=0; i<remove.length; i++)
{
remove[i].addEventListener("click",removelist);
}
}
// 삭제하기 함수
function removelist()
{
//this는 이벤트를 발생시킨 .close 중 하나의 태그
var id = this.getAttribute("id");
console.log(id);
itemlist.splice(id,1);
showlist();
}
9_mouseevent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="09_mouseevent.js"></script>
</head>
<body>
<div><a href="http://itedunet.com" id="linker">아이티에듀넷</a></div>
</body>
</html>window.onload = function()
{
var a = document.getElementById('linker');
a.onclick = function()
{
alert('아이티에듀넷');
// event.preventDefault()
}
}
민들레
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.detail
{
display: none;
}
</style>
</head>
<body>
<div id="item">
<img src="/img/20160225000224_0.jpg" alt="">
<button class="over" id="open">상세 설명 보기</button>
<div id="desc" class="detail">
<h4>민들레</h4>
<p>민들레민들레.
</p>
<button id="close">상세 설명 닫기</button>
</div>
</div>
<script>
var a = document.querySelector('#close')
a.onclick=function()
{
hideDetail();
}
</script>
</body>
<script src="10_p94민들레.js"></script>
<!-- onload때문에 스크립트 소스를 밑에 넣어야됨. -->
</html>document.getElementById('open').addEventListener('click',showDetail);
function showDetail()
{
// 아이디가 desc인 것을 블럭처리해라
document.querySelector('#desc').style.display = "block";
// 반대로 id가 open인 것을 none처리해라
document.querySelector('#open').style.display = "none";
}
// document.getElementById('close').addEventListener('click',hideDetail);
function hideDetail()
{
//id가 desc인 것을 nonew 처리해라
document.querySelector('#desc').style.display = "none";
// id가 open인 것을 블럭처리해라
document.querySelector('#open').style.display = "block";
}