✅ Array 객체란?
☑️ Array 객체로 배열 만들기
- 초깃값이 없을 때
var myArray = new Array(); //Array 객체의 인스턴스를 만듭니다.- 초깃값이 있을 때
var numbers = ["one","two","three","four"]; //리터럴을 사용한 배열
var numbers = new Array("one","two","three","four") // Array 객체를 사용한 배열☑️ 배열에서 for문 사용하기
var seasons = ["봄","여름","가을","겨울"]
seasons.length // 4
for ( var i = 0 ; i < seasons.length; i++ ) {
console.log(seasons[i]) //봄, 여름, 가을, 겨울
}✅ Array 객체의 주요 함수
☑️ 둘 이상의 배열을 연결하는 concat( ) 함수
var nums = ["1","2","3"]; //concat 해도 해당 배열은 그대로
var chars = ["a","b","c","d"]; //concat 해도 해당 배열은 그대로
nums.concat(chars)
// ["1","2","3","a","b","c","d"]
chars.concat(nums)
// ["a","b","c","d","1","2","3"]concat( ) 함수는 새로운 배열을 만들기 때문에 기존의 nums나 chars 배열에는 영향을 주지 않음.
☑️ 배열 요소를 연결하는 join( ) 함수
nums.join()
// "1,2,3"
nums.join("-")
// "1-2-3"지정한 구분 기호를 사용해 배열 요소 연결 ( 구분 기호를 지정하지 않으면 쉼표(,)로 구분 )
☑️ 새로운 요소를 추가하는 push( ) 함수와 unshift( ) 함수
var nums = ["1","2","3"]
nums.push("4","5") //nums 배열 맨 뒤에 해당 요소 추가
nums // (5) ["1","2","3","4","5"]nums.unshift("0") //nums 배열 맨 앞에 "0" 요소 추가
nums // (6) ["0","1","2","3","4","5"]☑️ 배열에서 요소를 추출하는 pop( ) 함수와 shift( ) 함수
var study = ["html","css","javascript"];
study.pop() //"javascript" // 배열의 맨 뒤에 있는 요소 제거
study // (2) ["html","css"]
var js = ["es6+","node","react","angular","vue"]
js.shift() //"es6+" // 배열의 맨 앞에 있는 요소 제거
js // (4) ["node","react","angular","vue"]☑️ 원하는 위치의 요소를 삭제/추가하는 splice( ) 함수
var numbers = [0,1,2,3,4,5]
numbers.splice(2) //[2,3,4,5]
numbers //[0,1]인수 1개 : 인수가 가리키는 인덱스의 요소부터 배열의 끝 요소까지 삭제
var study = ["html","css","web","jquery"]
study.splice(2, 1) // ["web"]
study //["html","css","jquery"]인수 2개 : 첫번째 인수는 인덱스이고 두번째 인수는 삭제할 개수
study.splice(2, 1, "js") //jquery를 js로 바꿈
study //["html","css","js"]
study.splice(2, 0, "jquery") //인덱스2부터 0개 삭제하고, jquery를 인덱스 2 앞에 추가
study //["html","css", "jquery", "js"]인수 3개 : 첫 번째 인수는 해당 배열에서 삭제를 시작할 위치, 두 번째 인수는 삭제할 개수, 제한 위치에 새로 추가할 요소 . 기존 배열의 요소를 삭제하지 않고 새로운 요소를 추가하고 싶다면, 삭제할 개수를 지정하는 두 번째 인수에 0을 넣는다.
☑️ 원하는 위치의 요소들을 추출하는 slice( ) 함수
var colors = ["red","green","blue","white","black"];
colors.slice(2) // ["blue","white","black"]
colors // ["red","green","blue","white","black"];
var colors2 = colors.slice(1, 4)
colors2 //["green","blue","white"]
colors //["red","green","blue","white","black"]1) 시작 인덱스와 끝 인덱스를 지정하면 시작 인덱스부터 끝 인덱스 직전까지 추출
2) 시작 인덱스만 지정할 경우 시작 인덱스부터 끝까지 모두 추출
✅ 여행 준비물 점검 프로그램
☑️ 생각해 보기
1) 배열 만들기
2) 챙길 물건 배열에 추가하기 – 텍스트 필드 사용
3) 추가한 내용, 목록 형태로 화면에 표시하기 – for문 사용
4) 챙겼다면 목록에서 삭제하기
☑️ 입력 필드 만들기
<link rel="stylesheet" href="./css/input.css">
<link rel="stylesheet" href="./css/list.css">
</head>
<body>
<div id="wrapper">
<h2>여행 준비물 점검 목록</h2> <!--제목-->
<form>
<input type="text" id="item" autofocus="true" autocomplete="off"> <!--입력용 텍스트 필드-->
<button type="button" id="add" class="addBtn">추가</button>
</form>
<div id="itemList"></div> <!--준비물 목록이 표시될 영역-->
</div>☑️ 항목 추가하기 & 표시하기
var itemList = [];
var addBtn = document.querySelector("add"); //'추가' 버튼
addBtn.addEventListner("click", addList); //addBtn을 클릭하면 addList 함수 실행
function addList() {
var item = document.querySelector("#item").value; // 텍스트 필드 내용 가져옴
if ( item != null ) {
itemList.push(item); // itemList 배열의 끝에 item 변수 값 추가
document.querySelector("#item").value = ""; //id="item"인 요소의 값을 지움
document.querySelector("#item").focus(); //텍스트 필드에 focus() 메서드 적용
}
showList(); // 목록을 표시하는 showList() 함수 실행
}
function showList() {
var list = "<ul>"; // 목록을 시작하는 <ul> 태그 저장
for (var i = 0 ; i < itemList.length ; i++ ) {// 배열 요소마다 반복
list += `<li>${itemList[i]}<span class='close' id='${i}'>X</span></li>` // 요소를 <li>~</li>로 묶음
}
list += "</ul>"; // 목록을 끝내는 </ul> 태그 저장
document.querySelector('#itemList').innerHTML = list; // list 내용 표시☑️ 클릭하면 항목 삭제하기
var remove = document.querySelectorALL(".close"); // 삭제버튼을 변수로 저장
for ( var i = 0 ; i < remove.length ; i++ ) {
remove[i].addEventListener("click", removeList); //addBtn.onclick = addList; 라고 해도 됨
}
}
function removeList() {
var id = this.getAttribute("id"); //클릭한 삭제 버튼의 id값을 가져온다.
itemList.splice(id, 1);
showList();
}각 코드마다 기능을 주석으로 기재해 놓았으니 참고 할 것
✅ 문서 객체 모델(Document Object Model, DOM)
자바스크립트가 웹 문서를 동적으로 다룰 수 있도록 문서에 있는 각 요소를 객체 형태로 처리하는 것
document.querySelector('#detail p').style.visibility = 'hidden'예) 문서에서 특정 부분을 가져와서 visibility 속성 값을 바꾸면?
→ 화면에서 사라짐
☑️ DOM 트리
- DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분
- 웹 문서 구조를 부모/자식 관계로 표시하면 나무를 거꾸로 뒤집어 놓은 모습 → DOM 트리
☑️ DOM 트리의 노드
- 웹 문서의 태그는 요소(Element) 노드로 표현합니다.
- 태그가 품고 있는 텍스트는 해당 요소 노드(태그)의 자식 노드인 텍스트(Text) 노드로 표현합니다.
- 태그의 속성은 모두 해당 요소 노드(태그)의 자식 노드인 속성(Attribute) 노드로 표현합니다.
- 주석은 주선(Comment) 노드로 표현합니다.
☑️ live dom viewer
☑️ getElementById() – id 선택자를 사용해 접근하기
<body>
<div id="container">
<h1 id="heading">에디오피아 게뎁</h1>
<div id="prod-img"> document.getElementById("heading")
// <h1 id="heading">에디오피아 게뎁</h1> 여기있는 것을 가져온 것
☑️ getElementsClassName() – class 선택자를 사용해 접근하기
<p>2차세계대전이후 설립된<span class="accent">게뎁농장</span>은 ... <span class="accent">SCAA인증</span>을 받은 ... 스페셜티커피를 생산합니다.</p>document.getElementsByClassName("accent")
// HTMLCollection(2) [span.accent, span.accent]document.getElementsByClassName("accent")[0]
// <span class="accent">게뎁농장</span>
☑️ getElementsTagName() – 태그 이름을 사용해 접근하기
<div id="desc">
<h2>Information</h2>
<p>2차 세계대전 이후 ... 생산합니다.</p>
<h2>Flavor Note</h2>
<p>은은하고 ... 향이 입안 가득.</p>
</div>document.getElementByTagName("h2")
▶ HTMLCollection(2) [h2, h2]
▶ 0: h2
▶ 1: h2
length: 2
▶ __proto__: HTMLCollection
☑️ querySelector(), querySelectorAll()
document.querySelector("#heading")
// <h1 id="heading">에티오피아 게뎁</h1>
document.querySelectorAll(".accent")
// ▶ NodeList(2) [span.accent, span.accent]✅ 선택한 상품 이미지 표시하기
☑️ 태그 속성에 접근하기 및 수정하기
getAttribute() - 태그의 속성에 접근해서 값을 가져옴
setAttribute() - 태그의 속성 값을 지정함
<div id="prod-img">
<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁">
</div>속성값을 가져오기(get)는 다음과 같다.
document.querySelector("#prod-img > img").getAttribute("src") "image/coffee-pink.jpg"속성값 수정하기(set)는 다음과 같다.
document.querySelector("#prod-img > img").setAttribute("src", "images/coffee-blue.jpg")
☑️ 선택한 상품 이미지 표시하기
var bigPic = document.querySelector("#cup");
var smallPics = document.querySelectorll(".small");
for(var i = 0 ; i < smallPics.length ; i++ ) { //노드 리스트의 각 요소에 접근
smallPics[i].onclick = showBig; //요소를 누르면 showBig() 합수 실행
}
function showBig() {
var newPic = this.src; //click 이벤트가 발생한 대상의 src 속성 값 가져옴
bigPic.setAttribute("src", newPic); //newPic 값을 큰 이미지의 src 속성에 할당
}☑️ DOM에서 이벤트 처리하기
HTML 태그 안에서 이벤트 처리기 연결하기
<div id="container">
<img id="pic" src="images/girl.png" alt="" onclick="changePic()"> <!--누르면 changePic() 합수 실행-->
</div>
<script>
var pic = document.querySelector('#pic');
function changePic() {
pic.src = "images/boy.png";
}
</script>DOM 요소에 이벤트 처리기 연결하기
<div id="container">
<img id="pic" src="images/girl.png" alt=""> <!--누르면 changePic() 합수 실행-->
</div>
<script>
var pic = document.querySelector('#pic');
pic.onclick = changePic;
function changePic() {
pic.src = "images/boy.png";
}
</script>addEventListener() 사용하기
var pic = document.querySelector('#pic');
pic.addEventListener("mouseover", changePic, false);
function changePic() {
pic.src = "images/boy.png";
}
function originPic() {
pic.src = "images/girl.png";
}① 이벤트 유형 : 처리할 이벤트 유형 지정. “on”을 붙이지 않는다.
② 함수 : 이벤트가 발생했을 때 실행할 명령 또는 함수
③ 캡처 여부 : 이벤트를 캡처링할지 여부. 기본 값 false
✅ 상세 설명 보기/닫기 버튼
☑️ 웹 요소의 스타일 가져와서 수정하기
DOM으로 CSS 속성에 접근하고 수정하기
- style 속성 다음에 속성 이름 작성
- 텍스트 스타일 바꾸려면 (요소).style.color
document.querySelector("#heading").style.color = "white"- background-color처럼 두 단어로 된 속성은 backgroundColor처럼 사용
document.querySelector("#heading").style.backgroundColor = "gray"웹 요소를 화면에 표시하기 / 감추기 - CSS display 속성 사용
var view = document.querySelector("#view"); // #view 요소를 가져옴
view.addEventListener("click", function() { // #view를 눌렀을 때 실행할 함수 선언
if (isOpen == false) { // 상세 정보가 감춰져 있다면
document.querySelector("#detail").style.display = "block"; // 상세 정보를 화면에 표시
view.innerText = "상세 설명 닫기"; // 링크 내용 수정
isOpen = true; // 표시 상태로 지정
}
else { // 상세 정보가 표시되어 있다면
document.querySelector("#detail").style.display = "none"; // 상세 정보를 화면에서 감춤
view.innerText = "상세 설명 보기"; // 링크 내용 수정
isOpen = false; // 감춰진 상태로 지정
}
});✅ 참가 신청 명단 표시하기
☑️ DOM 트리와 노드
- 모든 HTML 태그는 '요소(Element) 노드'로 표현합니다.
- HTML 태그에서 사용하는 텍스트 내용은 '텍스트(Text) 노드'로 표현합니다.
- HTML 태그에 있는 속성은 모두 '속성(Attribute) 노드'로 표현합니다.
- 주석은 '주석(Comment) 노드'로 표현합니다.
☑️ DOM에 요소 추가하기
는 다음 이 시간에 계속...
필요하다면 공부하는 개발자, 한승준