패스트 캠퍼스 MGS 3기 - 4월 19일(JavaScript 특강)

JY·2022년 4월 19일
JavaScriptTIL패스트 캠퍼스
0

패스트 캠퍼스 MGS FE 3기

목록 보기
7/43
post-thumbnail

💡 Keyword

  • 함수
  • 선택자 -getElementById, getElementsByClassName, querySelector
  • PSEUDO CODE



Javascript 특강

ref: https://northern-goldfish-40c.notion.site/Javascript-Manual-5d89d48726164d82a9b3b8c247b8c3a4

  • 영어를 잘하면 js를 해석하는 데 큰 도움이 된다.
  • 컴퓨터는 멍청하다. (지식이 많은 친구, 지능은 0)
  • js에는 내장 함수가 엄~청 많아서 모두 외우려고 하기 보다는 필요할 때마다
    1. 내가 어떤 기능이 필요한지 파악하고,
    2. 그 기능을 검색하는 방식으로 접근하기!

👩‍💻 예제 1

버튼을 클릭하면 모달창을 띄우는 예제를 만들어 보자!

🤔 tip

  • 보통 함수 이름은 명사 + 명사로 짓는다. showAlert / show-alert 둘 다 가능하다.
  • "" 안에서 ""가 필요하면 ''을 사용
  • .: '~의'로 해석
  • html 태그에서 on은 '~을 기다린다'로 해석하면 이해가 쉽다. (onclick: 클릭을 기다린다!)

함수를 이용하기

함수는 긴 코드를 한 단어로 축약한다고 생각하면 이해가 쉽다.


style.ccs

#alertBox{
  background-color: #c6c6c6;
  border-radius: 10px;
  font-weight: 800;
  padding: 20px;
  display: none;
}

#alertBox span {
  cursor: pointer;
  color: blue;
}

index.html

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="./style.css">
</head>

<body>

  <div id="alertBox">
    <p>
      모달창
      <br>
      <span onclick="모달창닫아줘()">
        누르면 닫힘
      </span>
    </p>
  </div>

  <button class="showAlert" onclick="모달창열어줘()">
    누르면 나타남
  </button>

  <script>
    function 모달창닫아줘() {
      document.getElementById('alertBox').style.display = 'none'
    }
    function 모달창열어줘() {
      document.getElementById('alertBox').style.display = 'block'
    }
  </script>

</body>

</html>

❗ Dry한 코드 바꾸기

'Dry하다!!'라는 것은 반복되는 코드가 있다는 의미이다.
개발자들이 첫 번째로 싫어하는게 ‘반복’이므로 비슷한 동작을 수행하는 코드가 있다면 그것을 하나로 축약시키는 것이 좋다.

이전 코드에서 반복되는 부분인 function()의 코드를 바꿔보자.

index.html

<body>
  <div id="alertBox">
    <p>
      모달창
      <br>
      <span onclick="모달창여닫기('none')">
        누르면 닫힘
      </span>
    </p>
  </div>

  <button class="showAlert" onclick="모달창여닫기('block')">
    누르면 나타남
  </button>

  <script>
    function 모달창여닫기(열거나닫거나) {
      document.getElementById('alertBox').style.display = 열거나닫거나;
    }
  </script>
</body>

모달창을 두 개 만들기

style.ccs

#alertBox, #alertBox2 {
  background-color: #c6c6c6;
  border-radius: 10px;
  font-weight: 800;
  padding: 20px;
  display: none;
}

#alertBox span, #alertBox2 span {
  cursor: pointer;
  color: blue;
}

index.html

<body>
  <div id="alertBox">
    <p>
      모달창 1
      <br>
      <span onclick="모달창여닫기('none')">
        누르면 닫힘
      </span>
    </p>
  </div>
  
  <div id="alertBox2">
    <p>
      모달창 2
      <br>
      <span onclick="모달창열고닫기('none')">
        누르면 닫힘
      </span>
    </p>
  </div>

  <div>
    <button class="showAlert" onclick="모달창여닫기('block')">
      누르면 모달창1 나타남
    </button>
    <button onclick="모달창열고닫기('block')">
      누르면 모달창2 나타남
    </button>
  </div>
  
  <script>
    function 모달창여닫기(열거나닫거나) {
      document.getElementById('alertBox').style.display = 열거나닫거나;
    }
    function 모달창열고닫기(열거나닫거나) {
      document.getElementById('alertBox2').style.display = 열거나닫거나;
    }
  </script>
</body>

❗ Dry한 코드 바꾸기

Dry 1

<script>
    function 모달창여닫기(열거나닫거나) {
      document.getElementById('alertBox').style.display = 열거나닫거나;
    }
    function 모달창열고닫기(열거나닫거나) {
      document.getElementById('alertBox2').style.display = 열거나닫거나;
    }
  </script>

Dry 2

  <div id="alertBox">
    <p>
      모달창 1
      <br>
      <span onclick="모달창여닫기('alertBox', 'none')">
        누르면 닫힘
      </span>
    </p>
  </div>
  <div id="alertBox2">
    <p>
      모달창 2
      <br>
      <span onclick="모달창여닫기('alertBox2', 'none')">
        누르면 닫힘
      </span>
    </p>
  </div>

위의 두 부분(Dry 1, Dry 2)에서 반복이 일어나고 있으므로 코드를 바꾸어 보자! addEventListener와 콜백 함수를 이용하였다.

style.css

#alertBox {
  background-color: #c6c6c6;
  border-radius: 10px;
  font-weight: 800;
  padding: 20px;
  display: none;
}

#alertBox span {
  cursor: pointer;
  color: blue;
}

index.html

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div id="alertBox">
    <p id="target"> 모달창 1 </p>
    <span id="closeSpan">
      누르면 닫힘
    </span>
  </div>

  <div>
    <button class="showAlert" onclick="모달창열기('모달창 1')">
      누르면 모달창1 나타남
    </button>
    <button onclick="모달창열기('모달창 2')">
      누르면 모달창2 나타남
    </button>
  </div>

  <script>
    // 옛날 문법
    function 모달창열기(내용) {
      document.getElementById("alertBox").style.display = "block";
      document.getElementById("target").innerHTML = 내용;
    }

    // 최신 문법
    document.getElementById("closeSpan").addEventListener("click", function () {
      document.getElementById("alertBox").style.display = "none";
    })
  </script>

</body>
</html>

👉 실행 결과

  • addEventListener
    • add: 추가할 것이다.
    • Event: 일, 사건(=사용자의 행동)
    • Listener: on(~를 기다리는 중)
    • 2개의 인자가 필요! 어떤 행동을 기다릴 것인지, 어떤 행동을 할 것인지

- (내용 추가하기..) 콜백 함수 순서에 따라..어쩌고 1. 사용자가 span 태그를 클릭 2. ...


👩‍💻 예제 2

<input>을 이용하여 사용자의 입력을 받아서 유효성 검사 예제를 만들어 보자!
사용자가 검색어를 입력했을 때, 검색어를 입력하지 않았을 때, 그리고 공백을 입력했을 때를 고려한다.

🤔 제어문(조건문) 조건 작성 시 알아둘 것!!

  • =, ==, ===
    • =: 대입 연산자
    • ==: 좌항의 값과 우항의 값을 비교, 같으면 true 다르면 false
    • ===: 좌항의 값과 우항의 값을 비교 & data type도 비교

  • booleanData의 특징
    • 숫자 0은 false
    • 0이 아닌 양수는 true
    • 문자열이 선언되어 있지 않으면 false
    • 문자열이 선언되어 있으면 true

index.html

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <input type="text" name="" id="targetInput">
  <button id="submitBtn">제출</button>

  <div id="result">

  </div>

  <script>
    document.getElementById("submitBtn").addEventListener("click", function () {
      var userInput = document.querySelector("#targetInput").value;

      if (!userInput.trim()) {
        alert("공백을 입력하지 마세요!!")
      } 
      else {
        alert(userInput)
      }
    });
  </script>
</body>

</html>

👉 실행 결과

PSEUDO CODE

컴퓨터 언어가 아닌 사용자(개발자) 언어로 미리 코딩하는 것을 뜻한다.

사용자의 입력한 값을 받아 화면에 출력하는 예제로 예시를 들면,

  1. <input>에 값을 입력
    1. 인풋태그 추적해서
    2. 사용자가 입력한 값 가져온 다음 👉 '값을 어떻게 가져오지?'라는 생각이 들 땐 구글링 적극 활용하기(how to get value input tag in javascript)
  2. 버튼을 클릭
  3. 입력한 값을
  4. <div> 안에 출력

무작정 코드부터 짜는 것이 아니라! 필요한 기능을 먼저 생각해보고 코드로 옮기는 이러한 과정은 매우 중요하다. 처음엔 머릿속에 바로 떠올리고 코드로 옮기는 것이 쉽지 않겠지만.. 습관화해야 한다!!


선택자

js에서 tag를 선택할 수 있는 방법에는 3가지의 방법이 있다.

  • getElementById

    • id의 값으로 tag를 선택
    • tag를 무조건 하나만 선택

  • getElementsByClassName
    -class의 값으로 tag(들)을/를 선택

    • tag를 여러 개 선택한다고 가정, 따라서 배열로 접근해야 함

  • querySelector

    • css-selector로 tag를 선택
    • 제일 위에 있는 tag 하나만 선택, 여러 개 선택하려면 querySelectorAll 사용

🤔 id는 중복 ❌, class는 중복 ⭕?
id를 여러 번 사용해도 실제로는 웹어플리케이션에 에러가 발생하지 않는다. 동작은 문제 없이 되지만 개발자들끼리 id는 한 번만 쓰자고 약속한 것!

🤔 구글링 Tip:

  • "": 꼭 포함해야 하는
  • -: 빼고 싶은
    👉 "react" -vue: react를 검색하는데, vue가 포함된 검색결과는 보기 싫어!
  • *: 기억이 나지 않는 키워드 검색 시
    👉 react vs *: react랑 무언가를 비교하고 싶은데 뭔지 모르겠어... react와 무언가를 비교한 검색결과들을 모두 보고싶어!
profile
JY
🙋‍♀️
이전 포스트

패스트 캠퍼스 MGS 3기 - 4월 18일

다음 포스트

패스트 캠퍼스 MGS 3기 - 4월 19일(CSS 개요)

0개의 댓글