05일차 프론트엔드 공부 - 기초 JS 2

 프론트엔드 공부 05일차 -

 

데이터 타입과 연산자

 

데이터 타입

String            “code”

Number         123

Boolean         true

Object            { }

Null                null

undefined      undefined

 

연산자

 

산술 연산자

+ : 더하기 - : 빼기 * : 곱하기 / : 나누기 % : 나머지

숫자 뿐만 아니라 문자열에도 사용 가능

ex) “포론트” + “엔드” = “프론트엔드

10 + ‘1’ = ‘101’

10 + ‘만원’ = ‘10만원’

10 - ‘1’ = 9

10 * ‘10’ = 100

자바스크립트는 유연성을 가지고 있어서 타입이 다른 데이터를 가지고 연산을 하면 자동으로 데이터 타입을 통일해서 연산해준다. 하지만 이러한 점이 오류를 유발시킬 수 있다.

 

비교 연산자 

< : 작은가, > : 큰가, <= : 작거나 같나, >= : 크거나 같나, === : 같은가, !== : 다른가

( <= 와 =< 는 다른 것을 의미한다. 순서가 중요)

 

엄격한 동치 연산자

A === B  A와 B가 같다면 True

A !== B  A와 B가 다르면 True

데이터 타입과 값까지 같아야 True

1 === “1”   : false

 

추상적 동치연산자(느슨한 동치연산자)

A == B   A와 B가 같다면 True

A != B     A와 B가 다르면 True

타입 비교 없이 값만 같으면 True

1 === “1”   : true

 

논리 연산자

and

&& : 양쪽이 모두 true여야 true

(true) && (true) = true

or

|| : 한쪽만 true여도 true

(false) || (true) = true

not

! : Boolean을 반전시킴

!(true) = false

 

조건문 

특정 조건을 만족하면 실행

 

컴퓨터가 조건에 맞는지 true와 false로 판단하여 판단을 기반으로 기반으로 각각 다른 명령을 실행할 수 있도록 하는것 -> 비교 연산자와 함께 쓰임

 

if(조건) {

A 실행

} else if(조건2) {

B 실행

} else if(조건3) {

C 실행

} else {

D실행

}

조건1이 맞다면 A 실행

아니면 조건2이 맞다면  B 실행

아니면 조건3이 맞다면  C 실행

모두 아니면 D 실행

if(A !== B) {

명령문1

} else if((C === D) && (E === F)) {

명령문2

} else {

명령문3

}

A와 B가 다르면 명령문1 실행

아니면 C와 D가 같고 E와 F가 같으면 명령문 2 실행

모두 아니면 명령문 3 실행

 

예시

비밀번호 === 비밀번호 확인 이 true 면 가입 성공

 

const password1 = “비밀번호”;

const password = “비밀번호확인”;

if (password1 === password2) {

alert(“회원가입을 축하합니다!”)

} else {

alert(“비밀번호가 다릅니다. 다시 한 번 확인해주세요.”)

}

 

// 데이터 타입, 연산자
1 + 1
// 2
1 + '만원'
// '1만원'
1 + '1'
// '11'
1 - '1'
// 0
'프론트' + '엔드'
// '프론트엔드'
'123' == 123
// true
'123' === 123
// false
true && true
// true
true && false
// false
true || false
// true
!false
// true
!true
// false


//조건문

if(1+1 === 2){
    console.log("정답입니다")
}else {
    console.log("틀렸습니다")
}
// VM255:2 정답입니다
// undefined
if(true){
    console.log("정답입니다")
}else {
    console.log("틀렸습니다")
}
// VM270:2 정답입니다
// undefined
if(!true){
    console.log("정답입니다")
}else {
    console.log("틀렸습니다")
}
// VM348:4 틀렸습니다
// undefined
if(0){
    console.log("정답입니다")
}else {
    console.log("틀렸습니다")
}
// VM356:4 틀렸습니다
// undefined
if(1){
    console.log("정답입니다")
}else {
    console.log("틀렸습니다")
}
// VM360:2 정답입니다
// undefined



const profile = {
    name : "철수",
    age : 12,
    school : "떡잎초"
}
// undefined
if(profile.age >= 20){
    console.log("성인입니다.")
}else if(8 <= profile.age <=19){
    console.log("학생입니다.")
}else {
    console.log("어린이입니다")
}
// VM810:4 학생입니다.

 

반복문 

같은 행위를 반복하는 것

작성 방법

for (초기식; 조건식; 증감문;){

반복해서 실행할 내용

}

 

for (let i =0; i<5; i=i+1){

console.log(“hello”)

}

-

for (i를 0부터 시작; i가 5보다 작을때까지; 한 번 반복할때마다 i에 1을 더함;) {

콘솔에 로그를 남김(“hello”)

}

 

for (let count =0; count<5; count++){

console.log(“hello”)

}

 

특정 조건 만족 시, 조건문을 통한 정상 종류 이전에도 종료(break) 가능

명령문을 실행하지 않고 다음 반복으로 건너뛰기(continue) 가능

수학 객체

자바스크립트의 수학 기능을 사용하는 명령어

 

최대값 구하기

Math.max(2, 1, 6)

최소값 구하기

Math.min(2, 1, 6)

0~1 랜덤 수 생성

Math.random()

반올림

Math.round(3.14)

올림

Math.ceil(3.14)

버림

Math.floor(3.14)

 

let persons = [
    {name : "철수", age : 17},
    {name : "짱구", age : 7},
    {name : "맹구", age : 5},
    {name : "오비", age : 27},
    {name : "민희", age : 57}
    ]
// undefined

for(let count = 0; count < persons.length; count++){
    if(persons[count].age >= 19){
        console.log(persons[count].name + "님은 성인입니다.")
    }else{
        console.log(persons[count].name + "님은 미성년자입니다.")
    }
}
    
// VM991:5 철수님은 미성년자입니다.
// VM991:5 짱구님은 미성년자입니다.
// VM991:5 맹구님은 미성년자입니다.
// VM991:3 오비님은 성인입니다.
// VM991:3 민희님은 성인입니다.



const fruits = [
    {number: 1, title: "사과"},
    {number: 2, title: "귤"},
    {number: 3, title: "레몬"},
    {number: 4, title: "메론"},
    {number: 5, title: "수박"},
    {number: 6, title: "딸기"},
    {number: 7, title: "망고"},
    {number: 8, title: "한라봉"},
    {number: 9, title: "포도"},
    {number: 10, title: "천혜향"}
]
// undefined
for(let k = 0; k < fruits.length; k++) {
    console.log(fruits[k].number + " " + fruits[k].title)
}
// VM1418:2 1 사과
// VM1418:2 2 귤
// VM1418:2 3 레몬
// VM1418:2 4 메론
// VM1418:2 5 수박
// VM1418:2 6 딸기
// VM1418:2 7 망고
// VM1418:2 8 한라봉
// VM1418:2 9 포도
// VM1418:2 10 천혜향
// undefined

for(let k = 0; k < fruits.length; k++) {
    console.log(`${fruits[k].number} ${fruits[k].title}`)
}
// VM1449:2 1 사과
// VM1449:2 2 귤
// VM1449:2 3 레몬
// VM1449:2 4 메론
// VM1449:2 5 수박
// VM1449:2 6 딸기
// VM1449:2 7 망고
// VM1449:2 8 한라봉
// VM1449:2 9 포도
// VM1449:2 10 천혜향

 

예제) 인증번호 만들기

Math.floor(Math.random() * 1000000)
// 286338
String(Math.floor(Math.random() * 1000000))
// '918667'
String(Math.floor(Math.random() * 1000000))
// '584977'
String(Math.floor(Math.random() * 1000000))
// '96823'
String(Math.floor(Math.random() * 1000000)).padStart(6,"0")
// '142446'
String(Math.floor(Math.random() * 1000000)).padStart(6,"0")
// '044413'
String(Math.floor(Math.random() * 1000000)).padStart(6,"0")
// '147490'
let result = String(Math.floor(Math.random() * 1000000)).padStart(6,"0")
// undefined
result
// '053495'

.padStart(6,"0") 의미

문자열 앞에 원하는 문자를 채울때 사용

문자열을 6자리까지 채울 것이다. 만약 문자열이 6자리가 아니면 6자리가 될때까지 앞에 "0"을 붙인다.

 

DOM (Document Object Model)

웹브라우저가 정적인 웹페이지를 변경하거나 조작하기 위해 HTML 파일을 자바스크립트 객체로 만들어 주는 것

document.getElementById(“tagID”).InnerText

HTML파일에서.”tagID”라는 id를 가진 태그를 선택해서.제어한다

 

<!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 = "Hello World"
}

버튼 클릭 전

버튼 클릭 후