본문 바로가기
Frontend/JavaScript

2월 9일 JavaScript (01~06)

by howdyoon 2023. 2. 9.

01_형변환
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>01_형변환.html</title>
  <style></style>
</head>

<body>
    <h3>자료형변환 (Type Conversion) </h3>
  <script>
    //참조 https://www.w3schools.com/js/js_type_conversion.asp
    //형변환 : 필요한 곳에서 일시적(강제적)으로 변환

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

    //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>");

    document.write(Number(true));                //1
    document.write("<hr>");
    document.write(Number(false));               //0
    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 (Not a Number)
    document.write("<hr>"); 

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

    //4. String()
    //-> 문자형으로 변환
    document.write(String(123));             //"123"
    document.write("<hr>"); 
    document.write(String(123)+String(456)); //"123456"
    document.write("<hr>"); 

    //5. toString()
    //-> 문자형으로 변환
    document.write((123).toString());             //"123"
    document.write("<hr>"); 
    document.write((123).toString()+(456).toString()); //"123456"
    document.write("<hr>"); 
    ////////////////////////////////////////////////////////////

    //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>"); 
    ////////////////////////////////////////////////////////////

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

    let x = 10;
    let y = 20;
    let text= "x * y";
    document.write(text);       //x * y
    document.write("<hr>"); 
    document.write(eval(text)); //200
    document.write("<hr>"); 
    ////////////////////////////////////////////////////////////

    //8. isNaN
    // 숫자형으로 구성된 값인지?
    document.write(isNaN(123));     //false
    document.write("<hr>"); 
    document.write(isNaN(-1.23));   //false
    document.write("<hr>"); 
    document.write(isNaN("123"));   //false
    document.write("<hr>"); 
    document.write(isNaN("KOREA")); //true
    document.write("<hr>"); 
    document.write(isNaN(3.4));     //false
    document.write("<hr>"); 

  </script>

</body>
</html>
02_연습문제(지폐갯수)
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>02_지폐갯수.html</title>
  <style></style>
</head>

<body>

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

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

    let money=54320;

    //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%=100;                 //20

    let s=parseInt(money/10);   //2
    
    let result=""; //결과값
    //result = result + "";
    result += "<table border='1'>";
    result += "<tr>";
    result += "  <th>만원</th>";
    result += "  <td>" + m + "장</td>";
    result += "</tr>";
    result += "<tr>";
    result += "  <th>천원</th>";
    result += "  <td>" + c + "장</td>";
    result += "</tr>";
    result += "<tr>";
    result += "  <th>백원</th>";
    result += "  <td>" + b + "장</td>";
    result += "</tr>";
    result += "<tr>";
    result += "  <th>십원</th>";
    result += "  <td>" + s + "장</td>";
    result += "</tr>";
    result += "</table>";

    //본문 id=demo에 출력
    document.getElementById("demo").innerHTML = result;

 
  </script>

</body>
</html>
03_Math
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>03_Math.html</title>
  <style></style>
</head>

<body>

    <h3>Math 객체</h3>

  <script>
    //참조 https://www.w3schools.com/js/js_math.asp
    //Math : 수학 관련 객체

    //객체 Object
    //-> 멤버변수(property, attribute, field) + 멤버함수(method)
    //-> 객체.멤버변수
    //-> 객체.멤버함수()
    
    document.write(Math.PI);
    document.write("<hr>");
    document.write(Math.E);
    document.write("<hr>");

    document.write(Math.abs(-3));         //절대값
    document.write("<hr>");
    document.write(Math.max(5, 7));       //최대값
    document.write("<hr>");
    document.write(Math.max(-5, -7, -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.max(1, Math.max(2, 3))); //3
    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.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.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>");
    //////////////////////////////////////////

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

    //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);
    document.write("<hr>");

    //문) 로또번호 1~45사이의 수만 발생시키시오
    document.write(parseInt(Math.random()*45)+1);
    document.write("<hr>");

  </script>

</body>
</html>
04_if
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>04_if.html</title>
  <style></style>
</head>

<body>

    <h3>if조건문</h3>

  <script>
    /*
        ● 제어문
        - 프로그램의 흐름을 제어
        - 조건문 : if문, switch~case문
        - 반복문 : for문, while문, do~while문
        - break문
        - continue문
    */

    //성적 프로그램
    let name="무궁화";
    let kor=100, eng=100, mat=30;

    //총점 구하시오
    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) { //78>=95
        document.write("<span style='color:red;font-weight:bold'>장학생</span><hr>");
    }//if end

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

    //문3)수학점수가 90점이상이면 "A"
    //              80점이상이면 "B"
    //              70점이상이면 "C"
    //              60점이상이면 "D" 
    //              나머지는 "F"
    if(mat>=90) {
        document.write ("수학: A학점<hr>")
    }else if(mat>=80) {
        document.write ("수학: B학점<hr>")
    }else if(mat>=70) {
        document.write ("수학: C학점<hr>")
    }else if(mat>=60) {
        document.write ("수학: D학점<hr>")
    }else{
        document.write ("수학: F학점<hr>")
    }//if end
    

    //문4)과락
    //    평균이 70점이상이면 결과:합격
    //    (단, 국영수 세과목중에서 한과목이라도 40점미만이면 결과:재시험)
    //    평균이 70점미만이면 결과:탈락

    //1)OR조건
    if(aver>=70) {
        if (kor<40 || eng<40 || mat<40) {
        document.write ("결과: 재시험<hr>"); 
        }else{
        document.write ("결과: 합격<hr>")
        }
    }else{
        document.write ("결과: 탈락<hr>")
    }//if end


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

  </script>

</body>
</html>
05_switch
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>05_switch.html</title>
  <style></style>
</head>

<body>

    <h3>switch~case문</h3>
    
  <script>
    //1. 값 : 실수형으로 경우수는 사용불가
    //case값은 반드시 순차적이지 않아도 된다
    /*
    switch(10) {
        case 10 : document.write("SEOUL"); break;
        case 20 : document.write("JEJU"); break;
        case 30 : document.write("BUSAN"); break;
    }//switch end
    */

    //2. default : 목록에 값이 없으면 무조건 수행
    /*
    switch(40){
        case 10 : document.write("SEOUL"); break;
        case 20 : document.write("JEJU"); break;
        case 30 : document.write("BUSAN"); break;
        default : document.write("기타..."); break
    }//switch end
    */
   //3.break문이 없으면
   switch(20){
        case 10 : document.write("SEOUL"); break;
        case 20 : document.write("JEJU"); 
        case 30 : document.write("BUSAN"); break; 
        default : document.write("기타..."); break
    }//switch end

  </script>

</body>
</html>
06_조건문 연습문제
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>06_조건문 연습문제.html</title>
  <style></style>
</head>

<body>

    <h3>조건문 연습문제</h3>

  <script>

    //문1)평균점수에 따라서 A, B, C, D, F학점을 출력하시오 (switch문 활용)
    let kor=100, eng=100, mat=100;
    let aver=parseInt((kor+eng+mat)/3);

    switch(parseInt(aver/10)) {
        case 10 :
        case 9 : document.write("A학점");break;
        case 8 : document.write("B학점");break;
        case 7 : document.write("C학점");break;
        case 6 : document.write("D학점");break;
        default  : document.write("F학점");break;
    }//switch end
   document.write("<hr>");


    //문2)연산기호(op)에 따라 결과값을 출력하시오 (switch문 활용)
    let i=3, j=5;
    let=op="/"; // + - * / 
    /*
        출력결과
        3/5=0.6

    */

    let result=0;
    switch(op) {
        case "+" :result=i+j; break;
        case "-" :result=i-j; break;
        case "*" :result=i*j; break;
        case "/" :result=i/j; break;
   }//switch end
   document.write(i + op + j + "=" + result);
   document.write("<hr>");

    //문3)주민번호를 이용해서 나이와 성별을 출력하시오
    //예) 주민번호 "191204234567"
    //-> 나이 : 올해년도-태어난년도
    //-> 성별 : 1 또는 3 남자, 2 또는 4 여자

    let myYear=parseInt("19"); // 태어난 년도
    let myCode=parseInt("4"); // 성별코드

    //나이 2023-2019
    switch(myCode){
        case 1 : myYear=myYear+1900; break;
        case 2 : myYear=myYear+1900; break;
        case 3 : myYear=myYear+2000; break;
        case 4 : myYear=myYear+2000; break;
   }//switch end

    myAge=2023-myYear;
    document.write("나이: " + myAge + "<hr>")

    //성별
    
    switch(myCode%2){
        case 0 : document.write("성별 : 여자<hr>"); break;
        case 1 : document.write("성별 : 남자<hr>"); break;
    }
    
    if(myCode==1 || myCode==3) {
        document.write ("성별: 남자<hr>");
    }else if(myCode=2 || myCode==4){
        document.write ("성별: 여자<hr>")
    }//if end

  </script>

</body>
</html>
저작자표시 비영리 변경금지 (새창열림)

'Frontend > JavaScript' 카테고리의 다른 글

2월 8일 JavaScript (01~08)  (0) 2023.02.08

관련글

티스토리툴바