오늘 배운 것
1. Javascript
- 데이터 타입과 연산자
- 조건문
- 반복문
- 수학 객체
- Dom
1. 데이터 타입과 연산자
데이터 타입
- 문자 : 영문과 한글. 따옴표로 감싸야 한다
- 숫자
- boolean : true, false
- 객체 { } : 객체도 데이터 타입이다. (배열은 객체의 한 종류)
- Null : 값이 없는 경우. 의도하여 없는 값을 직접 입력한 상태
- undefined : 정의되지 않은 경우. 의도치 않게 값이 없음을 알려주는 상태
연산자
+, -, *(곱하기), /(나누기), %(나머지)
문자열끼리 더할 수 도 있다.
예) "우리" + "나라" = "우리나라"
📌 주의 : 숫자 + 문자 -> 문자열로 더해진다.
1) 비교 연산자
부등호 순서 (>=, <=)에 유의해야 한다.
- === 등호
- !== 부등호
엄격한 동치 연산자 (===) : 데이터 타입과 값까지 같아야 true
느슨한 동치 연산자 (==) : 문자열과 숫자열 타입 비교 없이 값만 같으면 true
📌 느슨한 동치 연산자는 로직 구성시 안정성이 떨어지므로 항상 엄격한 동치 연산자를 사용하는 것이 좋다.
2) 논리 연산자
- && : and연산자. 양쪽이 모두 true여야 true를 반환한다.
- || : or 연산자. 한쪽만 true여도 true를 반환한다.
- ! : not 연산자. Boolean을 반전시킨다.
2. 조건문
조건문은 특정 조건을 만족하면 실행하는 명령어이며, 시작점과 끝점이 존재한다.
컴퓨터가 조건에 맞는지 true와 false로 판단하여 판단을 기반으로 각각 다른 명령을 실행할 수 있도록 해주며, 이를 위해 항상 비교 연산자와 함께 쓰인다.
조건이 맞다면 A 실행(시작점), 아니라면 D실행 (끝점)한다. 조건의 갯수는 상관없다.
if(조건) {
A실행
} else if(조건2) {
B실행
} else if(조건3) {
C실행
} else {
D실행
}📌 자바스크립트에서 숫자 0은 false로 간주된다. (거짓같은 값)
3. 반복문
같은 행위를 반복할 때 반복문을 사용해준다. 핵심은 몇 번 반복할 것인가 설정해주는 것으로, 반복 종료를 잘못 설정할 경우 무한루프에 걸려 서버가 다운될 수도 있으므로 유의한다.
반복문 작성 방법
for (초기식; 조건식; 증감문) {
반복해서 실행할 내용
}
for (let i = 0; i < 5; i=i+1) { // i++ 1씩 증가 / i-- 1씩 감소
console.log("hello")
}📌 const는 재할당이 불가능하여 반복문에서 사용하면 안된다.
특정 조건 만족시, 정상 종료 이전에도 종료(break)가능하고, 명령문을 실행하지 않고 다음 반복문으로 건너뛰기(continue) 가능하다.
const children = ["철수", "영희", "훈이"]
for (let i = 0; i < children.length; i++) { // 배열.length로 반복조건을 정함
console.log(children[i] + "입니다")
}4. 수학 객체
수학 객체는 자바스크립트안에 미리 내장되어 있는 메소드 및 함수이며, 수학기능을 사용하는 명령이다.
- Math.max() : 최대값 구하기
- Math.min() : 최소값 구하기
- Math.random() : 0~1 랜덤 수 생성
- Math.round() : 반올림
- Math.ceil() : 올림
- Math.floor() : 버림
5. DOM (Document Object Model)
DOM을 통해 Javascript에서 직접 구현한 기능을 제어하고, Html를 읽어올 수 있다.
예시)
document.getElementById("tagID").InnerText
// HTML 파일에서 "tagID"라는 id를 가진 태그를 선택해서 제어한다.- .InnerText : 사용자에게 보여지는 텍스트를 가져온다. (공백은 한번만, 숨겨진 태그 포함x)
- .TextContent : 텍스트 값을 그대로 가져온다. (공백, 숨겨진 태그 포함)
- .innerHTML : HTML 태그와 내용 자체를 가져온다.
- .value : input태그와 같은 종료태그가 없는 태그의 내용을 가져온다.
- .style : css 스타일을 바꿀때 사용한다.
📌 input : 종료 태그가 없으므로 .value를 사용해야 한다.
오늘의 회고
중요하다고 생각되는 조건문과 반복문을 배웠다.
자바스크립트 연습문제를 풀면서 적용시키려고 하는데 연습문제가 점점 어려워져서 힘들다..
오늘 안에 끝까지 풀어서 제출하기를 목표로 삼고 문제를 고민해봐야겠다. (끝까지 풀어서 제출했다!)
싸이월드 홈페이지 만들기 실습은 html과 css가 점점 익숙해져서 그런가 수월하게 할 수 있었다.
flex에 대한 개념은 완벽하진 않더라도 익숙해진것 같아 뿌듯하다.
