[개발일지 30일차] Array와 DOM

MSJ·2022년 6월 15일
0

WEB

목록 보기
30/41
post-thumbnail

2022-06-15

Js의 Array

Array(배열)이란 것은 두 가지 특징으로 나뉘어지는데...
말 그대로 Array와, 그와 비스무리한 List라는 것이 있다. 이 둘은 차이가 있다.

어떤 차이가 있을까?

우리에게 초콜렛 상자가 있다.
그런데 누가 와서 하나를 먹었다.
그럼 이 초콜렛 상자의 칸은 줄어들까?

이것이 Array(배열)이다.

배열은 내용물이 없어져도 메모리상(RAM) 임의 위치에 남아있다. 배열은 할당이 필요한 Byte 만큼 연속된(이어진) 공간에 부여된다. 드래곤볼처럼 각기 다른 공간에 위치한 메모리를 할당 받는 것이 아니라.


어떤 맛집 앞에 대기줄이 있다.
너무 오래 기다리던 어떤 사람이 다른 집을 찾아 줄을 벗어난다
그럼 그 줄은 그대로 남아있을까?

이것이 List이다.

내용물이 없어지면 List의 크기는 줄어든다. 데이터가 늘어났다, 줄었다하면서 메모리도 늘었다~ 줄었다~ 한다.
이 특성때문에 linked list가 가능한데, 각기 다른 곳에 위치한 메모리를 사용해도, 각 데이터가 연결되어있어서 특정 위치 A data의 뒤에 연결된 B data가 제거될 경우 B의 그 다음 C data에 연결하여 가지고 올 수 있다.


JavaScript에서의 배열은 전통적인 Array와는 다른 List의 특징을 지녔으나 Array라고 부르고 있다.


여기서 .length의 역할은 빛을 발한다. 데이터 양이 변할 때마다 수정을 해야하는 번거로움이 없다.


Array 객체

배열 선언 (Array 객체로 배열만들기)

  • 초기값이 없을 때
    var myArray = new Array();
    객체의 인스턴스를 만든다

  • 초깃값이 있을 때

    1) Array 객체 배열 (new 키워드)
    var myArray = new Array(); 혹은,
    var myArray = new Array("변수 선언하며 값초기화", "여기서도 가능");
    2) 리터럴 배열
    var num = ["one", "two", "three", "four"];

Array 객체의 주요 함수

1) concat()

둘 이상의 배열을 연결한다.
새로운 배열을 만들기 때문에 nums나 char배열에 영향을 주지 않는다.

2) join()

데이터를 하나로 합치는데, ()사이에 어떤 표기를 넣어줄 수도 있다.

3) push(), junshift()

push() : 배열의 맨 끝에 요소 추가
unshift() : 배열의 맨 앞에 요소 추가

4) pop(), shift()

pop() : 배열의 맨 끝에 요소 꺼내기
shift() : 배열의 맨 앞에 요소 꺼내기

5) splice()

원하는 위치에 요소를 삭제/추가할 수 있다.
원본 배열에 영향을 미친다.

myArray.splice(2,1,"추가 요소")
.splice(인덱스 위치, 삭제할 요소 수, 추가할 요소)를 뜻한다

인수 1개 : 인덱스 위치의 요소부터 배열의 끝을 삭제
인수 2개 : 인덱스 위치의 요소부터 삭제할 요소 수 만큼 차례대로 삭제
인수 3개 : 인덱스 위치의 요소부터 삭제할 요소 수와 추가할 요소

6) splice

원하는 위치의 여러 요소를 추출할 수 있다. (삭제와는 다름)
원본 배열에 영향을 미치지 않으므로, 사용할 경우 다른 변수에 저장해서 쓰자.

지정한 인수의 시작부터 끝 인덱스의 직전까지 추출가능하고, 시작 인수만 지정할 경우 배열의 끝까지 추출한다.

myArray.slice(1, 4)
slice(추출 시작 인덱스 위치, 추출 끝 인덱스 위치)


Array를 사용한 연습 문제

1. js: for문, push 활용

배열에 있는 모든 요소를 더한 결과를 배열의 끝에 추가하는 프로그램

<script>
	var numbers = [2, 4, 6, 8, 10];
    
	showArray(numbers);

		function showArray(arr) {
			var str = "<table><tr>";
			for (var i=0; i<arr.length; i++) {
				str += "<td>" + arr[i] + "</td>";
			}
			str += "</tr></table>";
			document.write(str);
		}
</script>

풀이

<script>
	var numbers = [2, 4, 6, 8, 10];
		
		var sum = 0; //합계를 저장할 변수를 선언
		for(var i=0; i < numbers.length; i++){
			sum = sum + numbers[i]; //sum += numbers[i]
		}
		numbers.push(sum);

		showArray(numbers);

		function showArray(arr) {
			var str = "<table><tr>";
			for (var i=0; i<arr.length; i++) {
				str += "<td>" + arr[i] + "</td>";
			}
			str += "</tr></table>";
			document.write(str);
		}
</script>

2. 랜덤 글귀 출력 프로그램

<script>
// 배열에 추가할 글귀 목록 
// 배열이름: quotes
// 랜덤표시: Math.floor, Math.random() 활용

var quotes = [
"당신은 지금도 최고고, 이전에도 최고였으며 앞으로도 최고일 것입니다.",
"성공하는 사람은 실패하는데 익숙한 사람이다.",
"후회를 최대한 이용하라. 깊이 후회한다는 것은 새로운 삶은 산다는 것이다.",
"가짜 친구는 소문을 믿고 진짜 친구는 나를 믿는다.",
"성공이라는 못을 박으려면 끈질김이라는 망치가 필요하다.",
"인생이란 결코 공평하지 않다. 이 사실에 익숙해져라.",
"'언젠가'라는 날은 영원히 오지 않는다.",
"문제점을 찾지 말고 해결책을 찾으라.",
"착한 일은 작다 해서 아니하지 말고, 악한 일은 작다 해도 하지 말라.",
"자존심은 어리석은 자의 소유물이다"];
</script>

풀이

<script>
// var quotes = []; //먼저 빈 걸로 만들어준 뒤,
// quotes[0] = "당신은 지금도 최고고, 이전에도 최고였으며 앞으로도 최고일 것입니다."
// quotes[1] = "성공하는 사람은 실패하는데 익숙한 사람이다." 
// 이렇게도 가능하고

var quotes = [
"당신은 지금도 최고고, 이전에도 최고였으며 앞으로도 최고일 것입니다.",
"성공하는 사람은 실패하는데 익숙한 사람이다.",
"후회를 최대한 이용하라. 깊이 후회한다는 것은 새로운 삶은 산다는 것이다.",
"가짜 친구는 소문을 믿고 진짜 친구는 나를 믿는다.",
"성공이라는 못을 박으려면 끈질김이라는 망치가 필요하다.",
"인생이란 결코 공평하지 않다. 이 사실에 익숙해져라.",
"'언젠가'라는 날은 영원히 오지 않는다.",
"문제점을 찾지 말고 해결책을 찾으라.",
"착한 일은 작다 해서 아니하지 말고, 악한 일은 작다 해도 하지 말라.",
"자존심은 어리석은 자의 소유물이다"];

var index = Math.floor(Math.random() * quotes.length);
// Math.random() * 10 을 할 경우, undefined가 나올 수 있다. 나중에 변경될 수 있는 값은 변수로 지정하는게 BEST!
document.write("<p>&quot;" + quotes[index] + "&quot;<p>")
</script>


Array를 사용한 예제

예제 1) 여행 준비물 점검 프로그램

프로그램의 순서를 잘 생각해보자
1. 배열 만들기
2. 챙길 물건 배열에 추가하기 - 텍스트 필드 사용
3. 추가한 내용, 목록 형태로 화면에 표시하기 - for문 사용
4. 챙겼다면 목록에서 삭제하기

<script>
var itemList = [];
var addBtn = document.querySelector('#add');
addBtn.addEventListener("click", addList) //addBtn.onclick = addList 도 가능

function addList() {
    // 텍스트 필드 내용을 가져오기
    var item = document.querySelector("item").value;
    if (item != null){
        itemList.push(item); //itemList 끝에 item 내용 추가 만약에 아이템 내용이 null 없다면
        document.querySelector("#item").value = ""; //후처리 1, 쓰고난 후 내용 비우고
        document.querySelector("#item").focus();
    }
    showList();
}

function showList(){
    var list = "<ul>";
    for (var i = 0; i < itemList.length; i++) //.length 를 어디쓰나 싶었는데 다 활용도가 있는게 재밌네
    {
        list += "<li>" + itemList[i] + "<span class='close' id="+i+"> X </span></li>";  //잘 봐야된다...;; "따옴표 사이를"
    }
    list +="</ul>";
    document.querySelector("#itemList").innerHTML = list; //list 내용 표시.

    //삭제버튼을 변수 지정. WHY? 
    var remove = document.querySelectorAll(".close");
    for (var i=0; i < remove.length; i++){
        remove[i].addEventListener("click", removeList); //i번째 요소의 X를 클릭하면 removeList()실행
    }
}


function removeList(){
    var id = this.getAttribute("id"); //클릭할 삭제 버튼의 속성값(여기선 id)값을 가져온다.
    itemList.splice(id, 1);
    showList();
}
</script>


DOM

(Document Object Model) : 문서 객체 모델
JS가 웹 문서를 동적으로 다룰 수 있도록, 문서에 있는 각 요소를 개체 형태로 처리하는 것.

문서 뿐만 아니라, 웹 문서 안의 이미지, 링크, 텍스트 필드 등은 모두 미리 정의되어있는 객체들이다. (이것 자체를 DOM이라 부름)

객체들은 속성(property)함수(function)를 가질 수 있는데, 나중에 역할을 부여하거나 내용을 수정하기가 쉬워진다.




console창에 document라고 쳤을 때, html의 내용이 그대로 접근되는 것을 볼 수 있다


DOM Tree 돔 트리

DOM은 웹 문서의 요소(Element)를 부모 요소와 자식 요소로 구분한다.

DOM 트리에 해당하는 뿌리포함 모~든 요소를 node 노드라고 부르며, 최초의 시작을 root 뿌리라고 부른다.

해당 요소의 상단에 존재하는 요소를 부모 요소, 아래에 포함되는 요소를 자식 요소라 한다.

태그에 포함된 콘텐츠 조차 노드라고 표현한다.
태그들은 element node, class와 id같은 것들은 Attribute node(속성), Text로 된 콘텐츠는 text node 등.

https://software.hixie.ch/utilities/js/live-dom-viewer/
여기에서 돔 구조를 보다 쉽게 볼 수 있다.


DOM 돔에 접근하기

DOM에 요소 추가하기

createElement()를 한 뒤에는 꼭 appendChild()(추가)를 해줘야한다. 생성과 추가는 다른 동작이다.

getElementByld(), getElementsClassName(), getElementsTagName()

id 선택자, class 선택자, 태그이 이름을 사용해 접근해보자. 개발자모드로 콘솔창에서 바로 변경을 해보았다.

속성명에도 규칙이 있다. CSS에서 쓰이는 font-size 경우 하이픈을 지우고 뒤에 붙는 단어의 첫글자를 대문자로 쓰면 된다. 즉 fontSize이다.

querySelector(), querySelectorAll()

위의 3가지를 한꺼번에 다 쓸 수 있는 선택자.
id 값은 # 기호, class 값은 . 기호, 태그는 기호 없이 사용.

document.querySelector("#heading")
document.querySelectorAll(".accent")

차이점 : querySelector()는 찾아낸 것의 가장 첫 번째 것만 건드림. querySelectorAll()은 해당 값에 포함된 모든 요소를 들고옴.


선택한 상품 이미지 표시하기

addEventListener()

큰 이미지가 걸려있는 위치에 아래의 작은 이미지가 클릭될 경우 뜰 수 있도록 동작을 짜본다.

<script>
var bigPic = document.querySelector("#cup");
var smallPics = document.querySelectorAll(".small"); //작은 이미지를 노드리스트로 가져옴

for (var i=0; i < smallPics.length; i++){
    smallPics[i].addEventListener("click", changePic);
}

function changePic(){
    var newPic = this.src; //click 이벤트가 발생한 대상의 src 속성
    bigPic.setAttribute("src", newPic);  //click 이벤트가 발생한 대상의 src 속성의 주소를 가져와 큰 이미지 위치에 넣기
}
</script>

상품의 상세페이지 토글 만들어보기

ture false로 만드는 토글은 정말 많이 쓴다

<script>
var isOpen = false;
var bigPic = document.querySelector("#cup");
var smallPics = document.querySelectorAll(".small"); 

for (var i=0; i < smallPics.length; i++){
    smallPics[i].addEventListener("click", changePic);
}

function changePic(){
    var newPic = this.src;
    bigPic.setAttribute("src", newPic); 
}

var view = document.querySelector("#view");
view.addEventListener("click", function(){
    if (isOpen == false){ //상세정보가 안 보인다면 -> 보이게 처리
        document.querySelector("#detail").style.display = "block";
        view.innerHTML = "상세 설명 닫기";
        isOpen = true;
    }
    else { //상세정보가 보인다면 -> 안 보이게 처리
        document.querySelector("#detail").style.display = "none";
        view.innerHTML = "상세 설명 보기";
        isOpen = false;
    }
});
</script>

어려운 점

예제부분 js부분 코드를 처음부터 시작해서 짜는 것이 어려웠다.

해결 방법

다른 사람의 코드를 많이 보고 짜보는 것이 좋다고 한다. 마침 다른 그룹에서 반복적인 연산이 필요한 작업이 있는데, 그걸 코드로 짜보려 한다.

소감

뭔가를 시작할 때 조그만 것부터 계속 해보라는 말이 있다. : )

profile
제로부터 시작하는 프로그래밍&코딩

0개의 댓글