[웹프로그래밍기초🎀] 12주차 개발일지

-------

개발 블로그를 티스토리로 옮기며 기존의 네이버 블로그에 작성한 내용을  옮겼습니다.

https://blog.naver.com/0yeonjae2/222364167997

-------

이론 복습하기-최신자바스크립트 문법 3

 

1 .DOM

:문서 객체 모델(DOM)은 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결한다. 이때 스크립트는 주로 Js를 의미한다.

 

DOM은 문서를 논리 트리로 표현한다. 트리의 각 브랜치는 노드에서 끝나며, 각 노드는 객체를 가진다. DOM 메서드를 사용하면 프로그래밍적으로 트리에 접근할 수 있다. 이를 통해 문서의 구조, 스타일, 콘텐츠를 변경할 수 있다. 노드는 이벤트 처리기를 포함할 수 있다. 이벤트가 발생한 순간, 해당 이벤트와 연결한 처리기가 발동한다.

 

(1) HTML 요소와 노드 객체

: HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다.

HTML 요소는 브라우저의 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML 요소의 attribute는 attribute node로, HTML 요소의 text 콘텐츠는 text node로 변환된다.

 

(2) 요소 노드 취득

HTML의 구조나 내용 또는 스타일 등을 동적으로 조작하려면 JS 파일에서 먼저 요소 노드를 취득해야 한다.

DOM에서 요소 노드를 취득할 수 있는 다양한 메서드는 다음과 같다.

 

① getElementById : id를 이용해 요소 노드를 취득한다.

② getElementsByTagName : 태그 이름을 이용해 요소 노드를 취득한다.

③ getElementsByClassName : class를 이용해 요소 노드를 취득한다.

④ querySelector : css 선택자를 이용해 요소 노드를 취득한다.

-> css 선택자는 스타일을 적용하고자 하는 HTML 요소를 특정할 때 사용하는 문법이다.

⑤ querySelectorALL : css 선택자를 이용해서 모든 요소 노드를 취득한다.

 

 

 

(3) DOM 조작하기

 

-innerHTML 프로퍼티 : 요소 노드의 HTML 마크업을 취득하거나 변경한다.

-insertAdjacentHTML 메서드 : 기존 요소를 제거하지 않으면서 위치를 지정해 새로운 요소를 삽입한다.

-createElement: 요소 노드를 생성한다

createTextNod : 텍스트 노드를 형성한다.

appendChild 메서드 : 요소 노드를 DOM에 추가한다.

-insertBefore(newNode, childNode) 메서드 : childNode 앞에 newNode를 삽입한다.

-cloneNode([deep: true | false ]) 메서드 : 노드의 사본을 생성하여 반환한다.

-replaceChild(newChild, oldChild) 메서드 : oldChild를 newChild로 대체한다.

-removeChild(child) 메서드 : 인수로 전달한 child를 삭제한다.

-style : 인라인 스타일을 조절한다.

-className 프로퍼티 : HTML 요소의 class 값을 취득하거나 변경한다.

-classList 프로퍼티 : class 정보를 담은 객체를 반환한다.

 

2. 이벤트 핸들러

우리가 웹사이트에 방문해 클릭, 스크롤을 했을 때 브라우저에서 특정한 일들이 나타난다. 사용자가 하는 행동(ex. 클릭, 스크롤)에 대해 호출 함수를 지정할 수 있는데 여기서 호출 함수를 이벤트 핸들러라고 한다.

 

(1) 이벤트 타입 : 엄청 많아서 링크 첨부

https://developer.mozilla.org/ko/docs/Web/Events

 

(2) 이벤트 핸들러 등록하기

① HTML 요소에 이벤트에 대응하는 이벤트 핸들러 어트리뷰트를 설정한다

: 이벤트 핸들러 어트리뷰트의 이름은 (on + 이벤트타입) 으로 이루어진다.

- HTML에는 HTML를, js 파일에는 js를 작성하는 것이 권장되므로 사용을 추천하지 않는다.

 

② DOM 노드 객체의 이벤트 핸들러 프로퍼티에 이벤트 핸들러를 바인딩한다.

- 단 하나의 이벤트 핸들러만 바인딩할 수 있다는 단점이 있다.

 

③ addeEventListener 메 서드를 이용하여 이벤트 핸들러를 등록한다.

- 복수의 이벤트를 등록할 수 있다. (등록된 순서대로 호출한다. )

 

 

(3) 이벤트 핸들러 제거하기

-removeEventListener

 

 

 

3. 타이머 함수

:함수를 일정 시간이 지난 이후에 호출하고 싶을 때 사용한다. ( == 호출 스케줄링(scheduling a call))

자바스크립트의 타이머 함수 : setTimeout(과 이를 제거하는 clearTimeout), setInterval(과 이를 제거하는 clearInterval)

 

setTimeout 함수가 생성한 타이머는 단 한 번 작동하고, setInterval 함수가 생성한 함수는 반복 동작한다.

 

 

 

실습하기

 

원래 어번 주에 배운 내용을 적용하고 미디어 쿼리를 작성하려고 했는데, 생각보다 슬라이더 적용에서 애를 써서 미디어 쿼리는 다음 주에 하기로 했다.

 

슬라이더 구현하기(동영상은 글 상단에 걸어둔 네이버 블로그를 통해 볼 수 있습니다.)

처음에는 지니 사이트에서 제공하는 background 이미지를 넣어서 구현하려 했었다. 하지만 JS 코드에서 스타일 변화를 주었을 때 적용이 계속 안 됐다. 그래서 결국 지니 사이트와 똑같도록 만들어 썼다.

 

 

 

정말 별거 아닌 것처럼 보이는데 시간을 엄청 썼다. 지니 사이트에서는 슬라이더에 멈춤 기능도 있는데, 이 부분을 아직 구현하지 못했다. 구글링을 더 해봐야 될 것 같다.

 

이번 주는 할 일이 많아서 많이 작업하지 못했다. 이제부터 다시 힘을 내서 작업해야겠다.