자바스크립트 3일차 - 삼항연산자, input tag, form tag와 이벤트

( 조건 ) ? "참" : "거짓"

조건에 따라서 true면 참에 해당되는 결과를, false면 거짓에 해당되는 결과를 실행한다. 

 

예시 

(a < 0) ?  a=1 : a=0

a 가 0보다 작다면, a에다가 1을 대입하고 아니라면 0을 대입하라는 의미.

 

Input Tag

input 태그는 아래와 같은 예시로 쓰인다.

<input type="text" name="eng" placeholder="HTML">

<input type="text" name="kor" placeholder="JS">

<input type="submit" value="결과보기">

 

이런 tag들을 인식하기 위해서 

<script> 부분에서 태그들을 받아와서 값을 변경해준다. 

선택자를 통해 태그들을 선택하고 데이터를 받아와서 연산을 한 후 결과값을 출력할 것이다. 

<script>

// 1. 언제 - 마우스 클릭시? 스크롤시?

// 2. 무엇을, 어떻게 - 변수를

const elResult = document.querySelector('.result')

elResult.onclick = function(){

// 공간...

}

// click

// ㄴ 인풋을 선택자로 설정

// ㄴ 인풋 내용을 받아오고

// ㄴ 받아온 값을 이용해서 평균/등급

// ㄴ 결과값 출력

</script>

먼저 input 태그를 queryselector를 통해 찾아온다.

const elResult = document.querySelector('.result')

 

그리고 나서 이 결과값을 클릭 할시 어떤 일을 발생시킬것인지 function(){}안에 넣으면 된다. 

 

다만 폼 태그에서 submit을 누르면 결과값을 출력하고자 다른 쪽으로 이동하려고 한다. 

<form>

<input type="text" name="eng" placeholder="HTML" class="eng">

<input type="text" name="kor" placeholder="JS" class="kor">

<input type="submit" value="결과보기" class="result">

</form>

 

이런  자동 이벤트를 원치 않는다면, 

event.preventDefault(); //이벤트 발생을 막는다.

이와 같은 명령어를 function 안에다가 넣어준다. 

여기서 event는 브라우저가 가지고 있는 이벤트 정보를 뜻합니다. 

 

그리고 나서 아래와 같이 각 input태그를 쿼리셀렉터를 통해 가져온다.

const elHtml = document.querySelector('.eng'),

elCss = document.querySelector('.kor');

그리고 log를 찍어보면 아래와 같이 선택 됐음을 알 수 있다. 

console.log(elHtml.value, elCss.value)

 

참고로 console창의 log를 보는 방법은 다음과 같다. 

크롬 또는 네이버 웨일을 킨 후 f12를 누르면 위의 화면을 볼 수 있다. 

 

만약 태그가 아닌 태그에 들어가는 값을 보고싶다면 아래와 같이 log에다가 입력해준다. 

console.log(elHtml.value, elCss.value)

그럼 값을 출력할 수 있다. 

 

만약 이 값에 내가 원하는 값을 넣고 싶다면 

elHtml.value=1000;

 

직접 넣을 수도 있다. 

 

정리를 해보면 아래와 같다.

const elResult = document.querySelector('.result')

elResult.onclick = function(){

event.preventDefault(); //이벤트 발생을 막는다.

const elHtml = document.querySelector('.eng'),

elCss = document.querySelector('.kor'),

eltotal = document.querySelector(".total"),

elavg = document.querySelector(".avg");

let htmlValue= Number(elHtml.value),

cssValue= Number(elCss.value);

let total = htmlValue + cssValue,

avg = total/2;

eltotal.innerHTML=total;

elavg.innerHTML=avg;

 

이로써 total과 avg를 계산하고 전시간에 배운 innerHTMl을 통해 입력할 수 있게 되었다.