베이스캠프 3일차 _ 22년 12월 14일
학습 언어
HTML / CSS / JavaScript
학습 내용
HTML / CSS
싸이월드 만들기 3일차 진행
JavaScript
데이터 타입과 연산자
( 데이터 타입 / 산술 연산자 / 비교 연산자 / 논리 연산자 )
1) 데이터 타입 :
String (문자열) : “code”
Number (숫자) : 157
Boolean (참과 거짓) : true
Object (객체) : { }
Null (값이 없음) : null
undefined (정의되지 않음) : undefined
* 배열은 Object(객체) 의 종류
* Null / undefined / 0 의 정의는 모두 다름
- 0 : 0 이라는 값이 존재
- Null : 우리가 아무것도 없음을 직접 입력
- undefined : 컴퓨터가 값을 인식하지 못함
2) 산술 연산자 :
더하기 ( + ), 빼기 ( - ), 곱하기 ( * ), 나누기 ( / ), 나머지 ( % )와 같은 연산을 하는 기호를 의미합니다.
* 숫자와 문자열이 합쳐지면 문자열로 변경됨
* - 는 문자열과 숫자로 입력해도 연산이 가능함
3) 비교 연산자 :
좌우의 두 값을 비교해야 할 때 사용하는 연산자이며, Boolean을 반환합니다.
( ===, !==, <=, >=, >, <, ==, !=)
* 크거나 같다, 작거나 같다는 무조건 등호 먼저 사용 (>=, <=)
4) 논리 연산자 :
&& (and) : 양쪽 모두 true일경우 true
|| (or) : 한쪽만 true 여도 true
! (not) : Boolean을 반전 시킴
조건문 :
if (조건) {
console.log ( “ 조건 1에 만족합니다.” )
} else if (조건) {
console.log ( “ 조건 2에 만족합니다.”)
} else {
console.log ( “조건에 만족하지 않습니다” )
핵심 : 시작과 끝이 존재합니다.
*else if는 무한대로 사용 가능
*else 에는 조건이 없습니다.
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("잘못 입력하셨습니다")
}
// VM2754:10 학생입니다.
반복문 :
for (초기식; 조건식; 증감문) {
반복해서 실행할 내용
}
for (let i = 0; i < 5; i = i + 1 {
console.log( “hello” )
}
* 핵심 : 몇 번 반복할 것인가
* const 는 재할당이 불가능하므로 반드시 let이나 var로 선언해야합니다.
* 변수명은 자유롭게 설정할 수 있음
* i = i + 1 → i++특정 조건 만족시,
조건식을 통한 정상 종료 이전에도 종료(break) 가능
명령문을 실행하지 않고 다음 반복으로 건너뛰기(continue) 가능
* `${ }`
console.log (`문자열과 ${변수}를 혼합하여 작성 할 수 있습니다.`)
수학 객체 :
자바스크립트의 수학 기능을 사용하는 명령어
최대값 구하기 ( Math.max(2, 1, 6) )
최소값 구하기 ( Math.min(2, 1, 6) )
0~1 랜덤 수 생성 ( Math.random( ) )
반올림 ( Math.round(2.12) )
올림 ( Math.ceil(2.12) )
버림 ( Math.floor(2.12) )
6자리 랜덤 숫자 생성 코드
// 인증번호 랜덤 생성기
Math.floor( Math.random() * 1000000)
// 17259
String (Math.floor( Math.random() * 1000000))
// '43635'
String (Math.floor( Math.random() * 1000000)).padStart(6,"0")
// '096786'
let result = String (Math.floor( Math.random() * 1000000)).padStart(6,"0")
// undefined
result
// '095286'
result
// '095286'
result
// '095286'
* 마지막 3 코드의 숫자가 같은이유는 4일차 학습 예정
DOM (Document Object Model)
- JavaScript와 HTML 문서를 연결해주는 역할 (HTML, CSS의 제한된 기능을 보완해 줄 수 있음)
