JavaScript/코드

[JS] 모든 setInterval, setTimeout 중지

코드 // 가장 마지막에 실행된 함수를 제외 전부 중지 const IntervalId = setInterval(() => console.log('interval'), 1000); for (let i = 0; i console.log('timeout'), 1000); for (let i = 0; i < TimeoutId; i++) { clearTimeout(i); } 코드 풀이 setInterval, setTimeout은 각 함수를 호출할 때마다 증가하는 수를 아이디로 반환하며 해당 아이디를 사용하여 각 함수를 중지시킬 수 있습니다. 이에 사용되는 함수는 clearInte..

[JS] base64 이미지 용량 줄이기 (File API)

코드 // const file = ().files[0] // file type을 가진 input DOM에 files로 파일 데이터를 가져올 수 있습니다. const fr = new FileReader(); fr.onload = (base64) => { const image = new Image(); image.src = base64.target.result; image.onload = (e) => { const $canvas = document.createElement(`canvas`); const ctx = $canvas.getContext(`2d`); $canvas.width = e.target.width; $canvas.height = e.target.height; ctx.drawImage(e.ta..

[JS] 현재 날짜, 시간 포맷 (YYYY-MM-DD hh:mm:ss)

YYYY-MM-DD HH:MM:SS const TIME_ZONE = 9 * 60 * 60 * 1000; // 9시간 const date = new Date('2021-08-05 09:51:31'); new Date(date.getTime() + TIME_ZONE).toISOString().replace('T', ' ').slice(0, -5); // 2021-08-05 09:51:31 toISOString() 메서드는 "YYYY-MM-DDTHH:mm:ss.sssZ" 형식으로 정보가 반환되며, replace(), slice(0, -5)으로 불필요한 정보를 제거해줍니다. 해당 메서드에서 출력되는 시간은 UTC(미국) 기준으로 출력됩니다. 이를 대한민국 서울 시간에 맞추기 위해서 3240 * 10000(9시간..

[JS] 체크박스 하나만 선택

코드 first second third // Javascript function clickCheck(target) { document.querySelectorAll(`input[type=checkbox]`) .forEach(el => el.checked = false); target.checked = true; } 코드 풀이 3개의 체크박스 각각에 클릭 이벤트를 걸어주며 클릭 시 clickCheck 함수를 호출합니다. 체크 박스를 체크 시 자기 자신 element를 같이 넘겨줍니다. checkbox 타입을 가진 모든 input의 checked 속성을 false로 바꿔 선택 상태를 해제시켜줍니다.그 후 매게변수로 받아온 체크한 elmeent의 checked 속성만을 true로 바꿔줍니다.

[JS] 하루 전, 일주일 전, 한달 전, 일년 전 구하기

const d = new Date(); // 날짜를 정하기 new Date(2020, 0, 1).toLocaleDateString(); // "2020. 1 1." const year = d.getFullYear(); // 년 const month = d.getMonth(); // 월 const day = d.getDate(); // 일 // 어제 날짜 구하기 new Date(year, month, day - 1).toLocaleDateString(); // 일주일 전 구하기 new Date(year, month, day - 7).toLocaleDateString(); // 한달 전 구하기 new Date(year, month - 1, day).toLocaleDateString(); // 일년 전 구하기..

[JS] 현재의 날짜와 시간 구하기

javascript에서 현재의 날짜를 구하는 방법을 알아보겠습니다. 현재 날짜 구하기 new Date()는 시간의 특정 지점을 나타내는 Date 객체를 생성합니다. const date = new Date(); 연도 / 월 / 일 / 요일 구하기 new Date를 이용하여 연도/월/일/요일을 얻을 수 있습니다. const a = new Date(); let year = a.getFullYear(); let month = a.getMonth(); let date = a.getDate(); let day = a.getDay(); getFullYear() new Date 객체의 년도 정보를 반환합니다. getMonth() new Date 객체의 월 정보를 반환합니다. 월은 0부터 시작합니다. 1월 = 0 get..

[JS] alert 박스 내용 줄바꿈 하기

alert 박스 내용을 줄 바꿈 하기 위해서는 개행 문자인 \n로 개행 처리를 해주면 됩니다. alert에 문구만 넣기 alert("안녕하세요. 나를 제외한 천재들입니다. 이제 alert에 대해 소개해 드리겠습니다. 앞으로 잘 부탁드립니다."); -결과- alert 문구에 \n 넣어보기 alert('안녕하세요. 나를 제외한 천재들입니다. \n이제 alert에 대해 소개해 드리겠습니다. \n앞으로 잘 부탁드립니다.'); -결과- 배열에 있는 문구를 한 번에 alert로 띄우기 배열에 문구를 모아 놓고 한 번에 문구를 띄워주는 상황에서도 개행 문자가 쓰입니다. 배열에 [안녕, 고마워, 미안해, 사랑해]를 넣고 한 번에 띄워보았습니다. const arr = ["안녕", "고마워", "미안해", "사랑해"]; ..