-
[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..
-
[알고리즘/자바스크립트] 배열에서 반대 방향 제거하기 (Directions Reduction)Algorithm 2019. 4. 9. 22:44
-해당 문제는 codewars사이트의 level5 문제입니다. (1~8단계 중 8단계가 가장 쉬운 레벨)- [문제] Once upon a time, on a way through the old wild west,… … a man was given directions to go from one point to another. The directions were "NORTH", "SOUTH", "WEST", "EAST". Clearly "NORTH" and "SOUTH" are opposite, "WEST" and "EAST" too. Going to one direction and coming back the opposite direction is a needless effort. Since this is..
-
[알고리즘/자바스크립트] 초를 시:분:초 형태로 변환하기 (Human Readable Time)Algorithm 2019. 4. 5. 22:38
-해당 문제는 codewars사이트의 level5 문제입니다. (1~8단계 중 8단계가 가장 쉬운 레벨)- [문제] Write a function, which takes a non-negative integer (seconds) as input and returns the time in a human-readable format (HH:MM:SS) HH = hours, padded to 2 digits, range: 00 - 99 MM = minutes, padded to 2 digits, range: 00 - 59 SS = seconds, padded to 2 digits, range: 00 - 59 The maximum time never exceeds 359999 (99:59:59) You can ..
-
[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..
-
[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데이터의 값들이 셀렉트 태그의 옵션으로 추가되어야 한다.'복숭아 선택' 버튼을 클릭하면 복숭아가 선택되어야한다.'과일 옵션 삭제' 버튼을 클릭..
-
[JS/DOM] 바닐라 자바스크립트로 테이블 행 삭제 버튼 구현하기Frontend 2019. 3. 24. 12:40
No. Contents Delete 1 내용1 Delete 2 내용1 Delete 3 내용1 Delete 4 내용1 Delete 5 내용1 Delete 위와 같은 테이블을 만든 후 Delete버튼 클릭했을 때 해당 행만 삭제하는 간단한 기능을 제이쿼리를 사용하지 않고 순수 자바스크립트로 구현해보려고 한다. 1. 먼저 html과 css 코드는 다음과 같다. No. Contents Delete 1 내용1 Delete 2 내용1 Delete 3 내용1 Delete 4 내용1 Delete 5 내용1 Delete 2. 이벤트를 걸 대상인 버튼의 dom을 선택한다. var eventTarget = document.getElementsByClassName('btn_delete')문제는 btn_delete라는 클래스를..