학습내용

• concat() 둘이상의 배열을 연결
  기존의 배열 + 다른 배열 or 값
  기존의 배열과 다른 배열에 영향을 주지 않는다.
• join() 지정된 구분 기호를 사용해서 배열 '요소' 연결
  default값은 쉼표 ' , '

  	>'one, two,three,four'

  • join(-)

    		>'one-two-three-four'

추가

push() 뒤쪽에 넣는 것
unshift() 앞쪽부터 넣는 것
원본에 영향을 미친다. = 새 요소 추가시 추가후의 요소로 반환

추출

pop() 뒤쪽부터 추출
shift() 앞쪽부터 추출
추출한 요소가 반환 = 팝콘에서 튀어나온 팝콘들

• splice()
  인수의 갯수에 따라 사용법이 다름
  원본에 영향을 끼침
• slice()
  원본에 영향 X
  시작 인덱스~끝 인덱스 직전까지 추출= 주의해야함
  시작 인덱스만 지정 = 끝까지

변수선언시 어떤값이 들어있을지 모르기 때문에
var 변수= 0; 작업이 거의 필수적

var index = Math.floor(Math.random()*quotes.length);
random으로 0~1에 quotes의 길이만큼 나눠서 값 부여해서 랜덤추출

document.write("<p>&quot;"+quotes[index]+"&quot;</p>") 
&quot = " 을 나타냄

DOM 문서 객체 모델

JS에서 웹 문서를 동적으로 다루기 위해 각 요소를 개체 형태로 처리하는 것
웹 문서의 요소를 부모 요소와 자식 요소로 구분
-> 부모/자식 관계로 표시하면 나무를 거꾸로 뒤집어 놓은 모습 = 트리

DOM 트리

요소 노드 = 웹 문서의 '태그'
텍스트 노드(해당 요소 노드의 자식 노드) = 태그가 품고 있는 텍스트
속성 노드(요소 노드의 자식 노드) = 태그의 속성
주석 노드 = 주석

접근하기

• getElement... : 태그마다 다르게 사용해야함
  getElementById
  getElementsByClassName 클랙스명은 여러개일수있어서 Elements, 여러개기 때문에 배열처럼 [0],[1]등 사용해서 특정화헤야 오류가 발생하지 않음
• <-> querySelector() 구분하지않고 사용, 가장 처음 쿼리를 가져오는 것
  querySelectorALL() 모든 쿼리를 찾아오는것

이벤트처리하기

addEventListener()

addEventlistener("mouseover",changePic,false);
				  이벤트유형 ,  함수  ,  캡쳐 여부

tip

• document.querySelector("#detail h3")
  id가 detail인 div안의 h3을 선택한다.
• console창에서 document는 문서자체를 의미 함
• [css]line-height = [JS]lineHeight
  [css]font-size = [JS]fontSize 등등

소감

복습을 어떤식으로 해야될지 모르겠다. 예제를 만들면서 연습해야겠다.