TIL 220205 글자 수 세기

keywords

• preventDefault()
• input vs textarea
• slice
• random numbers

오늘은 udemy강의 중 introduction to JS 부분을 들었고, string과 function등 기본 문법을 다시 돌아보며 간단한 '글자 수 세기' 프로그램을 만들었다. 정말 간단한 것인데, 생각보다 내가 기록하고 기억하지 않아서인지 막히는 부분들이 있었다. 정말, 아주, 간단한 것인데 말이다..😭

---

우선 오늘 만든 것은, 100자까지의 글자 수를 세 주는 프로그램.
1. 100자 이상으로 입력하면 100자 이후의 문자들은 삭제된다.
2. 100자 보다 적게 작성하면 100자까지의 남은 글자 수를 세 준다.

이걸 만들면서 기억하고 싶은 거,,,

---

1. submit event에 대해 preventDefault() 적용하기

이전에 노마드 코더로 로그인 기능 구현하면서 button에 대한 event인submit에는 default event가 있다는 것이 기억이 나서, 적용하려고 했으나 한참을 해도 안되는 것이었다. 한창 헤매고 다시 보니, eventlistener를 form tag에 적용해 줘야 preventDefault()를 사용할 수 있었다.😭 아주 작은 거지만,, 그냥 수업 따라가느라 놓쳤던 포인트..

function handleSubmit(event){      //여기서 event를 함께 넘겨준다.
  preventDefault();
  
}

form.addEventListener("submit", handleSubmit) //여기서는 평소처럼 함수 호출만

---

2. input vs textarea

input은 한 줄만 작성 가능한 반면, textarea는 여러 줄을 입력할 수 있다. textarea도 동일하게 넓이와 높이를 지정하면 된다.

---

3. slice 문법의 종료 index

slice는 string과 array둘 다에서 사용 가능한 메소드이다. 여기서 맨날 헷갈리는 것은, end index인데, end index의 '앞 지점'까지 자른다고 생각해야 한다. 나는 계속 end index까지 자른다고 생각하여 혼동이 오기 때문에,, 기억하라고 적어본다.

arr.slice([begin[, end]]) // 기본 작성 문법

// 예시

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2,4));
// expected output = ["camel", "duck']

---

그리고 역시나 간단하지만 추가로 기록해두고 싶은 랜덤숫자 만들기.

4. Math.random()

컴퓨터는 랜덤할 수 없다. 컴퓨터 이기 때문 ㅎ.ㅎ 그러나 랜덤 넘버가 필요한 우리 인간들에게 컴퓨터가 랜덤넘버처럼 보이게 출력해 주는게 있다.

const random = Math.random()
// 0 ~ 0.999999999 까지의 랜덤한 숫자를 생성한다. 절대 1은 나오지 않는다.

/* 1부터 100까지 랜덤한 숫자 만들기 */
const zeroToHundred = Math.floor(Math.random() * 100) + 1;