🔎 단위변환: Google 검색
www.google.com
단위 변환 하는 것을 확인하면서 한번 확인 해보기~!
(수업시작)
inch를 cm로 바꾸기
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>inch를 cm로</title>
<script src="/js/event.js"></script>
<!-- <script>
</script> -->
</head>
<body>
<input type="text" /> inch
<button>계산</button>
<!-- 계산하는 버튼을 눌러주면 -->
<p></p>
<!-- p라는 영역에 계산된 결과값이 나오도록 할 것 -->
</body>
</html>
JavaScript
//첫번째 매개변수는 이벤트를 넣어주고 두번째 매개변수는 이 이벤트에 해당하는거를 실행했을 때 실행되는 동작을 넣어줌
// 그동작은 나는 함수로 할 거고 익명함수로 바로 즉시 실행하면 되니까
//이와같이 함수를 바로 실행하겠다
//() => 좀더 함수를 간단하게 표현하기 위해서 사용하는 표현법
document.addEventListener("DOMContentLoaded", () => {
const input = document.querySelector("input");
const button = document.querySelector("button");
const p = document.querySelector("p");
button.addEventListener("click", () => {
//입력 받은 값을 숫자로 변환
const inch = Number(input.value);
//숫자가 아니면 종료, else 변환해서 출력
if (isNaN(inch)) {
p.textContent = "숫자를 입력하세요";
return;
}
//숫자인지 아닌지 isNan이라는 함수를 이용
//변환해서 출력
const cm = Number(input.value) * 2.54;
p.textContent = `${cm} cm`;
});
});
중간쯤에 있는 isNaN에 대한 부가 설명
if (isNaN(inch)) {
p.textContent = "숫자를 입력하세요";
return;
}
//숫자인지 아닌지 isNan이라는 함수를 이용
p라는 p요소의 textContent로 안내 메세지 출력해주는 게 좋아서 넣고
출력해주고 종료 한다
숫자가 들어오면 아래로 떨어져서 변환을 해주고 inxh에다가 곱해주면 된다.
결과
문자를 입력하면
이렇게 숫자를 입력하라고 뜬다.
(엔터를 누르면 결과값 나오게 하는 것)
HTML
<!-- <form id="conversionForm">
<input type="text" id="inchInput" /> inch
<button type="submit">계산</button>
<p id="result"></p> -->
<!-- 계산하는 버튼을 눌러주면 -->
<!-- p라는 영역에 계산된 결과값이 나오도록 할 것 -->
JS
//첫번째 매개변수는 이벤트를 넣어주고 두번째 매개변수는 이 이벤트에 해당하는거를 실행했을 때 실행되는 동작을 넣어줌
// 그동작은 나는 함수로 할 거고 익명함수로 바로 즉시 실행하면 되니까
//이와같이 함수를 바로 실행하겠다
//() => 좀더 함수를 간단하게 표현하기 위해서 사용하는 표현법
document.addEventListener("DOMContentLoaded", () => {
const form = document.getElementById("conversionForm");
const input = document.getElementById("inchInput");
const resultParagraph = document.getElementById("result");
form.addEventListener("submit", (event) => {
event.preventDefault(); // Prevents the form from submitting in the traditional way
// 입력 받은 값을 숫자로 변환
const inch = Number(input.value);
// 숫자가 아니면 종료, else 변환해서 출력
if (isNaN(inch)) {
resultParagraph.textContent = "숫자를 입력하세요";
return;
}
// 변환해서 출력
const cm = inch * 2.54;
resultParagraph.textContent = `${cm} cm`;
});
});
aaa, bbb, ccc 를 변경
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>inch를 cm로</title>
<script src="/js/event.js"></script>
<!-- <script>
</script> -->
</head>
<body>
<select>
<option>aaaa</option>
<option>bbbb</option>
<option>cccc</option>
</select>
<p>선택: aaaa</p>
</body>
</html>
JS
document.addEventListener("DOMContentLoaded", () => {
//객체를 모두 검색해라
const select = document.querySelector("select");
const p = document.querySelector("p");
select.addEventListener("change", (event) => {
//change라는 이벤트가 발생하면 select 된애를 대상으로
//이벤트를 발생시킨 객체에 접근하는 방법이 여기에서는 커런트 타킷이라는 것을 이용해야함
// 옵션이 여러개임
const options = event.currentTarget.options;
//이벤트가 뭔가 선택이 됐을 거임 매개변수를 넣어줄거임
//이벤트 된 것를 매개변수로
//커랜트타켓이라는 속성을 가지고 옵션에 해당하는 거를 여기로 다시 넘겨준다.
const index = event.currentTarget.options.selectedIndex;
//여러개의 옵션중에서 select된 index값을 select된 index값을 넣어주겠다.
p.textContent = `선택: ${options[index].textContent}`;
//옵션 위치는 인덱스
});
});
결과
const index = event.currentTarget.options.selectedIndex;
selectedIndex 애도 프로퍼티에 해당이 된다.
selectedIndex > 옵션 엘리먼트 > 옵션에 해당하는 인덱스값을 가지고 올 때 사용하는 속성(프로퍼티)이다
document.addEventListener("DOMContentLoaded", () => {
//객체를 모두 검색해라
const select = document.querySelector("select");
const p = document.querySelector("p");
select.addEventListener("change", () => {
const options = event.currentTarget.options;
const index = event.currentTarget.options.selectedIndex;
p.textContent = `selectedIndex: ${index}`;
p.textContent = `선택: ${options[index].textContent}`;
//옵션 위치는 인덱스
});
});
p.textContent = `selectedIndex: ${index}`;
이 부분을 잘 보면 셀렉ㅌ트 인덱스에다가 인덱스라는 위치를 지정해주면 나옴
document.addEventListener("DOMContentLoaded", () => {
//객체를 모두 검색해라
const select = document.querySelector("select");
const p = document.querySelector("p");
select.addEventListener("change", () => {
// const options = select.cuoptions;
//select라는 객체에서 change된 index값만 출력을 해봐라
const index = select.selectedIndex;
//여러개의 옵션중에서 select된 index값을 select된 index값을 넣어주겠다.
p.textContent = `selectedIndex: ${index}`;
// p.textContent = `선택: ${options[index].textContent}`;
//옵션 위치는 인덱스
});
});
이렇게도 된다
이벤트라는 매개변수도 필요하고 타킷팅도 필요함 (인식을 시켜줘야하는 부분)
change이벤트는 드롭다운에서 주로 발생되는 거라고 보면 된다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>inch를 cm로</title>
<script src="/js/event.js"></script>
<!-- <script>
</script> -->
</head>
<body>
<input type="text" />cm<br />
<span></span>
<select>
<option value="10">mm</option>
<option value="0.01">m</option>
<option value="0.393701">inch</option>
</select>
</body>
</html>
inch , m, mm 세개 다 변경할 수 있는 법
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>inch를 cm로</title>
<script src="/js/event.js"></script>
<!-- <script>
</script> -->
</head>
<body>
<input type="text" />cm<br />
<span></span>
<select>
<option value="10">mm</option>
<option value="0.01">m</option>
<option value="0.393701">inch</option>
</select>
</body>
</html>
JS
let 변환상수;
let 입력값;
document.addEventListener("DOMContentLoaded", () => {
const input = document.querySelector("input");
const span = document.querySelector("span");
const select = document.querySelector("select");
//계산해서 출력
const calculate = () => {
span.textContent = 입력값 * 변환상수;
};
//단위 선택
select.addEventListener("change", (event) => {
const options = event.currentTarget.options;
const index = event.currentTarget.selectedIndex;
변환상수 = Number(options[index].value);
calculate();
});
//입력받기
input.addEventListener("keyup", (event) => {
입력값 = Number(event.currentTarget.value);
});
});
좀 더 손을 댄 것(수정한 결과)
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>inch를 cm로</title>
<script src="/js/event.js"></script>
<!-- <script>
</script> -->
</head>
<body>
<input
type="text"
placeholder="숫자를 입력하세요!"
style="width: 120px"
/>cm =>
<span></span>
<select>
<option value="10">mm</option>
<option value="0.01">m</option>
<option value="0.393701">inch</option>
</select>
</body>
</html>
JS
let 변환상수;
let 입력값;
document.addEventListener("DOMContentLoaded", () => {
const input = document.querySelector("input");
const span = document.querySelector("span");
const select = document.querySelector("select");
//계산해서 출력
const calculate = () => {
span.textContent = (입력값 * 변환상수).toFixed(2);
};
//단위 선택
select.addEventListener("change", (event) => {
const options = event.currentTarget.options;
const index = event.currentTarget.selectedIndex;
변환상수 = Number(options[index].value);
calculate();
});
//입력받기
input.addEventListener("keyup", (event) => {
입력값 = Number(event.currentTarget.value);
calculate();
//m이냐 inch냐 조건문으로 무러보지 않아도 됨.
});
});
'프론트엔드 > JavaScript' 카테고리의 다른 글
| 자바스크립트 객체 관련 활용한 날 (마지막 수업! 공부화이팅) (0) | 2023.11.13 |
|---|---|
| 이미지클릭시 (0) | 2023.11.06 |
| 이벤트(events), DOM(script 위치, defer속성이용), 콜백함수(addEventListener) (0) | 2023.11.06 |
| a부터 b까지 값을 구해보기 (0) | 2023.11.06 |
| 매개변수, 인수, 익명함수, 기명함수, 자기호출함수, 화살표함수 (0) | 2023.11.06 |