JavaScript ep.5

ep.4 까지는 태그의 id로만 특정 태그를 선택했었다.
그렇다면 class는? 물론 가능하다고 한다.

바로 "getElementsByClassName"이 친구를 통해서 가능하다.

어떻게 사용하는지 보자.
(대충 느낌온다!)

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

위 코드처럼 사용하면 된다고한다.
그런데 이전에 id를 선택했을 때와는 다른게 있다?
[0] 이것인데 이것은 class 특성상 태그에 같은 class가 적용되다보니 위에서 몇 번째 class를 뜻한다고 한다.

그래서 위 코드를 실행하면 첫 번째 p태그만 선택되서 적용된다.
그럼 두 번째, 세 번째 하려면... [1], [2], ... 이렇게 만들어야할까?
물론... 원한다면 만들어야한다...
최소한 지금 까지 내가 배운 상식선에서는 그렇다...

그럼 같은 class가 100개 면...?
다른 무언가가 또 있을거라 믿는다.

다음로 알아볼 친구는 "EventListener"라는 친구이다.
이 친구는 이전에 한 "onclick"같은 더 갈끔하게 만들어줄 친구라고 한다.

사용을 해보자!

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

<script>
function alert(a, b){
	document.getElementById('alert').style.display = a;
    document.getElementById('title').innerHTML = b;
}
</script>

위 코드에서 "EventListener"친구로 "닫기" 부터 만들어보자!

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

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

function alert(a, b){
	document.getElementById('alert').style.display = a;
    document.getElementById('title').innerHTML = b;
}
</script>

위처럼 버튼 옆에 뭔가 주저리 길게 쓰지 않아도 "닫기"가 완성됐다.

"EventListener"옆에 ()를 붙힌다 ()를 붙히면 모두 함수하고한다.
근데 ()안에 파라미터로 함수 또가 들어간다.
이것을 "콜백 함수"라고 한다고 한다.

3줄 요약

1. 점점 쉽게 뭔가 선택하고 작성하는 방법을 배우는 것 같다.
2. html, css 보면 뭔지 알것 같았는데 점점 모르는 상태에서 보면 모르는 코드를 만들고 있다.
3. 아직 까지는 쉬운 것 같다.

끝!