[JavaScript] 기본 함수 몇 가지 _1탄

[JavaScript] 기본 함수 몇 가지 _1탄

 

 

1. parseInt()

parseInt() 함수는 string을 number로 변환하는 함수이다. 

 

const a = 123;
const b = "123";
const c = "Hello";
const d = true;
const e = false;
const f = null;

console.log(parseInt(a));    // 123
console.log(parseInt(b));    // 123
console.log(parseInt(c));    // NaN
console.log(parseInt(d));    // NaN
console.log(parseInt(e));    // NaN
console.log(parseInt(f));    // NaN

 

NaN은 Not-A-Number로 숫자가 아니라는 뜻이다.

 

 

 

2. isNaN()

isNaN() 함수는 매개변수로 받은 것이 숫자가 아니면 true를, 숫자이면 false를 반환하는 함수이다.

 

 

 

3. getElementById(), getElementByClassName() & createElement()

document.getElementById("id명");
getElementByClassName("class명");

위의 함수는 HTML에서 해당 id명 또는 해당 class명을 가진 element를 반환한다.

 

document.createElement("tag명");

위의 함수는 JavaScript에서 HTML에 해당 tag를 추가할 때 사용한다.

HTML에 추가할 요소가 너무 많을 때, JS에서 이 함수를 이용하면 쉽게 추가할 수 있다.

 

 

 

4. querySelector(), querySelectorAll()

element들을 가져올 때는, 위 3번의 getElementById()보다 querySelector(), querySelectorAll() 함수가 더 자주 쓰인다.

querySelector은 요소들을 CSS 방식으로 검색할 수 있다.

 

querySelector("tag명");
querySelector(".class명");
querySelector("#id명");

querySelector(".class명 tag명");

class명 앞에는 .(점)이 들어간다.

CSS 방식으로 검색할 수 있는 만큼 아래와 같이 CSS 문법을 이용할 수 있다.

querySelector(".class명 tag명:first-child");

 

querySelector로 반환하는 element는 한 개이다.

해당하는 element가 여러 개 있어도 첫 번째 element만 반환한다.

조건을 만족하는 element를 모두 다 반환하고 싶으면 querySelectorAll을 사용하면 된다.

querySelectorAll(".class명 tag명");

 

 

 

5. addEventListener()

자바스크립트는 event를 들을 수 있다.(Listen)

자바스크립트에게 event가 일어났다고 들려주기 위해 addEventListner() 함수를 이용한다.

 

target.addEventListner(type, listener);

target에는 이벤트가 일어날 HTML element를 적고,

type에는 어떤 유형의 이벤트가 일어나는지를 적고,

listener에는 해당 이벤트가 일어났을 때 실행시킬 함수를 적는다.

이때, listener에 적는 함수에는 마지막 ()를 넣지 않는다.

 

type에 들어가는 이벤트 유형은 아래 링크에 다양한 종류가 나와있다.

https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조 | MDN

(MDN(Mozilla Developer Network)에는 HTML에 대한 많은 내용이 있다. HTML을 공부하는 사람에게 이 사이트는 자주 드나들어야 하는 사이트이다.)

 

 

ex)

title.addEventListner("click", myMethod);

title을 click했을 때 myMethod가 실행된다.

 

이는 아래의 코드와 같다.

title.onclick = myMethod;

 

 

 

6. localStorage.setItem(), localStorage.getItem(), localStorage.removeItem()

브라우저에서 기본으로 제공되는 Local Storage에 item을 저장하고 지우는 함수이다.

개발자도구(Ctrl+Shift+I)>Application>Local Storage 에서 확인할 수 있다.

 

localStorage.setItem("key", value);    // local storage에 key-value값 저장하기
localStorage.getItem("key", value);    // local storage에 저장된 key-value값 불러오기
localStorage.removeItem("key", value);    // local storage에 저장된 key-value값 지우기