[프로그래머스/레벨2] 주식가격 (자바스크립트)

[프로그래머스/레벨2] 주식가격 현재 자바스크립트는 풀이 가능 언어에 없습니다. 문제 초 단위로 기록된 주식가격이 담긴 배열 prices가 매개변수로 주어질 때, 가격이 떨어지지 않은 기간은 몇 초인지를 return 하도록 solution 함수를 완성하세요.   제한사항 prices의 각 가격은 1 이상 10,000 이하인 자연수입니다. prices의 길이는 2 이상 100,000 이하입니다.   입출력 예 [1, 더보기…

자바스크립트: 모달(modal window) 만들기

모달 창이란 사용자 인터페이스 디자인 개념에서 자식 윈도에서 부모 윈도로 돌아가기 전에 사용자의 상호동작을 요구하는 창을 말합니다. 아래 그림에서 가운데 하얀색 부분이 그 예라고 할 수 있습니다. 이 모달창은 팝업과 비슷하게 정보를 전달하나 팝업과 다르게 별도의 창이나 탭을 생성하지 않고 페이지 내에서 레이어를 이용해 정보를 보여준다는 점이 차이점이라고 할 수 더보기…

[프로그래머스/레벨2] 다리를 지나는 트럭 (자바스크립트)

[프로그래머스/레벨2] 다리를 지나는 트럭 (자바스크립트) 문제 트럭 여러 대가 강을 가로지르는 일 차선 다리를 정해진 순으로 건너려 합니다. 모든 트럭이 다리를 건너려면 최소 몇 초가 걸리는지 알아내야 합니다. 트럭은 1초에 1만큼 움직이며, 다리 길이는 bridge_length이고 다리는 무게 weight까지 견딥니다. ※ 트럭이 다리에 완전히 오르지 않은 경우, 이 트럭의 무게는 고려하지 더보기…

자바스크립트: 스크롤 상태 표시기 (스크롤 인디케이터, 라이브러리 없이 구현)

기본적인 원리는 자바스크립트: 무한 스크롤 (스크롤 이벤트 이용, 라이브러리 없이) 이 글에 나온 것과 동일합니다. 스크롤 인디케이터(스크롤 상태 표시기)란 스크롤을 할 때 현재 스크롤된 영역이 전체 컨텐츠 영역의 몇 % 진행되었는가를 나타내는 표식입니다. 아래 그림에서 파란색 선이 스크롤 인디케이터입니다. 스크롤 인디케이터는 스크롤 정보를 얻어와 구현합니다. 스크롤 이벤트를 하면 이벤트 타겟에 scrollingElement라는 프로퍼티가 더보기…

[프로그래머스/레벨3] 베스트앨범 (자바스크립트)

[프로그래머스/레벨3] 베스트앨범 (자바스크립트)   문제 스트리밍 사이트에서 장르 별로 가장 많이 재생된 노래를 두 개씩 모아 베스트 앨범을 출시하려 합니다. 노래는 고유 번호로 구분하며, 노래를 수록하는 기준은 다음과 같습니다. 속한 노래가 많이 재생된 장르를 먼저 수록합니다. 장르 내에서 많이 재생된 노래를 먼저 수록합니다. 장르 내에서 재생 횟수가 같은 노래 중에서는 더보기…

[프로그래머스/레벨2] 위장 (자바스크립트)

[프로그래머스/레벨2] 위장 (자바스크립트)   문제 스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다. 예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다. 스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 더보기…

자바스크립트: 무한 스크롤 (스크롤 이벤트 이용, 라이브러리 없이)

참고: 자바스크립트: IntersectionObserver (2) 무한 스크롤(Infinite Scroll) 구현 (라이브러리 없이) 스크롤 이벤트를 하면 이벤트 타겟에 scrollingElement라는 프로퍼티가 있는데 이것을 통해 현재 스크롤 상태와 관련된 정보를 얻을 수 있습니다. 또는 document,documentElement || document.body 에서도 가져올 수 있습니다.   clientHeight : 웹 브라우저 창(내용이 보여지는 영역)의 높이입니다. scrollTop : 현재 스크롤된 부분의 맨 더보기…

자바스크립트 예제: 추천 검색어 표시 (사용성 개선을 위한 이벤트 처리)

요구사항 키보드와 마우스를 이용해서 추천 검색어를 선택할 수 있도록 합니다. esc를 누르면 추천 검색어 창이 닫여야 합니다. 키보드의 위, 아래 키를 누르면 추천 검색어 하이라이트가 옮겨지고 엔터를 누르면 하이라이트가 위치한 검색어가 입력창에 반영되어야 합니다. 마우스로 다른 곳을 클릭하여 input이 focus를 잃어버리는 경우 추천 검색어 창이 닫여야 합니다. 마우스로 추천 검색어를 더보기…

[프로그래머스/레벨2] 전화번호 목록 (자바스크립트)

[프로그래머스/레벨1] 전화번호 목록 현재 이 문제에는 풀이 가능 언어에 자바스크립트가 없습니다. (C++, JAVA, Python)   문제 전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 합니다. 전화번호가 다음과 같을 경우, 구조대 전화번호는 영석이의 전화번호의 접두사입니다. 구조대 : 119 박준영 : 97 674 223 지영석 : 11 9552 더보기…

자바스크립트: Debounce, Throttle 순수 자바스크립트 (Vanilla JS)로 구현

참고 글: 자바스크립트 lodash: debounce와 throttle을 이용하여 함수의 실행 횟수 제한   debounce: 동일 이벤트가 반복적으로 시행되는 경우 마지막 이벤트가 실행되고 나서 일정 시간(밀리세컨드)동안 해당 이벤트가 다시 실행되지 않으면 해당 이벤트의 콜백 함수를 실행합니다. throttle: 동일 이벤트가 반복적으로 시행되는 경우 이벤트의 실제 반복 주기와 상관없이 임의로 설정한 일정 시간 간격(밀리세컨드)으로 콜백 더보기…