본문 바로가기

문제풀기

(11)

[javascript] 공지사항 슬라이드로 만들기 (수직 슬라이드) 스타벅스 홈페이지를 보면 공시사항 내용들이 슬라이드 식으로 하나씩 노출된다. 위 이미지와 같은 이벤트를 구현할 때 자바스크립트 swiper 라이브러리를 이용하면 편리하다. 먼저 html의 head 영역에 각 script 코드를 적용시킨다. 이때 반드시 main 자바스크립트 파일 위에 적용시켜야 한다. (*swiper 라이브러리는 link 코드와 script 코드 둘 다 적용해야한다!) html의 body 영역엔 아래와 같은 클랙스를 가진 코드들이 있어야 동작한다. .swiper-container / .swiper-wrapper / .swiper-slide (***그 외에 다른 기능은 swiper 라이브러리 참고하기!!) 내용1 내용1 내용3 내용4 그 후 아래와 같은 자바스크립트 파일에 아래의 코드를 적..

[javascript] 스크롤 시 뱃지 안보이게 하는 방법 스타벅스 홈페이지를 보면 우측에 뱃지가 보인다. 그리고 이 벳지는 일정부분 아래로 스크롤 하게되면 점차 투명해지면서 사라지게 된다. 위 이미지와 같은 이벤트를 구현할 때 자바스크립트 lodash 라이브러리와 gsap 라이브러리를 이용하면 편리하다. 먼저 html의 head 영역에 각 script 코드를 적용시킨다. 이때 반드시 main 자바스크립트 파일 위에 적용시켜야 한다. 그 후 main 자바스크립트 파일에 아래의 코드를 작성한다. (참고로 badgeEl 요소는 이미지가 담긴 div 요소이다.) const badgeEl = document.querySelector('.badges'); window.addEventListener('scroll', _.throttle(function () { if (wi..

[자바크스립트 이론] 스코프 스코프란? 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정되는데, 이를 스코프라 한다. 자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야할 것인지 식별자를 결정한다. let x = 'global'; function foo(){ let x = 'local'; console.log(x); } foo(); console.log(x); //local //global 만약 스코프 개념이 없다면 같은 이름을 갖는 변수는 충돌을 일으키므로 프로그램 전체에서 하나밖에 사용할 수 없다. 따라서 프로그래밍 언어에서는 스코프(유효범위)를 통해 식별자인 변수 이름의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있게 한다. 스..

[프로그래머스] 폰켓몬 문제) 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째(3번), 두 번째(1번) 폰켓몬을 선택 첫 번째(3번), 세 번째(2번) 폰켓몬을 선택 첫 번..

[프로그래머스] 내적 문제) 길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요.이때, a와 b의 내적은 a[0]*b[0] + a[1]*b[1] + ... + a[n-1]*b[n-1] 입니다. (n은 a, b의 길이) 제한사항) a, b의 길이는 1 이상 1,000 이하입니다. a, b의 모든 수는 -1,000 이상 1,000 이하입니다. *입출력 예: a b result [1,2,3,4] [-3,-1,0,2] 3 [-1,0,1] [1,0,-1] -2 내 풀이 function solution(a, b) { let answer = null; for (let i = 0; i < a.length; i++) { answer+=(a[i] * b[..

[프로그래머스] 완주하지 못한 선수 문제) 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 제한사항) 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. *입출력 예: participant completion return ["leo", "ki..

[Javascript] 구구단 구현 ★먼저 알아야할 것 - Math.random() : 0 이상 1 미만의 난수(랜덤숫자) 반환 (but, 암호학적으로 안전한 난수 제공 아님). function getRandom() { return Math.random(); } - Math.ceil() : 소수값이 존재할 때 값을 올리는 역활을 하는 함수. (+)Math.floor() :소수값 버림. (+)Math.round() : 소수값 반올림. console.log(Math.ceil(5.15)); // expected output: 6 console.log(Math.ceil(6.05)); // expected output: 7 console.log(Math.ceil(3)); // expected output: 3 console.log(Math.ceil..

[Javascript] 별찍기 ★먼저 알아야할 것 -repeat() 메서드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환. str.repeat(count)에서 count는 문자열을 반복할 횟수(0과 양의 무한대 사이의 정수/음수 안됨) ★별 찍기1 //보통 초기값은 0을 주로 쓴대(컴퓨터 숫자가 0부터 시작하니까) for (let star=0; star=1; star-=1) { console.log(" ".repeat(5-star)+"*".repeat(star)); } /* 출력되는 별 ***** **** *** ** * */ ★별 찍기3 for (let star=9; star>=1; star-=2) { console.log(" ".repeat((9-star)/2)+"*".repeat(star)); } /* 출력되는 별..

이전 1 2 다음

티스토리툴바