📒 목차
- 데이터 타입
- 산술연산자
- 비교연산자
- 논리연산자
- 조건문
- 반복문
- falsy 거짓같은값
- 수학객체 Math
- DOM (Document Object Model)
- 백틱
- padStart(6 ,”0” )
- onclick
- getElementById(”id 이름”)
- innerText
📌 오늘의 생각
오늘부터 조금씩 공부량이 늘어가기 시작했다. 여러 개념들을 한번에 학습하다보니 조금씩 버거운 느낌도 있었지만 끝까지 포기하지 않고 복습을 완료한 나 스스로가 대견한 하루였다. 오늘 가장 큰 깨달음은 앞으로 개발자로서 내가 원하는 결과를 얻기 위해서는 복습이 가장 중요하다는 것이다.
JavaScript
1️⃣ 데이터 타입
✅ 데이터 타입의 종류
1. 문자열 (String)
- “ ” or ‘ ’ 안에 적어주며, 둘 중 어느 것을 사용해도 무관하다
- 따옴표 안의 값들은 숫자여도 문자로 취급된다
2. 숫자 (Number)
- 모든 숫자를 실수로 처리한다
- 따옴표 없이 사용해야한다
3. 불린 (Boolean)
- true (참) / false (거짓)으로 나타낸다
4. undefined
- 변수 선언은 했지만 값이 할당되지 않은 상태
4. null
- 의도적으로 값이 없다는 것을 나타내는 값
4. 객체 (Object)
- 배열도 객체의 한 종류이다
✅ 데이터 타입 확인하기
typeof
- 자료형을 확인 할 수 있다
typeof 1 'number' ---------------- typeof "3" 'string' ---------------- typeof true 'boolean'
✅ 데이터 타입 변경하기
Number()
- 자료형 숫자로 변경
String()
- 자료형 문자열로 변경
Number("1") // 문자열 1 -> 숫자 1 변경 1 ----------------------------------- String(35) // 숫자 35 -> 문자열 35 변경 '35'
2️⃣ 산술 연산자
- 연산하는 기호이다
- ❗ 문자타입 더하기는 문자열을 이어 붙이는 역할로 사용된다
더하기 (+)빼기 (-)곱하기 (*)나누기 (/)나머지 (%)
숫자 + 숫자
100 + 30 // 140
문자 + 문자
"100" + "30" // "10030"
숫자 + 문자
100 + "가나다" // "100가나다" ------------ 100 + "1" // "1001"
3️⃣ 비교 연산자
- 좌우 두 값을 비교할 때 사용한다
- Boolean 값을 반환한다 (true or false)
✅ 엄격한 연산자 vs 느슨한 연산자
엄격한 연산자
- 자료형, 값 모두 같아야(달라야) 참
느슨한 연산자
- 자료형 비교 없이 값만 같거나(다르면) 참
- ❗실무에서는 안정성이 떨어지기 때문에 엄격한 연산자 주로 사용!
==="123" === 123; // false
=="123" == 123; // true
4️⃣ 논리 연산자
&&
- AND (그리고)
- 좌우 모두 참이어야 참
||
- OR (또는)
- 좌우 한가지만 참이어도 참
!
- NOT (부정)
- true → false
- false → true
true && true; // true // true && false; // false // false || true; // true // !false; // true // !true; // false
5️⃣ 조건문 (if...else)
- 참일 때, 명령문 실행
- 거짓일 때, else문 실행
- 조건에는 비교연산자 사용
- else if 문은 중첩될 수 있다. 즉, 여러개의 else if 가 있어도 무방
- ❗조건문 안의 조건의 범위는 점점 좁아져야 한다
if (1 + 1 === 2) { console.log("정답입니다"); } else { console.log("틀렸습니다"); } // 2 정답입니다 // if (true) { console.log("정답입니다"); } else { console.log("틀렸습니다"); } // 2 정답입니다 // if (!true) { console.log("정답입니다"); } else { console.log("틀렸습니다"); } // 4 틀렸습니다 // if (0) { console.log("정답입니다"); } else { console.log("틀렸습니다"); } // 4 틀렸습니다const profile = { name: "철수", age: 12, school: "다람쥐초등학교", }; // if (profile.age >= 20) { console.log("성인입니다"); } else if (profile.age >= 8) { console.log("학생입니다"); } else if (profile.age > 0) { console.log("어린이입니다"); } else { console.log("잘못 입력하셨습니다"); } // 학생입니다
6️⃣ 반복문 (for)
- 초기식
- 변수의 선언let 변수명 = 시작번호
- 조건식
- 반복 할 조건 - 증감식
- 변수의 증가 또는 감소변수명++/변수명--
// for문 // for( 초기식; 조건식; 증감식 ){ // 반복해서 실행할 코드 } //----------------------------------------------------- let persons = [ { name: "철수", age: 17 }, { name: "영희", age: 22 }, { name: "도우너", age: 5 }, { name: "그루트", age: 65 }, { name: "도비", age: 3 }, ]; // for (let i = 0; i < persons.length; i++) { if (persons[i].age >= 19) { console.log("성인입니다"); } else if (persons[i].age > 0) { console.log("미성년자입니다"); } else { console.log("잘못 입력하셨습니다"); } } // 미성년자입니다 // 성인입니다 // 미성년자입니다 // 성인입니다 // 미성년자입니다 // for (let i = 0; i < persons.length; i++) { if (persons[i].age >= 19) { console.log(persons[i].name + "님은 성인입니다"); } else if (persons[i].age > 0) { console.log(persons[i].name + "님은 미성년자입니다"); } else { console.log("잘못 입력하셨습니다"); } } // 철수님은 미성년자입니다 // 영희님은 성인입니다 // 도우너님은 미성년자입니다 // 그루트님은 성인입니다 // 도비님은 미성년자입니다 // //----------------------------------------------------- // const korean = [ { num: 1, tit: "가" }, { num: 2, tit: "나" }, { num: 3, tit: "다" }, { num: 4, tit: "라" }, { num: 5, tit: "마" }, { num: 6, tit: "바" }, { num: 7, tit: "사" }, { num: 8, tit: "아" }, { num: 9, tit: "자" }, { num: 10, tit: "차" }, ]; // for (i = 0; i < korean.length; i++) { console.log(korean[i].num + " " + korean[i].tit); } // 1 가 // 2 나 // 3 다 // 4 라 // 5 마 // 6 바 // 7 사 // 8 아 // 9 자 // 10 차 const korean2 = [ { num: 1, tit: "가" }, { num: 2, tit: "나" }, { num: 3, tit: "다" }, { num: 4, tit: "라" }, { num: 5, tit: "마" }, { num: 6, tit: "바" }, { num: 7, tit: "사" }, { num: 8, tit: "아" }, { num: 9, tit: "자" }, { num: 10, tit: "차" }, ]; // for (i = 0; i < korean2.length; i++) { console.log(`${korean2[i].num} ${korean2[i].tit}`); } // 1 가 // 2 나 // 3 다 // 4 라 // 5 마 // 6 바 // 7 사 // 8 아 // 9 자 // 10 차
7️⃣ falsy 거짓같은값
- boolean 문맥에서 거짓으로 작동
8️⃣ 수학객체 Math
- 수학과 관련된 작업을 할 수 있다
최대값 구하기
Math.max()
최소값 구하기
Math.min()
0~1 랜덤 수 생성
Math.random()
반올림
Math.round(2.12)
올림
Math.ceil(2.12)
버림
Math.floor(2.12)
// 최대값 Math.max(4, 29, 1, 12) // 29 // // 최소값 Math.min(4, 29, 1, 12) // 1 // //랜덤 Math.random() // 0.822...(0 ~ 1 까지의 임의의 수 // // 반올림 Math.round(2.712) // 3 // // 올림 Math.ceil(4.1) // 5 // // 버림 Math.floor(12.8) // 12 // Math.sqrt(2) // 1.414...
9️⃣ DOM (Document Object Model)
- javascript로 HTML 조작하는 것
<!DOCTYPE html> <html lang="ko"> <head> <title>Document</title> <script src="04-document.js"></script> </head> <body> <div id="target">Hello</div> <button onclick="greeting()">button</button> <input id="input" /> </body> </html>function greeting() { document.getElementById("target").innerText = "World"; document.getElementById("input").value = "World"; }
🔟 백틱 (`${} ${} `)
- 변수와 문자가 혼재할 때 유용하다
console.log(`${korean2[i].num} ${korean2[i].tit}`);
1️⃣1️⃣ padStart(6 ,”0” )
- (6자리 숫자가 되지 않으면, 앞에서부터 0을 채워라)
String(Math.floor(Math.random() * 1000000)) .padStart(6, "0");
1️⃣2️⃣ onclick()
- 버튼 눌린경우 이벤트 작동한다
onclick = "함수명()”
<button onclick="greeting()">button</button> // 버튼이 눌린 경우 greeting() 함수 실행 // 함수는 () 붙여야 한다
1️⃣3️⃣ getElementById(”id 이름”)
- html 파일의 id 선택하기
document.getElementById("target") // id = target인 태그 선택하기
1️⃣4️⃣ innerText
- 해당 태그 내부에 텍스트 넣기
document.getElementById("target").innerText = "World"; // id가 target인 태그에 "World" 텍스트 넣기
