본문 바로가기
UI/JavaScript

220920_JavaScript_국비_식& 연산자/ if~else/switch/for/while/do~while/function

_daily 2022. 9. 20. 14:40

<예시_1>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비트연산</title>
    <script>
        // 숫자 v를 8비트 2진수로 변환
        function digit8(v){ 
            var str="";
            for(i=0; i<8;i++, v<<=1){
                if((v & 0x80)) str+="1";
                else str+="0";
            }
            return str;
        }
    </script>
</head>
<body>
    <h2>비트연산, 시프트 연산</h2>
    <hr>
    <script>
        var x=-1, y=3;
        document.write("<pre>");
        document.write("x="+x+", y="+y+"<br>");
        document.write("x: "+digit8(x)+"<br>");
        document.write("y: "+digit8(y)+"<br>");
        document.write("<hr>");
        document.write("x& y :"+digit8(x&y)+"<br>");
        document.write("x|y : "+digit8(x|y)+"<br>");
        document.write("x^y : "+digit8(x^y)+"<br>");
        document.write("~x : "+digit8(~x)+"<br>");
        document.write("<hr>");
        document.write("x<<1 : "+digit8(x<<1)+"("+(x<<1)+")"+"<br>");
        document.write("x>>1 : "+digit8(x>>1)+"("+(x>>1)+")"+"<br>");
        document.write("x>>>1 : "+digit8(x>>>1)+"("+(x>>>1)+")"+"<br>");
        document.write("<pre>");
    </script>
    
</body>
</html>

false, undefined, null, 0, NaN 또는 빈 스트림(" ")이 아닌 모든값, false값인 boolean객체를 포함하는 모든 객체는 조건으로 사용될 때 truthy로 간주됨

 

↓결과

 

 

<예시_2>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문자열 연산</title>

</head>
<body>
    <h3>문자열 연산</h3>
    <hr>
    <script>
        document.write("abc"+23+"<br>");
        document.write(23+"abc"+"<br>");
        document.write(23+"35"+"<br>");
        document.write(23+35+"<br>");
        document.write(23+35+"abc"+"<br>");
        document.write("abc"+23+35+"<br>"+"<br>");
         // abc+23=abc23(문자열)  abc23+35=abc2335(문자열)
        // 문자열로 연산하고 싶다면 맨 앞쪽에 " "를 더해줄것

        var name = "hello";
        document.write(name=="world");
        document.write("<br>");
        document.write(name<"helll")
        // !=, ==, <, > ,<=, >=문자열 비교에 그대로 사용되며 사전순서에 따라 판단함
    </script>
</body>
</html>

 

↓결과

 

 

<예시_3>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>if~else</title>

</head>
<body>
    <h3>if~else</h3>
    <hr>
    <script>
        var grade;
        var score = prompt("점수를 입력하세요",100);
        score = parseInt(score); // 문자열을 숫자로 변경(생략해도 상관없음, 에러안뜸)
        if(score>=90)
        grade="A";
        else if(score>=80)
        grade="B";
        else if(score>=70)
        grade="C";
        else if(score>=60)
        grade="D";
        elsegrade="F";
        document.write(score+"점, 성적은" + grade+"입니다"+"<br>");
    </script>
</body>
</html>

prompt() : 사용자에게 입력을 요청하는 프롬프트 상자를 화면에 표시하기 위해 사용

                 → 프롬프트 상자에서 계속 진행하려면 "확인" 또는 "취소"버튼 클릭 필수

                → "확인" : 사용자가 입력한 값을 문자열로 반환/ "취소" : null반환
                → 1번째 인수는 프롬프트 상자에 표시되는 레이블, 2번째 인수는 텍스트박스에 표시되는 문자열

 

↓결과

프롬프트상자가 화면에 표시됨 / 숫자를 입력 후 확인 버튼을 누른 결과

 

 

<예시_4>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>switch case</title>

</head>

<body>
    <h2>switch case</h2>
    <hr>
    <script>
        var price = 0;
        var coffee = prompt("커피 주문", "");
        switch (coffee) {
            case "espresso":
            case "에스프레소": price = 2000;
                break;
            case "americano":
            case "아메리카노": price = 3000;
                break;
            case "caffe latte":
            case "카페라떼": price = 3500;
                break;
            default:
                document.write("coffee+(는)은 없습니다");
        }
        if (price != 0)
            document.write(coffee + "(는)은" + price + "원 입니다")
    </script>
</body>

</html>

 

↓결과

프롬프트상자가 화면에 표시됨 / 문자열(한글)을 입력 후 확인 버튼을 누른 결과/문자열(영어)을 입력 후 확인 버튼을 누른 결과

 

 

<예시_5>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for 문</title>

</head>
<body>
    <h3>for문으로 10px~35px 크기 출력</h3>
    <hr>
    <script>
        for(var size=10; size<=35; size+=5){
            document.write("<span ");
            document.write("style='font-size:"+size+"px'>");
            document.write(size+"px");
            document.write("</span> <br>");
        }
        for(var size=45; size>=10; size-=5){
            document.write("<span ");
            document.write("style='font-size:"+size+"px'>");
            document.write("Lee");
            document.write("</span> <br>");
        }
    </script>
</body>
</html>

 

↓결과

 

 

<예시_6>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>while</title>

</head>
<body>
    <h3>while 0~n까지 합</h3>
    <hr>
    <script>
        var n = prompt("0보다 큰 정수 입력",0);
        var i = 0; sum=0, even=0, odd=0;
        //n= parseInt(n); //문자열을 숫자로 바꿈
        while(i<=n){ //i가 0에서 n까지 반복
            sum+=i;
            if(i%2==0){
                even+=i;
            }
            else{
                odd+=i;
            }
            i++;
        }
        document.write("0에서 "+n+"까지의 합 : "+sum+"<br>" );
        document.write("0에서 "+n+"까지의 짝수 합 : "+even+"<br>" );
        document.write("0에서 "+n+"까지의 홀수 합 : "+odd+"<br>" );
    </script>
</body>
</html>

 

↓결과

프롬프트상자가 화면에 표시됨 / 숫자를 입력 후 확인 버튼을 누른 결과

 

 

<예시_7>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>if~else</title>

</head>
<body>
    <h3>if~else</h3>
    <hr>
    <script>
        var grade;
        var score3;
        var score1 = prompt("국어 점수 입력",100);
        var score2 = prompt("영어 점수 입력",100);
        score1=parseInt(score1); //문자열을 숫자로 변환
        score2=parseInt(score2);

        score3=score1+score2;

        if(score3>=180)
            grade="A";
        else if(score3>=160)
            grade="B";
        else if(score3>=140)
            grade="C";
        else if(score3>=120)
            grade="D";
        else
            grade="F";
        document.write("총 점수 : "+score3+", 성적 : "+grade)
    </script>
</body>
</html>

연산이 있을 경우 prseInt()로 숫자로 변환하지 않을경우 문자열로 인식 

 

↓결과

 

 

<예시_8>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>do~while</title>

</head>
<body>
    <h3>do~while 0~n까지의 합</h3>
    <hr>
    <script>
        var n = prompt("0보다 큰 정수 입력",0);
        n = parseInt(n);
        var i=0; sum=0;
        var sum37=0;
        do{
            sum+=i;
            if(i%3==0 && i%7==0){
                sum37+=i
            }
            i++;
        }while(i<=n);
        document.write("0에서 "+n+"까지 합은 "+sum+"<br>");
        document.write("0에서 "+n+"까지 3과 7의 공배수 합은 "+sum37+"<br>");
    </script>
</body>
</html>

 

↓결과

 

 

<예시_9>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>document.write()를 이용해 table 생성</title>

</head>

<body>
    <h3>document.write()를 이용해 table 생성</h3>
    <hr>
    <script>
        document.write("<table border='1'>");
        document.write("<tr>");
        document.write("<th>");
        document.write("n");
        document.write("</th>");

        for (j = 0; j < 10; j++) {
            document.write("<td>");
            document.write(j);
            document.write("</td>");
        }
        document.write("</tr><tr>");
        document.write("<th>");
        document.write("n <sup>2</sup>");
        document.write("</th>");

        for (j = 0; j < 10; j++) {
            document.write("<td width ='20'>");
            document.write(j * j);
            document.write("</td>");
        }
        document.write("</tr>");
        document.write("</table>");

    </script>
</body>

</html>

 

↓결과

 

 

<예시_10>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>break</title>

</head>
<body>
    <h3>1에서 얼마까지 더해야 3000을 넘을까</h3>
    <hr>
    <script>
        var i =0; sum=0;
        while(true){ //무한반복
            sum+=i;
            if(sum>3000)
            break;
            i++;
        }
        document.write(i+"까지 더하면 3000이 넘음 : "+sum)
    </script>
</body>
</html>

 

↓결과

 

 

<예시_11>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>continue</title>

</head>
<body>
    <h3>3으로 나눈 나머지가 1인 수만 더하기</h3>
    <hr>
    <script>
        var sum=0;
        for(i=1; i<=10; i++){
            if(i%3!=1)
            continue;

            document.write(i+" + "); //더하는 수 출력
            sum+=i;
        }
        document.write(" =합 : "+sum);
    </script>
</body>
</html>

 

↓결과

 

 

<예시_12>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>do while, break</title>

    <h3>암호 입력</h3>
    <hr>
    <script>
        var password="";
        var str ="";
        var count=0;
        do{
            count++;
            if(count>5)
            {
                str="암호시도 횟수 초과(5회 이상)<br>"+"나중에 다시 시도하세요";
                console.log(str);
                break;
            }
            password = prompt("암호 입력","암호");
            if(password=="1111"){
                str="성공";
                break;
            }
        }while(true);
        document.write(str);
    </script>
</head>
<body>
    <h3>암호 입력</h3>
    
</body>
</html>

 

↓결과

프롬프트상자가 화면에 표시됨/ 잘못된 암호로 5회이상 시도했을 경우 / 성공했을 경우
console.log()는 검사에서 확인가능

 

<예시_13>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>console.log</title>

</head>
<body>
    <script>
        var a = 7;
        var b = 'hello';
        var c =true;

        console.log(a);
        console.log(a,b,c);
        console.log('%d는 숫자, %s는 문자열',a,b);//c언어처럼 로그
        console.log('기본');
        console.info('정보');
        console.warn('경고');
        console.error('에러');

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

 

↓결과

 

 

<예시_14>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for star</title>

</head>
<body>
    <script>
        for(i=1;i<5;i++){
            for(j=0;j<i;j++){
                document.write("*");
            }
            document.write("<br>");
        }
        for(i=6;i>=0;i--){
            for(j=0;j<i;j++){
                document.write("*");
            }
            document.write("<br>");
        }
    </script>
</body>
</html>

 

↓결과

 

function(함수)

  • 데이터를 전달받아 처리한 후 결과를 돌려주는(리턴) 코드 블러
  • 형식
    1. function 함수이름( 매개변수1, 매개변수2, ..){
              실행문;
              }
    2. var 함수이름 = function(매개변수1, 매개변수2,...){
              실행문;
           };
  • 함수호출
    함수이름(value1, value2, ...)
    → 값이 인자보다 적으면 값이 없는 인자는 undefined 반환
    → 값이 인자보다 많으면 많은 값은 무시
  • javascript 내장 함수
함수이름 의미
eval() 문자열 코드로 인식하게 하는 함수
parseInt() 문자열을 정수로 변환하는 함수
parseFloat() 문자열을 실수로 변환하는 함수
1. 숫자로 시작할때 그 숫자를 실수로 변환
2. 띄어쓰기로 여러개의 수가 있으면 첫번째만 변환
3. 공백으로 시작하면 공백 무시
4. 문자로 시작하면 NaN반환
isFinite() 매개변수가 유한한 수인지 검사
유한한 수면 true / 무한한 숫자 또는 아니면 false반환
예시)Infinity → false(무한)
        Not a Number → false(문자)
isNaN() 매개변수가 숫자인지 검사하는 함수
예시) 123.123 → false(숫자)
          '123.123' → false(숫자)
          'Not a Number'  → true(숫자 아님)
          123*123 → false(숫자)
          '123*123' → true(숫자 아님)
Number() 문자열을 숫자로 변환하는 함수
숫자로 변환 할 수 없는 경우 NaN반환
String() 숫자를 문자열로 반환하는 함수

 

<예시_1>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
    <script>
        function adder(a,b){
            var sum;
            sum=a+b;
            return sum;
            // return  : 함수 실행을 종료하고 호출한 곳으로 되돌아가면서 실행 결과 반환
        }
    </script>

</head>
<body>
    <h3>함수 addr()</h3>
    <hr>
    <script>
        var n = adder(24,88);//함수호출
        document.write("24+98 = "+n+"<br>");

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

 

↓결과

 

 

<예시_2>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>function</title>
    <style>
        h1{
            font-family: Consolas;
        }
        h1 span{
            color : #66dd33;
        }
    </style>
</head>
<body>
    <script>
        function abcFunction(name, stu){
            document.write('<h1> name : <span>'+name+'</span> , job : <span>'+stu+'</span></h1>');
        }
        abcFunction('Lee','student');
        abcFunction('Lee');
        abcFunction('student');
        abcFunction('Lee','student','남자');

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

 

↓결과

 

 

<예시_3>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript function</title>
    <style>
        body{
            font-family: consolas, monospace;
        }
    </style>
</head>
<body>
    <script>
        var sum = '2+2';
        var sum1 = '2*2-24/4';
        document.write('<p>'+sum+'</p>');
        document.write('<p>'+eval(sum)+'</p>');
        document.write('<p>'+sum1+'</p>');
        document.write('<p>'+eval(sum1)+'</p>');
    </script>
</body>
</html>

 

↓결과

 

 

<예시_4>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript function</title>
    <style>
        body{
            font-family: consolas, monospace;
            font-size: 16px;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <script>
        var a = 123.123;
        var b = Infinity;
        var c = 'Not a Number';
        document.write('<p> 123.123 : '+isFinite(a)+'</p>');
        document.write('<p> Infinity : '+isFinite(b)+'</p>');
        document.write('<p> Not a Number : '+isFinite(c)+'</p>');
    </script>
</body>
</html>

 

↓결과

 

 

<예시_5>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript function</title>
    <style>
        body{
            font-family: consolas, monospace;
        }
    </style>
</head>
<body>
    <script>
        document.write("<p>parseInt('12.34') : "+parseInt('12.34')+"</p>");
        document.write("<p>parseInt(' 12.34') : "+parseInt(' 12.34')+"</p>");
        document.write("<p>parseInt('12.34 56.78') : "+parseInt('12.34 56.78')+"</p>");
        document.write("<p>parseInt('A 12.34') : "+parseInt('A 12.34')+"</p>");
        </script>
</body>
</html>

 

↓결과

 

 

<예시_6>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript function</title>
    <style>
        body{
            font-family: consolas, monospace;
            font-size: 16px;
            line-height: 1.6;
        }

    </style>
</head>
<body>
    <script>
        var a = 123.123;
        var b = '123.123';
        var c = 'Not a Number';
        var d = 123*123;
        var e ='123*123';
        document.write('<p>123.123 : '+isNaN(a)+'</p>');
        document.write('<p>\'123.123\' :'+isNaN(b)+'</p>');
        document.write('<p>Not a Number : '+isNaN(c)+'</p>');
        document.write('<p>123*123 : '+isNaN(d)+'</p>');
        document.write('<p>\'123.123\ : '+isNaN(e)+'</p>');
    </script>
</body>
</html>

 

↓결과

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

220922_JavaScript_국비_Math/ String/ Object/ DOM  (1) 2022.09.22
220921_JavaScript_국비_내장함수/ 객체/ Array  (2) 2022.09.21
220919_JavaScript_국비_코드위치/ 데이터 타입/ 변수 & 상수/ 식& 연산자  (2) 2022.09.19
220805_ JavaScript_생활코딩_refactoring/function  (0) 2022.08.05
220804_JavaScript_생활코딩_if  (0) 2022.08.04

'UI/JavaScript' Related Articles

티스토리툴바