자바스크립트>함수 기초(아이디,비번) & 이벤트리스너

버튼1 누르면 '아이디입력하세요' 라는 alert 박스가 떠야함

버튼2 누르면 '비번입력하세요' 라는 alert 박스가 떠야함 

 

구현방법은 2개가 있겠군요

1. 미리 html로 alert 박스를 2개 만들어놓고 

버튼1 누르면 박스1 띄우기~

버튼2 누르면 박스2 띄우기~ 

이렇게 짜도 되겠지만 이러면 나중에 alert 박스가 100종 필요하면 어떻게 되겠습니까. 끔찍하군요

 

2. 기존에 있던 alert 박스를 재사용하는겁니다.

버튼1 누르면 alert 박스 안의 제목을 "아이디입력하세요"로 바꾸고 alert 박스 띄우기 

버튼2 누르면 alert 박스 안의 제목을 "아이디입력하세요"로 바꾸고 alert 박스 띄우기 

이러면 효율적일듯요 

자바스크립트가 가장 잘하는게 html 변경이니까 제목 바꾸는건 일도 아님 

 

 

 

 

HTML 복붙 100번 하지말고 UI를 재사용해보자  

 

 

1. 버튼1 누르면 alert 박스 안의 제목을 "아이디입력하세요"로 바꾸고

2. alert 박스 띄우기 

이걸 구현해봅시다.

저렇게 한글부터 상세히 짜고 그대로 자바스크립트로 바꾸면 쉽습니다.

 

 

설명하다

 

<div class="alert-box" id="alert">
  <p id="title"> 알림창임 </p>
  <button>닫기</button>
</div>

<button onclick="아이디알림창()">버튼1</button>
<button>버튼2</button>

<script>
  function 아이디알림창(){ 
    document.getElementById('title').innerHTML = '아이디입력하셈'; 
    document.getElementById('alert').style.display = 'block'; 
  }
</script>

이렇게 해봤다고 합니다.

그럼 버튼1 누르는 순간 <p id="title"> 내부 글자가 바뀌고

alert 박스도 뜹니다.

숙제 1번 끝 

 

 

 

 

 

설명하다

 

<div class="alert-box" id="alert">
  <p id="title"> 알림창임 </p>
  <button>닫기</button>
</div>

<button onclick="아이디알림창()">버튼1</button>
<button onclick="비번알림창()">버튼2</button>

<script>
  function 아이디알림창(){ 
    document.getElementById('title').innerHTML = '아이디입력하셈'; 
    document.getElementById('alert').style.display = 'block'; 
  }

  function 비번알림창(){ 
    document.getElementById('title').innerHTML = '비번입력하셈'; 
    document.getElementById('alert').style.display = 'block'; 
  }
</script>

버튼2도 이렇게 해봤다고 합니다.

근데 잘 보니 함수 2개가 비슷하군요 

그럼 구멍문법쓰면 함수 하나로도 충분할 것 같은데 심심하면 직접 해보도록 합시다. 

가변적인 함수쓸때 vs 고정된 값을 쓸때 

 

getElementsByClassName 셀렉터

 

어떤 html 요소를 찾고 변경할 때 id로 찾았었는데 

실은 class 같은걸로도 찾을 수 있습니다. 

 

 

<p class="title1"> 테스트1 </p>
<p class="title1"> 테스트2 </p>

이런 html요소가 있다고 칩시다.

얘를 셀렉터로 찾고 변경하고 싶으면 class명이 title1인걸 찾아라~ 라고 명령줄 수도 있습니다.

 

 

설명하다

 

<p class="title1"> 테스트1 </p>
<p class="title1"> 테스트2 </p>
<script>
  document.getElementsByClassName('title1')[0].innerHTML = '안녕';
</script>

이러면 첫 <p> 태그 내용이 안녕으로 바뀝니다.

getElementsByClassName('클래스명')[순서] 이렇게 쓰면 됩니다.

 

 

[0] 이렇게 순서를 넣는 이유는

getElementsByClassName 셀렉터는 일치하는 class가 들어있는 모든 html 요소를 찾아주기 때문입니다.

그래서 그 중에 몇번째 요소를 바꿀지 [순서]를 꼭 뒤에 붙여줘야합니다.

[0] 이렇게 쓰면 찾은 것 중 위에서 부터 1번째 요소

[1] 이렇게 쓰면 찾은 것 중 위에서 부터 2번째 요소

[2] 이렇게 쓰면 찾은 것 중 위에서 부터 3번째 요소

...

이렇게 쓰면 됩니다.

대괄호 안붙이면 안됨 

 

실은 

getElementsByTagName -> 태그명으로 찾아줌

getElementsByName -> name 속성으로 찾아줌

등 여러가지 셀렉터가 있는데 class, id 로 찾는게 가장 흔해서 그것만 아셔도 됩니다. 

 

 

 

 

 

이벤트 리스너

 

지금까진 버튼의 onclick=" " 안에 자바스크립트를 길게 짰는데 이것도 좀 더러워보입니다.

그게 보기싫으면 이벤트리스너 문법 사용하면 됩니다.

그럼 html 안에 자바스크립트 안적고도 똑같이 개발진행할 수 있습니다. 

 

 

 

이벤트 리스너는 이렇게 사용합니다.

document.getElementById('어쩌구').addEventListener('click', function(){
    //실행할 코드 
});

이렇게 작성하면 'id가 어쩌구인 요소를 클릭하면 안의 코드를 실행해주세요~' 라는 뜻입니다.

이거 쓰면 버튼 같은 곳에 onclick 넣을 필요가 없겠군요 ㄷㄷ

 

 

 

 

설명하다

 

<div class="alert-box" id="alert">
  <p id="title">알림창임</p>
  <button id="close"> 닫기 </button>
</div>

Q. alert 박스 내부에 닫기버튼이 있습니다.

이걸 누르면 alert 창이 닫히도록 하려면 어떻게 기능개발을 해야할까요? 

onclick 말고 addEventListener를 써봅시다.

 

어떻게 하냐면

 

밑에다가 script 태그 열고 

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

이렇게 작성하면 끝입니다.

HTML은 안건드려도 되어서 깨끗해지지만 자바스크립트 양은 살짝 늘어났군요. 

그래서 쓰고싶으면 쓰시면 되는데 저는 맨날 써볼겁니다. 

 

[collapse]

 

 

 

 

더 배워볼 개념 1. event

 

이벤트 리스너를 배웠는데 이벤트가 뭐냐고요?

유저가 웹페이지 접속해서 클릭, 스크롤, 키보드입력, 드래그 등을 할 수 있는데 이걸 전문용어로 이벤트라고 부릅니다.

어떤 요소 클릭시엔 click 이벤트

마우스갖다대면 mouseover 이벤트 

스크롤하면 scroll 이벤트

키입력하면 keydown 이벤트

... 몇십가지가 있습니다. 

 

그리고 이벤트가 일어나길 기다리는 친구가 이벤트 리스너입니다.

이벤트 리스너는 이벤트가 일어나면 내부 코드를 실행해주는 고마운 기본 문법입니다.  

 

 

 

그럼 이벤트 리스너 쓰면 다양한 이벤트도 체크가능하겠군요?

예시를 보도록 합시다. 

 

셀렉터로찾은요소.addEventListener('mouseover', function(){ 
  실행할코드
});

▲ 이러면 셀렉터로찾은요소에 마우스를 스윽 갖다대면 특정 코드를 실행해줍니다.

 

셀렉터로찾은요소.addEventListener('scroll', function(){ 
  실행할코드
});

▲ 이러면 셀렉터로찾은요소가 스크롤되면 특정 코드를 실행해줍니다. (당연히 그 요소에 스크롤바가 있어야됨)

 

셀렉터로찾은요소.addEventListener('keydown', function(){ 
  실행할코드
});

▲ 셀렉터로찾은요소에 키보드로 글자를 입력하면 특정 코드를 실행해줍니다. (그 요소가 글자를 입력할 수 있는 input 이런거여야 합니다)

 

 

이벤트 종류는 수십가지가 있습니다. 

https://developer.mozilla.org/en-US/docs/Web/Events

▲ 이벤트 목록인데 이런거 미련하게 외우지 마시고 필요할 때 찾아쓰십시오.

 

 

 

 

 

 

더 배워볼 개념 2. 콜백함수

 

셀렉터로찾은요소.addEventListener('scroll', function(){} );

이벤트 리스너 생김새를 잘 보면 함수같이 생겼습니다.

실은 뒤에 소괄호 붙으면 다 함수입니다.

 

근데 addEventListener() 함수에는 파라미터 자리에 2개의 자료를 집어넣죠?

맞습니다 자바스크립트 addEventListener 문법 만든 사람이 그렇게 쓰라고 해서 그렇게 쓸 뿐인데

둘째 파라미터로 함수가 들어가네요? 

그래도 됩니다. 

 

저렇게 함수 파라미터자리에 들어가는 함수를 전문용어로 '콜백함수'라고 합니다.

콜백함수는 그냥 뭔가 순차적으로 실행하고 싶을 때 많이 보이는 함수형태며

그냥 함수안에 함수 넣으라고 하면 "아 저건 콜백함수구나~" 라는 반응만 보이면 됩니다. 

 

지금 코드짤 때는 우리가 콜백함수를 직접 작성하고 그럴 일은 없고

콜백함수 쓰라고 하는 자리가 있으면 잘 쓰기만 하면 됩니다.