티스토리 뷰
HTML
<!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>
*{
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
box-sizing: border-box;
}
.wrapper{width: 60%; margin:0 auto; text-align: center;}
</style>
</head>
<body>
<div class="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="list.js"></script>
</div>
</body>
</html>
JS
var itemlist=[];
var addbtn = document.querySelector('#add'); //#add 버튼 클릭하면 이벤트 발생
addbtn.addEventListener("click",addlist);
/*추가 */
function addlist(){
var item = document.querySelector('#item').value; //input 안의 값이 item 변수에 넣음 (=.value)
// console.log(item); item변수에 값이 잘 들어갔는지 확인
if(item != null){ /*입력 받은 변수의 값이 있는지 없는지 검사 : 유효성검사*/
itemlist.push(item); //배열에 변수의 값을 추가한다.
document.querySelector("#item").value=""; //입력창을 공백으로 변경(초기화)
document.querySelector("#item").focus(); //선택하는 포커스 유지됨 (깜빡깜빡)
}
showlist(); //함수호출
}
/*보여줌*/
function showlist(){
//추가할 태그 작성
var list ="<ul>";
for(var i=0; i<itemlist.length; i++){
list=list+"<li>"+itemlist[i]
+"<span class='close' id=" //글자사이에 꾸며주는거 span
+i //문자+변수+문자 형식으로 작성
+">X</span></li>";
}
list=list+"</ul>";
//태그를 배치
document.querySelector("#itemList").innerHTML=list; //div
/*remove 배열변수가 됨 all로 여러개 잡았으니까 */
var remove=document.querySelectorAll(".close"); //.close 클래스 전부 변수 remove에 담아준다.
for(var i=0; i<remove.length; i++){
remove[i].addEventListener("click",removelist);
}
}
/*삭제*/
function removelist(){ //배열에 있는것을 뺀다.
//this는 이벤트를 발생시킨 .close 중 하나 태그 (클릭한것)
var id = this.getAttribute("id"); //getAttribute는 속성을 가져옴
console.log(id);
itemlist.splice(id,1); //id와 두번째 자리는 갯수
showlist();
}
결과
- 객체 메서드 (중요!!!)
| 객체 메서드 | 설명 및 특징 |
| preventDefault() | 기본 이벤트의 실행을 막아 준다. |
| stopPropagation() | 이벤트 버블링(자식 이벤트로 인해 부모 이벤트까지 같이 실행)을 방지한다. (a 태그를 클릭해도 이동 X) |
HTML
<!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="prevent.js"></script>
</head>
<body>
<div><a href="http://itedunet.com" id="linker">아이티에듀넷</a></div>
</body>
</html>
JS
window.onload=function(){
var a = document.getElementById('linker');
a.onclick=function(){
alert('아이티에듀넷');
event.preventDefault();
}
}
결과
1. preventDefault() 메서드 사용 전
2. preventDefault() 메서드 사용 후
<a>태그와 submit은 지시된 행동을 한다.
이때 preventDefault() 메서드를 사용하면 행동하는 것을 막아 실행되지 않는다.
- 이벤트 연결방식
1. html에서 js 연결 (=onclick)
2. js에서 html 연결 (=click)
(eventlistener 방식까지해서 3가지 방식이 있다.)
ex) 이벤트 연결방식 두가지를 사용하여 코드 작성 예시
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 이벤트</title>
<Style>
#desc{
display: none;
}
</Style>
</head>
<body>
<div id="item">
<img src="image/flower.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();
} //hidedetaul()만 넣으면 반환값만 주고 function()으로 위와같이 넣으면 hidedetail실행
//그렇기때문에 밑에 hidedetail이란 이름을 가진 함수가 있어야 함수명만해서 실행 가능
</script>
</body>
<script src="view.js"></script>
<!-- onload해야 <head>에 사용 가능하다. -->
</html>
JS
document.getElementById('open').addEventListener('click',showdetail);
function showdetail(){
document.querySelector('#desc').style.display="block";
document.querySelector('#open').style.display="none";
}
function hidedetail(){
document.querySelector('#open').style.display="block";
document.querySelector('#desc').style.display="none";
}
결과
이벤트 연결방식 두가지를 사용하여 html과 javascript를 작성하였다.
첫번째 방식으로는 js에서 html(=click)으로 연결하는 방식을 사용하였다.
JS
document.getElementById('open').addEventListener('click',showdetail);
function showdetail(){
document.querySelector('#desc').style.display="block";
document.querySelector('#open').style.display="none";
}
javascript에 작성을 하여 html로 연결하였다.
이때는 주의할 점이 있다.
js를 실행하기 위해 html에 실행하도록 연결시켜줘야하는데
위치에 따라 실행 순서가 다르기 때문에 주의해야한다.
만약 연결하는 명령어인 <script src="view.js"></script> 를 html 문보다 앞에 위치한다면 js가 먼저 실행되어 제대로 실행되지않는다.
그렇기 때문에 코드 위치를 </body> 이후에 작성하거나 window.onload 를 사용하여 정상적으로 실행되도록 한다.
window.onload는 html이 모두 로드 된 후 js가 실행되도록 한다.
두번째 방식으로는 html에서 js 연결 (=onclick) 방식을 사용하였다.
HTML
<script>
var a = document.querySelector('#close');
a.onclick=function(){
hidedetail();
}
</script>
JS
function hidedetail(){
document.querySelector('#open').style.display="block";
document.querySelector('#desc').style.display="none";
}
두번째 방식은 html에서 js 연결하도록 하였다.
이 방식 또한 알아야하는 주의사항이 있다.
위의 코드는 function hidedetai(){} 과 onclick이 각 각 js와 html에 작성되어 있다.
위와 같은 방식을 사용할때는 상관없지만
아래와 같은 방식을 사용할때는 문제가 발생한다.
<script>
var a = document.querySelector('#close');
a.onclick=hidedetail();
</script>
hidedetail()만 작성하면 반환값을 준다.
이와 같은 방식으로 사용할 시 hidedetail()함수가 같은 공간에 있어야 찾아 실행하여 반환값을 줄 수 있는데
만약 위의 방식처럼 JS에 따로 작성할 시 함수를 찾을 수 없어 실행되지 않는다.
문제점을 해결하고자한다면 아래와 같이 한 곳에 hidedetail도 작성되어야 정상적인 실행이 가능하다.
<script>
var a = document.querySelector('#close');
a.onclick=hidedetail();
function hidedetail(){
document.querySelector('#open').style.display="block";
document.querySelector('#desc').style.display="none";
}
</script>
3.8 BOM (Browser object Model)
| 윈도우 객체 | 설명 및 특징 |
| open() | 새로운 윈도우를 만들어 주는 메서드 이다. (새창을 열어준다.) |
| ex | window.open('문서주소', '윈도우 이름', '옵션=값, 옵션=값'); |
: 윈도우 객체에는 location, screen, history, navigator, document 객체들이 포함되어 있다.
| 옵션 | 설명 및 특징 |
| width=픽셀값 | 윈도우의 가로 너비를 설정한다. |
| height=픽셀값 | 윈도우의 세로 너비를 설정한다. |
| left =픽셀값 | 윈도우의 left 위치를 설정한다. |
| top =픽셀값 | 윈도우의 top 위치를 설정한다. |
| location=yes/no | 윈도우의 주소창에 대한 show/hide를 설정한다. |
| scrollbars=yes/no | 윈도우 스크롤바에 대한 show/hide를 설정한다. |
| menubar =yes/no | 윈도우의 메뉴바에 대한 show/hide를 설정한다. |
| toolbar =yes/no | 윈도우의 툴바에 대한 show/hide를 설정한다. |
| status =yes/no | 윈도우의 상태줄에 대한 show/hide를 설정한다. |
- 타이머 함수
| 타이머 함수 | 설명 및 특징 |
| setInterval() | 일정시간마다 지정한 함수를 반복적으로 실행하는 함수 |
| setInterval(function(){실행문},밀리초(1/1000)); | |
| clearInterval() | setInterval()함수를 중지시키는 함수 |
| setTimeout() | 설정한 시간이 흐른 뒤에 지정한 함수를 한 번만 실행하는 함수 |
| setTimeout(function(){실행문},밀리초(1/1000)); | |
| clearTimeout() | setTimeout()함수를 중지시키는 함수 |
ex) setInterval()함수 예시
<!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>
var i=0;
setInterval(function(){
i++;
alert('2초마다 실행' +i);
},2000);
</script>
</head>
<body>
</body>
</html>
결과
실행한 코드를 살펴보면 setInterval()함수를 사용하여 2초로 시간을 설정하여
2초마다 팝업창이 실행되는 것을 볼 수 있다.
<script>
var i=0;
setInterval(function(){
i++;
alert('2초마다 실행' +i);
},2000);
</script>
ex) setInterval() & clearInterval()함수 예제
<!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>
window.onload=function(){
var bt=document.getElementById('bt');
var i=0;
var increase = setInterval(function() {
i++;
alert(i);
},2000);
bt.onclick=function(){
clearInterval(increase);
};
};
</script>
</head>
<body>
<button id="bt">멈춤</button>
</body>
</html>
결과
위의 코드를 살펴보면 setInterval()함수를 사용하여 2초마다 팝업창을 실행 시킨 후
clearInterval()함수를 사용하여 멈춤 버튼을 클릭하면 setInterval()함수를 실행 중지시키는 것을 볼 수 있다.
| location 객체 | 설명 및 특징 |
| location | 웹브라우저의 주소 URL 관련 객체 |
| 프로퍼티 | http://itedunet.com:8080/search?book=5#coding |
| location 객체 프로퍼티 | 설명 및 특징 | |
| hash | #coding | 주소의 앵커명(#)을 반환 |
| host | http://itedunet.com:8080 | 주소의 호스트명과 포트 번호를 반환 |
| port | 8080 | 주소의 호스트명과 포트 번호를 반환 |
| pathname | /search | 주소의 패스명을 반환 |
| href | 전체주소 | 주소의 값을 반환 |
| protocol | http: | 주소의 프로토콜명을 반환 |
| search | ?book=5 | 주소의 쿼리 문자열을 반환 |
| location 객체 메서드 | 설명 및 특징 |
| reload() | 현재 페이지를 다시 로드한다. |
| <button onclick="javascript:location.reload();">reload</button> | |
| replace() | replace(url)일 때 url 값으로 이동한다. |
| <button onclick="javascript:location.replace('http://itedunet.com');">replace</button> |
* javascript:location.reload에서 javascript는 <script>와 같다
| screen 객체 | 설명 및 특징 |
| screen | 모니터 화면정보 관련 객체 |
| screen 프로퍼티 | 설명 및 특징 |
| width | 화면의 너비를 반환한다. |
| height | 화면의 높이를 반환한다. |
| availWidth | 화면에서 작업 표시줄을 제외한 너비를 반환한다. |
| avaiHeight | 화면에서 작업 표시줄을 제외한 높이를 반환한다. |
| colorDepth | 화면에서 사용 가능한 색상수를 반환한다. |
| pixelDepth | 화면의 색상 해상도를 반환한다. |
| history 객체 | 설명 및 특징 |
| history | 페이지가 이동한 정보를 관리하는 객체 |
| history 메서드 | 설명 및 특징 |
| back() | 이전페이지로 이동한다. |
| <button onclick="javascript:history.back();">back</button> | |
| forward() | 이후 페이지로 이동한다. |
| <button onclick="javascript:history.forward();">back</button> | |
| go() | go(n)일 때 n값에 따라 양수이면 이후 페이지 음수이면 이전 페이지로 이동한다. |
| <button onclick="javascript:history.forward(2);">back</button> |
| navigator 객체 | 설명 및 특징 |
| navigator | 브라우저 버전이나 브라우저명 등 브라우저 정보에 관한 객체 |
| navigator 프로퍼티 | 설명 및 특징 |
| appCodeName | 브라우저의 코드명을 반환해 준다. |
| appName | 브라우저명을 반환해 준다. |
| appVersion | 브라우저의 버전을 반환해 준다. |
| platform | 플랫폼명을 반환해 준다. |
| userAgent | 브라우저의 코드명과 저번을 반환해 준다. |
ex) 팝업창
HTML
<!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>
window.open('popup.html','itedunet','width=300, height=300, left=100, top=10'); //팝업창 만듬
//open은 새창 여는 명령어
</script>
</head>
<body>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="image/flower.jpg" alt="">
</body>
</html>
만약 아래와 같이 작성된다면 naver 사이트의 창이 뜬다.
<script>
window.open('www.naver.com','itedunet','width=300, height=300, left=100, top=10');
</script>
3.9 DOM(Document object Model)
| 요소선택 메서드 | 설명 및 특징 |
| getElementById() | HTML 요소 중 id속성을 찾아서 선택한다. |
| getElementsByClassName() | HTML 요소 중 class 속성을 찾아서 선택한다. |
| getElementsByTagName() | HTML 요소 중 태그명을 찾아서 선택한다. |
| getElementByName() | HTML 요소 중 name 속성을 찾아서 선택한다. |
| querySelector() | 요소의 선택방법이 CSS선택방법과 같으며 첫번째만 선택된다. |
| querySelectorAll() | 요소의 선택방법이 CSS선택방법과 같으며 모든(여러개) 요소를 선택한다. (여러개를 선택하므로 배열로 저장 → for사용) |
ex) querySelector 과 querySelectorAll 메서드의 출력 차이 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box1">
<ul>
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ul>
</div>
<div id="box2">
<ul>
<li>내용4</li>
<li>내용5</li>
<li>내용6</li>
</ul>
</div>
<script>
var list1=document.querySelector('#box1 > ul > li');
var list2=document.querySelectorAll('#box2 > ul > li');
console.log(list1);
console.log(list2);
</script>
</body>
</html>
결과
결과로 보아 querySelector는 첫번째 요소인 내용1만 반환하고 querySelectorAll 는 모든 요소를 반환하는 것을 볼 수 있다.
- 상태 위치 요소선택
| 상태위치 요소선택 | 설명 및 특징 |
| parentNode | 선택된 요소의 부모 노드를 선택한다. ↑ (CSS x) |
| childNodes | 선택된 요소의 자식 노드들(요소 노드, 텍스트 노드)을 선택한다. |
| children | 선택된 요소의 자식 노드들을 선택한다. |
| nextSibiling | 선택된 요소의 다음 형제 노드를 선택한다. > |
| previouseSibling | 선택된 요소의 이전 형제 노드를 선택한다. ← 왼쪽으로 (CSS x) |
| firstChild | 선택된 요소의 자식 노드 중 첫번째 노드를 선택한다. ↓ 중 첫번째 |
| lastChild | 선택된 요소의 자식 노드 중 마지막 노드를 선택한다. ↓ 중 마지막 |
| tageName | 선택된 요소의 태그명을 반환한다. |
| nodevalue | 선택된 노드의 value 값을 반환한다. |
| nodeType | 선택된 노드의 타입을 반환한다. 1:요소,2:속성,3:텍스트 |
| id | 선택된 요소의 id값을 반환한다. |
| className | 선택된 요소의 class값을 반환한다. |
| 요소 생성 | 설명 및 특징 |
| createElement() | 요소를 생성하는 메서드이다. |
| createTextNode() | 텍스트를 생성하는 메서드이다. |
| appendChild() | 요소를 부모와 자식의 관계로 만들어주는 메서드이다. (추가함) |
ex) createElement, createTextNode, appendChild 메서드 사용 예시
<!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>
div{
position:fixed;
left:100px;
top:10px;
width: 200px;
height: 200px;
background: #718c00;
}
</style>
<script>
function createEle(){
var bt=document.getElementById('bt');
function popup(){
var div=document.createElement('div');
var p = document.createElement('p');
var txt = document.createTextNode('자바스크립트');
p.appendChild(txt);
div.appendChild(p);
document.body.appendChild(div);
}
bt.onclick=popup;
}
addEventListener('load',createEle);
</script>
</head>
<body>
<button id="bt">요소생성</button>
</body>
</html>
결과
콘솔에 출력값을 보면 요소생성 버튼을 클릭하면 body 안에 div가 추가되는 것을 알 수 있다.
document.body.appendChild(div); 는 body안에 div를 추가한다는 뜻의 메서드이다.
addEventListenr('load', createEle); 은window.onload와 같다.
그러므로 window.onload function(){createEle();}와 같은 기능의 다른 표현이다.
'코딩 > JavaScript' 카테고리의 다른 글
| [JacaScript] 셀렉터 (0) | 2023.12.17 |
|---|---|
| 사이트 클론코딩 (0) | 2023.11.28 |
| [8주 1일차] javascript (1) | 2023.11.27 |
| [7주 5일차] JavaScript (1) | 2023.11.24 |
| [7주 3일차] JavaScript (0) | 2023.11.22 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday