자바스크립트 기초 (1)

새벽로즈·2023년 9월 15일

TIL 자바스크립트

TIL

목록 보기

9/72

코딩애플(https://codingapple.com/course/javascript-jquery-ui/)에서 강의를 듣고 공부 목적으로 적은 정리글입니다.

JS

자바스크립트에서 =(등호)는 '같다'가 아닌 '오른쪽의 값을 왼쪽에 넣으라는 뜻'

HTML에 JS로 출력하기

<h1 id="hello">안녕하세요</h1>
document.getElementById('hello').innerHTML = '안녕';

형식
document.getElementById('???').??? = '???'; 

document.getElementById('hello').style.color = 'red';
이런식으로 컬러만 바꿀수도 있음. 다양하게 쓸 수 있다.

.getElementById()는 셀렉터. html 요소를 찾기 위해 사용

.innerHTML / .style / .color 이렇게 점찍는데 괄호없는건 메소드(또는 함수) 라고 부름

alert 박스

UI 만드는 방법
1. HTML/CSS 미리 디자인 (필요하면 미리 숨기기)
2. 필요할 때 보여달라고 자바스크립트로 코드 짬

 <div class="alert-box" id="alert">
    알림창
    <button onclick="document.getElementById('alert').style.display = 'none'" class="btn_close"></button>
  </div>
  <button onclick="document.getElementById('alert').style.display = 'block'">버튼</button>

☞ 버튼 클릭 onclick

function

긴 코드를 축약하고 싶을때 사용

  <div class="alert-box" id="alert">
    알림창 <button onclick="닫기()" class="btn_close"></button>
  </div>
  <button onclick="열기()">버튼</button>

  <script>
    function 열기() {
      document.getElementById('alert').style.display = 'block'
    }
    function 닫기() {
      document.getElementById('alert').style.display = 'none'
    }
  </script>

function의 또 다른 용도

  <div class="alert-box" id="alert">
    알림창 <button onclick="알림창('none')" class="btn_close"></button>
  </div>
  <button onclick="알림창('block')">버튼</button>

  <script>
    function 알림창(파라미터) {
      document.getElementById('alert').style.display = 파라미터;
    }
  </script>

☞ 하나의 function으로 on off가 가능해짐

function 연산() {
 2 + 1 
}

function 연산2() {
 2 + 2 
}

function 연산3() {
 2 + 3 
}


// 이렇게 여러번 하는 대신 다른 한번에 사용도 가능함
function 연산(수치) {
 2 + 수치
}

연산(1); // 2+1 
연산(2); // 2+2
연산(3); // 2+3

여러 파라미터도 사용이 가능함

function 열기(파라미터, 파라미터2) {
  document.getElementById('파라미터2').style.display = 파라미터;
}
열기('파라미터', '파라미터2')

  <div class="alert-box" id="alert">
    알림창 <button onclick="열기('none')" class="btn_close"></button>
  </div>
  <button onclick="열기('block')">버튼1</button>
  <button onclick="열기('block')">버튼2</button>

  <script>
    function 열기(구멍) {
      document.getElementById('alert').style.display = 구멍;
    }
  </script>

버튼 2개로 각각 메세지 출력

<div class="alert-box" id="alert">
    <p id="title">알림창</p>
     <button onclick="알림창('none')" class="btn_close"></button>
  </div>
  <button onclick="아이디알림창()">버튼1</button>
  <button onclick="비밀번호알림창()">버튼2</button>

  <script>
    function 아이디알림창() {
      document.getElementById('alert').style.display = 'block';
      document.getElementById('title').innerHTML = '아이디를 입력해주세요.'
    }
    function 비밀번호알림창() {
      document.getElementById('alert').style.display = 'block';
      document.getElementById('title').innerHTML = '비밀번호를 입력해주세요.'
    }

    function 알림창(구멍) {
      document.getElementById('alert').style.display = 구멍;
    }


    // function 열기() {
    //   document.getElementById('alert').style.display = 'block'
    // }
    // function 닫기() {
    //   document.getElementById('alert').style.display = 'none'
    // }
  </script>

버튼 2개로 다른메세지를 파라미터 이용해서 출력하기

  <div class="alert-box" id="alert">
    <p id="title">알림창</p>
     <button onclick="알림창('','none')" class="btn_close"></button>
  </div>
  <button onclick="알림창('아이디를 입력해주세요.','block')">버튼1</button>
  <button onclick="알림창('비밀번호를 입력해주세요.','block')">버튼2</button>

  <script>
    function 알림창(메세지, 온오프) {
      document.getElementById('alert').style.display = 온오프;
      document.getElementById('title').innerHTML = 메세지;
    }
  </script>

☞ 엄청 짜릿하다. 진짜 재밌다. 와 이걸 내가 하네? 정말 뿌듯함을 느낌

getElemntBy

document.getElementsByClassName('title')[0].innerHTML = '반가워';
ByClassName은 해당하는 class를 지정할 수 있는 셀렉터인데 class는 중복이 가능하기 때문에 맨 윗줄부터 몇번째 인덱스인지 알려줘야함.
컴퓨터는 0으로부터 시작함

ByTagName은 태그를 말함 <button 이런걸 말함

addEnventListerner()

addEnventListerner()는 다양한 이벤트 사용이 가능하다.
keydown(키보드 감지), scroll(스크롤 감지), mouseover(마우스오버) 등 다양하게 사용이 가능함

html의 onclick 대신 쓸 수 있다.

형식
document.getElementById('close').addEventListener('click',function(){
실행할 코드
});

  <button id="close">닫기 </button>

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