220615) 자바스크립트(7)

학습한 내용

Array 객체

Array 객체로 배열 만들기 - 초깃값이 있을때

> var numbers = ["one", "two", "three", "four"];
> var numbers = new Array("one", "two" "three", "four");

> var myArray = new Array(); //초깃값이 없을때

배열에서 for문 사용하기

>         var seasons = ["봄", "여름", "가을", "겨울"] 
>         seasons.length

Array 객체의 주요 함수

• 둘 이상의 배열을 연결하는 concat() 함수

  • 기존의 배열에 또 다른 배열이나 값을 합쳐서 새로운 배열을 만드는 함수
  • concat() 함수는 새로운 배열을 만들기 때문에 기존의 nums나 chars 배열에는 영향을 주지 않음

• 배열 요소를 연결하는 join() 함수

  • 지정한 구분 기호를 사용해 배열 요소 연결
  • 구분 기호를 지정하지 않으면 쉼표(,)로 구는

> num.join()
< 'one,two,three,four'
> num.join('-')
< 'one-two-three-four'

• 새로운 요소를 추가하는 push() 함수와 unshift() 함수
  • push() 함수 : 배열의 맨 끝에 요소 추가
  • unshift() 함수 : 배열의 맨 앞에 요소 추가
  • 새 요소가 추가된 후의 요소 개수가 반환됨

> num.push('five','six')
> num.unshift('zero')

• 배열에서 요소를 추출하는 pop() 함수와 shift() 함수
  • pop() 함수 : 배 열의 맨 뒤에 있는 요소 추출
  • shift() 함수 : 배열의 맨 앞에 있는 요소 추출
  • 추출한 요소가 반환됨
• 원하는 위치의 요소를 삭제/추가하는 splice() 함수
  • 괄호 안에 들어 있는 인수에 따라 일정 구간의 요소를 삭제하고 새로운 요소를 추가하는 함수
  • splice() 함수를 실행하면 삭제한 구간의 요소들로 이루어진 새로운 배열이 결꽛값으로 표시됨.
    1) 인수 1개 : 인수가 가리키는 인덱스의 요소부터 배열의 끝 요소까지 삭제
    2) 인수 2개 : 첫번째 인수는 인덱스이고 두번째 인수는 삭제할 개수
    3) 인수 3개 : 첫 번째 인수는 해당 배열에서 삭제를 시작할 위치, 두 번째 인수는 삭제할 개수, 제 한 위치에 새로 추가할 요소 . 기존 배열의 요소를 삭제하지 않고 새로운 요소를 추가하고 싶다면 삭제할 개수를 지정하는 두 번째 인수에 0을 넣는다.
• 원하는 위치의 요소들을 추출하는 slice() 함수 - 여러 개의 요소를 추출하는 함수
  1) 시작 인텍스와 끝 인덱스를 지정하면 시작 인덱스부터 끝 인덱스 직전까지 추출
  2) 시작 인텍스만 지정할 경우 시작 인덱스부터 끝까지 모두 추출

더 많은 Array 객체의 함수 살펴보기
https://developer.mozilla.org/
https://developermozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

여행 준비물 점검 프로그램

<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 내용 추가 
        document.querySelector("#item").value = "";
        document.querySelector("#item").focus();
    }
    showList();
}

function showList(){
    var list = "<ul>";
    for (var i =0; i < itemList.length ; i++){
        list += "<li>"+  itemList[i]  + "<span class='close' id=" + i + ">X</span></li>";
    }
    list += "</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); //요소를 클릭하면 removeList()실행
    }
}

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

문서 객체 모델(Document Object Model, DOM)

자바스크립트가 웹 문서를 동적으로 다룰 수 있도록 문서에 있는 각 요소를 객체 형태로 처리하는 것

예）문서에서 특정 부분을 가져와서 visibility 속성 값을 바꾸면? -> 화면에서 사라짐

• DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분

• 웹 문서 구조를 부모/자식 관계로 표시하면 나무를 거꾸로 뒤집어 놓은 모습 -> DOM 트리

• DOM 트리의 노드

  • 웹 문서의 태그는 요소(Element) 노드로 표현합니다.
  • 태그가 품고 있는 텍스트는 해당 요소 노드(태그)의 자식 노드인 텍스트(Text) 노드로 표현합니다.
  • 태그의 속성은 모두 해당 요소 노드(태그)의 자식 노드인 속성(Attribute) 노드로 표현합니다.
  • 주석은 주석(Comment) 노드로 표현합니다.

태그 속성에 접근하기 및 수정하기
getAttribute() - 태그의 속성에 접근해서 값을 가져옴
setAttribute() - 태그의 속성 값을 지정함

querySelector(), querySelectorAII()

document.getElementById("container")
documeint.querySelector("#container")

id 값은 # 기호와 함께
class 값은 . 기호와 함께
태그 이름은 기호 없음

학습 소감

내용이 점점 어려워지는거같아서 요즘은 복습이 필수인거같다.
수업은 이제 앞으로 이틀남았는데 js를 너무 모르는거같아서 걱정이된다.