[8일] JavaScript (2) - 형변환, Math, if문

자료형 변환
문자열을 숫자형으로 변환
숫자형을 문자형으로 변환
Boolean 값의 형 변환
삼항 연산자
Math 객체
Math.random()
제어문
if 조건문

자료형 변환

document.write(10+20);        // 30
document.write("10"+"20");    // 1020
document.write("<hr>");

정수 1020과 문자열 1020은 화면 상에서 사용자에게 동일하게 보인다.

하지만 우리는 정수로 입력된 숫자를 문자열로 바꾸거나 또는 문자열을 숫자로 바꿔야 할 상황이 발생할 수 있다.

이때 형 변환을 사용한다.

문자열을 숫자형으로 변환

1. Number()

// 숫자로 구성된 문자열을 숫자형으로 변환 가능
// 참조 https://www.w3schools.com/jsref/jsref_number.asp
document.write(Number("10"));                // 10
document.write("<hr>");
document.write(Number("10")+Number("20"));   // 30
document.write("<hr>");
document.write(Number("10      "));          // 10
document.write("<hr>");
document.write(Number("      10"));          // 10
document.write("<hr>");
document.write(Number("10.23"));             // 10.23
document.write("<hr>");
document.write(Number("KOREA"));             // NaN (Not a Number)
document.write("<hr>");
document.write(Number("1 2 3"));             // NaN (Not a Number)
document.write("<hr>");

2. parseInt()

많이 사용하는 함수로 잘 알아두는 것이 좋다.

// 숫자로 구성된 문자열을 정수형으로 변환
document.write(parseInt("10"));   // 10
document.write("<hr>");
document.write(parseInt("-10"));  // -10
document.write("<hr>");
document.write(parseInt("10.23"));  // 10
document.write("<hr>");
document.write(parseInt("SEOUL"));  // NaN
document.write("<hr>");

3. parseFloat()

// 숫자로 구성된 문자열을 실수형으로 변환
document.write(parseFloat("10"));        // 10
document.write("<hr>");
document.write(parseFloat("10.33"));     // 10.33
document.write("<hr>");
document.write(parseFloat("JAVA"));      // NaN
document.write("<hr>");

숫자형을 문자형으로 변환

1. String()

document.write(String(123));              // "123"
document.write("<hr>");
document.write(String(123)+String(456));  // "123456"
document.write("<hr>");

2. toString()

document.write((123).toString());              // "123"
document.write("<hr>");
document.write((123).toString()+(456).toString());  // "123456"
document.write("<hr>");

참고) 숫자형 데이터는 부분적으로 데이터를 가져올 수 없지만 문자형 데이터는 가능하다.

"123456"에서 6만 따로 가져올 수 있지만 123456에서는 6만 가져올 수 없다.

Boolean 값의 형 변환

document.write(Number(true));         // 1
document.write("<hr>");
document.write(Number(false));        // 0
document.write("<hr>");
document.write(String(true));        // "true"
document.write("<hr>");
document.write(String(false));       // "false"
document.write("<hr>");

연습)

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>02_지폐갯수.html</title>
    </head>  
    <body>

        <div id="demo"></div>

        <script>
            // 연습) 각 지폐갯수를 구해서 표작성해서 본문 id=demo에 출력하시오
            /*
               | 만원 | 5장 |
               | 천원 | 4장 |
               | 백원 | 3장 |
               | 십원 | 2장 |
            */

            let money = 54320;
            // let a = parseInt(money/10000);  // 5.432 -> 5
            // let b = (money%10000)           // 4320
            // let c = parseInt(b/1000);       // 4.32  -> 4
            // let d = (b%1000);               // 320
            // let e = parseInt(d/100);        // 3.2   -> 3
            // let f = (d%100);                // 20
            // let g = (f/10);                 // 2

            // 내 풀이
            let a = parseInt(money/10000);         // 5
            let c = parseInt((money%10000)/1000);  // 4
            let e = parseInt((money%1000)/100);    // 3
            let g = parseInt((money%100)/10);      // 2

            /* 강사님 풀이과정
            document.write(money/10000);      // 5.432
            document.write("<hr>");
            document.write(money%10000);      // 4320

            let m = parseInt(money/10000);       // 5
            money = money%10000;                 // 4320  money%=10000 
            
            let c = parseInt(money/1000);        // 4
            money = money%1000;                  // 320

            let b = parseInt(money/100);         // 3
            money = money%100;                   // 20

            leb s = parseInt(money/10);          // 2
            */
            let result = ""; // 결과값

            result = result + "<table border ='1'>";            // result += " ";
            result = result + "<tr>";
            result = result + "   <th>만원</th>";
            result = result + "   <td>" + a +"장"+ "</td>";
            result = result + "</tr>"
            result = result + "<tr>";
            result = result + "   <th>천원</th>";
            result = result + "   <td>" + c +"장"+ "</td>";
            result = result + "</tr>";
            result = result + "<tr>";
            result = result + "   <th>백원</th>";
            result = result + "   <td>" + e +"장"+ "</td>";
            result = result + "</tr>";
            result = result + "<tr>";
            result = result + "   <th>십원</th>";
            result = result + "   <td>" + g +"장"+ "</td>";
            result = result + "</tr>";
            result = result + "</table>";

            document.getElementById("demo").innerHTML=result;

        </script>
    </body>
</html>

삼항 연산자

let a = 3;
document.write(a*-1);    // 이항
document.write(-a);      // 단항
document.write("<hr>");

// 삼항 연산자
// 형식)  (조건) ? 참 : 거짓     ( 조건에는 반드시 boolean 값이 와야한다)

// 문1) 절대값을 구하시오(양수값을 구하시오)
let num = -5;
let result = (num < 0) ? num*-1 : num;
            // -5 < 0    -5 *-1
document.write(num + " 절대값 : " + result)
document.write("<hr>");

// 문2) 세개의 수 중에서 가장 큰 값(최대값)을 구하시오
// 내 풀이
let x = 7, y = 5, z = 9;
let result2 = ((x>y) ? x : y)>z ? ((x>y) ? x : y) : z;
document.write(x + "," + y + "," + z + "중 최대값 : " + result2);

// 강사님 풀이
let max = (x<y) ? y : x;
       // (7<5)       7
    max = (max<z) ? z : max;
       // (7 < 9)   9

Math 객체

수학 관련 객체이다.

document.write(Math.abs(-3));            // 절대값
document.write("<hr>");
document.write(Math.max(7, 5, 9));       // 최대값
document.write("<hr>");
document.write(Math.min(-7, -5, -9));    // 최소값
document.write("<hr>");
document.write(Math.pow(2, 4));          // 2의 4승
document.write("<hr>");
        
// 소수점 반올림
document.write(Math.round(4.9));         // 5
document.write("<hr>");
document.write(Math.round(4.4));         // 4
document.write("<hr>");
document.write(Math.round(-4.2));        // -4
document.write("<hr>");
document.write(Math.round(-4.7));        // -5
document.write("<hr>");

// 소수점 올림
document.write(Math.ceil(4.9));          // 5
document.write("<hr>");
document.write(Math.ceil(4.4));          // 5
document.write("<hr>");
document.write(Math.ceil(-4.2));         // -4
document.write("<hr>");
document.write(Math.ceil(-4.7));         // -4
document.write("<hr>");

// 소수점 버림
document.write(Math.floor(4.9));          // 4
document.write("<hr>");
document.write(Math.floor(4.4));          // 4
document.write("<hr>");
document.write(Math.floor(-4.2));         // -5
document.write("<hr>");
document.write(Math.floor(-4.7));         // -5
document.write("<hr>");

document.write(Math.E);
document.write("<hr>");
document.write(Math.PI);
document.write("<hr>");

Math.random()

무작위로 발생한 수 (난수)

random 값의 발생 범위는 0.0 ≤ r < 1이다.

Math.random() : 무작위로 발생한 수
random 값 발생 범위 : 0.0 <= r < 1

document.write(Math.random());
document.write("<hr>");

document.write(Math.random()*2);
document.write("<hr>");

document.write(parseInt(Math.random()*2)); // 0, 1
document.write("<hr>");

document.write(parseInt(Math.random()*4)); // 0, 1, 2, 3
document.write("<hr>");

// 문) 주사위 1 ~ 6 사이의 수만 발생시키시오
document.write(parseInt((Math.random()*6)+1)); // (0 1 2 3 4 5) + 1 = 1 2 3 4 5 6
document.write("<hr>");

// 문) 로또번호
document.write(parseInt((Math.random()*45)+1));
document.write("<hr>");

참고

https://www.w3schools.com/js/js_math.asp

JavaScript Math Object

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

제어문

프로그램의 흐름을 제어한다.

조건문 : if문, switch ~ case문
반복문 : for문, while문, do ~ while문
break문
continue문

if 조건문

boolean 값으로 판단한다.

1) if (조건) { 조건이 true이면 처리 }

2) if (조건) { 조건이 true이면 처리 }

else { 조건이 false이면 처리 }

3) if (조건 1) { 조건 1이 true이면 처리 }

else if (조건 2) { 조건 2가 true이면 처리 }

else if (조건 3) { 조건 3이 true이면 처리 }

else { 조건 1, 2, 3까지 만족하지 않으면 무조건 처리 }

// 성적 프로그램
let name = "무궁화";
let kor = 100, eng = 95, mat = 35;
let total = kor + eng + mat;   // 총점 구하시오
let aver = parseInt(total/3);  // 평균 구하시오
        
document.write("이름 : " + name + "<hr>");
document.write("국어 : " + kor + "<hr>");
document.write("영어 : " + eng + "<hr>");
document.write("수학 : " + mat + "<hr>");
document.write("총점 : " + total + "<hr>");
document.write("평균 : " + aver + "<hr>");

//문1) 평균 95점이상이면 장학생을 출력하시오
if (aver >= 95) { // 76>=95
    document.write('<span style="color:red; font-weight:bold">장학생</span><hr>');
} // if end

//문2) 국어점수가 70점이상이면 합격, 아니면 불합격
if (70 <= kor) { // 100 >= 70
    document.write("국어 : 합격<hr>");
} else {
    document.write("국어 : 불합격<hr>");
} // if end

//문3)수학점수가 90점이상이면 "A"
//              80점이상이면 "B"
//              70점이상이면 "C"
//              60점이상이면 "D"
//              나머지는 "F"
if (mat >= 90) {
    document.write("A");
} else if (mat >= 80) {
    document.write("B");
} else if (mat >= 70) {
    document.write("C");
} else if (mat >= 60) {
    document.write("D");
} else {
    document.write("F");
}
// 문4) 과락
// 평균이 70점 이상이면 결과 : 합격
// (단, 국영수 세과목 중 한 과목이라도 40점 미만이면 결과 : 재시험)
// 평균이 70점 미만이면 결과 : 탈락

// 내 풀이
if (aver < 70) {
    document.write("결과 : 탈락<hr>");
} else if (kor < 40 || eng < 40 || mat < 40) {
    document.write("결과 : 재시험<hr>");
} else {
    document.write("결과 : 합격<hr>");
}
// 강사님 풀이
//1) OR 조건
if (aver >=70 ) { // 76>=70
    if (kor<40 || eng<40 || mat<40) { // 100<40 || 95<40 || 35<40
                                       // false      false    true
                                       // true
        document.write("결과 : 재시험<hr>");
    } else {
        document.write("결과 : 합격<hr>");
    }
} else {
    document.write("결과 : 탈락<hr>");
}

//2) AND 조건
if (aver >=70 ) { // 76>=70
    if (kor>=40 && eng>=40 && mat>=40) { // 100>=40 && 95>=40 && 35>=40
                                         //   true      true      false
                                         //                       false
        document.write("결과 : 합격<hr>");
    } else {
        document.write("결과 : 재시험<hr>");
    }
} else {
    document.write("결과 : 탈락<hr>");
} //if end

'웹개발 교육 > JavaScript' 카테고리의 다른 글

[12일] JavaScript (6) - 요일 구하기, Date 객체, 함수 (0)	2022.08.10
[11일] JavaScript (5) - 배열, 연습문제 (0)	2022.08.09
[10일] JavaScript (4) - 이중 반복문, for 연습 (0)	2022.08.08
[9일] JavaScript (3) - switch ~ case문, for문, break, continue, while, do ~ while (0)	2022.08.05
[7일] JavaScript (1) - 자료형, 연산자 (0)	2022.08.03

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[8일] JavaScript (2) - 형변환, Math, if문

자료형 변환

문자열을 숫자형으로 변환

1. Number()

2. parseInt()

3. parseFloat()

숫자형을 문자형으로 변환

1. String()

2. toString()

Boolean 값의 형 변환

삼항 연산자

Math 객체

Math.random()

제어문

if 조건문

'웹개발 교육 > JavaScript' 카테고리의 다른 글

자료형 변환

문자열을 숫자형으로 변환

1. Number()

2. parseInt()

3. parseFloat()

숫자형을 문자형으로 변환

1. String()

2. toString()

Boolean 값의 형 변환

삼항 연산자

Math 객체

Math.random()

제어문

if 조건문

'웹개발 교육 > JavaScript' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역