자바스크립트(JavaScript) LV.1

Jehyung Ahn·2023년 4월 12일
JavaScriptTILTIW
0
post-thumbnail

자바스크립트(JavaScript)


1. 자바스크립트란

  • HTML을 조작하기 위해서 사용한다.

  • 영어를 알면 이해가 쉽다.

<!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>
    <h1 id="title">안녕하세요.</h1>
    <h2 id="content">연습입니다.</h2>
    <script>
      document.getElementById("title").innerHTML = "안녕"; // title을 안녕으로 변경
      document.getElementById("content").style.fontSize = "16px"; // 본문의 폰트 사이즈를 16px로 변경
    </script>
  </body>
</html>

주석 : //


2. 구성 단계

<!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" />
    <link rel="stylesheet" href="main.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="alert-box" id="alert">
      알림창
      <button
        onclick="document.getElementById('alert').style.display = 'block';
  "
      >
        버튼
      </button>
      <button onclick="document.getElementById('alert').style.display='none';">
        닫기
      </button>
    </div>
  </body>
</html>
  • HTML / CSS로 미리 디자인한다.
  • 조건을 넣어 필요할 때만 보이도록 조정한다.

3. 함수(Function)

<!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" />
    <link rel="stylesheet" href="main.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="alert-box" id="alert">
      알림창
      <button onclick="closeAlert()">닫기</button>
    </div>
    <button onclick="openAlert()">버튼</button>

    <script>
      function openAlert() {
        document.getElementById("alert").style.display = "block";
      }

      function closeAlert() {
        document.getElementById("alert").style.display = "none";
      }
    </script>
  </body>
</html>
  • 자바스크립트는 함수 작명시 camelCase 방식으로 짓는다. (openAlert)
  • 조작할 HTML의 하단에 script 코드를 짜야한다.
  • 셀렉터 오타를 주의한다. (개발자 도구에서 디버깅)
  • 기본 문법 오타를 주의한다. (대소문자)

4. 함수의 파라미터

<!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" />
    <link rel="stylesheet" href="main.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="alert-box" id="alert">
      알림창
      <button onclick="controlAlert('none');">닫기</button>
    </div>
    <button onclick="controlAlert('block','아이디를 입력하세요.');">
      버튼1
    </button>
    <button onclick="controlAlert('block','비번을 입력하세요.');">버튼2</button>

    <script>
      function controlAlert(para, str) {  // 여러 인자가 가능
        document.getElementById("alert").style.display = para;
        document.getElementById("alert").innerHTML = str;
      }
    </script>
  </body>
</html>

5. 이벤트 리스너

<!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" />
    <link rel="stylesheet" href="main.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="alert-box" id="alert">
      <p>알림창</p>
      <button id="close">닫기</button>
    </div>

    <button onclick="controlAlert('block','아이디를 입력하세요.');">
      버튼1
    </button>
    <button onclick="controlAlert('block','비번을 입력하세요.');">버튼2</button>

    <script>
      document.getElementById("close").addEventListener("click", function () {
        document.getElementById("alert").style.display = "none";
      });

      function controlAlert(para, str) {
        document.getElementsByClassName("p")[0] = str;
        document.getElementById("alert").style.display = para;
      }
    </script>
  </body>
</html>
  • 클래스 명으로 찾을 수도 있다.
  • ex) document.getElementsByClassName('클래스명')[인덱스]
  • addEventListener('다양한 명령어가 있음' , function() 콜백함수 )

6. 서브메뉴와 classList

<!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" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="main.css" />
    <title>Document</title>
  </head>

  <body>
    <nav class="navbar navbar-light bg-light">
      <div class="container-fluid">
        <span class="navbar-brand">Navbar</span>
        <button class="navbar-toggler" type="button">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </nav>

    <ul class="list-group">
      <li class="list-group-item">An item</li>
      <li class="list-group-item">A second item</li>
      <li class="list-group-item">A third item</li>
      <li class="list-group-item">A fourth item</li>
      <li class="list-group-item">And a fifth one</li>
    </ul>

    <script>
      document
        .getElementsByClassName("navbar-toggler")[0]
        .addEventListener("click", function () { // 클릭 이벤트마다 클래스명 show가 토글
          document
            .getElementsByClassName("list-group")[0]
            .classList.toggle("show");
        });
    </script>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
.alert-box {
  background-color: skyblue;
  padding: 20px;
  color: white;
  border-radius: 5px;
  display: none; /* 보여주고 싶으면 display: block; */
}

.list-group {
  display: none;
}

.show {
  display: block;
}
  • classList.명령어( )로 Nav바를 on / off 적용한다.
  • 셀렉터는 일반적으로 class와 id를 보통 사용한다.
  • document.querySelector('.list-group') 는 css 문법을 그대로 사용할 수 있다.
  • 클래스가 중복되면 document.querySelectorAll('.list-group')[인덱스 번호]로 이용한다.

7. jQuery

  • HTML 조작 문법을 쉽게 바꿔주는 라이브러리 (ex : vue, react, jQuery)
<!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" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" href="main.css" />
    <title>Document</title>
  </head>

  <!-- jQuery cdn -->
  <script
    src="https://code.jquery.com/jquery-3.6.4.min.js"
    integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
    crossorigin="anonymous"
  ></script>

  <body>
    <p class="hello">안녕</p>
    <button id="test-btn">버튼</button>

    <script>

      $(".hello").html("안녕하세요."); // 한 줄로 hello클래스 모든 내용 변경
      $(".hello").css("color", "red"); // 스타일 변경
      $(".hello").addClass("show"); // 클래스명 추가
      $(".hello").removeClass("show"); // 클래스명 제거
      $(".hello").toggleClass("show"); // 클래스명 토글
      $("#test-btn").on("click", function () { // addEventListener를 on으로 대체
        $(".hello").hide(); // style.display = 'none'과 비슷
        $(".hello").fadeOut();
        $(".hello").slideUpe();
      });

    </script>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

8. 애니메이션

<!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" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="main.css" />
    <title>Document</title>
  </head>
  <body>
    <!-- jQuery cdn -->
    <script
      src="https://code.jquery.com/jquery-3.6.4.min.js"
      integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
      crossorigin="anonymous"
    ></script>

    <div class="black-bg">
      <div class="white-bg">
        <h4>로그인하세요</h4>
        <button class="btn btn-danger" id="close">닫기</button>
      </div>
    </div>

    <button id="enter">들어가기</button>

    <script>
      $("#enter").on("click", function () {
        $(".black-bg").addClass("show");
      });
    </script>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
.black-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
  padding: 30px;
  visibility: hidden; /* 애니메이션 줄 때는 display: none; 대신 모습만 숨기는 visibility 사용 */
  opacity: 0;
  transition: all 1s; /* 서서히 변하게 해줌 */
}
.white-bg {
  background: white;
  border-radius: 5px;
  padding: 30px;
}
.show {
  visibility: visible;
  opacity: 1;
}
  • one - way 애니메이션
    1. 시작 스타일 설정
    2. 최종 스타일 설정
    3. 변하게 만드는 조건 설정
    4. transion 추가
  • 애니메이션은 성능상 css로만 구현하는 것이 좋다.

9. if - else

<!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" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="main.css" />
    <title>Document</title>
  </head>
  <body>
    <script
      src="https://code.jquery.com/jquery-3.6.4.min.js"
      integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
      crossorigin="anonymous"
    ></script>

    <div class="black-bg">
      <div class="white-bg">
        <h4>로그인하세요</h4>
        <form action="success.html">
          <div class="my-3">
            <input type="text" class="form-control" id="email" />
          </div>
          <div class="my-3">
            <input type="password" class="form-control" id="pwd" />
          </div>
          <button type="submit" class="btn btn-primary">전송</button>
          <button type="button" class="btn btn-danger" id="close">닫기</button>
        </form>
      </div>
    </div>

    <button id="login">로그인</button>

    <script>
      $("#login").on("click", function () {
        $(".black-bg").addClass("show");
      });

      $("form").on("submit", function () {
        if (document.getElementById("email").value == "") { // 사용자의 input
          alert("아이디를 입력해주세요."); // alert는 '문장'을 팝업창 띄어주는 함수
        } else if (document.getElementById("pwd").value == "") {  // if가 거짓이면 else if 실행
          alert("비밀번호를 입력해주세요.");
        } else if (document.getElementById("pwd").value.length < 6) { // 사용자의 input 길이
          alert("비밀번호는 6자 이상으로 입력해주세요.");
        }
      });
    </script>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

10. input, change 이벤트 & and, or 연산자

input : 값이 입력될 때마다 시행

change : 값이 변경되고 포커스를 잃을 때 발생

== : 느슨한 비교 (ex) 1과 '1'을 true)

=== : 엄격한 비교 (ex) 1과 '1'을 false)

&& : and 기호

|| : or 기호


11. 변수 문법

    <span class="badge bg-dark">Dark</span>

    <script>
      var cnt = 0; // 변수 선언과 할당 

      $(".badge").on("click", function () {
        cnt += 1; // 버튼 클릭시 1씩 더함
        if (cnt % 2 == 1) { // 홀짝 경우
          $(".badge").html("Light");
        } else {
          $(".badge").html("Dark");
        }
      });
    </script>

변수의 장점

  • 길고 복잡한 자료 저장 가능함
  • 특정 값으로 설정 또는 기억하기 위함.

실제 다크모드

  • class를 별도로 다크모드로 디자인한다.

<script>
  var cnt = 1; // 변수 생성과 할당
  cnt = 2; // 변수 재할당

  let cnt = 0;
  let cnt = 1; // let은 재선언 불가

  const cnt = 0;
  const cnt = 1; // const은 재선언 불가
  cnt = 1; // const은 재할당도 불가
</script>

재선언 불가 : 중복 이름을 막아 버그를 방지함

재할당 불가 : 바뀌지 않을 값을 사용하기에 용이함

profile
Jehyung Ahn
A Curious Developer
이전 포스트

백준 1992

다음 포스트

백준 6064

0개의 댓글