- 1번 코드 : 내가 만들어본 코드 (코드펜 첨부)
- 2번 코드 : 수업시간에 강사님과 해본 코드
1. 더하기 연산
- onClick으로 제어한다.
1-1
- 문자를 숫자로 형 변환 : Number()를 parseInt()로 해줘도 된다.
1-2
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<script>
window.onload = function () {
function sumHandler() {
console.log("sumHandler!!");
var v1 = document.getElementById("v1");
var v2 = document.getElementById("v2");
console.log(v1.value);
var sumDiv = document.getElementById("sum");
sumDiv.innerHTML = "합계:" + (Number(v1.value) + Number(v2.value));
}
var objBtn = document.getElementById("btn");
objBtn.addEventListener("click", sumHandler);
};
</script>
<style>
</style>
</head>
<body>
<input id="v1" type="number" value="0" /> +
<input id="v2" type="number" value="0" />
<button id="btn">더하기</button>
<div id="sum">합계:</div>
</body>
</html>
2. 버튼 없이도 더하기 연산
- onChange / change : 값이 바뀐걸 웹 브라우저가 알게 되면 변한다.
- onKeyup / keyup : 키를 누르면 바뀐다.
2-1
2-2
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<script>
window.onload = function () {
function sumHandler() {
console.log("sumHandler!!");
var sumDiv = document.getElementById("sum");
sumDiv.innerHTML = "합계:" + (Number(v1.value) + Number(v2.value));
}
var v1 = document.getElementById("v1");
var v2 = document.getElementById("v2");
v1.addEventListener("change", sumHandler);
v2.addEventListener("change", sumHandler);
};
</script>
<style>
</style>
</head>
<body>
<input id="v1" type="number" value="0" /> +
<input id="v2" type="number" value="0" />
<div id="sum">합계:</div>
</body>
</html>3. ASCII 코드 출력하기
- onkeypress, onkeyup, onkeydown 의 차이
- https://laelbe.s3.amazonaws.com/blog/81/Javascript-eventkeyCode-Value_ex01.html
3-1
3-2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input id="ascii-input" type="text" value="" maxlength="1" />
<p>아스키 코드의 값은:<span id="ascii-value">65</span></p>
</body>
<script>
function asciiHandler() {
console.log("asciiHandler!!");
var char = document.getElementById("ascii-input").value;
var ascii = char.charCodeAt(0);
document.getElementById("ascii-value").innerHTML = String(ascii);
}
var objAscii = document.getElementById("ascii-input");
objAscii.addEventListener("keyup", asciiHandler);
</script>
</html>4. textarea의 글자 수 구하기
4-1
4-2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<textarea id="area-input"></textarea>
<p>글자수: <span id="area-count">0</span>/1200</p>
</body>
<script>
function areaHandler() {
console.log("areaHandler!!");
var count = document.getElementById("area-input").value.length;
if (count >= 30) {
alert("메롱 " + "30자 까지만 입력하세요");
return;
}
document.getElementById("area-count").innerHTML = String(count);
}
var objArea = document.getElementById("area-input");
objArea.addEventListener("keyup", areaHandler);
</script>
</html>5. 개수 카운트하기
5-1
6. 체크박스 내용 보여주기
6-1.
velog, GitHub, Notion 등에 작업물을 정리하고 있습니다.