[강의]Javascript - 형변환, 대화상자, 연산자, 숙제

이강민·2021년 12월 5일

[강의]Javascript

목록 보기

2/8

자바스크립트의 형변환

값의 타입을 변화시키는 것을 말한다.

자동 형변환(암시, 묵시적)

숫자 + 문자 = 문자열
그외 연산자는 계산됨
숫자 - "숫자문자" = 숫자(계산값)
숫자로 표현하지 못하면 NaN
숫자 - "문자" = NaN

NaN

정의되지 않은 값이나 표현할 수 없는 값
숫자로 변환할 수 없는 연산을 시도한 겨우
NaN === NaN(같은 NaN이라도 다른 계산에서 나온 NaN은 서로 같지 않다)

강제 형변환(명시적)

다음과 같은 함수들이 강제로 형을 변화시켜준다.

Number() : 문자를 숫자로 변환
String() : 숫자나 불린 등을 문자열형으로 변환
Object() : 모든 자료형을 객체로 변환
parseInt() : 문자열형을 정수(int)로 변환
parseFloat() : 문자열형을 실수(float)로 변환

대화 상자

앞에 붙은 window는 생략이 가능하다.

window.alert( )

사용자에게 간단한 메세지를 보여주고 확인을 기다린다.

window.confirm( )

사용자에게 간단한 메세지를 보여주고 확인이나 취소를 누르면 그 결과에 맞는 값을 반환(확인 : true / 취소 : false)
함수 사용부분 전부다 true, false 라는 값이다.

window.prompt( )

사용자에게 간단한 메시지를 보여주고 사용자가 입력한 문자열 값이 반환
함수 사용부분 전부다 사용자가 입력한 문자열 값이다.

let num1 =  prompt("첫 번째 숫자");
let num2 =  Number(prompt("두 번째 숫자"));
num1 = Number(num1)
document.write(`두 수의 합 : ${num1+num2}`);

연산자

기능이 있는 특수문자 또는 단어
함수들 키워드는 연산자가 아니다.

우선순위

한 문장 안에 다양한 연산자가 있을 때 먼저 연산하는 순위

최 우선 연산자
단 항 연산자
산 술 연산자
쉬 프트 연산자
관 계 연산자
논 리 연산자
삼 항 연산자
대 입 연산자

결합성

한 문장 안에 우선순위가 같은 연산자들이 있을 때 맞는 방향으로 결합되어 연산되는 성질
(1+2)+3+4
(3)+3+4
(6)+4
10

산술 연산자

% : 나머지 연산자
a%b : a를 b로 나눈 나머지
** : 제곱 연산자
a**b : a의 b제곱

비트 연산자

1 bit : 컴퓨터 용량의 최소 단위(0 또는 1이 담길 수 있는 공간)
1byte : 8bit / 데이터의 최소단위, 의미를 가지는 최소단위, 메모리의 최소단위
1KB : 1024byte(2의 10승)
1Mega : 1024KB
1Giga : 1024MB
1Tera : 1024GB
1Peta : 1024TB

17 > [1][0][0][0][1]
14 > [0][1][1][1][0]

AND(&) 논리곱 두 비트가 모두 1이라면 1
14 & 17 > [0][0][0][0][0]
14 & 17 0

OR(|) 논리합 두 비트 중 한개가 1이라면 1
14 | 17 > [1][1][1][1][1]
14 | 17 31

XOR(^) 배타논리합 두 비트가 서로 다르면 1
14 ^ 17 > [1][1][1][1][1]
14 ^ 17 31

NOT(~) 논리부정 비트를 0이면 1로, 1이면 0으로 뒤집어준다.
양수 부호비트도 뒤집혀져서 음수가 된다.
~14 > [1][0][0][0][1] > 사실은 [1][1][1][1]......[1][0][0][0][1] 이렇게
~14 > -15

~17 > [0][1][1][1][0] > 사실은 [1][1][1][1]......[0][1][1][1][0] 이렇게
~17 > -18
~a = -(a+1)

쉬프트 연산자

>> 우 쉬프트 a >> b a를 b만큼 우측으로 비트이동

17>>1 -> [1][0][0][0][1] -> [0][1][0][0][0] -> 8

<< 좌 쉬프트 a << b a를 b만큼 좌측으로 비트이동

17>>1 -> [1][0][0][0][1] -> [1][0][0][0][1][0] -> 34

관계 연산자

>, <, : 초과, 미만
<=, >= : 이상, 이하
== : 같다 (타입이 달라도 값이 같으면 true)
!= : 다르다 (타입이 다르고 값이 같다면 false / 값이 다르고 타입이 같으면 true)
=== : 같다.(타입과 값이 모두 같아야 true)
!== : 다르다.(값, 타입 중 하나면 달라도 true)

 // 문자열끼리 비교는 사전순으로 뒤에 있는게 큰 값
const str2 = "abcdefghijklmnopqrstuvwxyz"
const str3 = "abd"
console.log(str2 > str3) //false

조건식

조건을 제시하는 식, 주장하는 식
결과가 참 또는 거짓 둘 중 하나로 나오는 식
관계 연산자로 만들어진다.
Boolean 타입
참을 나타내는 true 값 / 거짓을 나타내는 false 값
Boolean() : 문자나 숫자 등을 불린형으로 변환

논리 연산자

조건식들 간의 관계를 설정해주는 연산자
(A,B는 조건식으로 가정 - 양 옆에 true/false 값이 와야한다.)
&&연산자는 ||연산자보다 우선 순위가 높다. (A || B && C) === A || (B && C)
A && B : 양 옆에 true 값이 올때 true, 둘 다 true 이면 true
A || B : 둘 중 하나라도 true 일때 true

	const num1 =10
        const num2 =5

        const result1 = num1 == num2; //false
        const result2 = num1 > num2; //true

        let result3 = result1 && result2 
        console.log(result3) //fasle
        result3 = result1 || result2
        console.log(result3) // true
        console.log(!result3) // false

        console.log(10>3 && 21<17) //false

단항 연산자

!A : 뒤에 오는게 true 라면 false, false라면 true 변경

숙제

프롬프트로 이름, 국어점수, 영어점수, 수학점수 입력받고
화면에 다음과 같이 띄운다.
------ 김사과 ------
국어점수 : 100점
영어점수 : 80점
수학점수 : 90점
총점 : 270점
평균 : 90점

        let name = prompt("이름을 입력하세요")
        let ko = prompt("국어 점수를 입력하세요");    
        let en = prompt("영어 점수를 입력하세요");    
        let math = prompt("수학 점수를 입력하세요");    
        let sum = Number(ko)+Number(en)+Number(math);
        let ave = sum/3;
        document.write(`----${name}-----<br>`);
        document.write(`국어점수 : ${ko}<br>`);
        document.write(`영어점수 : ${en}<br>`);
        document.write(`수학점수 : ${math}<br>`);
        document.write(`총점 : ${sum}<br>`);
        document.write(`평균 : ${Math.round(ave)}<br>`);

위 코드의 문제점은 다수의 let을 선언하면서 불필요한 변수들로 인하여 저장공간을 많이 잡아 먹는 단점과 document.write 코드의 반복적인 사용으로 가독성이 떨어지는 단점이 생겼다.
위 코드의 저장공간을 줄이고 코드의 가독성을 위해 마크업언어를 사용하여 정리해보았다.
아직 수업에서 배우지 않은 객체를 응용하여 사용하였다.

let score = {};
score.name = prompt("이름을 입력하세요", "ex) 이강민");
score.ko = Number(prompt("국어 점수를 입력하세요", "85"));
score.en = Number(prompt("영어 점수를 입력하세요", "85"));
score.math = Number(prompt("수학 점수를 입력하세요", "85"));
let sum = score.ko + score.en + score.math;
       document.write(`
       <div class="score">
        <p>----${score.name}----</p>
        <p>
            국어점수 : ${score.ko} <br>
            영어점수 : ${score.en} <br>
            수학점수 : ${score.math} <br>
            총점 : ${sum} <br>
            평균 : ${Math.round(sum/3)} <br>
        </p>
    </div>`
    )

이강민

AllTimeDevelop

이전 포스트

[강의]Javascript - 출력, 연결, 변수, 형

다음 포스트

[강의]Javascript - 형변환, 대화상자, 연산자, 숙제