JavaScript I/Oと変数

12075 ワード

1)出力

자바스크립트는 여러 방법을 통해 결과물을 HTML 페이지에 출력할 수 있음JavaScriptでは、次の出力方法を使用できます.
  • window.alert()メソッド
    :最も簡単なデータ出力方式;ブラウザと個別のダイアログボックスを通じてユーザーにデータ
  • を送信する.
  • HTML DOM要素を使用したinnerHTML構成
    :実際のJavaScriptコードで最も一般的な出力方法は、HTML DOM要素のinnerHTML propertyを使用することです.
    :まず、文書オブジェクトのgetElementByID()やgetElementsByTagName()などの方法でHTML要素を選択し、InverHTML Propertyを使用して、
  • などの選択したHTML要素の内容や属性値を簡単に変更します.
  • document.write()メソッド
    :HTMLドキュメントに出力ページをロードすると、最初にページ、documentにデータが出力されます.write()メソッドは、通常、
  • をテストまたはデバッグするために使用される.
  • console.log()メソッド
    : console.log()メソッドはWebブラウザのコンソールからデータを出力し、多くの主流のWebブラウザはF 12を押してメニューのコンソールをクリックすると、コンソール画面を使用することができ、開発でよく使用されるのは
  • である.

    実験:出力[じっけん:しゅつりょく]

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- html 문서 내에 스크립트 작성할 경우에는 꼭 script 태그내에서만 작성 가능  -->
        <script>
            //1. body 태그 내에(화면상) 출력하고 싶을 때 사용
            document.write("<h1>입력할 문장을 작성</h1>")
            //2. 콘솔창에 출력하고 싶을 때 사용
            //개발 중에 값 전송, 응답확인 / 객체 내용 확인 등을 위해 사용
            console.log("콘솔창에 출력되는 데이터!")
            //3. 알림 띄우고 싶을 때 
            alert("팝업창을 통해서 출력하는 데이터")
    
        </script>
    </body>
    </html>

    結果

  • window.alert()メソッド
  • document.write()メソッド
  • console.log()メソッド
  • 2)入力

  • prompt
    :入力ウィンドウで入力し、ユーザーが入力した値(値を返す必要がある)を返します.*戻りタイプ:String
    :prompt(変更不可)、入力(省略可能)
  • confirm
    :入力の確認とキャンセルにより、*戻りタイプ:boolean
    :confirm(「印刷」)
  • 練習しゅうよう:入力にゅうりょく

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            //1. prompt("출력질문", "입력창에 출력하고 싶은 기본값(옵션)")
            // -> 입력한 값은 String(문자열)로 변환 
            var lunch = prompt("오늘 점심은?")
    
            //2. confirm("출력질문")
            //-> 선택한 값(확인/취소)은 boolean(논리형)으로 반환
            var choice = confirm("오늘 점심은 쭈삼?")
    
            console.log(lunch)
            console.log(choice)
    
        </script>
    </body>
    </html>

    結果


  • prompt


  • comfirm


  • 1に冷麺を入力し、2で「OK」をクリックしてコンソールウィンドウを確認します.

  • 3)変数

    사전적 의미로는 "변화를 줄 수 있는" 또는 "변할 수 있는 수" 프로그래밍에서는 데이터를 담는 공간

  • JavaとJavaScript


  • Javascript変数-var、let、const

  • 練習:入力可能な名前のウィンドウを表示し、コンソールウィンドウに名前+ウェルカム出力を表示します。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            var name = prompt("이름을 입력하세요")
            console.log("어서오세요!")
            console.log(name, "도망가지마세요")
        </script>
    </body>
    </html>

    結果


  • コンソールウィンドウの確認