Javascript 간편정리

* Javascript는 모든 브라우저에 기본 탑재 되어 있음. 

 

* console.log() => 브라우저의 콘솔에 괄호안의 내용을 출력 해 줌 

 

* 변수선언

  - 상수 : const    ->  const conArray;

  - 변수 : let         -> let letAr;

 

* 변수타입

 - integer : const a = 1;

 - string : const a = "1";

 - boolean : const a = true;

 - null : const a = null;

 - undefined : const a;

 - array : const a = ["1", "2", "3", "a"];

 - object : const a = {};

 

* 함수

 - 키워드 : function 으로 시작. 함수명 + () {코드블록} 로 완성 

 - argument : 함수가 실행될 때 전달할 수 있는 값

 - () 안에 변수를 선언하여 argument를 전달 받을 수 있음. 

 - 선언한 순서대로 값을 전달 받는다. 

 - {} 안에 실행되는 코드를 작성

 - 함수명 + () 로 함수 실행

 

* 이벤트

 - 이벤트 추가

 - object.addEventListener( 이벤트 명 , 실행할 함수 명 );

 

* style 추가하기

 - 객체가 여러개의 style을 가지고 있을때 

 - object.classList.contains 을 이용하여 확인하고 추가/삭제 할 수 있음

 - style의 삭제 추가를 간단하게 : 객체.classList.toggle를 이용하여 style을 추가/삭제 할 수 있음 

     -> div.classList.toggle("clicked") 

 

* input 테그의 유효성을 체크하기 위해서는 <form></form> 사이에 있어야 한다.

 

* object이 기본동작 막기

 - 함수가 전달될 때 아무것도 전달하지 않으면 첫 인자로 이벤트리스너에 대한 정보를 전달 해 줌 

 - function btnClick(){} --> function btnClick(event){} 와 같음 

 - 기본 동작을 막음 : event.preventDefault() ;  --> <a> 태그의 이동, <button>의 submit등의 기본 동작을 막음 

 

* 문자열 합치기

 - 백틱(`` : 숫자 1 왼쪽옆에 있는 기호) 으로 감싼다

 - `우리나라 ${변수명} `으로 javascript 의 변수를 문자열 안에 사용 할 수 있음. 

 

* localStorage

 - 브라우저 내의 저장공간. key:value의 형식으로 저장됨

 - 추가 : setItem(name, value)

 - 조회 : getItem(name)

 - 삭제 : remove(name)

 

* interval

 - 일정시간마다 실행

 - setInterval(함수명, 시간) --> setInterval(goSearch, 3000) : 3초마다 goSearch 함수 실행 

 

* setTimeout 

 - 일정시간 후에 실행

 - setTimeout(함수명, 시간) --> setTimeout(goSearch, 3000) : 3초 후에 goSearch 함수 실행 

 

* padStart()

 - object.padStart(2, "0")  :  object의 길이기 2보다 작은경우 왼쪽에 "0"을 추가.  "2".padStart(2, "0") --> "02"

 - 문자열에만 적용됨

 

* padEnd()

 - object.padEnd(2, "0") : object의 길이가 2보다 작은경우 오른쪽에 "0"을 추가. "2".padEnd(2, "0") --> "20"

 - 문자열에만 적용 됨

 

* 숫자를 문자열로 변경 시 String()으로 감싸 주면 됨. 

 

* 자주 쓰는 Math 함수 

 - Math.random() --> 0 ~ 1 사이의 숫자를 랜덤으로 돌려준다.

 - Math.round() => 반올림

 - Math.ceil() => 올림 

 - Math.floor() => 버림 

 

* JSON

 - JSON.stringify() -> ()안의 어떤 object든 stirng으로 변환

 - JSON.parse() -> ()안의 어떠한 string을 원래의 object 형태로 변환 

 

* forEach()

 - array.forEach(function) -> array의 갯수만큼 function을 실행 . 이때 function에 array의 index의 내용을 함수의 한자로 전달 해 줌 

 

* fetch()

 - fetch(url).then(response => response.json() ).then(data => (){  실행할 문장 })