dh_0e

[JavaScript] 개인 과제 중 배운 문법 (innerHTML, addEventListner, includes, toUpperCase, toLowerCase, Math.floor) 본문

내일배움캠프/HTML,CSS,JavaScript

[JavaScript] 개인 과제 중 배운 문법 (innerHTML, addEventListner, includes, toUpperCase, toLowerCase, Math.floor)

dh_0e 2024. 5. 1. 19:57

innerHTML

innerHTML은 해당 HTML요소에 있는 HTML을 반환하며 추가적인 HTML 코드를 삽입할 때에 사용된다.

요소는 DOM으로 가져올 수 있으며 아래 링크에서 두 가지 방법이 설명되어 있다.

 

[JavaScript] 주요 문법 정리(3) ( 문서 객체 모델(DOM), Class와 상속, 클로저(Closure) )

DOM이란Document(HTML파일)를 Javascript가 해석할 수 있는 Object 형태로 Moudeling 한 것 브라우저에 기본적으로 내장되어 있는 API 중 하나( API는 다른 시스템에서 제공하는 기능을 사용할 수 있도록

dh-0e.tistory.com

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="module">
      const testID = document.getElementById("testID");
      console.log(testID.innerHTML); // <p>안녕하세요!</p>
      testID.innerHTML += `<p>네 안녕하세요~</p>`;
    </script>
  </head>
  <body>
    <div id="testID">
      <p>안녕하세요!</p>
    </div>
  </body>
</html>

'네 안녕하세요~' 가 추가로 출력됨




addEventListner

addEventListner() 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 설정된 함수를 호출하게 함

html요소.addEventListner("click", 함수);

html요소.addEventListner("keyup",함수);

testID.addEventListener("keyup", (event) => {
  if (event.key == "Enter") {
    func(); // testID가 input type이어야 하며 input에서 Enter를 누를시 func 실행
  }
});
testID.addEventListener("click", func); // testID가 클릭되면 func 실행

 

 

버블링

버블링이란 다음과 같은 예시에서 <div>에 할당한 onclick이 child요소에서도 동작하는 원리

<div onclick="onclick 동작!">
  <button id="이 버튼을 클릭해도 alert가 동작!">
</div>

 

또한 다음과 같은 예시에서 P를 클릭하면 p >> div >> form 순서로 3개의 alert 창이 뜸

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

 

이와 같은 흐름을 이벤트가 제일 깊은 곳에 있는 요소부터 부모 요소를 거슬러 올라가며 발생하는 모양이 거품과 닮아 버블링이라 칭함

이 특징으로 인해 이벤트 위임이 가능하다

 

 

target

event.target - event가 발생한 가장 안쪽의 요소를 target이라 칭하며 이벤트가 발생한 요소를 반환함

event.currentTarget - 요소가 포함된 부모의 위치, 즉 이벤트 핸들러가 등록되어 있는 요소를 반환함

개인과제에서 사용된 예로

script code에서 main에 class가 card인 요소를 넣음

다음과 같은 html 코드에 아래의 script를 동작시켰다.

const cardsClick = document.querySelector(".cards");
function cardClicked(event) {
  if (event.target === event.currentTarget) return;

  if (event.target.matches(".card")) {
    alert(`영화 id: ${event.target.id}`);
  } else {
    alert(`영화 id: ${event.target.parentNode.id}`);
  }
}

첫 번째 if문에선 클릭된 곳이 cards클래스인지 묻고 card의 바깥 부분이므로 return 해준다.

두 번째 if문에선 클릭된 곳이 card클래스인지 묻고 맞다면 card의 id를 alert 해준다.

세 번째 if문에선 클릭된 곳이 card클래스의 자식 요소임으로 parentNode로 card클래스의 id를 가져왔다.

 

 

캡처링

실제 DOM 이벤트에서 정의한 이벤트 흐름의 3가지 단계 중 첫 번째 단계이다

DOM 이벤트의 3가지 단계
1. 캡처링 단계 - 이벤트가 하위 요소로 전파되는 단계
2. target 단계 - 이벤트가 실제 target 요소로 전달되는 단계
3. 버블링 단계 - 이벤트가 상위 요소로 전파되는 단계

이를 순서도로 나타내면 다음과 같다.

DOM Phase

event.eventPhase를 통해 event의 단계를 알 수 있음

1: Capturing Phase

2: Target Phase

3: Bubbling Phase

다음 영상에서 내일배움캠프 튜터님께서 console log 찍어보면서 자세히 설명해주신다.

 

 

 

includes()

Array.includes(value) 메서드는 배열의 항목에 value 값이 포함되어 있는지를 판단하여 bool형으로 반환함

let Arr = ["abcdef", "cat", "dog"];
console.log(Arr.includes("dog")); // true
console.log(Arr[0].includes("efg")); // false
console.log(Arr[1].includes("at")); // true

 


toUpperCase(), toLowerCase()


문자열을 upper - 대문자, lower - 소문자로 변환해 반환하는 메서드

const str = "abc", str2 = "ABC";
console.log(str.toUpperCase()); // ABC
console.log(str2.toLowerCase()); // abc


 

Math.floor

JavaScript에선 나누기(/)연산을 하면 소수점을 반환함 / C/C++ 처럼 소수점을 무시하고 정수값만 사용하고자 할 때 씀

console.log(5 / 3); // 1.6666666666666667
console.log(Math.floor(5 / 3)); // 1

 


prettier (문법X)

개발자의 코딩 스타일에 맞게 정해진 코딩 스타일을 자동으로 변환해주는 도구인 "코드 포맷터"

alt + shift + f 없이 저장만으로도 코드가 자동으로 정리되게 해줌

 

Prettier · Opinionated Code Formatter

Opinionated Code Formatter

prettier.io

 

'내일배움캠프 > HTML,CSS,JavaScript' 카테고리의 다른 글

[JavaScript] ESLint로 JS 코드 에러 찾기  (0) 2024.06.03
[JavaScript] localStorage  (0) 2024.05.08
[CSS] 개인 과제 중 배운 문법 (Button's hover/active, transition, reset.css)  (0) 2024.05.01
[HTML] 개인 과제 중 배운 문법 (id/class, <script>태그(defer, type module), <link>태그)  (0) 2024.05.01
[JavaScript] 주요 문법 정리(3) ( 문서 객체 모델(DOM), Class와 상속, 클로저(Closure) )  (0) 2024.04.26
'내일배움캠프/HTML,CSS,JavaScript' Related Articles more