본문 바로가기
728x90
반응형

JavaScript7

[javascript/jQuery] 짝 맞추어 카드 뒤집기 게임 안녕하세요. 이번 포스팅은 재밌는 포스팅을 좀 해보려고 합니다. 초기 게임판 모습입니다. 크게는 화면 구성은 두 영역으로 나뉩니다. (1) 게임판 영역 (2) 게임 참가자 및 스코어 영역 버튼은 두 가지가 있습니다 [시작] : 게임을 시작하는 버튼 [추가] : 참가자를 추가하는 버튼. [추가] 버튼을 누르면 동적으로 참가자 목록을 확장할 수 있습니다. 동시에, [삭제] 버튼도 나옵니다. [삭제] 버튼을 누르면 해당 행의 참가자가 지워집니다. 우선 큰틀을 잡기 위해 html 태그와 css 작성을 해보겠습니다. ※ html 태그 A B C D E 게임판 게임 참가자 등록 (최소 인원 : 2명) 이름 : 이름 : ※ CSS 이제 본격적으로, 게임 구현에 가장 중요한 자바스스크립트를 구현해보도록 하겠습니다. 먼.. 2021. 5. 25.
[API/javascript] 구글 차트 API - jstl 데이터 필터링 안녕하세요. 이번 포스팅은 구글 차트 API를 다뤄보겠습니다. 아래는 구글 차트 사이트인데요 developers.google.com/chart Charts | Google Developers Interactive charts for browsers and mobile devices. developers.google.com 바로 본론으로 넘어가겠습니다. 일단 구글차트를 사용하려면 스크립트를 불러올수 있도록 해야합니다. head 부분에 구글차트를 로드해줍니다. div를 예쁘게 만들어주기 위해서 CSS Style 도 만들어 놓겠습니다. body부분의 div도 만들어 줍니다. body밑에 스크립트를 만들어줍니다. body 밑에 만드는 이유는, 스크립트가 다 불러와지고 그 다음에 div를 만들면 늦더라구요.. 그.. 2021. 4. 13.
[API] Chart.js CDN 붙여넣기/ 다운로드 안녕하세요 이번 포스팅은 Chart.js를 사용하는 내용을 다뤄보겠습니다. Chart JS 홈페이지 : www.chartjs.org/ (1) 사용 준비 - 1. CDN Chart JS를 사용하기 위해서는 다운받거나 jQuery처럼 CDN을 붙여야 합니다. cdnjs.com/libraries/Chart.js △△△ 위 사이트에서 CDN을 복사해서 붙여넣을 수 있는데요 하지만 이걸 여러번 붙여야하니 귀찮을 따름입니다. 어떤 분이 하나만 붙여서 CDN을 사용하던데 좋아보이더라구요. 위의 소스를 붙였습니다. 실행이 잘 되더라구요 :) - 2. 다운로드(npm) 저는 npm을 이용해서 다운받았습니다. npm이란 Node Package Manager 의 줄임말인데요. nvm을 설치하면 npm 명령어를 사용할 수 있.. 2021. 4. 5.
[프로그래머스/javascript] 2018 KAKAO BLIND RECRUITMENT [1차] 다트 게임 문제 설명 다트 게임 카카오톡에 뜬 네 번째 별! 심심할 땐? 카카오톡 게임별~ 카카오톡 게임별의 하반기 신규 서비스로 다트 게임을 출시하기로 했다. 다트 게임은 다트판에 다트를 세 차례 던져 그 점수의 합계로 실력을 겨루는 게임으로, 모두가 간단히 즐길 수 있다. 갓 입사한 무지는 코딩 실력을 인정받아 게임의 핵심 부분인 점수 계산 로직을 맡게 되었다. 다트 게임의 점수 계산 로직은 아래와 같다. 다트 게임은 총 3번의 기회로 구성된다. 각 기회마다 얻을 수 있는 점수는 0점에서 10점까지이다. 점수와 함께 Single(S), Double(D), Triple(T) 영역이 존재하고 각 영역 당첨 시 점수에서 1제곱, 2제곱, 3제곱 (점수1 , 점수2 , 점수3 )으로 계산된다. 옵션으로 스타상(*) ,.. 2020. 12. 9.
[프로그래머스/javascript] 모의고사 문제 설명 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다. 1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ... 3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ... 1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많은 문제를 맞힌 사람이 누구인지 배열에 담아 return 하도록 solution 함수를 작.. 2020. 12. 7.
[프로그래머스/javascript] 2020 카카오 인턴쉽 키패드 누르기 안녕하세요, 이번 포스팅은 2020 카카오 인턴쉽 키패드 누르기 문제입니다. 문제 설명 스마트폰 전화 키패드의 각 칸에 다음과 같이 숫자들이 적혀 있습니다. 이 전화 키패드에서 왼손과 오른손의 엄지손가락만을 이용해서 숫자만을 입력하려고 합니다. 맨 처음 왼손 엄지손가락은 * 키패드에 오른손 엄지손가락은 # 키패드 위치에서 시작하며, 엄지손가락을 사용하는 규칙은 다음과 같습니다. 엄지손가락은 상하좌우 4가지 방향으로만 이동할 수 있으며 키패드 이동 한 칸은 거리로 1에 해당합니다. 왼쪽 열의 3개의 숫자 1, 4, 7을 입력할 때는 왼손 엄지손가락을 사용합니다. 오른쪽 열의 3개의 숫자 3, 6, 9를 입력할 때는 오른손 엄지손가락을 사용합니다. 가운데 열의 4개의 숫자 2, 5, 8, 0을 입력할 때는 .. 2020. 12. 5.
728x90
반응형