1)학습한 내용
Array 객체
배열에 활용하는 많은 속성과 함수가 미리 정의되어 있는 객체
concat( ) 함수
기존의 배열에 또 다른 배열이나 값을 합쳐서 새로운 배열을 만드는 함수
새로운 배열을 만들기 때문에 기존의 배열에는 영향 X
join( ) 함수
지정한 구분 기호를 사용해 배열 요소 연결
구분 기호를 지정하지 않으면 쉼표(,)로 구분
새로운 요소를 추가하는 push( ) 함수와 unshift( ) 함수
push( ) 함수 : 배열의 맨 끝에 요소 추가
unshift( ) 함수 : 배열의 맨 앞에 요소 추가
새 요소가 추가된 후의 요소 개수가 반환됨
배열에서 요소를 추출하는 pop( ) 함수와 shift( ) 함수
pop( ) 함수 : 배열의 맨 뒤에 있는 요소 추출
shift( ) 함수 : 배열의 맨 앞에 있는 요소 추출
추출한 요소가 반환됨
배열에서 요소를 추출하면 해당 요소가 배열에서 빠지면서 배열이 수정되기 때문에 배열에서 요소를 삭제할 때는 추출 함수 사용한다.
원하는 위치의 요소를 삭제/추가하는 splice( ) 함수
괄호 안에 들어 있는 인수에 따라 일정 구간의 요소를 삭제하고 새로운 요소를 추가하는 함수
splice( ) 함수를 실행하면 삭제한 구간의 요소들로 이루어진 새로운 배열이 결괏값으로 표시됨.
인수 1개 : 인수가 가리키는 인덱스의 요소부터 배열의 끝 요소까지 삭제
인수 2개 : 첫번째 인수는 인덱스이고 두번째 인수는 삭제할 개수
인수 3개 : 첫 번째 인수는 해당 배열에서 삭제를 시작할 위치, 두 번째 인수는 삭제할 개수, 제한 위치에 새로 추가할 요소 . 기존 배열의 요소를 삭제하지 않고 새로운 요소를 추가하고 싶다면 삭제할 개수를 지정하는 두 번째 인수에 0을 넣는다.
원하는 위치의 요소들을 추출하는 slice( ) 함수
여러 개의 요소를 추출하는 함수
시작 인덱스와 끝 인덱스를 지정하면 시작 인덱스부터 끝 인덱스 직전까지 추출
시작 인덱스만 지정할 경우 시작 인덱스부터 끝까지 모두 추출
실습 : 여행 준비물 점검 프로그램
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();
}
문서 객체 모델(DOM)
자바스크립트가 웹 문서를 동적으로 다룰 수 있도록 문서에 있는 각 요소를 객체 형태로 처리하는 것
예) 문서에서 특정 부분을 가져와서 visibility 속성 값을 바꾸면 화면에서 사라짐
DOM 트리
DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분
웹 문서 구조를 부모/자식 관계로 표시하면 나무를 거꾸로 뒤집어 놓은 모습 -> DOM 트리
DOM 트리의 노드
웹 문서의 태그는 요소(Element) 노드로 표현.
태그가 품고 있는 텍스트는 해당 요소 노드(태그)의 자식 노드인 텍스트(Text) 노드로 표현.
태그의 속성은 모두 해당 요소 노드(태그)의 자식 노드인 속성(Attribute) 노드로 표현.
주석은 주석(Comment) 노드로 표현.
getElementById( ) – id 선택자를 사용해 접근, s를 붙이지 않음(id는 유일)
getElementsClassName( ) – class 선택자를 사용해 접근
getElementsTagName( ) – 태그 이름을 사용해 접근
querySelector(), querySelectorAll()
규칙 : 하이픈을 지우고 앞글자를 대문자로 쓴다
예) font-size -> fontSize
배열에 인덱션도 입력 가능
예) (".accent") -> (".accent")[0]
실습2 : 선택한 상품 이미지 표시하기
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);
}
실습3 : 웹 요소를 화면에 표시하기 / 감추기
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;
}
});
2) 학습내용 중 어려웠던 점
X
3) 해결방법
X
4) 학습소감
어제 했었던 수업부터 이어서 정말 웹을 수정하는 방법이 다양하다는 것에 놀랐습니다. 방식이 다른 만큼 익혀야 하는 것도 많아 복잡했지만 기존의 문법과 비슷한 부분이 많다는 것을 인지하고 이해 할 수 있었습니다. 지금 당장 사용하기에는 어려움이 있겠지만 익숙해지면 익히면 충분히 사용할 수 있을 것 같습니다.
