javascript 45

행렬 테두리 회전하기 ( Level 2, JavaScript, 2021 Dev-Matching )

행렬 테두리 회전하기 ( Level 2 ) 2021 Dev-Matching: 웹 백엔드 개발자(상반기) ( JavaScript ) 문제 링크 나의 풀이 function solution(rows, columns, queries) { const arr = Array(rows).fill(1) .map((el, i) => Array(columns).fill(el + i * columns) .map((a, i) => a + i) ) const res = [] while ( queries.length ) { const query = queries.shift(); let num = []; for ( let i = query[1]; i < query[3]; i++ ) num.push(arr[query[0]-1][i-1..

로또의 최고 순위와 최저 순위 ( Level 1, JavaScript, 2021 Dev-Matching )

로또의 최고 순위와 최저 순위 ( Level 1 ) 2021 Dev-Matching: 웹 백엔드 개발자(상반기) ( JavaScript ) 문제 링크 나의 풀이 function solution(lottos, win_nums) { let count = 0, zero = 0; for ( let i = 0; i < lottos.length; i++ ) { if ( win_nums.includes(lottos[i]) ) count ++ if ( lottos[i] === 0 ) zero++ } if ( !count && !zero ) return [6,6] return [Math.max(7-count-zero, 1), Math.min(7-count, 6)] } 0과 이외의 숫자 개수를 센 뒤 등수 계산

Programmers Level 2 연습문제모음 ( JavaScript )

Level 2 연습문제 ( JavaScript ) 작성한 코드보다 더 좋은 코드가 있음을 미리 알려드리며, 코드의 해설이 필요하신 분은, 댓글 남겨주시면 적어놓겠습니다. 목차 N개의 최소공배수 JadenCase 문자열 만들기 행렬의 곱셈 피보나치 수 최솟값 만들기 최댓값과 최솟값 숫자의 표현 땅따먹기 다음 큰 숫자 올바른 괄호 124 나라의 숫자 풀이 1. N개의 최소공배수 function solution(arr) { const gcd = (a, b) => b ? gcd(b, a % b) : a return arr.reduce((a, b) => a * b / gcd(a, b)) } 2. JadenCase 문자열 만들기 function solution(s) { return s.split(' ').map(a..

Programmers Level 1 연습문제모음 ( JavaScript )

Level 1 연습문제 ( JavaScript ) 작성한 코드보다 더 좋은 코드가 있음을 미리 알려드리며, 코드의 해설이 필요하신 분은, 댓글 남겨주시면 적어놓겠습니다. 목차 직사각형 별찍기 x만큼 간격이 있는 n개의 숫자 행렬의 덧셈 핸드폰 번호 가리기 하샤드 수 평균 구하기 콜라츠 추측 최대공약수와 최소공배수 짝수와 홀수 제일 작은 수 제거하기 정수 제곱근 판별 정수 내림차순으로 배치하기 자연수 뒤집어 배열로 만들기 자릿수 더하기 이상한 문자 만들기 약수의 합 시저 암호 문자열을 정수로 바꾸기 수박수박수박수박수박수? 소수 찾기 서울에서 김서방 찾기 문자열 다루기 기본 문자열 내림차순으로 배치하기 문자열 내 p와 y의 개수 문자열 내 마음대로 정렬하기 두 정수 사이의 합 나누어 떨어지는 숫자 배열 같은..

30. Whack A Mole ( JavaScript30 )

Whack A Mole 목표 두더지잡기 게임 만들기 기본 코드 Whack-a-mole! 0 Start! 과정 변수, 상수 생성 게임 진행 시간 설정 두다지가 올라올 구멍을 정하는 함수 생성 두더지가 올라오고 내려가도록 하는 함수 생성 게임을 시작하기 위한 함수 생성 두더지를 잡았을 때의 함수 생성 두더지를 클릭하면 bonk 실행 코드 분석 1. 변수, 상수 생성 const holes = document.querySelectorAll('.hole'); const scoreBoard = document.querySelector('.score'); const moles = document.querySelectorAll('.mole'); let lastHole; let timeUp = false; let sco..

Dev/JavaScript30 2021.07.11

28. Video Speed Controller ( JavaScript30 )

Video Speed Controller 목표 비디오 재생속도 컨트롤러를 삽입 기본 코드 1× 과정 상수 생성 속도를 조절할 수 있게하는 함수 생성 함수 실행 코드 1. 상수 생성 const speed = document.querySelector('.speed'); const bar = speed.querySelector('.speed-bar'); const video = document.querySelector('.flex'); 각 클래스에 해당하는 요소를 speed, bar, video에 담음 2. 속도를 조절할 수 있게하는 함수 생성 const handleMove = e => { const y = e.pageY - e.target.offsetTop; const percent = y / e.targe..

Dev/JavaScript30 2021.07.11

27. Click and Drag ( JavaScript30 )

Click and Drag 목표 클릭해서 드래그하면 옆으로 넘어가는 페이지를 구현 기본 코드 01 02 03 04 05 과정 상수, 변수 생성 mousedown시 실행될 함수 생성 mouseleave시 실행될 함수 생성 mouseup시 실행될 함수 생성 mousemove시 실행될 함수 생성 코드 분석 1. 상수, 변수 생성 const slider = document.querySelector('.items'); let isDown = false, startX, scrollLeft; items을 클래스로 가지는 요소들을 slider에 담고 isDown, startX, scrollLeft를 변수로 생성 2. mousedown시 실행될 함수 생성 slider.addEventListener('mousedown',..

Dev/JavaScript30 2021.07.11

26. Stripe Follow Along Nav ( JavaScript30 )

Stripe Follow Along Nav 목표 박스 크기에 맞춰 내용을 불러오는 네비게이션 바를 만들어 봄 기본 코드 Cool About Me Wes Bos sure does love web development. He teaches things like JavaScript, CSS and BBQ. Wait. BBQ isn't part of web development. It should be though! Courses CLPU Command Line Power User MMD Mastering Markdown Other Links Twiter Facebook 과정 상수 생성 마우스가 올라갈 때의 함수를 생성 마우스가 떠날 때의 함수를 생성 효과를 적용, 해제하는 함수 실행 코드 분석 1. 상수 생성..

Dev/JavaScript30 2021.07.11

25. Event Capture, Propagation, Bubbling and Once ( JavaScript30 )

Event Capture, Propagation, Bubbling and Once 목표 이벤트 캡쳐링 - 최상위 태그가 먼저 실행이 되고, 그 후에 점점 하위로 호출 이벤트 버블링 - 최하위 태그가 먼저 실행이 되고, 그 후에 점점 상위로 호출 을 구현해보고 알아봄. 기본 코드 button 과정 상수 선언 현재의 클래스 값을 콘솔에 출력하는 함수 생성 div, button에 대해 이벤트리스너 생성 코드 분석 1. 상수 선언 const divs = document.querySelectorAll('div'); const button = document.querySelector('button'); div와 button 태그를 각각의 변수에 담는다 2. 현재의 클래스 값을 콘솔에 출력하는 함수 생성 const ..

Dev/JavaScript30 2021.07.11

24. Sticky Nav ( JavaScript30 )

Sticky Nav 목표 웹 브라우저에 많이 쓰이는 상단에 네비게이션바 고정을 자바스크립트로 구현 기본 코드 A story about getting lost. LOST. Home About Images Locations Maps Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet 원래 쓸모없는 내용이 많지만 다 짤랐음, CSS속성도 따로 작성하지 않았음 과정 상수, 변수 생성 스크롤시 상단에 nav바를 고정하도록 함수 생성 및 실행 코드 분석 1. 상수, 변수 생성 const nav = document.querySelector('#main'); let topOfNav = nav.offsetTop; nav에 id가 main인 태그를 담고, topOfNav에 na..

Dev/JavaScript30 2021.07.11