JavaScript

[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] 틱택토 (Tic-Tac-Toe)

완성본 See the Pen Untitled by hyukson (@hyukson) on CodePen. Result 화면만을 띄워놓고 테스트를 해보실 수 있습니다. 코드 풀이 틱택토는 가로, 세로, 대각선 중 1 라인을 채우는 사람이 이기는 게임입니다. 즉 승리 조건은 가로, 세로, 대각선 중 1 라인을 다 채운 플레이어를 찾으면 됩니다. 이제 틱택토 게임을 구현하기 전 필요한 기능들을 생각해 보았습니다. 필요 기능 새 게임판 만들기 네모판을 클릭 시 현재 턴인 유저에 따른 표시 게임판에 가로, 세로, 대각선 중 1 라인을 채웠는지 확인 만약 승리 조건이 일치하지 않을 시 다음 턴 넘기기 위 기능 구현을 목표로 구현해 보았습니다. 1. 새 게임판 만들기 newMake() { let html = ''; ..

[JS] 달력 만들기

CSS의 display의 grid 속성을 이용해서 제작한 달력입니다. 완성 코드 See the Pen Untitled by hyukson (@hyukson) on CodePen. 전체 코드 const makeCalendar = (date) => { const currentYear = new Date(date).getFullYear(); const currentMonth = new Date(date).getMonth() + 1; const firstDay = new Date(date.setDate(1)).getDay(); const lastDay = new Date(currentYear, currentMonth, 0).getDate(); const limitDay = firstDay + lastDay; c..

[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 = ["안녕", "고마워", "미안해", "사랑해"]; ..