글 작성자: 망고좋아
반응형

📖 오늘 배운 내용 - 2021.11.10

  • DOM
  • HTML 요소의 선택
  • HTML 요소의 생성
  • Node 객체
  • 이벤트
  • 내비게이션 기능 구현
  • 이미지 슬라이드(animate())
  • 탭 버튼 기능 구현

 

📝 DOM

  • DOM : 객체 지향 모델로써 구조화된 문서를 표현하는 형식으로, 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 하는 인터페이스
  • DOM은 프로그래밍 언어와 독립적이다. 어떠한 언어에서도 가능하다.

 

📝 요소 선택하기

 

[자바스크립트] Document 객체

Document 객체 Document 객체는 웹 페이지 그 자체를 의미한다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다. 브라우저가 불러온 웹 페이지를 나타내

lakelouise.tistory.com

 

📝 요소 생성하기

 

[자바스크립트] 배경 및 명언 추가하기, HTML에 요소 추가하기(document.createElement())

배경 및 명언 추가하기, HTML에 요소 추가하기(document.createElement()) 명언을 배열 안에 10개의 객체로 추가하기 Random 하게 명언을 가져와서 화면에 표시해주기 Math.random() 을 사용 Math.random() * 10..

lakelouise.tistory.com

 

📝 Node 객체

  • Node는 HTML DOM에서 정보를 저장하는 계층적 단위이다.
  • 노드 트리는 노드들의 집합으로, 노드 간의 관계를 나타낸다.
  • JS에서 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다.

 

📕 노드의 종류

  • 문서 노드 (document node) : HTML 문서 전체를 나타내는 노드
  • 요소 노드 (element node) : 모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드
  • 주석 노드 (comment node) : HTML 문서의 모든 주석은 주석 노드, 잘 사용 안 함
  • 속성 노드 (attribute node) : 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가진다. 하지만 해당 요소 노드의 자식 노드에는 포함되지 않는다.
  • 텍스트 노드 (text node) : HTML 문서의 모든 텍스트는 텍스트 노드

 

📕노드의 값

  • 노드에 대한 정보는 nodeName(이름), nodeValue(값), nodeType(타입)으로 접근할 수 있다.
    • nodeType 프로퍼티 값은 텍스트가 아닌 숫자로 표현된다.
    • 요소 노드 : 1
    • 속성 노드 : 2
    • 텍스트 노드 : 3
    • 주석 노드 : 8
    • 문서 노드 : 9
  • childNodes
    • 자식 노드의 컬렉션을 반환한다.
    • Return: NodeList
    • ex) childNodes[0].nodeName
  • firstChild
    • Return: HTMLElement
    • ex) firstChild.nodeValue;

 

📝 이벤트

  • 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생
  • JS는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.

 

📕 이벤트 타입

  • 발생한 이벤트의 종류(폼, 키보드, 마우스, HTML DOM, window 객체 등)

 

📕 이벤트 핸들러

  • 이벤트가 발생했을 때 그 처리를 담당하는 함수
  • 지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행시킨다.

 

📕 addEventListener()

대상객체.addEventListener(이벤트명, 실행할이벤트핸들러, 이벤트전파방식)

 

 

[자바스크립트] 이벤트 등록, addEventListener()

이벤트란? 사용자(사람)와 상호 작용을 하면서 마우스(키보드, 터치, 펜 등)를 조작하면 그에 대한 반응을 하는 것 특정 이벤트가 발생되었을 때, 특정 함수를 실행할 수 있게 해주는 것이 addEventL

lakelouise.tistory.com

 

📝 내비게이션 기능 구현

e.prventDefault(); // 현재 이벤트의 기본 동작을 중지시킬 때 사용
elem.querySelector(""); // 1개의 태그를 css 선택자 기반으로 가져온다.
elem.querySelectorAll(""); // 여러 개의 태그를 css 선택자 기반으로 가져온다.
elem.getAttribute(""); // HTML 태그의 속성값을 가져올 때 사용
window.scrollTo({ // 특정 지점으로 스크롤링
    'behavior': 'smooth', // 부드럽게 이동
    'top' : xxx.offsetTop // 선택된 영역의 상단까지의 거리를 절대 좌표로 반환
});
// 1) Scroll Navigation
var aTags = document.querySelectorAll('header a');

for(var i = 0; i < aTags.length; i ++) {
    aTags[i].onclick = function(e) {
        e.preventDefault();
        var target = document.querySelector(this.getAttribute("href"));

        window.scrollTo ({
            'behavior': 'smooth',
            'top': target.offsetTop ,
        })
    }
}

 

📝 이미지 슬라이드

setInterval(() => {
    ...
}, 3000); // 3초 간격으로 반복적으로 코드 실행

xxx.animate({
    marginLeft: ["0px", "1024px"]
}, {
        duration: 500,
    easing: "ease",
    iterations: 1,
    fill: "both"
}) // 애니메이션 실행
  • setInterval() : 일정 시간마다 반복적으로 코드를 실행
  • animate(): 선택된 요소에 애니메이션을 적용
// 2) Image Slider
var slider = document.querySelector('#slider');
var slides = slider.querySelector('.slides');
var slide = slides.querySelectorAll('.slide');

var currentSlide = 0; // 현재 화면에 보여지고 있는 슬라이드가 몇 번 슬라이드인지 확인

setInterval(function() {
    var from = -(1024 * currentSlide);
    var to = from - 1024;
    slides.animate({
        marginLeft: [from + "px", to + "px"]
    }, {
        duration: 500,
        easing: "ease",
        iterations: 1,
        fill: "both"
    });
    currentSlide++;
    if (currentSlide === (slide.length - 1)) {
        currentSlide = 0;
    }
}, 3000);

 

 

[JavaScript] 자바스크립트 animate(), 이미지 슬라이드 구현

🎯 animate(), 이미지 슬라이드 구현하기 animate()를 사용해서 이미지 슬라이드 구현하기 📝 animate() element.animate(keyframes, duration) CSS와는 별개의 독립적인 애니메이션을 구현할 수 있으며 Animatio..

lakelouise.tistory.com

 

📝 탭 기능 구현

xxx.classList.remove(클래스명) // 선택된 태그의 특정 클래스 명을 제거
xxx.classList.add(클래스명) // 선택된 태그의 특정 클래스 명을 추가
array.forEach(element => { // 배열의 모든 요소에 코드 적용
    console.log(element);
});
  • classList를 이용하여 클릭하면 hidden 클래스 add or remove

 

📝 DOM 요소 변형하기

📕 insertBefore()

부모노드.insertBefore(새로운자식노드, 기준자식노드);
  • 새로운 노드를 특정 자식 노드 바로 앞에 추가
  • 기준 자식 노드 앞에 추가!!!

 

📕 removeChild()

  • 자식 노드 리스트에서 특정 자식 노드를 제거

 

📕 createTextNode()

<body>
     <ul></ul>
</body>
//--------------------------------------------------
var myUl = document.querySelector('ul');

for(let i = 0; i <= 20; i++) {
    const li = document.createElement("li");
    const newText = document.createTextNode(`${i}번째 문장`);
    li.appendChild(newText);
    myUl.appendChild(li);
}
  • 텍스트 노드를 생성한다.
 

[자바스크립트] 노드의 관리, appendChild(), createElement(), createAttribute() 등

노드의 관리 JS로 노드의 추가, 생성, 등을 알아보자 노드의 추가 appendChild() appendChild() 메소드는 새로운 노드를 해당 노드의 자식 노드 리스트(child node list)의 맨 마지막에 추가한다. See the Pen ap..

lakelouise.tistory.com

 

📝 유사 배열 진짜 배열로

Array.from(유사배열)
  • 유사 배열을 얕은 복사 하여 새로운Array 객체 생성

 

💡 오늘 깨달은 것

  • 알고 있는 내용이라고 대충 넘어가지 말고 한 번 더 보고 이전에는 몰랐거나 또는 깊은 내용까지 확인하면서 학습하자.
  • animate 기능을 사용하면 이미지 슬라이드를 쉽게 구현할 수 있다.
  • Array.from(유사배열).forEach() : 유사 배열을 배열로 바꿔주면 forEach를 사용할 수 있다.
반응형

'프로그래밍 > Today I Learned' 카테고리의 다른 글

[TIL] 엘리스 SW 엔지니어 트랙 Day 015  (0) 2021.11.13
[TIL] 엘리스 SW 엔지니어 트랙 Day 014  (0) 2021.11.11
[TIL] 엘리스 SW 엔지니어 트랙 Day 012  (0) 2021.11.09
[TIL] 엘리스 SW 엔지니어 트랙 Day 011  (0) 2021.11.07
[TIL] 엘리스 SW 엔지니어 트랙 Day 010  (0) 2021.11.06

티스토리툴바