티스토리 뷰

Frontend/JavaScript

[코딩애플] 실전 자바스크립트

blueprint-12 2022. 4. 1. 18:28

웹 환경에서 JavaScript 목적 = HTML 조작과 변경(핵심)

-> HTML조작하는 것이 핵심이라고 했으므로 당연히 JS가 들어간 script태그는 HTML 요소들 아래에 작성해야 오류가 나지 않음(그래서 body태그의 끝쪽에 script태그를 넣으라고 하는 것)

->JS와 HTML은 분리시켜줘야 한다. 그래서 onclick 내부에 바로 js코드를 작성하는 것은 좋지 않음 따로따로 작성해라

->분리시켜주기 위해 이벤트리스너를 사용하는 것

 

UI구현 기본 법칙

  1. 미리 디자인해놓고 숨기기(UI를 보여주고 안보여주고할때는 css display none을 많이씀)
  2. 버튼 누르거나하면 보여주기

+ querrySelector로 HTML요소 가져오기 싫으면 그냥 id부여해서 getElementById() 하기 

<요구사항>
버튼1을 누르면 "아이디 입력해라" Alert 출현 
버튼2 누르면 "비번 입력해라" Alert 출현 

방법1) 그냥 HTML을 복사해서 더 만들기

방법2) JS를 이용해 UI재활용하기 ✔

 

※함수를 만들기 전에 어떻게 구현해야 할 지 모르겠다면 우선 한글부터 작성하고 JS로 변환하자

 

1. 내용물바꾸기

2. 알림창 띄우기( display: none이 디폴트값이니까 이걸 보이게 속성값을 block으로 변경)

 

내가 짠 코드▼

<body>
<div class="alert-box" id="alert">
      <p id="title">Alert 박스</p>
      <button onclick="showAlertBox('none')">X</button>
</div>
<button onclick="changeContent('아이디')">버튼1</button>
<button onclick="changeContent('비번')">버튼2</button>
</body>
<script>
function changeContent(content) {
        const div = document.getElementById('personal');
        div.style.display = 'block';
        div.innerHTML = `${content} 입력해라`;
      }
</script>

 

보안점:

  • 내용물 바꾸기가 먼저 선행돼야 함, getElementById말고 getElementsByClassName써보기 
  • getElementsByClassName의 경우, 해당 class 명을 가진 모든 요소들을 가져오는 함수이기 때문에 하나만 가져오고 싶다면 몇번째 요소인지 배열처럼 [n]대괄호를 통해 알려줘야한다. 
  • getElementById와 getElementsByClassName 이 많이 쓰인다함
  • innerHTML 함수를 사용하는 곳이 div container 가 아니라 p태그여야함

수정한 코드▼

function changeContent(content) {
        const div = document.getElementsByClassName('alert-box')[0];
        const title = document.getElementById('title');
        title.innerHTML = `${content} 입력해라`;
        div.style.display = 'block';
      }

 

💥이벤트리스너를 통해 HTML과 JS 를 완전히 분리하기 

 

->이벤트리스너를 쓰면 HTML태그에 onclick 같은 것을 쓰지 않아도 된다.

아래 예시는 div 내부에 button에 id명 close를 줘서 해당 요소 button에 이벤트리스너를 설치한 내용이다.

<body>
    <div class="alert-box" id="alert">
      <p id="title">Alert 박스</p>
      <button id="close">X</button>
    </div>
<!--중략-->

    <script>
    //중략
      document.getElementById('close').addEventListener('click', function () {
        document.getElementById('alert').style.display = 'none';
      });
    </script>
  </body>

문법은 단순하게 생각하면 된다. addEventListener을 기준으로 왼쪽의 요소가 첫번째 인자로 들어온 이벤트 행위를 할 경우, 두번째 인자로 준 함수를 실행시켜달라는 것

 

💥jQuery 빠른 기초

React하면되지 왜 배움?

  • jQuery 요즘 안쓴다는데 ? -> React없으면 jQuery가 왕
  • jQuery로 개발된 사이트 1조 1억개라서 안 배울 수는 없음

실행방법 

  1. jQuery.js 파일 전체 다운받아서 src 링크 직접걸기
  2. CDN 사용-> minified(공백제거된 압축버전), slim(몇 가지 기능이 빠진 라이트버전)

jQuery공홈 CDN

코드삽입 위치?

  • CDN 코드 삽입 위치는 body 태그 끝나기 직전에 넣어주는 것이 제일 좋다 브라우저가 위부터 읽어오기 때문에
  • 제이쿼리 뿐만 아니라 모든 JS(.js파일들)는 웬만하면 body태그 끝쪽에 넣어주는 게 좋음-> 자바스크립트는 기능만들고 html을 조작하는 기능을 하기 때문에 

jQuery문법

 

기본문법: $('CSS셀렉터')

e.g.) $('.container') //클래스명이 콘테이너인 모든 것

기본적으로 어떤 함수에 인자를 아무것도 전달하지 않으면 해당하는 값을 반환해서 알려주는 기능을 함

 

 

Q. jQuery 잘 작성해서 h4글자에 CSS class를 넣어보셈
->  $('#test').addClass('yellow-bg');

 

class 변경, 추가, 삭제 관련

 

변경 attr('속성', '속성값') // 변경은 말 그대로 전체 reset(기존의 class 교체)

$(this).attr('class', 'class_name');

 

추가와 삭제 // 기존에 있던 것에 더하거나 삭제

$(this).addClass('class_name');

$(this).removeClass('class_name');

 

클래스 유무 판단 

.hasClass(); // 반환값 true 1, false 0 

 

토글방식으로 클래스 추가, 삭제 

.toggleClass()

 

toggleClass() 예시활용▼

<!DOCTYPE html>
<html lang="kr">
  <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>jquery를 사용해서 하이라이트 적용해보기</title>
    <link rel="stylesheet" href="highlight.css" />
  </head>

  <body>
    <p class="blue">클릭하면 하이라이트됨(<span>click : 0</span> )</p>
    <p class="blue highlight">
      기본으로 하이라이트 됨(<span>click : 0</span> )
    </p>
    <p class="blue">클릭하면 하이라이트됨(<span>click : 0</span> )</p>
    <p class="blue">클릭하면 하이라이트됨(<span>click : 0</span> )</p>

    <!--jQuery CDN -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    <script>
     /* 3의 배수만 하이라이트 class명 추가
       각각의 count 횟수 표시 */
      /*각각 함수 실행,
        해당 함수를 클릭하면 카운터가 올라가고-> 올라간 카운터의 숫자를 화면에 표시->
        카운터가 3의 배수일 때만 하이라이트 클래스 추가 */
      $('p').each(function () {
        const eachParagraph = $(this);
        let count = 0;
        eachParagraph.click(function () {
          count++;
          eachParagraph.find('span').text('click: ' + count);
          eachParagraph.toggleClass('highlight', count % 5 === 0);
        });
      });
    </script>
  </body>
</html>

요구사항: 

클릭횟수가 5의 배수일때만 하이라이트 class명 추가 
각각의 count 횟수 화면에 표시


함수 기능 설명:

각각 함수 실행,
해당 함수를 클릭하면 카운터가 올라가고-> 올라간 카운터의 숫자를 화면에 표시-> 카운터가 5의 배수일 때만 하이라이트 클래스 추가 

 

+ jQuery 문법 부연 설명▼

.each(function) 
설명: lterate over a jQuery obj , excuting a function for each matched element. (제이쿼리 객체를 순회하며 해당하는 엘리먼트마다 주어진 함수를 실행) ->.each() 메서드는 DOM 루프 구조를 간결하고 오류 발생률을 낮추도록 설계되었습니다. jQuery 객체의 일부인 DOM element에서 반복됩니다. 콜백이 실행될 때마다 0부터 시작하여 현재의 루프 반복이 전달됩니다. 보다 중요한 것은 현재 DOM element의 컨텍스트에서 콜백이 실행되기 때문에 this는 해당 element를 가리킵니다.

 

 

'Frontend > JavaScript' 카테고리의 다른 글

[JavaScript | 드림코딩] 함수의 표현과 선언(표현식, 선언문, 화살표 함수 등)  (0) 2022.04.06
[JavaScript | 드림코딩] script async 와 defer차이  (0) 2022.04.03
[생활코딩][웹브라우저JS] - JSON(JSON과 Ajax)  (0) 2022.02.22
[생활코딩][웹브라우저JS] - 네트워크 통신(Ajax)  (0) 2022.02.20
[생활코딩][웹브라우저JS] - 이벤트 타입(form, 문서로드, 마우스 관련 이벤트)  (0) 2022.02.15
댓글