<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
값1: <input type="text" id="put1"> <br>
값2: <input type="text" id="put2"><br>
연산자 : <input type="text" id="and"><br>
결과 : <input type="text" id="total"><br>
<script>
function getValue() {
//할당하기
// 각각의 요소들을 1) 선택 2) 값을 가져옴
//1) 요소선택
let Input = document.getElementById('put1');
let Input2 = document.getElementById('put2');
let And = document.getElementById('and');
let Total = document.getElementById('total');
//값 가져오기
let Inputval = Input.value;
let Input2val = Input2.value;
let Andval = And.value;
//숫자로 형변환
Inputval = Number(Inputval);
Input2val = Number(Input2val);
switch (Andval) {
case '+':
result = Inputval + Input2val;
break;
case '-':
result = Inputval - Input2val;
break;
case '*':
result = Inputval * Input2val;
break;
case '/':
result = Inputval / Input2val
break;
}
console.log(result);
Total.value = result;
console.log(Total);
}
function reset() {
let Input = document.getElementById('put1');
let Input2 = document.getElementById('put2');
let And = document.getElementById('and');
let Total = document.getElementById('total');
Input.value = '';
Input2.value = '';
And.value = '';
Total.value = '';
}
</script>
<button onclick="getValue()">get value</button>
<button onclick="reset()">reset</button>
</body>
</html>
Body
가장먼저 틀을 잡기 위해 4개의 <input>태그를 body에 작성해주었다.
각각에 input태그에는 그에 맞는 "id" 값을 할당 하여 고유성을 부여했다. ( 이후 해당 태그를 선택해서 사용하기 위함 )
버튼을 2개 생성하고 버튼이 눌렀을 경우 실행되도록 onclick요소를 사용하였다. onclick에는 해당 버튼을 눌렀을 때 지정된 함수가 작동하도록 함수 이름을 넣어줬다.
script
먼저 버튼에 함수를 지정해 놓았으니까, 해당 함수를 만들어 줘야 한다.
함수 function getValue(){}를 생성
버튼을 눌렀을 때 input에 입력된 값(value)을 가지고 사칙연산을 해야하기 때문에 input태그들을 선택해야한다.
document.getElementById()를 통해 input태그에 id 입력하여 특정 input태그를 선택해준다.
사칙연산에서 입력된 value값만 필요하기 때문에 '.value'를 통해서 value값만 가져온다.
현재 입력된 값들은 String 자료형으로 입렵되기 때문에 계산하기 위해서는 Number 자료형으로 바꿀 필요가 있다.
Number(변수); 를 통해서 Number자료형으로 변경해준다.
연산하기 위해서 각 연산자가 들어오는 값에 따라서 사칙연산을 진행해야한다. 이 실습에서는 switch()문을 이용해서 연산을 구현했다.
switch(연산자 변수) {}를 통해서 해당 값이 들어오면 그에 맞는 연산을 진행할 수 있도록 만든다.
그렇게 나온 값을[ 합계변수.value = 연산된 값 ]으로 입력한다.
초기화 버튼의 함수
각 input태그를 document.getElementById()로 연결해준다.
각 value값에 공백 ''을 넣어주면 값을 초기화 할 수 있다.
이번 실습들을 통해서 Javascript로 장치들을 구현하는 방법을 배우면서 신기하기도 하고 중간 중간 써야하는 변수나 요소, 함수들이 헷갈려서 고민하는 시간을 많이 가졌던거 같습니다.
특히 계산하는 과정을 Switch()문을 생각해 내지 못해서 오랜 시간이 걸렸네요
그래도 실습을 통해서 script문에 대한 두려움이 조금이나마 사라진 것 같네요, 앞으로도 많이 노력해야 겠다고 느끼는 시간이었습니다.
'웹 개발' 카테고리의 다른 글
| [포스코X코딩온] jQuery를 이용한 캘린더 실습 (0) | 2023.11.07 |
|---|---|
| [포스코X코딩온] jQuery (0) | 2023.11.07 |
| [포스코X코딩온] 방명록 만들기 실습 (0) | 2023.11.04 |
| [포스코X코딩온] JavaScript 표준객체 및 DOM (1) | 2023.11.04 |
| [포스코X코딩온] JavaScript 메서드(Method) (0) | 2023.11.03 |