220419) Js특강

이재원 매니저

Javascript

웹을 조작(동작)하게 만들기 위한 언어.

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) 인자를 추가해 반복을 더 줄여주기

만약 모달창이 두개라면, 더 나아가 그 이상 존재한다면?

<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) 하나의 모달창만 만들고, 글자만 바꿔서 재활용하기

<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를 삽입하는 것은 유지보수함에 있어 비효율성을 야기할 수 있고
click 뿐 아닌 mouseover, submit과 같은 다양한 ui제어 event들이 존재하기에
event와 callback function를 활용한다.
https://jenny-daru.tistory.com/17

4-1) 사용자의 입력값을 받아, 결과 출력해보기

button을 클릭했을 때,
1. 자바스크립트로 input 태그 추적
2. input태그 속 입력값 가져와 변수에 담기
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 : ", 사용자가입력한값)
 })

class로 선택하기
getElementsByClassName[i] : 인자에 해당하는 값을 class로 하는 요소를 여러개 반환.
배열로서의 성격을 가지고있어 순번을 의미하는 [i]로 특정해줘야한다.

 document.getElementsByClassName("submitBtn")[0].addEventListener("click", function(){
           var 사용자가입력한값 = document.querySelector(".target").value;
           console.log("value : ", 사용자가입력한값)
 })

css-selector 문법을 받아서 해당하는 요소로 선택
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 method를 활용해 문자열에서 공백을 제거,
사용자가 값을 입력하지않거나
공백만 입력했거나 모두 조건을 걸어준다.

document.querySelector(".submitBtn").addEventListener("click", function(){
  var 사용자가입력한값 = document.querySelector(".target").value;
  if(!사용자가입력한값.trim()){
    alert("공백 입력 ㄴㄴ")
  } else {
    console.log(사용자가입력한값)
  }
})

Author And Source

이 문제에 관하여(220419) Js특강), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@oching/220419-Js특강

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)