웹 개발 공부 컨텐츠134 자릿수 더하기 프로그래머스 : 자릿 수 더하기 주어진 숫자의 각각의 자릿수에 값을 더해 값을 반환하는 문제입니다. 문제 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 제한사항 N의 범위 : 100,000,000 이하의 자연수 입출력 예 N 결과 123 6 987 24 1. 해설 소스보기 function solution(n) { var answer = 0; let x = n.toString().split(""); x.forEach(e => { answer += parseInt(e); }); return answer; } 숫자의 각각의 자릿수 값을 따로 분리하려면 일단 문자.. 2022. 11. 3. 짝수와 홀수 프로그래머스 : 짝수와 홀수 개요 문제 설명 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. 제한사항 num은 int 범위의 정수입니다. 0은 짝수입니다. 입출력 예 num 결과 3 odd 4 even 1. 해설 소스보기 function solution(num) { if (num%2 == 0){ var answer = 'Even'; } else { var answer = 'Odd'; } return answer; } 조건문에서 %를 사용해 2를 나눈 값이 0일때와 아닐때를 각각 even, odd로 반환하면 끝나는 문제입니다. 2. 삼항연산자 사용 소스보기 function evenOrOdd(num) { return (num%2) ?.. 2022. 11. 2. 몫 구하기 프로그래머스 : 몫 구하기 A를 B로 나눈 몫을 구하는 문제입니다. 문제 설명 정수 num1, num2가 매개변수로 주어질 때, num1을 num2로 나눈 몫을 return 하도록 solution 함수를 완성해주세요. 제한사항 0 < num1 ≤ 100 0 < num2 ≤ 100 입출력 예 num1 num1 결과 10 5 2 7 2 3 1. 해설 소스보기 function solution(num1, num2) { var answer = 0; answer = Math.floor(num1 / num2); return answer; } 아주 단순한 문제입니다.num1 / num2의 값의 정수값만 구하면 끝나는 문제입니다. ※ Math.floor(A) 메서드 메서드 안의 값을 버림해 정수값을 반환합니다. 2. 다.. 2022. 11. 2. 나머지가 1이 되는 수 찾기 프로그래머스 : 나머지가 1이 되는 수 찾기 주어진 자연수를 나눌 시 나머지가 1이 되는 최소값을 구하는 문제입니다. 문제 설명 자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니다. 제한사항 3 ≤ n ≤ 1,000,000 입출력 예 n 결과 10 3 12 11 1. 해설 소스보기 function solution(n) { for(x=0; x 2022. 11. 1. 알고리즘 - 세균 증식 프로그래머스 : 세균증식 거듭제곱에 관한 문제입니다. 문제 설명 어떤 세균은 1시간에 두배만큼 증식한다고 합니다. 처음 세균의 마리수 n과 경과한 시간 t가 매개변수로 주어질 때 t시간 후 세균의 수를 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ n ≤ 10 1 ≤ t ≤ 15 입출력 예 n t result 2 10 2048 7 15 229376 1. 해설 소스보기 function solution(n, t) { var answer = 0; for(i=1; i 2022. 10. 31. 패럴랙스 이펙트 06 패럴랙스 이펙트 자바스크립트를 이용해 스크롤 시 다양한 효과가 발생하는 이펙트 만들기 입니다. 패럴랙스 이펙트 06 - 텍스트 효과 스크롤을 내릴 때 텍스트의 각 문자가 시간차를 두고 등장하는 효과입니다. 코드 보기 스크롤 위치에 따라 문자를 나타내는건 쉽지만 각각의 문자를 따로 나타내게 하려면 split( )과 join( )메서드를 사용해야 합니다. 소스보기 -HTML파트- 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라. 03 section3 1퍼센트의 가능성, 그것이 나의 길이다. 04 section4 꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다. 05 section5 눈물과 더불어 빵을 먹어 보지 않은 자는 인생의 참다운 맛.. 2022. 9. 30. 서치 이펙트 05 서치 이펙트 자바스크립트를 이용한 검색 기능 효과 만들기 입니다. 서치 이펙트 05 - filter( )를 이용하여 속성의 중요도 보여주기 조건 적용이 가능한 filter( ) 메서드를 활용해 범위 검색을 하는 효과입니다. 1. 중요도 정리 및 레이아웃 만들기 속성 별 중요도(숫자)를 설정하고 시각적으로 알 수 있는 버튼을 만드는 작업입니다. 소스보기 -HTML- filter( )를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 🌑🌑🌑🌑🌑 ⭐🌑🌑🌑🌑 ⭐⭐🌑🌑🌑 ⭐⭐⭐🌑🌑 ⭐⭐⭐⭐🌑 ⭐⭐⭐⭐⭐ ⭐ 1개 이상 ⭐ 2개 이상 ⭐ 3개 이상 ⭐ 4개 이상 전체 속성 갯수 : -CSS- :root { --htmlColor: #223547; --cssColor: #5042a4; --javascriptColo.. 2022. 9. 30. 서치 이펙트 04 서치 이펙트 자바스크립트를 이용한 검색 기능 효과 만들기 입니다. 서치 이펙트 03 - find( )를 이용한 속성 검색 find( ) 메서드를 사용해 검색 또는 목록 클릭 시 해당 속성의 설명이 출력되는 효과입니다. 1. 검색창 만들기 검색 창과 속성 목록, 속성의 설명이 쓰여질 공간을 만듭니다. 소스보기 -HTML- find( )를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 설명이 표시됩니다!!! 전체 속성 갯수 : -CSS- /* main */ #main { margin: 50px 10px; } .search__wrap { max-width: 1400px; margin: 0 auto; border: 3px solid var(--htmlColor); bor.. 2022. 9. 29. 마우스 이펙트 05 마우스 이펙트 자바스크립트를 이용한 마우스 효과 만들기 입니다. 마우스 이펙트 05 - 기울기 효과 및 글씨 반전 효과 이미지에 3D 효과가 적용되어 있어 마우스 커서를 움직일 시 커서의 위치에 따라 이미지가 움직이며 이미지에 커서를 겹칠 시 커서 안의 이미지에 효과가 발생합니다. 1. 이미지를 3D로 바꾸기 이미지가 움직일 때 3D처럼 보이도록 CSS로 효과를 줍니다. 소스보기 -HTML- If you can dream it, you can do it 꿈을 꿀 수 있다면 할 수 있습니다. mousePageX : 0px mousePageY : 0px centerPageX : 0px centerPageY : 0px maxPageX : 0px maxPageY : 0px anglePageX : 0px angl.. 2022. 9. 28. startsWith( )/endsWith( ) startsdWith( )/endsWith( ) startsWith( ) 메서드는 시작하는 문자열에서 문자열을 검색하여 불린으로 반환합니다. endsWith( ) 메서드는 끝나는 문자열에서 문자열을 검색하여 불린(true, false)을 반환합니다. startsWith( )/endsWith( ) 메서드 startsdWith( ) 와 endsWith( ) 메서드는 둘 다 찾을 문자열을 검색하는 메서드며 문자열이 있을 시 true, 없을 시 false로 반환합니다. 둘의 차이점은 문자열이 지정 문자열로 시작하지는, 끝나는지 체크하는 차이점이 있습니다. 문법 Array.startssWidth(검색 문자열, 위치값) Array.endsWith(검색 문자열, 위치값) const str1 = "javascript .. 2022. 9. 28. map( )/Array.from( ) map( ) / Array.from( ) map( ) 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드입니다. Array.from() 은 문자열 등 유사 배열(Array-like) 객체나 이터러블한 객체를 배열로 만들어주는 메서드입니다. map( ) 메서드 메서드 안에 콜백함수를 넣어 반복문을 적용하는 메서드입니다. 기본적으로 forEach문과 같으나 forEach문은 배열을 반환하지 못하는데 map( ) 메서드는 배열 반환이 가능하다는 차이점이 있어 배열을 반환할 때 forEach문 대신 사용할 수 있습니다. 문법 Array.map(el => el 연산자 반복할 값) const arrNum = [100, 200, 300, 400, 500]; c.. 2022. 9. 27. find( )/findIndex( )/filter( ) find( ) / findIndex( ) / filter( ) find( ) 메서드는 주어진 판별 함수를 만족하는 첫 요소를 반환하며, 없을 시 undefined를 반환합니다. findIndex( ) 메서드는 주어진 판별 함수를 만족하는 첫 요소의 식별자(순서)를 반환하며, 없을 시 -1을 반환합니다. filter( ) 메서드는 주어진 함수의 조건을 만족하는 모든 요소를 모아 새로운 배열로 반환합니다. find( ) / findIndex( ) 메서드 find( ) 메서드는 indexOf( ) 메서드와 마찮가지로 배열값을 찾는 메서드입니다. 차이점은 find( ) 메서드는 인자로 받은 값이 아닌 인자로 받은 판별 함수를 만족하는 첫 배열값을 반환합니다. 또한 찾는 값이 없을 시 -1이 아닌 undefine.. 2022. 9. 27. 이전 1 2 3 4 5 ··· 12 다음
