1. 학습내용

오늘은 array 객체에 대해 좀 더 배워보았다.
배열 객체는 같은 자료를 담는 자료 구조중 하나이다.

let num = ["one", "two", "three"];

형태는 위와 같다.
객체로 할때는 ()로 한다.

a = [1,2,3,4]
let a = new array();

둘 이상의 배열을 연결하는 concat()함수가 있다. 입력값을 문자열 대신 배열을 사용하여 두개의 배열을 하나의 배열로 만들어 주는 역활도 하는 함수이다. 기존 배열을 변경하지 않고, 추가된 새로운 배열을 반환한다.

.join은 데이터를 합쳐주는 역할을 한다. (.join()은 배열의 원소들을 연결하여 하나의 값으로 만듭니다.)

let num = ["one", "two", "three"];
num.join()
=> 'one,two,three'

.push 는 뒤쪽에 데이터를 추가하고, .unshift는 앞쪽에 데이터를 추가해 준다.(배열에서)

let num = ["one", "two", "three"];
num.push("four")
let num = ["one", "two", "three","four"];

var numbers = [2, 4, 6, 8, 10];

		let sum = 0; // 합계를 저장할 변수 선언
		for(let i=0;i<numbers.length;i++){
			sum = sum + numbers[i]; //sum += number[i]
		}
		numbers.push(sum); //총 합계를 구해서 배열 맨 마지막에 넣어줌.
		showArray(numbers); 

.pop 배열의 맨뒤의 요소 추출. .shift는 앞의 요소 추출

문서 객체 모델

• 자바스크립트가 웹 문서를 동적으로 다룰 수 있도록 문서에 있는 각 요소를 객체 형태로 만든것.
  예를 들어 document.querySelector()같은 것들(다양하게 많음)로 html상의 요소들을 제어할 수 있다.
  (자바스크립트로 웹문서를 수정한 것)
  
  DOM 구조에 대해 알고 싶으면, 'live dom viewer'를 구글링 하면 나온다.

html에 js로 태그를 추가하고 싶다면 아래와 같은 함수를 사용하면 된다.

.getAttribute는 HTML에서 요소를 가져오는것. 새로 넣고 싶으면, setAttribute라고 하고
(바꾸고자 하는 요소, 바꾸는 내용)을 적으면 된다.

Dom에서 이벤트 처리하려면, 즉 html에 적용되는 이벤트를 js와 연결해 주는 것은
.addEventListener()이다.

2. 어려운 점 및 해결 방안

join에 대해 더 구글링 해보았다.

배열에 있는 원소들을 하나의 값으로 만듭니다. 원소들의 구분은 콤마(,)로 합니다. 원소들의 구분을 다른 문자로 하려면 () 안에 원하는 문자를 넣습니다.

예를 들어 (-)을 넣으면 데이터 사이에 -을 넣어준다.

.getAttribute는 속성값을 가져오는 명령어이다. 예를 들어 html에서 아이디라는 태그를 가져온다고 하면

 let id = this.getAttribute("id");

라고 하면 id를 가져온다.

DOM에 대한 이해가 어려워 구글링 했다.

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.

이러한 객체 모델을 이용해 아래와 같은 작업을 할 수 있다.

• 새로운 HTML 요소나 속성을 추가, 변경, 제거 할 수 있다.
• 모든 CSS 스타일을 변경할 수 있다.
• 새로운 HTML 이벤트를 추가할 수 있다.
• 모든 HTML 이벤트에 반응 할 수 있다.

출처: http://www.tcpschool.com/javascript/js_dom_concept

3. 학습소감

본격적으로 목록을 만들고 js로 html과 연동해 만들어 보는 것을 했다.
아직 논리적 사고가 부족해서 막상 어떻게 작성해야 좋을 지 어렵긴 하지만, for문의 조건문 정도는 작성할 수 있게 되었다. 천천히 나아질 것이라 생각한다.