220419)Js特別講座


李在元社長.

Javascript


Webを操作可能にする言語.

1.jsを使用して画面uiを置き換える方法

  • htmlを使用してuiの
  • を作成
  • css非表示
  • jsは機能開発終了後の
  • である..~の=代入演算子.左港に右港を代入する価格.

    2.jsを使用してuiにアクセス

    <body>
        <!-- 선택자로 접근 -->
        <div class="container">
            <h1 id="fastcampus">안녕하세요</h1>
            <script>
                document.getElementById('fastcampus').innerHTML = "안녕 못한대?";
                //문서의 fastcampus라는 id를 갖고있는 엘리먼트의 html내부를 안녕못한대로 바꿔줘
            </script>
        </div>
    </body>

    3.Onclickを使用してjsアクションを接続する(モードウィンドウを作成)

    <body>
        <!-- 모달창 -->
        <div class="container">
           <div id="alertBox">
               모달창임
           </div>
           <button class="alertButton" onclick=" document.getElementById('alertBox').style.display='block'">
             모달창
          	</button>
        </div>
    </body>

    3-1)関数に機能を含める


    htmlタグにjs機能のフォーマットコードを追加するとメンテナンスが困難になります.
    したがって、この場合、
    関数を使用してコードを完了することを推奨します.
    함수 선언자 + 함수명
    ex) function 모달창열어줘(){
    	  실행할 코드 ;
    }
    <body>
        <!-- 모달창 -->
        <div class="container">
           <div id="alertBox">
               모달창임
           </div>
           <button class="alertButton" onclick="모달창열기()">모달창</button>
            <script>
               function 모달창열기(){
              	document.getElementById('alertBox').style.display = 'block'
               }
            </script>
        </div>

    3-2)パラメータを受け入れ、重複を避ける


    モードウィンドウを開く、閉じるコードdocument.getElementById('alertBox').style.displayは共通です.
    パラメータ取得値はnone,blockで置換された部分のみで処理できる.
    <div id="alertBox">
      <p>
        알림창임!
        <br>
        <span onclick="모달창여닫기('none')">이거 누르면 꺼짐</span>
      </p>
    </div>
    <button class="show-alert" onclick="모달창여닫기('block')">알림창을 보여줘!</button>
    
    <script>
      function 모달창여닫기(열거나닫거나) {
      	document.getElementById('alertBox').style.display = 열거나닫거나;
      }
    </script>

    3-3)パラメータを追加して重複をさらに減らす


    もし2つのモデル矛があれば、さらに多くの存在があるのだろうか.
    <body>
        <div id="alertBox">
            <p>
                나는 첫번째 모달임!
                <br>
                <span onclick="모달창여닫기('alertBox', 'none')">이거 누르면 꺼짐</span>
            </p>
        </div>
        <div id="alertBox2">
            <p>
                나는 두번째 모달임!
                <br>
                <span onclick="모달창여닫기('alertBox2', 'none')">이거 누르면 꺼짐</span>
            </p>
        </div>
    
        <button class="show-alert" onclick="모달창여닫기('alertBox', 'block')">첫번째 모달 보여줘!</button>
        <button class="show-alert" onclick="모달창여닫기('alertBox2', 'block')">두번째 모달 보여줘!</button>
    
        <script>
            function 모달창여닫기(무엇을, 열거나닫거나) {
                document.getElementById(무엇을).style.display = 열거나닫거나;
            }
        </script>
    </body>

    3-4)曖昧なウィンドウを1つだけ作成し、字を変えるだけで繰り返し使用できる

    <body>
        <div id="alertBox">
            <p id="title">
                나는 첫번째 모달임!
            </p>
            <button>이거 누르면 꺼짐</button>
        </div>
    
        <button class="show-alert" onclick="모달창열기('나는 첫번째 모달임!')">첫번째 모달 보여줘!</button>
        <button class="show-alert" onclick="모달창열기('나는 두번째 모달임!')">두번째 모달 보여줘!</button>
    
        <script>
            function 모달창열기(내용) {
                document.getElementById('alertBox').style.display = 'block';
                document.getElementById('title').innerHTML = 내용;
            }
        </script>
    </body>

    4. Event - cb


    上記の例ではhtmlのonclickプロパティを使用してclickを制御する場合の操作を示します.
    これによりhtmlにjsを挿入するとメンテナンス効率が低下する可能性があります.
    mouseover、submit、clickなどのUI制御イベントが複数存在します.
    eventとコールバック関数を使用します.
    https://jenny-daru.tistory.com/17

    4-1)ユーザの入力値を受信し、結果の出力を試みる


    ボタンをクリックすると、
    1.JavaScriptを使用して入力ラベルを追跡する
    2.タグの入力値を入力し、変数に含める
    3.出力変数
    cf) 변수
    var : 전역 혹은 함수 단위의 접근성.
    let : 블록 단위의 접근성.
    const : let과 동일하나 const로 선언된 변수는 바꿀 수 없음. 상수개념.
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="./style.css">
    </head>
    
    <body>
       <input class="target" type="text">
       <button id="submitBtn" class="submitBtn">제출</button>
    
       <div id="result">
       </div>
     </body>
    </html>
  • idを選択getElementById:パラメータの値であるIDを持つ要素を返します.
  •  document.getElementById("submitBtn").addEventListener("click", function(){
       var 사용자가입력한값 = document.querySelector(".target").value;
       console.log("value : ", 사용자가입력한값)
     })
  • クラスの選択getElementsByClassName[i]:パラメータ値がclassの複数の要素を返します.
    配列の性質があり、順序を表す[i]に指定すべきである.
  •  document.getElementsByClassName("submitBtn")[0].addEventListener("click", function(){
               var 사용자가입력한값 = document.querySelector(".target").value;
               console.log("value : ", 사용자가입력한값)
     })
  • css-セレクタ構文を受信し、対応する要素として選択querySelector:css-selector構文を受信し、対応する要素を返します.querySelectorAll[i]:多因子
  •   <script>
           document.querySelector(".submitBtn").addEventListener("click", function(){
               var 사용자가입력한값 = document.querySelector(".target").value;
               console.log("value : ", 사용자가입력한값)
           })
       </script>

    5.検証(ユーザーが値を入力したかどうかを確認)


    pseudo code:韓国語
    //pseudo code 1딘계
    document.querySelector(".submitBtn").addEventListener("click", function(){
               var 사용자가입력한값 = document.querySelector(".target").value;
               1. 사용자가 값을 입력하지 않고 버튼 누르면 안되는데
               2. 그럼 사용자가 값을 입력했는지 체크하고
               3. 입력했으면 콘솔 찍고
               4. 입력하지 않았으면 alert창 뛰어야겠다.
    })
    //pseudo code 2단계
    document.querySelector(".submitBtn").addEventListener("click", function(){
           var 사용자가입력한값 = document.querySelector(".target").value;
           if(사용자가입력한값이 있음?){
               있으면 이 코드를 실행시켜줘
           } else {
               공백이 아니라면 이 코드를 실행시켜줘
           }
    })
    じつきのうコード
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="./style.css">
    </head>
    
    <body>
       <input class="target" type="text">
       <button id="submitBtn" class="submitBtn">제출</button>
    
       <div id="result">
       </div>
    
       <script>
           document.querySelector(".submitBtn").addEventListener("click", function(){
               var 사용자가입력한값 = document.querySelector(".target").value;
               if(!사용자가입력한값){
                    alert("값 입력하세요")
               } else {
                    console.log(사용자가입력한값)
               }
           })
       </script>
    </body>
    </html>

    5-1)ユーザーがスペースしか入力していない場合は?

    document.querySelector(".submitBtn").addEventListener("click", function(){
      var 사용자가입력한값 = document.querySelector(".target").value;
      if(사용자가입력한값 == " "){
        alert("공백 입력 ㄴㄴ")
      } else {
        console.log(사용자가입력한값)
      }
    })
    trimメソッドを使用して文字列からスペースを削除します.
    ユーザーは値を入力していません.
    スペースまたはすべての条件を入力します.
    document.querySelector(".submitBtn").addEventListener("click", function(){
      var 사용자가입력한값 = document.querySelector(".target").value;
      if(!사용자가입력한값.trim()){
        alert("공백 입력 ㄴㄴ")
      } else {
        console.log(사용자가입력한값)
      }
    })