🍎 TWIL(This Weekend I Learned)

210123 TIL

자바스크립트로 HTML 요소를 만들어서 삽입하기

JavaScript Calculator 과제를 나름대로의 생각으로 개선하던 중 display 아래(이미지의 빨간 박스 부분)에 계산식(과정)을 보여주고 싶었다.

문제는 과제에 HTML 파일을 건드리지 말아야 한다는 조건이 있었다는 것이다.
그래서 자바스크립트로 HTML에 div를 생성하는 방법을 찾아봤다.

과정은 생각보다 단순했다.

1. 스크립트 내에서 요소를 생성하고
   • 클래스를 부여하거나(elem.className) 요소의 내용을 미리 넣어줄 수도 있다(elem.innerHTML).
2. HTML의 원하는 위치에 만들어둔 요소를 삽입해주면 -끝-

// div 만들기
let newDiv = document.createElement('div');
// 만든 요소의 클래스를 'calculateProcess'로 설정
newDiv.className = 'calculateProcess';
newDiv.innerHTML = '0';
// display 뒤에 삽입해주기
display.after(newDiv);

계산과정을 보여주니 내가 잘못 입력하지 않았는지 확인할 수 있어 좋다.

자바스크립트로 클래스 변경하기 : className과 classList

elem.className에 무언가를 대입하면 클래스 문자열 전체가 바뀐다.
이렇게 속성값 전체를 바꾸는 게 아니고 클래스 하나만 추가하거나 제거하고 싶을 때는 elem.classList라는 프로퍼티를 사용할 수 있다. elem.classList엔 클래스 하나만 조작하게 해주는 메서드인 add|remove|toggle이 구현되어 있다.

newDiv.className = 'calculateProcess'; // 요소의 클래스를 'calculateProcess'로 바꾸자

target.classList.add('isPressed'); // isPressed 클래스를 추가하자

if (condition1) { // condition1이 참이면
  element.classList.remove('isPressed'); //엘리먼트의 클래스 중 'isPressed'를 지워주자
}

이렇게 클래스 속성값 전체를 바꾸고 싶을 때는 className으로, 개별 클래스를 조작하고 싶을 때는 classList를 사용한다.

classList에 구현된 메서드는 다음과 같다.

• elem.classList.add/remove("class") – class를 추가하거나 제거
• elem.classList.toggle("class") – class가 존재할 경우 class를 제거하고, 그렇지 않은 경우엔 추가
• elem.classList.contains("class") – class 존재 여부에 따라 true/false를 반환

자바스크립트로 스타일 적용하기

• 자바스크립트로 요소의 글자 크기 바꾸기 element.style.fontSize
• elem.style.cssText로 완전히 다시 쓰기
  문자열을 사용해 전체 스타일을 설정하려면 프로퍼티 style.cssText를 사용해야 한다.

// cssText를 사용하면 'important' 같은 규칙도 설정할 수 있다. 백틱을 사용한다는걸 기억!
  div.style.cssText=`color: red !important;
    background-color: yellow;
    width: 100px;
    text-align: center;
  `;

style.cssText를 사용하면 기존 스타일에 스타일을 추가하는 게 아니라 전체를 교체해버리기 때문에 잘 사용하고 있는 스타일이 실수로 지워진다는 위험이 있어서 잘 쓰지 않는다. 그렇지만 요소를 새로 만들어서 거기에 스타일을 적용할 때는 기존 스타일이 없기 때문에 style.cssText를 사용할 수 있다.

div.setAttribute('style', 'color: red...')를 사용해 속성을 설정해도 style.cssText과 같은 효과를 볼 수 있다.

JAVASCRIPT.INFO의 스타일과 클래스 문서를 통해 자바스크립트를 사용해 스타일과 클래스를 다루는 방법에 대한 더 자세한 내용을 확인할 수 있다.

210124 TIL

JavaScript 키보드 이벤트

토요일까지 JavaScript Calculator 과제의 Advanced Challenge까지 모두 구현했다.
그래서 오늘은 Nightmare 단계에 도전해보았다.

1. 키보드로도 계산기를 작동시킬 수 있게 하자.
2. 삼성 갤럭시, 구글 계산기의 작동과 같게 만들어보자.
3. 공학용 계산기를 구현해보자.

오늘은 키보드로 계산기를 작동시키는 기능까지 구현했다.

• 키보드로 계산기 작동하는 기능 추가
• 키보드로 계산기를 작동할 때 버튼의 CSS효과 적용되는 기능 추가
• 기타 오류 수정

오늘 공부한 JavaScript 키보드 이벤트에 대해서는 따로 정리해두었다.

🌟 오늘 느낀 점

블로그는 밀리지 말고 하자.
사용했던 개념들을 정확하게 알려고 파고들다보니 내용이 너무 많아지고, 그걸 또 정리해서 작성하려다보니 시간이 너무 오래 걸린다.
핵심 개념만 파악해서 빠르고 간결하게 매일매일 기록하는 버릇을 들이자.
p.s. 일찍 자자.😐

내일 할 일

• 마크다운 사용법 정리해보기
• 문자열 다루는 메서드들 정리한거 블로그 하기
• 계산기 만든거 CSS 관련 내용 정리하기
  • 특히 box-shadow로 Neumorphism UI 만든거 정리하기
• 내일의 TIL 작성하기
• 언제나처럼 즐겁고 씬나게 코딩하기!😊