Ch3. 프로그래밍 시작하기 in JavaScript
1️⃣ 자바스크립트 첫 걸음
01. 자바스크립트 소개
→ 웹사이트를 만들고 싶다면 반드시 배워야 하는 프로그래밍 언어
- web 개발 및 다양한 분야에도 사용
02. 첫 번째 자바스크립트 코드
→ console.log(15)
03. 자바스크립트 프로그래밍 도구들
→ VSCode 사용
2️⃣ 프로그래밍 기본 개념
01. 세미콜론 (;)
→ 문장을 종료하는 방법
- 자바스크립트의 경우 줄 바꿈일 때 자동으로 세미콜론 처리를 해줌 (같은 줄에서는 사용하여 구분)
- 문장 끝에 반드시 사용
02. 코멘트
→ 주석
- 필요한만큼만 간결하게 사용
- 어떤 의도로 코드가 작성 되었는지 설명할 때
- 구현한 코드가 어떤 동작을 하는지 기록할 때
console.log(10 + 5); // 15를 출력하는 코드입니다.console.log(10 + 5); /* 15를 출력하는 코드입니다. */
03. 자료형 개요
- 프로그래밍이란?
- 컴퓨터를 통해 복잡한 계산을 하는 것
→ 자료형 (Data Type)
- 숫자 (Number)
- 정수 (Integer)
- 소수 (floating point)
- 문자열 (String) : 양 끝의 따옴표를 통일하여 사용
- ex. “Hello” + “Codeit” → HelloCodeit
- 불린 (Boolean)
- true & false : 어떤 조건에 의한 결과값
04. 추상화 개요
→ 추상화(Abstraction) : 구체적인 정보에서 꼭 필요한 핵심만 뽑아내는 것
ex. 지도
- 복잡한 것들을 목적에 맞게 단순화하는 것
- 목적을 명확히
- 불필요한 것들은 숨기기
- 핵심만 드러내기
05. 변수 (Variable)
→ 변수를 먼저 선언 / 값을 저장하는 것
let 변수명;
06. 작명 가이드
Rules
(1) JavaScript 식별자는 '문자(a-z, A-Z)', '밑줄(_)' 혹은 '달러 기호($)'로 시작해야 합니다. 두 번째 글자부터는 '숫자(0-9)'도 가능합니다.
(2) '대문자'와 '소문자'는 구별합니다. myname과 myName은 다른 이름입니다.
(3) '예약어(JavaScript가 찜해놓은 단어)'는 사용하면 안 됩니다. 예를 들어서 if, for, let 같은 것들이 있습니다. 강의를 듣다 보면 어떤 예약어가 있는지 차차 알게 되실 겁니다.
Recommend
(1) 의미 없는 이름은 좋지 않습니다.
(2) 너무 추상적인 이름은 좋지 않습니다.
(3) 모든 변수 이름은 'camelCase'로 쓰는 것이 좋습니다.
→ camelCase : 첫 번째 글자는 소문자로 하고, 띄어쓰기가 있는 각 단어의 첫 문자를 대문자로 표기하는 방식
07. 칼로리 계산기
- 실습 코드
// 여기에 코드를 작성하세요 let espresso = 10; let milk = 170; let chocolateSyrup = 50; let whippedCream = 60; // 메뉴별 칼로리 테스트 console.log(espresso); // 에스프레소 칼로리 console.log(espresso + milk); // 라떼 칼로리 console.log(espresso + chocolateSyrup + milk); // 모카 칼로리 console.log(espresso + chocolateSyrup + milk + whippedCream); // 모카(휘핑 추가) 칼로리
08. 함수
// 함수 선언
function 함수이름() {
명령;
명령;
};
// 함수 호출
함수이름();09. 자랑스러운 애국가
- 실습 코드
// 여기에 코드를 작성하세요 function printChorus() { console.log('무궁화 삼천리 화려 강산'); console.log('대한 사람 대한으로 길이 보전하세'); } // 애국가 가사 console.log('1절'); console.log('동해 물과 백두산이 마르고 닳도록'); console.log('하느님이 보우하사 우리나라 만세'); printChorus(); console.log('2절'); console.log('남산 위에 저 소나무 철갑을 두른 듯'); console.log('바람서리 불변함은 우리 기상일세'); printChorus(); console.log('3절'); console.log('가을 하늘 공활한데 높고 구름 없이'); console.log('밝은 달은 우리 가슴 일편단심일세'); printChorus(); console.log('4절'); console.log('이 기상과 이 맘으로 충성을 다하여'); console.log('괴로우나 즐거우나 나라 사랑하세'); printChorus();
10. 파라미터
→ Parameter (매개변수)
// 함수 선언
function 함수이름(파라미터) {
console.log(파라미터);
};
// 함수 호출
함수이름(값);11. 내 노트북 용량은?
- 실습 코드
// 여기에 코드를 작성하세요 function teraToGiga(data) { let resultGiga = data * 1024; console.log('2TB는'); console.log(resultGiga + 'GB 입니다.'); } function teraToMega(data) { let resultMega = data * 1024 * 1024; console.log('2TB는'); console.log(resultMega + 'MB 입니다.'); } // TB -> GB 테스트 teraToGiga(2); // TB -> MB 테스트 teraToMega(2);
12. 여러 개의 파라미터
// 함수 선언
function 함수이름(파라미터, 파라미터2) {
console.log(파라미터 + 파라미터2);
};
// 함수 호출
함수이름(값, 값2);13. 나의 체질량지수는?
- 실습 코드
// 여기에 코드를 작성하세요 function bmiCalculator(name, weight, height) { let bmi = weight / (height * height / 10000); console.log(name + '님의 체질량지수는 ' + bmi + '입니다.'); } // 테스트 코드 bmiCalculator('홀쭉이', 43.52, 160); bmiCalculator('코린이', 61.25, 175); bmiCalculator('통통이', 77.76, 180);
14. return문
Input → 정해진 일(함수 function) → Output (return - 반환 값)
// 함수 선언
function 함수이름() {
return 값;
};
// 함수 호출
console.log(함수이름());15. 1년 뒤엔 얼마를 받을까?
- 실습 코드
// 여기에 코드를 작성하세요 function interestCalculator(amount, term, rate) { return amount * term * rate / 100; } // 조건 입력 테스트 let myMoney = 3650000; // 맡긴 금액 (원) let saveTerm = 1; // 맡기는 기간 (년) let interestRate = 4; // 이자율 (%) // 수령액 계산 테스트 let myInterest = interestCalculator(myMoney, saveTerm, interestRate); let totalMoney = myMoney + myInterest; // 출력 테스트 console.log('맡긴 금액은 ' + myMoney + '원 입니다.'); console.log('이자는 ' + myInterest + '원 입니다.'); console.log('최종 받을 금액은 ' + totalMoney + '원 입니다.');
