JavaScript와 친해지길 바래 🙏(3) - 출력, 함수

joyfulwave·2022년 9월 14일
0

재밌는 이벤트의 세계, JavaScript



💡 document.write()

HTML 태그안에 출력되는 내용으로, 다른 HTML 태그를 포함하여 출력할 수 있어요.

<script>
  document.write(//출력내용);
</script>

	<script>

        document.write("<h1>안녕하세요.</h1>");
        document.write(1 + 1);
        document.write("<ul><li>HTML</li><li>CSS</li></ul>");
        document.write("반갑습니다. " + "Hello" + "<br/>");
        document.write("1" + 1 + "<br/>");
        document.write("1" + "1" + "<br/>");

    </script>



💡 prompt

prompt는 입력을 받을 수 있는 입력창이에요.

<script>
  document.write(//출력내용);
</script>

	<script>

        var id = prompt("아이디를 입력하세요.");
        document.write(id);

    </script>



💡 함수 function()

📎 함수의 선언과 호출

	<script>
        // 함수의 선언
        function 함수명(){
            // 동작할 구문
        }
        // 함수의 호출
        함수명();
    </script>

📎 함수 선언과 호출 예제

⚫️ (1) 매개 변수가 없는 함수

	<script>
        function sayHello(){
            document.write("<h1>안녕하세요.</h1>");
            document.write("<h1>자바스크립트.</h1>");
        }
        sayHello();
        sayHello();
    </script>

⚫️ (2) 매개 변수가 있는 함수

	<script>
        // 자바스크립트 에서는 데이터타입을 var로 통일시키기 때문에, 매개변수의 갯수만 명시해주면 된다.
        function f( x ){
            var y = x + 1
            document.write("<h1>" + y + "</h1>");
        }

        function f2( x, y ){
            var z = x + y;
            document.write("<h1>" + z +  "</h1>");
        }

        function f3( x, y ){
            return x + y;
        }

        var a = f3(1, 2);
        // 매개변수 세번째부터 무시가 된다.
        var b = f3(2, 10, 6);
        
        document.write("<h1>a : " + a + "</h1>");
        document.write("<h1>b : " + b + "</h1>");

        document.write("<h1>-----------------------------------</h1>");

        f2(2, 5);
        // 출력결과 : NaN
        f2(5);
        // 매개변수 세번째부터 무시가 된다.
        f2(2, 5, 7, 3, 1);
        

        document.write("<h1>-----------------------------------</h1>");

        f(5);
        f(7);
        f(10);
        f("javascript");

        // 10은 무시가 된다.
        f(5, 10);

        // 출력결과 : NaN
        f();
    </script>

📎 함수 안에서 다른 함수 호출

하나의 함수 안에서 다른 함수를 호출 할 수 있어요.

	<script>
        function sum(x, y){
            var z = x + y;
            return z;
        }

        function printResult(x, y){
            var result = sum(x, y);
            document.write("<h1>" + result + "</h1>");
        }

        printResult(7, 10);
    </script>

📎 속성을 가진 함수

⚫️ eval()

주어진 문자열을 수식으로 변환하여 리턴하는 함수에요.

	<script>
       var a = "1 + 1" ;
       var b = 1 + 1 ;
       var c = eval("1 + 1");

       document.write("<h1>" + a + "</h1>");
       document.write("<h1>" + b + "</h1>");
       document.write("<h1>" + c + "</h1>");
    </script>

⚫️ isNaN()

  • 변수의 파라미터로 주어진 문자열이 숫자형식이 아니면 true, 숫자형식이면 false로 리턴해요
  • NaN(Not a Number) : 숫자 형태가 아닌 경우, NaN값을 리턴
	<script>
        var v1 = "가나다라";
        var v2 = "12345";

        var is_num1 = !isNaN(v1); 
        var is_num2 = !isNaN(v2);

        if( is_num1 ){
            document.write("<h1>" + v1 + " 은(는) 숫자 입니다.</h1>");
        } else{
            document.write("<h1>" + v1 + " 은(는) 숫자가 아닙니다.</h1>");
        }

        if( is_num2 ){
            document.write("<h1>" + v2 + " 은(는) 숫자 입니다.</h1>");
        } else{
            document.write("<h1>" + v2 + " 은(는) 숫자가 아닙니다.</h1>");
        }
    </script>

⚫️ confirm()

  • alert(문자열) : 가장 일반적으로 사용되는 대화상자
  • prompt(문자열) : 사용자의 입력 내용을 얻고자 하는 경우에 사용
  • confirm(문자열) : 사용자에게 어떠한 결정사항에 대한 긍정 혹은 부정에 답을 얻고자 하는 경우에 사용 (긍정의 버튼 클릭 : true, 부정의 버튼 클릭 : false)
	<script>
  // 만약 아무런 값도 입력되지 않았거나 사용자가 취소 버튼을 눌렀다면, 처음 설정한 "" 빈 문자열이 리턴된다.
        var user_id = prompt("아이디를 입력하세요.", "");

        if( user_id != "" ){
            alert("안녕하세요. " + user_id + "님");

            var result = confirm("정말 로그아웃 하시겠습니까?");

            if( result ){
                alert("로그아웃 되셨습니다.");
            } else {
                alert("로그아웃이 취소되었습니다.");
            }
        }
    </script>



다음에 더 JavaScript와 친해질 거예요.🎈




출처
https://media.giphy.com/media/qqtvGYCjDNwac/giphy.gif
https://media.giphy.com/media/26tPplGWjN0xLybiU/giphy.gif

0개의 댓글