클릭 이벤트 처리 함수
1. onclick()
가장 일반적이며 간편하게 사용 가능한 함수다. 특정 요소가 클릭되었을때 호출되며, 버튼태그가 아니더라도 글자나 div태그 역시 적용 가능하다.
<h1 id="header1" onclick="alert('클릭');">클릭하세요</h1>이런 식으로 사용 가능하다.
만약 자바스크립트로 적용하고 싶다면 선택자를 통해 특정 태그를 선택해서 프로퍼티에 값을 할당해야 한다.
let h1 = document.getElementById('header1');
h1.onclick = () => {
alert('H1 클릭됨.');
};위의 경우는 id선택자를 통해 h1태그를 선택해 onclick 프로퍼티에 익명 함수 값을 할당한 것이다.
2. addEventListener
대부분의 언어에 존재하는 addEventListener를 이용할 수 도 있다. 이경우, 이떤 입력값인지 모르기 때문에 매개변수로 어떤 이벤트인지 특정해줘야 하며, 실행되길 원하는 익명 함수도 매개변수 형태로 입력해야 한다.
let h1 = document.getElementById('header1');
h1.addEventListener('click', () => {
alert('H1 클릭됨.')
});이 함수를 이용하면 따로 프로퍼티 값을 할당해주지 않아도 되지만, 직접 이벤트를 특정해줘야하는 번거로움과 매개변수가 길어지는 단점이 존재한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>마우스클릭 연습문제</title>
<script>
//연습문제18
//버튼A가 클릭될때, count-a에 현재 카운트를 +1를 올리시오.
//버튼B가 클릭될때, count-b에 현재 카운트를 +1를 올리시오.
//힌트: span태그의 카운트를 읽어서 +1을 하시오.
// Number(counterA.innerHTML)
window.onload = function() {
var buttonA = document.getElementById('button-a');
var buttonB = document.getElementById('button-b');
var counterA = document.getElementById('counter-a');
var counterB = document.getElementById('counter-b');
buttonA.onclick = function(){
counterA.innerHTML = String( Number(counterA.innerHTML) + 1 );
};
buttonB.onclick = function(){
counterB.innerHTML = Number(counterB.innerHTML) + 1;
};
};
</script>
</head>
<body>
<button id="button-a">ButtonA</button>
<button id="button-b">ButtonB</button>
<h1>Button A - <span id="counter-a">7</span></h1>
<h1>Button B - <span id="counter-b">0</span></h1>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<title>연습문제19 - 계산기 프로그램 </title>
<!-- 연습문제 49
오른쪽 그림과 같이 동작하는 계산기를 만드시오. -->
<!-- Input 객체의 값을 가져오기 : input.value -->
<style>
#wrap {
border : 1px solid black;
padding: 0;
/* 가로중앙 정렬 */
margin : 0 auto;
width : 300px;
height : 500px;
/* flexbox : Flexable Grid 사용 - 컨테이너에 적용 */
display : flex;
/* 콘텐츠가 넘치면 줄바꿈한다. */
flex-wrap: wrap;
/* 주축방향 세로로 */
flex-direction: column;
align-items: center;
text-align: center;
}
#res {
display: flex;
}
#num1, #num2 {
background-color : rgb(216, 213, 213);
margin-bottom: 18px;
margin-left: 20px;
width: 150px;
height: 25px;
text-align: center;
border: 1px solid rgb(112, 112, 112);
}
#result {
background-color : rgb(112, 112, 112);
color: white;
margin-bottom: 18px;
margin-left: 5px;
width: 150px;
height: 25px;
text-align: center;
border: 1px solid rgb(112, 112, 112);
}
#add, #mul, #sub, #divide {
width: 220px;
height: 30px;
background-color: rgb(40, 108, 209);
/* 검은색 테두리 제거 */
border: 0px;
color: white;
margin-bottom: 5px;
}
#del {
width: 220px;
height: 30px;
background-color: rgb(241, 50, 50);
border: 0px;
color: white;
}
#btn-group {
display: flex;
flex-flow: column wrap;
justify-items: center;
}
</style>
<script>
window.onload = function() {
//object
var num1 = document.getElementById('num1');
var num2 = document.getElementById('num2');
var result = document.getElementById('result');
var add = document.getElementById('add');
var sub = document.getElementById('sub');
var mul = document.getElementById('mul');
var divide = document.getElementById('divide');
var del = document.getElementById('del');
add.onclick = function() {
result.value = Number( num1.value ) + Number( num2.value );
};
sub.onclick = function() {
result.value = Number( num1.value ) - Number( num2.value );
};
mul.onclick = function() {
result.value = Number( num1.value ) * Number( num2.value );
};
divide.onclick = function() {
result.value = Number( num1.value ) / Number( num2.value );
};
del.onclick = function() {
result.value = "";
};
};
</script>
</head>
<body>
<div id="wrap">
<div><p>JavaScript</p><p>계산기 프로그램을 작성해보자</p></div>
<div>
<label>숫자 1</label><input type="text" id="num1"></input><br />
</div>
<div>
<label>숫자 2</label><input type="text" id="num2"></input><br />
</div>
<div id="res">
<label>연산 결과</label><input type="text" disabled="disbled" id="result"></input>
</div>
<div id="btn-group">
<button id="add">덧셈</button>
<button id="sub">뺄셈</button>
<button id="mul">곱셈</button>
<button id="divide">나눗셈</button>
<button id="del">지우기</button>
</div>
</div>
</body>
</html>중요한 개념이 나왔다.
지금까지 사용한 접근은 style나 innerText와 같이 우리가 직관적으로 이해 가능한 요소들이었다. 반면 .value 는 텍스트창 입력값에 접근한다. 이때 굳이 자바스크립트가 html을 다시 읽어오도록 호출하지 않아도 자동적으로 입력값을 갱신한다.
id로 접근했다면 그냥 .value값으로 선택하면 되며, 배열을 반환값으로 가지는 선택자로 접근했다면 객체[0]과 같이 인덱스 번호도 적어주고 선택해야 한다.
접근할수 있는 property는 콘솔 로그창에서 확인이 가능하지만, 설령 표시되지 않은 값이더라도 접근이 가능하기에 혼란스러워하지 말자.
오늘은 배운 내용이 적다. 실습 위주로 수업을 나갔는데, 어려워서라기 보다는 생소한 개념들이여서 시간이 좀 걸렸다. 복습을 철저히 하는게 맞을듯.
자바스크립트는 지나치게 자유롭다. 동시에 프로그래밍 언어로서의 제약 역시 존재하기에, "이게 왜 돼?" 하는게 있는가 하면 "이게 되니까 이것도 되겠지?" 하는건 안되는 경우가 비일비재하다. 분명 자유로움이 강점이기는 하나, 진입장벽이 되기도 하는 것 같다. 어느 언어가 안그러겠느냐만, 자바스크립트는 특히나 더 기초가 중요한 언어인것 같다. 오류가 존재하더라도 일단 구동이 되긴 하는 특징때문에, 기초가 부실한 상태로 코드를 짜다간 어느 순간 치명적인 실수를 저지르고도 모르고 그냥 넘어갈수도 있을 것 같다.
'공부 > javascript' 카테고리의 다른 글
| 스프링부트: Junit을 이용해 테스트 하기 (0) | 2023.01.27 |
|---|---|
| 32일차 복습 (0) | 2022.12.28 |
| 프로퍼티(property) (0) | 2022.12.27 |
| 31일차 복습-2 (0) | 2022.12.26 |
| 31일차 복습 - 1 (0) | 2022.12.26 |
