자바스크립트 출력

JavaScript는 다음을 사용하여 다양한 방식으로 데이터를 표시할 수 있습니다.
  • console.log() 개체
  • alert() 개체
  • document.write() 개체
  • elem.innerHTML 속성 - elem는 임의의 이름입니다.



  • 콘솔.로그()



    이전 기사에서 볼 수 있듯이 콘솔에서 브라우저의 예기치 않은 결과를 디버그할 수 있습니다.

    index.html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Using log Object</title>
    </head>
    
    <body>
    
        <script>
            console.log('Hello World!')
        </script>
    </body>
    
    </html>
    


    Edit on Stackblitz


    경고 방법


    alert 는 브라우저 window 개체 - window.alert(...) 의 메서드입니다. 브라우저나 화면(창)에 데이터를 표시하기 위해 사용합니다. 모달 대화 상자에 결과를 표시합니다.

    index.html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=, initial-scale=1.0">
        <title>Using alert object</title>
    </head>
    
    <body>
    
        <script>
            alert('Hello World!')
        </script>
    </body>
    
    </html>
    


    Edit on Stackblitz





    쓰기 방법



    브라우저 창에서 직접 예기치 않은 결과를 테스트하려면 명령document.write()이 사용됩니다. 메서드 내에서 HTML 요소를 허용합니다. 예를 들어 document.write("<h1>Hello World</h1>") .

    index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=, initial-scale=1.0" />
        <title>Using write object</title>
      </head>
    
      <body>
        <script>
          document.write("<h2>Hello World!</h2>");
        </script>
      </body>
    </html>
    


    Edit on Stackblitz


    innerHTML 속성



    선택기를 기반으로 특정 요소를 대상으로 지정하려면 선택한 요소에 innerHTML 속성이 사용됩니다.

    index.html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=, initial-scale=1.0" />
        <title>Using innerHTML</title>
    </head>
    <h2 id="demo"></h2>
    
    <body>
        <script>
           let elem = document.querySelector("#demo");
               elem.innerHTML = "Hello World!";
        </script>
    </body>
    
    </html>
    


    Edit on Stackblitz

    콘솔 외부의 창 브라우저에서는 alert 개체 또는 문서 속성에 window 메서드를 사용합니다 — window.alert('...') , window.document.write('...') , window.document.querySelector('#demo') = "..." .





    테크스택 미디어 | 블루호스트


  • 1년 동안 무료 도메인 이름과 무료 SSL 인증서가 있는 웹 사이트를 받으세요.
  • 원클릭 WordPress 설치 및 연중무휴 지원.
  • 월 $3.95부터 시작합니다.
  • 30일 환불 보장.

  • 좋은 웹페이지 즐겨찾기