input 값이 화면에 출력

만들 것

input 태그를 사용해서 사용자가 입력한 텍스트 정보를 화면에 출력하는 기능

글자를 입력했을 때 input창에 입력한 글자가 없어지도록 하고 입력된 글자는 지정된 노출 영역에 노출되게 할 것임

글자가 있으면 글자 출력, 글자가 없으면 input값을 입력하라는 에러문구 출력

분기처리 기능

html

<form id="form">
	<input type="text" id="msg">
	<button type="submit" id="btn">입력</button>
</form>

<h1 class="feedback">Input 값을 입력하세요</h1>
<h2 id="txt">입력된 텍스트가 출력되는 영역</h2>

css

show : block 해놓고 만약에 아무런 글자를 입력하지않은 상태에 입력을 누르면 feedback이라는 영역에 show라는 클래스가 들어가게 해줄거임

2초정도 시간이 지나면 자동으로 show라고 하는 클래스가 영역에서 삭제가 되면서 경고 문구가 사라지게 만드는 기능

.feedback {
	display: none;
	color: red;
}

.show {
	display: block;
}

id, class 가져오기

자바스크립트에서 css처럼 클래스를 접근할 수 있다

queryselector 태그로 접근하면 id는 #태그명, class는 .태그명

var form = document.getElementById('form');
var input = document.getElementById('msg');
var feedback = document.querySelector('.feedback');
var txt = document.getElementById('txt');

버튼 클릭 이벤트

이전까지 버튼 태그를 사용했으나 이번에는 form 태그를 사용해보자

매번 첫번째 인수로 click을 넣었지만 form 태그안에 submit 타입을 넣음

이렇게 적으면 form가 안에 submit이라는 타입을 가지고 있으면 기능이 동작이 된다

form.addEventListener('submit', function(e) {
	console.log('제출');
})

버튼을 눌러보면 제출이 뜨지만 금방 사라진다

form - submit 이벤트를 추가하게되면 동작이 됨과 동시에 브라우저가 새로고침된다 (제출이 떳지만 새로고침이 되어서 이전상태로 돌아가게된것)

새로고침이 되는 이유는 form태그 자체에서 submit이라는 이벤트가 발생이 되면 form태그가 가지고있는 고유기능 '브라우저를 새로고침 한다'가 실행되기 때문

태그 고유기능 막기

두번째 인수로 전달한 함수에다가 e라는 매개변수를 작성

preventDefault (기본값을 막는다) 사용

form의 고유기능이 정지가 되고 제출이 사라지지않고 뜸

form.addEventListener('submit', function(e) {

	e.preventDefault();
	console.log('제출');

})

e를 이벤트객체라고 하는데 콘솔로그로 e를 찍어보면

이벤트객체(e 매개변수) 안에 우리가 선택한 이벤트(addevent)를 붙힌 태그(form)와 submit에 해당하는 다양한 이벤트의 종류들이 있다

그중에서 우리는 preventdefault라는 메서드를 가져다 사용한것

input태그 가져오기

가져오는 방법에는 두가지가 있다

첫번째는 기존과 마찬가지로 id로 불러와서 변수에 넣는 방법

var msg = document.getElementById('msg').value;

두번째는 input태그에 작성된 글자를 가져오고 싶을때 value property 사용

input에 작성된 글자를 가져와서 msg라는 변수에 담아낸것

var msg = input.value;

두가지 모두 같은 결과

클릭을 할때마다 매번 msg안에 있는 값을 가져오게된다

form.addEventListener('submit', function(e) {

	e.preventDefault();
	var msg = input.value;
		
})

분기처리

input 안에 값이 있는 경우와 없는 경우로 나눠줘야함 - if문 활용

msg가 값이 있으면 if문 중갈호 실행, 값이 없으면 else문이 실행

if문 중갈호안에 textcontent를 사용하면 글자가 노출된다

form.addEventListener('submit', function(e) {

	e.preventDefault();
	var msg = input.value;
	
	if(msg) {
		txt.textContent = msg;
	} else {

	}
})

입력버튼을 누를때 입력값을 초기화 시키려면? reset 사용

입력을 누르면 입력된 값이 사라짐

reset 메서드는 여러개의 input 태그가 있을때도 작성된 글자를 한꺼번에 초기화 시켜준다(여기서는 form 태그 안에 있는 글자를 초기화)

form.addEventListener('submit', function(e) {

	e.preventDefault();
	var msg = input.value;
	
	if(msg) {
		txt.textContent = msg;

		form.reset();
	} else {

	}
})

에러문구

클래스를 추가하는 방식 사용

특정영역에 클래스를 추가할 때는 classlist property를 사용

class가 feeback 하나밖에 없는데 show라는 클래스가 추가되면서 에러문구가 출력됨

feedback.classList.add('show');

일정시간 지나면 에러문구 사라지게하기

일정시간 후 show라는 클래스가 사라지게 하면된다

자바스크립트에서 기본적으로 제공하는 setTimeout이라는 메서드를 사용

두가지의 인수를 가지는데 첫번째는 익명함수(콜백함수), 두번째는 시간

최초상태에서는 글자가 나오지않다가 2초후에 나옴

setTimeout(function() {
	console.log("2초 후에 실행")
}, 2000);

setTimeout을 이용해 일정시간 지나면 show 클래스가 사라지게 하기

두번째 인수로 2000이라는 시간을 넣으면 2초가 되었을 때 첫번째 인수로 전달한 함수가 자동으로 호출된다

첫번째 인수의 함수 안에 remove.삭제할 클래스 전달

클릭시 show가 나타나게 되고 2초뒤 화면에서 사라짐

form.addEventListener('submit', function(e) {

	e.preventDefault();
	
	var msg = input.value;

	if(msg) {
		
		txt.textContent = msg;
		form.reset();

	} else {
	
		feedback.classList.add('show');
	
   		setTimeout(function() {
			feedback.classList.remove('show');
		}, 2000);
	}
})