[JavaScript] 기본 문법 정리 #1

 

 

1. Alert UI 디자인

 

html 파일

<div class='alert-box'>알림창</div>

 

css 파일

.alert-box {
	디자인 요소
}

 

UI를 평소에 숨기고 싶다면 display: none / visibility: hidden

다시 보여주고 싶다면 display : block / visibility: visible

 

 

2. 버튼 누르면 Alert UI 보여주기

<button onclick="document.getElementById('아이디명').style.display = "block";">버튼</button>

document.getElementById('아이디').style.display = ' ';

=> '아이디명'을 클릭했을 때 보여주기

 

 

3. function 문법

function 자유롭게작명() {
	축약할 긴 코드
}

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

<script>
	function 알림창열기() {
    	document.getElementById('alert').style.display = 'block';
       }
</script>

Alert창을 여는 코드를 function을 사용해서 축약

 

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

function에 사용가능한 파라미터 문법

 

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

알림창열기('안녕');
알림창열기('바보');

function 함수 소괄호 구멍자리에 내가 원하는 문자를 입력할 수 있음

 

알림창열기('안녕') 이렇게 실행하면

document.getElementById('alert').style.display = '안녕'; 

 

function plus(a) {
	2 + a
}


function plus(a,b) {
	a + b
}
plus(1, 2);

 

 

4. getElementByClassName 셀렉터

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

getElementByClassName('클래스명')[순서]

[순서]를 넣는 이유는, 일치하는 class가 들어있는 모든 html 요소를 찾아주기 때문임

 

 

5. 이벤트 리스너

document.getElementById('아이디명').addEventListener('click', function(){
    //실행할 코드 
});

 

Q. alert 박스 내부 닫기 버튼을 누르면 alert창이 닫히도록 addEventListener 사용

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

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

 

 

6. classList 클래스명 추가/삭제

 

ex) Navbar 버튼 클릭시 클래스명 추가

document.getElementByClassName('navbart-toggler')[0].addEventListener('click', function(){
	document.getElementByClassName('list-group')[0].classList.add('show');
});

 

.classList.toggle() 쓰면

- 클래스명이 있으면 제거하고

- 클래스명이 없으면 붙여준다.

왔다갔다하는 UI 만들 때 유용

 

 

7. querySelector

<div class="test1">안녕하세요</div>
<div id="test2">안녕하세요</div>

<script>
  document.querySelector('.test1').innerHTML = '안녕';
  document.querySelector('#test2').innerHTML = '안녕';
</script>

getElementById(), getElementByClassName() 말고, 다른 방식으로 html 요소를 찾아주는 셀렉터

querySelector() 안에는 css 셀렉터 문법 사용이 가능함 (#id, .class)

querySelector()은 맨 위 1개 요소만 선택하기 때문에, n번째 요소를 선택하고 싶다면 querySelectorAll() 사용

 

 

8. jQuery 사용

<p class="hello">안녕</p>

<script>
  $('.hello').css('color', 'red');
</script>

기존 document.getElementByClassName('hello').style.color = 'red'; 코드를

$('.hello').css('color', 'red');로 바꿀 수 있음

 

이벤트 리스너의 경우는

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

<script>
	$('.test-btn').on('click', function(){
    $('hello').fadeout();
    });
</script>

jQuery의 경우, addEventListener 대신 on을 쓰면 같다.