1.학습한 내용

1)Array 객체

concat() 함수를 통하여 배열을 합칠수있다.
이때 배열의 기준은 .concat 앞에 있는 배열뒤에 추가를한다.

join() 함수를 통하여 배열의 구분기호를 변경할수있다.

push() 함수를 통해서 배열의 마지막에 요소를 추가할수있고.
unshift() 함수를 통해서 배열의 맨앞에 요소를 추가할수있다.

pop() 함수를 통하여서 배열 맨뒤의 요소를 추출할수있고
shift() 함수를 통하여서 배열의 맨앞의 요소를 추출할수있다.

splice()함수를 통하여 원하는 구간의 요소를 삭제할수있다.

slice()함수를 통하여 원하는 구간의 요소를 추출할수있다.
인수를 3개를 지정하면 해당 구간에 새로운 요소를 추가할수있다.

더 많은 Array 객체 함수는
https://developer.mozilla.org/ko/

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

에서 확인할수있다.

2)DOM 문서객체모델

문서 객체 모델(Document Object Model, DOM) 은
자바스크립트가 웹 문서를 동적으로 다룰 수 있도록 문서에 있는 각 요소를 객체 형태로 처리하는것이다.

이러한 형태는
Live Dom Viewer 에서 작성을 해보는것으로 확인이 가능하다.

각각 id, class , tag 에 이름을 사용해서 접근이 가능하다.

하지만 위의 요소들에 접근하는것과 다르게 querySelector 를 통하여 id,class , tag에 접근을 할수있다.

2-1)DOM 실습

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

해당 화면에서

해당 코드를 추가 하는것으로

클릭한 이미지로 변경이 가능하다.

2.학습내용 중 어려웠던 점

이벤트를 DOM안에 넣어보았을때 해당 이벤트가 제대로 작동하지 않는 오류를 겪게되었다.

3.해결방법

클래스이므로 .을 사용하여야했는데 아이디를 지정하는 #으로 잘못 쓰는것으로 smallPics 자체가 지정이 안된것을 확인하였다.

4.학습소감

간단하게 기능을 추가를 할때는 확실하게 느끼지못했지만. 기능 안에 기능을 넣는 방식을 사용할때 id,class 등 중복이 되는 정보들로 인해서 오류가 생길수있어서 선택자를 지정하는것도 제대로 구조를 만든 후에 사용하여야 하는것을 깨달았다.

또한 id 선택자로 #을 너무 자주 사용하다보니 .을 써야할때도 #을 쓰는등 정신을 놓고 작성을 할때가 있어서, 이 또한 제대로 인지를 하고 써야한다는것을 깨달았다.

이후 큰 구조의 DOM을 작성을 할때는 우선 Live DOM viewer 와 같은 사이트를 이용하여서 뼈대를 구성한뒤 작성을 해보는것으로 연습을 해보아야할듯하다.