12 :: 노드 복습, 자바스크립트 카레이싱

엘리스 SW 엔지니어 트랙 12일차

온라인 강의날

 

 

오늘은

더욱 집중하고 싶은 내용!

DOM, 노드 그리고 이벤트에 대한 날~

 

어제 실시간 강의에서 들은 내용을

한번 더 복습도 하고, 새로운 내용을 실습하는 내용도 있다

 

 

노드

Node를 이번에는 제대로 잡자!

 

HTML DOM에서 정보를 저장하는 계층적 단위라고

엘리스의 선생님은 말하신다

 

또누군가 이렇게도 설명을 했었다

A node is a connection or a branch in a hierarchy, etc. where node.js would refer to the software - but you can also just call it node for a short form and most people in the coding world will know what you are talking about.

 

노드 트리

노드들의 집합, 노드들의 관계를 나타낸다.

 

자바스크립트에서는

HTML DOM 이용 노드 트리에 있는

모든 노드에 접근할 수 있다

 

모든 노드는 서로 계층적 관계를 맺고 있다.

 

 

간단한 프로젝트 실습

DOM과 Node 이론과 실습으로 복습을 하고

다음은 간단한 프로젝트 실습이 있었다

 

지금까지 배운 내용으로 페이지를 만들었다

내비게이션, 이미지 슬라이드, 탭 버튼 등

 

 

내비게이션 스무스

내비게이션 아이템을 눌렀을 때

스무스하게 내려가는 효과를 만들었다

 

사용한 함수들은

• querySelector
• querySelectorAll
• preventDefault()
• getAttribute
  • this.getAttribute("href")) 이렇게 사용하는 것도 신기
• window.scrollTo({})
• offsetTop
  • 이 녀석은 처음봤네
  • 위에서부터 거리를 절대 좌표로 반환해주는 편리한 기능

 

 

이미지 슬라이드

1. 자동으로 넘어가는 슬라이드

setInterval과 animate가 핵심

 

2. 클릭시 넘어가는 슬라이드

• previousElementSibling
• nextElementSibling
• parentElement
• firstElementChild
• lastElementChild

이들이 핵심

 

탭 버튼

이건 저번 자기소개페이지 만들기에서

사용했던 방법 클래스 추가하고, 없애고를 사용할 것 같은데

 

 

자바스크립트 문제들로 마무리

 

마지막에 2문제

카레이싱과

그리고 CRUD는 아니고 CD,

아이템을 만들고 삭제하는 문제

예전에도 만들어 봤지만 노드를 사용했었던 거구나

RU는 다른 형태로 시험해보는걸로