오늘의 개발
[JavaScript] 자바스크립트의 조건문(if문, switch문)
조건문이란? 조건문(conditional statement)이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문이다. 자바스크립트에서 사용할 수 있는 조건문의 형태는 다음과 같다. if 문 if / else 문 if / else if / else 문 switch 문 1. if 문 if (표현식) { 표현식의 결과가 참일 때 실행하고자 하는 실행문; } 표현식의 결과가 참(true)이면 주어진 실행문 실행, 거짓(false)이면 아무것도 실행하지 않는다. 실행문이 1줄 뿐이라면 중괄호를 생략할 수 있다. 2. if / else 문 if (표현식) { 표현식의 결과가 참일 때 실행하고자 하는 실행문; } else { 표현식의 결과가 거짓일 때 실행하고자 하는 실행문; }..
[TIL] JS 학점 계산기, 종합소득세 계산기, 구구단 게임
✍ Today I Learned [학점 계산기] 만들면서 느낀 점 toFixed()는 반환되는 값의 데이터 타입이 문자열이다. switch문은 조건에 범위를 설정할 수 없다. 대신 10의 자리만 비교하면 되는 학점 계산기 같은 경우 key 값을 10으로 나눠 1의 자리로 만들고 각 case에 배치하면 적용 가능! 변수에 값을 할당하고 다른 함수로 전달할 때는 파라미터를 이용해야 한다. 아니면 객체에 데이터를 저장하고 출력 함수에서 접근하는 방법도 있다. switch문을 사용할 때에는 default 예외처리를 잘해두는 게 좋다. [종합소득세 계산기] 만들면서 느낀 점 html에서 받아오는 데이터는 전부 string이라는 거 잊지 말기!!!!! 나는 코딩이 아니라 산수를 못하는 게 아닐까? 함수의 상관관계를..
[JavaScript] 자바스크립트 숫자 메서드 총정리
Number.prototype 메서드 toString() - 숫자를 문자열로 반환 toFixed() - 지정된 소수 자릿수로 작성된 숫자를 문자열로 반환 toPrecision() - 지정된 길이로 작성된 숫자를 문자열로 반환 valueOf() - number 타입으로 반환 Number 메서드 Number() - 변수를 숫자로 반환 Number(true); // 1 Number(false); // 0 Number("10"); // 10 Number(" 10"); // 10 Number("10 "); // 10 Number(" 10 "); // 10 Number("10.33"); // 10.33 Number("10,33"); // NaN Number("10 33"); // NaN Number("John");..
[TIL] JS 업다운, 호칭, 가위바위보, 마지막일
✍ Today I Learned [Up Down Game] 만들면서 느낀 점 조건문을 실생활에도 도입해보자! 데이터를 가져올 땐 언제나 데이터 타입을 신경 써야 한다. 자바스크립트로 데이터를 받아올 때 value속성의 데이터는 모두 string으로 받아온다. 전역 변수는 초기화까지 세팅해주는 것이 좋다. 숫자로 연산할 거라면 0으로 세팅! 전역 변수는 최소한으로, 꼭 필요할 때만 사용한다. 조건절을 만들 때는 경우의 수를 잘 따져보자. input type number의 min, max 속성은 button이 submit 속성일 때만 작동한다. 함수는 기능적으로 분리해야 한다. [호칭 알려주기] 만들면서 느낀 점 조건절의 경우의 수 대분류부터 소분류로 잘 따져보자. 하나의 return에 여러 개의 값을 넘겨..
[TIL] JS 이미지 파일 판별, 숫자 객체&메서드
✍ Today I Learned 삼항 연산자 다시 짚고 넘어가기! // 조건항(true of false) ? true일 때 필요한 값이나 코드 : false 일 때 필요한 값이나 코드 let result = condition ? (when true) value or code : (when false) value or code; let rv = C ? T : F; 템플릿 리터럴은 백 틱(`)을 사용하여 문자열을 정의한다. ES6 기능으로 ${...} 안에 코드를 작성할 수 있다. 자바스크립트에서는 정수와 실수를 따로 구분하지 않고, 모든 수를 실수 하나로만 표현한다. + 연산자는 문자열에서는 연결자로, 숫자에서만 덧셈으로 작동한다. 숫자로 이루어진 문자열은 +연산을 제외한 다른 연산에서 숫자 타입으로 자동..
[JavaScript] 자바스크립트 문자열 메서드 총정리
문자열 길이 length - 문자열의 길이 반환 let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; let length = txt.length; // 26 문자열 부분 추출 문자열의 일부를 추출하고 새 문자열로 반환 slice(startIndex, endIndex) - 매개변수로 시작 위치와 끝 위치(포함 X)를 사용한다. 매개변수가 음수이면 문자열의 끝에서 시작한다. substring(startIndex, endIndex) - slice와 비슷하나, 매개변수로 음수는 사용할 수 없다. substr(startIndex, length) - slice와 비슷하나, 두 번째 매개변수는 추출할 부분의 길이를 지정한다. let str = "Apple, Banana, Kiwi"; let star..
[JavaScript] 자바스크립트의 이벤트(event)
이벤트란? 이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다. 이벤트 객체는 전역 객체로써 모든 태그에 객체를 참조시킬 수 있다. 이벤트 리스너(event listener) 이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 한다. 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다. 이벤트 리스너 등록 작성된 이벤트 리스너는 먼저 해당 객체나 요소에 등록되어야만 호출될 수 있다. 객체나 요소에 이벤트 리스너를 등록하는 방법은 다음과 같다. 이벤트..
[TIL] JS 이벤트, 문자열 메서드, 이미지 파일 판별
✍ Today I Learned html 태그에 속성으로 onclick을 사용할 수 있으나 이벤트 리스너의 등록 개수가 제한적이기 때문에 추천하는 방식은 아니다. let sbmBtn = document.getElementById('sbmBtn'); sbmBtn.addEventListener('click', saveList); // 이런 방식을 더 추천 객체는 순서가 중요하지 않다. 모든 함수에서 객체에 접근하려면 함수 밖에서 빈 객체를 선언 후 함수 안에서 객체에 값을 할당하면 된다! const me = {}; // 이렇게 빈 객체 선언 이벤트를 발생시킬 때 데이터를 받아오는 시점이 언제인지 주의해야 한다. 모든 코드에 정답은 없다! 효율성의 차이만 있을 뿐.. 문자열 데이터 타입은 시퀀스 특성이므로 순..