[TIL] Day 2 : $(element).click() vs $(document).on("click", )

1.    $("#" + variable-whose-value-is-id)

어떤 변수에 한 element의 id 값을 넣었다.
이때, id가 string의 형태로 나타낼 수 없고 오직 그게 저장된 변수 이름만 아는 상황이라고 해보자.

그렇다면 이때 jquery를 사용해서 그 변수의 값으로 저장된 id를 가진 element에 어떻게 access 할까?

예를 들어,

let a = "elementID"

라고 해보자. 이때 "elementID" 라는 id를 가진 element를 불러내기 위해서는

$("#elementID")

라고 하면 된다. 하지만 이렇게 특정 id를 string으로 쓸 수 없고 변수만 써야하는 상황이 생긴다.
그땐 아래와 같이 하면 된다는 것이다.

$("#" + a)

이런 식의 방법은 여러가지로 쓰일 수 있는데,
내가 비슷한 이름으로 id를 썼다고 해보자.

let a = idName
let b = idName_test

그러면

$("#idName_test") 

는 일단 아래와 같고

$("#" + b) 

아래처럼 해도 된다.

$("#" + a + "_test") 

2.    window.prompt()

window.open() 과 달리 단순 질문과 값을 받기 위한 프롬프트 창을 연다.

window.prompt("메시지", "디폴트값(placeholder같은 역할)")

나의 경우엔 수정, 삭제를 하려면 비밀번호를 확인하는 작업을 위해 사용했다.

window.prompt("비밀번호를 입력해주세요.", "숫자 4자리")

return 값은 프롬프트 창의 입력창에 입력한 값이다.

3.    /^\d{4}$/.test()

괄호 안의 값이 숫자 4자리인지 확인하는 방법이다.
d{4}에서 d가 digit, 4가 숫자의 자릿수를 뜻한다.

return 값은 boolean 이다.
나의 경우엔 프롬프트 창에 입력된 비밀번호가 4자리 숫자인지 확인하려고 사용했다.

input-pw = window.prompt("비밀번호를 입력해주세요.", "숫자 4자리");
if (/^\d{4}$/.test(input-pw)) {

		(중략)

}

4.    $(element).click(function(){}) 과
        $(document).on("click", "element", function () {}) 의 차이

전자는 DOM이 load 되면서 '코드 순서에 따라' 실행되는 거고,
후자는 DOM이 load 다 되고 나서 (document가 생기고 나서) 실행된다.

따라서 전자의 경우엔 element 혹은 funciton 안에 쓰는 변수들이 아직 정의되기 전이면(변수 정의 이전에 이 코드를 쓰면) 오류가 난다.

하지만 후자의 경우엔 DOM이 다 로드가 되어 모든 변수가 정의되고 난 후이기 때문에 변수 정의 전이든 후든 이 코드의 순서와 상관없이 오류가 발생하지 않는다.

5.    CSS에서     display: none    을 쓰고
        JS에서    element.show()     와     element.hide();    

마치 toggle처럼 element가 보여지고 사라지고 하는 것을 위와 같이 할 수도 있다.
toggle과의 차이점은, toggle은 같은 걸 두 번 하면 다시 원래대로 돌아간다는 것이다. 웹페이지에서의 동작이 내가 원하는 대로 흘러가지 않을 수 있어서
.show() 와 .hide()를 구분해줘야만 하는 일이 생긴다.

5.    window.location.href = "링크주소"

현재 페이지에서 원하는 링크주소로 넘어가도록 하이퍼링크 시키는 방법이다.

6.    파일업로드 버튼

function getImage() {
  const reader = new FileReader();
  
  //FileReader가 파일 읽기를 완료(onload)하면,
  reader.onload = ({ target }) => {
  
    //읽어들인 파일의 데이터 url을 preview의 src 속성에 넣어준다.
    preview.src = target.result;
  };
  
  //업로드한 이미지 파일의 url을 읽는다.
  reader.readAsDataURL(fileDOM.files[0]);
}

// 'Upload image' 버튼 클릭하여 새 파일을 선택하면 위의 함수 실행
업로트버튼.addEventListener("change", function () {
  getImage();
});