-
[알고리즘/자바스크립트] 트리보나치, 피보나치 수열 "재귀함수"로 구하기 (Fibonacci, Tribonacci Sequence)Algorithm 2019. 4. 15. 00:28
[알고리즘/자바스크립트] 트리보나치 수열 구하기 (Tribonacci Sequence) -해당 문제는 codewars사이트의 level6 문제입니다. (1~8단계 중 8단계가 가장 쉬운 레벨)- [문제] Well met with Fibonacci bigger brother, AKA Tribonacci. As the name may already reveal, it works basicall.. im-developer.tistory.com 2개월 전에 풀었던 알고리즘 문제를 "재귀함수"를 이용해서 풀어보았다. 지난번에는 위 링크를 보면 알겠지만 function tribonacci (signature, n) { if(n
-
[JS] 자바스크립트, 가장 기초적인 조건문 정리 (if문/if-else문/삼항연산자/switch문)Frontend 2019. 4. 12. 22:34
1. if문 / if - else문 if(조건식) { // 조건식이 true인 경우 } else { // 조건식이 false인 경우 } 조건식이 만족하면 바로 아래로, 조건문이 만족하지 않으면 else문으로 빠지는 형태이다. else문은 생략가능하다. 제일 많이 쓰고 가장 중요한 제어문 중에 하나이다. if-else문의 명령어가 한 줄이면 {}는 생략가능하다. if(조건식) //명령어 else //명령어 다음은 자바스크립트에서 false로 인식하는 값들이다. (이를 falsy한 값이라고 표현한다.) 0 "", '' (빈값) NaN undefined null 위 값들을 제외한 모든 값들은 다 true로 인식한다. (truthy한 값이라고 표현.) console.log(!!'hello'); 예를 들면 위 값..
-
[JS/연산자] 자바스크립트로 "나이 계산기 / 할인 가격 계산기" 구현해보기Frontend 2019. 4. 12. 00:18
# 나이 계산기 input박스에 태어난 연도를 입력하고 버튼을 클릭하면 아래에 나이가 출력된다. 입력하지 않고 버튼을 클릭했을 경우 "태어난 연도를 입력하세요" 문구 출력하고 input박스가 focus된다. dom, 연산자 연습 HTML: SUBMIT 당신의 나이는: SCRIPT: document.querySelector('#testAgeBtn').addEventListener('click', function() { var birthYear = document.querySelector('#testUserYear').value; if(! birthYear) { alert('태어난 연도를 입력하세요'); document.querySelector('#testUserYear').focus(); } else { ..
-
[JS] 자바스크립트, 연산자 정리 (산술/할당/비교/논리 연산자)Frontend 2019. 4. 11. 23:23
1. 기초 산술연산자 분류 연산자 이름 기호 설명 사칙 연산자 더하기 + 두 값을 더한다. 빼기 - 앞의 값에서 뒤의 값을 뺀다. 곱하기 * 두 값을 곱한다. 나누기 / 앞의 값을 뒤의 값으로 나눈다. 나머지 연산자 나머지 % 앞의 값을 뒤의 값으로 나눈 나머지 값 증감 연산자 증가 ++ 변수의 값을 1 증가 감소 -- 변수의 값을 1 감소 # 증감연산자의 위치 증감연산자가 피연산자 앞에 위치 ex) ++a 전체 수식 처리하기 전에 적용됨 증감연산자가 피연산자 뒤에 위치 ex) a++ 전체 수식의 처리가 끝난 뒤 적용됨 var a = 10; var b = a++ + 5; console.log(a, b);// a = 11, b = 15가 출력됨 var a = 10; var b = ++a + 5; conso..
-
[JS/DOM] 바닐라 자바스크립트로 스톱워치(STOP WATCH)구현하기Frontend 2019. 4. 4. 11:53
만드는데 거의 3일 정도 걸렸던 스톱워치이다.. 휴.. 처음 간단하게 시작 / 스톱 버튼을 만들었을 때는 그렇게 어렵지 않았다. 문제는 재시작, 기록, 리셋 등등의 기능을 넣으면서부터 꼬이기 시작하고 시간이 뒤죽박죽 난리가 나고..;; 일단 HTML태그는 다음과 같다. 00 : 00 . 00 START STOP 내가 최초로 생각한 방법은 자바스크립트의 Timestamp값을 이용하는 것이었다. 내가 생각한 스톱워치 알고리즘을 적어보면 다음과 같다. 시작 버튼을 누르는 순간에 변수A에 현재시간을 불러오고 그 시간을 timestamp값으로 저장한다. 그리고 시작 시점부터 1ms 마다 계속해서 현재시간의 timestamp값을 새로 불러와 B에 저장한다. B에서 A를 뺀 timestamp값을 분, 초, 밀리초로 ..
-
[JS/DOM] 바닐라 자바스크립트로 전자시계 구현하기 (날짜/시간 출력)Frontend 2019. 4. 2. 11:52
오늘은 간단하게 자바스크립트를 이용하여 시계를 만들어보려고 한다. 먼저 HTML과 CSS 코드는 다음과 같다. : . . . * { box-sizing: border-box; } .clock { width: 300px; height: 300px; margin: auto; padding-top: 75px; background: #000; text-align: center; } .clock .time_box { width: 100%; padding-left: 10px; } .clock span { color: #fff; } .txt_lg { font-size: 75px; } .txt_sm { font-size: 20px; } .date_box { font-size: 15px; } #day { display:..
-
[JS/DOM] 바닐라 자바스크립트로 Tab 탭 구현하기Frontend 2019. 4. 2. 10:04
1번 탭 2번 탭 3번 탭 Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american a..
-
[알고리즘/자바스크립트] 대문자 기준으로 글자 변환하기 (Convert PascalCase string into snake_case)Algorithm 2019. 4. 2. 00:21
-해당 문제는 codewars사이트의 level5 문제입니다. (1~8단계 중 8단계가 가장 쉬운 레벨)- [문제] Complete the function/method so that it takes CamelCase string and returns the string in snake_case notation. Lowercase characters can be numbers. If method gets number, it should return string. // returns test_controller toUnderscore('TestController'); // returns movies_and_books toUnderscore('MoviesAndBooks'); // returns app7_tes..
-
[CSS] :before, :after에 counter()를 사용하여 숫자 리스트 표현하기Frontend 2019. 3. 24. 17:58
위와 같은 리스트를 html, css로 표현할 때,실제 태그에 숫자를 적지 않고 가상클래스에 counter()를 사용하여 표현할 수 있다. 1. counter-reset : 카운터이름 시작숫자 /* Set "my-counter" to 0 */ counter-reset: my-counter; /* Set "my-counter" to -1 */ counter-reset: my-counter -1; /* Set "counter1" to 1, and "counter2" to 4 */ counter-reset: counter1 1 counter2 4; /* Cancel any reset that could have been set in less specific rules */ counter-reset: none;..
-
[JS/DOM] 바닐라 자바스크립트로 select태그 option 동적으로 생성, 삭제하기 / 특정 옵션 선택하기Frontend 2019. 3. 24. 14:12
선택하세요. 과일 옵션 추가 복숭아 선택 과일 옵션 삭제 마지막 과일 옵션 삭제 위와 같이 셀렉트박스와 버튼들을 만든 후,제이쿼리를 사용하지 않고 순수 자바스크립트로셀렉트 태그를 동적으로 제어하는 것을 연습해보려고 한다. var fruitList = [ { oKey: 'banana', oVal: '바나나' }, { oKey: 'apple', oVal: '사과' }, { oKey: 'peach', oVal: '복숭아' }, { oKey: 'orange', oVal: '오렌지' } ] 먼저 위와 같은 객체 데이터가 있다. '과일 옵션 추가' 버튼을 클릭하면 위 json데이터의 값들이 셀렉트 태그의 옵션으로 추가되어야 한다.'복숭아 선택' 버튼을 클릭하면 복숭아가 선택되어야한다.'과일 옵션 삭제' 버튼을 클릭..