이레

setInterval() 을 이용해 카운트다운 타이머를 만들어 봅니다. 조건) ⭐️ 시간, 분, 초 를 입력할 수 있어야 합니다. ⭐️ start, stop, reset 버튼이 있어야 합니다. ⭐️ 각 버튼이 맞게 동작해야합니다. ⭐️ 카운트다운이 시작되면 시간 수정이 불가능합니다. ( 정지하거나 리셋하면 수정 가능) 목표는 기능이 잘 돌아가게끔 하는 거라 형태와 스타일은 간단히 작성합니다. : : START STOP RESET .wrap {padding-top:100px;} .timer {display:flex;align-items:center;justify-content:center;} input {width:150px;height:150px;background-color:#4c6ef5;border-..

자바스크립트 배열 데이터를 추가, 삭제하는 방법입니다. ⭐️ 배열 추가 1) push() - 배열 마지막에 요소 추가 var arr = ['가', '나', '다']; arr.push('라'); console.log(arr); //결과 ['가', '나', '다', '라'] 2) unshift() - 배열 첫 번째에 요소 추가 var arr = ['가', '나', '다']; arr.unshift('라'); console.log(arr); //결과 [ '라','가', '나', '다'] 3) splice() - 기존 배열을 삭제 또는 교체, 새 요소 추가 splice(n, n2, 요소) n은 추가, 제거할 배열의 요소 위치를 정합니다. n2는 제거할 배열의 요소 개수를 정합니다. 밑에 예시를 보면 1번째 요소에..

strict 모드란 ES5에 추가된 키워드입니다. 자바스크립트를 엄격하게 문법검사 하겠다는 의미입니다. ⭐️ strict 모드 선언하기 "use strict"; 스크립트 최상단 또는 함수 본문 앞에 작성해 줍니다. 함수 앞에 사용할 경우 해당 함수만 엄격모드로 실행됩니다. ⭐️ strict 모드 - 코드의 문제를 더 빨리 알리고 디버깅이 쉬워집니다. - strict 모드의 코드는 비 strict 모드 코드보다 빠르게 수행될 수 있습니다. - 발생 가능한 에러를 예방합니다.

Javascript의 배열 속에 특정 문자열을 포함하는지 체크하는 함수입니다. ✨ 문법 string.includes(찾고싶은 문자, length) 찾고싶은 문자 : 검색할 문자열, 필수 값, 대소문자를 꼭 구분해야 합니다. length : 검색을 시작할 위치를 지정해 줍니다. 필수 값이 아니므로 값이 없으면 전체 문자열이 대상이 됩니다. ✨ 예제 'abcde'.includes('c') //abcde에 c를 포함하는지 검사합니다. c를 포함하면 true 반환 'abcdef'.includes('c', 2) //2째 위치 (0부터 시작)인 cdef에 c를 포함하는지 검사합니다. c를 포함하면 true 반환 'ABcdef'.includes('b') //대소문자를 구분해야 하므로, b가 포함되어있지 않습니다. f..

자바스크립트의 삼항 연산자에 대해 알아보겠습니다. if 문을 간략하게 표현할 때 사용합니다. 참, 거짓 중 하나를 선택할 수 있는 조건문으로 '조건 연산자'라고도 합니다. ✨ 삼항 연산자 표현법 (조건) ? value1 : value2 조건이 참인 경우 첫번째 value1이 실행되고 거짓인경우 마지막 value2가 실행됩니다. ✨ 삼항 연산자 예시 //if문 사용 if(a > b){ c = "hi"; }else{ c = "bye"; } //삼항연산자 사용 (a > b) ? c = "hi" : c = "bye";

자바스크립트에서 연산자는 계산을 돕는 기호를 의미합니다. ✨ 산술 연산자 (Arithmetic Operators) 수식을 계산하도록 도와주는 연산자입니다. 사칙연산과 나머지, 증가, 감소 연산이 있습니다. 연산자 이름 사용법 + 덧셈 a + b - 뺄셈 a - b * 곱셈 a * b / 나누기 (몫) a / b % 나누기 (나머지) a % b ++ 증가 ( +1) a++ -- 감소 ( -1) a-- ✨ 대입 연산자 연산자 이름 사용법 a = b 할당 a = b a += b 더하고 할당 a= a + b a -= b 빼고 할당 a = a - b a *= b 곱하고 할당 a = a * b a /= b 나누고 할당 a = a / b a %= b 나눈 나머지 할당 a= a % b ✨ 비교 연산자 (Comparis..

데이터를 입력 후 엔터키를 이용해 처리하는 방법입니다. 엔터키의 키 코드를 알고 있어야 하는데, 엔터의 키 코드는 13입니다. 버튼에 적용하는게 아닌 input 태그에 onkeyup으로 적용시켜줍니다. function fnEnterkey() { if (window.event.keyCode == 13) { //엔터키로 실행시킬 기능작성 } }

이중 for문을 통해 2단에서 9단을 출력합니다. 첫 번째 for 문에서는 단을 나타내는 변수 i를 설정하고 두 번째 for문에서는 곱해질 수의 변수 j를 설정합니다. 태그를 통해 줄 바꿈을 해줍니다. See the Pen Untitled by jh-baek-95 (@jh-baek-95) on CodePen.

클로저 함수란? 함수 내부에 만든 지역변수가 사라지지 않고 계속해서 값을 유지하고 있는 상태를 말합니다. 클로저 함수는 일종의 '현상' 이기 때문에 정해진 규칙은 없습니다. ⭐️ 예제 function basic(){ var count = 0; count++; return count; }; document.write(basic()+' '); //출력값 : 1 function closure(){ var count = 0; function countSample(){ count++; return count; } return countSample; } var counter = closure(); document.write('1, count' + counter(),' '); document.write('2, cou..

콜백 함수란? 함수 내부의 처리 결과값을 함수 외부로 내보낼 때 사용합니다. 처음 공부할 때 굉장히 헷갈렸던 부분이어서 차근차근 정리하겠습니다. ⭐️ 동기 , 비동기 동기 : 말 그대로 '동시에' 일어난다는 뜻입니다. 이벤트가 동시에 일어나야 하기 때문에, 요청을 한다면 시간이 얼마나 걸리든 결과가 같이 나와야 합니다. ex) alert() 함수 / alert 함수는 메시지 창의 확인 버튼을 눌러야 다음 이벤트가 진행됩니다. 비동기 : 동시에 일어나지 '않는다' 이벤트가 동시에 일어나지 않기 때문에, 1번 요청을 하고 1번 결과가 나오기 전에 2,3,4.. 요청들을 처리합니다. ex) setInterval() , ajax() 콜백 함수가 주로 비동기 함수의 결과값을 처리하기 위한 도구로 많이 사용됩니다...