예시1 체크박스
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
// 체크된 항목만 출력하는 함수
const checkForm = function () {
// 각 체크박스의 선택 여부 출력
// console.log(document.frm.chk1.checked);
// console.log(document.frm.chk2.checked);
// console.log(document.frm.chk3.checked);
// console.log(document.frm.chk4.checked);
// 각 체크박스의 값 출력
// console.log(document.frm.chk1.value);
// console.log(document.frm.chk2.value);
// console.log(document.frm.chk3.value);
// console.log(document.frm.chk4.value);
// 같은 이름을 가진 체크박스들 중 체크된 항목만 출력
let chkArr = document.frm.cb.length; // 체크박스 개수 확인
for (let i = 0; i < chkArr; i++) {
if (document.frm.cb[i].checked) { // 체크된 항목인지 확인
console.log(document.frm.cb[i].value); // 체크된 항목의 값을 출력
}
}
}
</script>
</head>
<body>
<form name="frm">
<!-- 개별 이름의 체크박스 -->
<input type="checkbox" name="chk1" value="사과">사과<br />
<input type="checkbox" name="chk2" value="바나나">바나나<br />
<input type="checkbox" name="chk3" value="딸기">딸기<br />
<input type="checkbox" name="chk4" value="포도">포도<br />
<br />
<!-- 같은 이름(cb)을 가진 체크박스들, 배열로 취급 가능 -->
<input type="checkbox" name="cb" value="사과">사과<br />
<input type="checkbox" name="cb" value="바나나">바나나<br />
<input type="checkbox" name="cb" value="딸기">딸기<br />
<input type="checkbox" name="cb" value="포도">포도<br />
<!-- 버튼 클릭 시 checkForm 함수 호출 -->
<input type="button" value="선택" onclick="checkForm()">
</form>
</body>
</html>예시2 라디오박스
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
// 선택된 라디오 버튼의 값을 출력하는 함수
const checkForm = function () {
// 라디오 버튼 그룹의 개수를 확인
let chkArr = document.frm.r.length;
// 라디오 버튼 그룹 순회
for (let i = 0; i < chkArr; i++) {
// 체크된 라디오 버튼의 값을 출력
if (document.frm.r[i].checked) {
console.log(document.frm.r[i].value); // 선택된 라디오 버튼의 값
}
}
}
</script>
</head>
<body>
<form name="frm">
<!-- 같은 이름(r)을 가진 라디오 버튼들 (한 번에 하나만 선택 가능) -->
<input type="radio" name="r" value="사과">사과<br />
<input type="radio" name="r" value="바나나" checked>바나나<br /> <!-- 기본 선택 -->
<input type="radio" name="r" value="딸기">딸기<br />
<input type="radio" name="r" value="포도">포도<br />
<br />
<!-- 버튼 클릭 시 checkForm 함수 호출 -->
<input type="button" value="선택" onclick="checkForm()">
</form>
</body>
</html>예시3 셀렉트, 옵션
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
// 선택된 옵션을 확인하고 출력하는 함수
const checkForm = function () {
// select 요소의 모든 옵션들을 배열 형태로 출력
console.log(document.frm.sel.options); // 모든 옵션 리스트
console.log(document.frm.sel.options.length); // 옵션의 개수
console.log(document.frm.sel.options[0]); // 첫 번째 옵션 요소
// 선택된 옵션의 인덱스와 텍스트 출력
console.log(document.frm.sel.selectedIndex); // 선택된 옵션의 인덱스
console.log(document.frm.sel.options[document.frm.sel.selectedIndex].text); // 선택된 옵션의 텍스트
}
</script>
</head>
<body>
<form name="frm">
<!-- 옵션 리스트가 포함된 select 요소 -->
<select name="sel">
<option>사과</option>
<option>바나나</option>
<option selected>딸기</option> <!-- 기본 선택된 옵션 -->
<option>포도</option>
</select>
<!-- 버튼 클릭 시 checkForm 함수 호출 -->
<input type="button" value="선택" onclick="checkForm()">
</form>
</body>
</html>예시4 이름 대문자 변경 결과문 보이기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
// 입력된 이름을 각 단어의 첫 글자만 대문자로 변경하는 함수
const capitalizeName = function () {
// 입력 필드에서 이름을 가져옴
let name = document.frm.name1.value;
// 이름이 입력되지 않은 경우 경고를 표시하고 종료
if (name == '') {
alert('이름을 입력하세요');
return false;
}
console.log(name); // 입력된 이름 출력
// 이름을 공백 기준으로 나누어 배열로 저장
let nameArr = name.split(" ");
let newName = "";
// 각 단어의 첫 글자를 대문자로 변환 후 결합
for (let name of nameArr) {
newName += name.charAt(0).toUpperCase() + name.slice(1) + " ";
}
// 변환된 이름을 result 요소에 출력
document.getElementById('result').innerHTML = newName.trim(); // 마지막 공백 제거 후 출력
}
</script>
</head>
<body>
<form name="frm">
<!-- 사용자 이름 입력 필드 -->
이름입력 <input type="text" name="name1" placeholder="영문이름 입력">
<!-- 버튼 클릭 시 capitalizeName 함수 호출 -->
<input type="button" value="대문자로 변경" onclick="capitalizeName()">
</form>
<hr>
<!-- 변환된 이름을 출력할 영역 -->
<div id="result"></div>
</body>
</html>예시5 폼 요소제어로 DOM을 이용한 구구단
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
// gugudan 함수: 특정 단(dan)의 구구단을 HTML 테이블 형태로 반환
const gugudan = function (dan) {
let html = '';
html += '<table border="1" cellspacing="0" width="150" style="text-align: center;">'; // 구구단 단별 테이블 시작
for (let col = 1; col <= 9; col++) { // 1부터 9까지 곱하는 구구단
html += '<tr>';
html += '<td>' + dan + ' X ' + col + ' = ' + (dan * col) + '</td>'; // 각 곱셈 결과
html += '</tr>';
}
html += '</table>'; // 단별 테이블 종료
return html;
};
// 입력받은 시작단과 끝단으로 구구단을 생성하는 함수
const createGugudanTable = function (startDan, endDan) {
let html = '<table border="1" cellspacing="0">';
const rowCount = Math.ceil((endDan - startDan + 1) / 3); // 한 행당 3개씩 표시
for (let row = 0; row < rowCount; row++) {
html += '<tr>';
for (let col = 0; col < 3; col++) {
const currentDan = startDan + (row * 3) + col;
if (currentDan <= endDan) {
html += '<td>' + gugudan(currentDan) + '</td>';
}
}
html += '</tr>';
}
html += '</table>';
return html;
};
// 폼 제출 처리 함수
const showGugudan = function () {
const startDan = parseInt(document.getElementById('startDan').value);
const endDan = parseInt(document.getElementById('endDan').value);
if (isNaN(startDan) || isNaN(endDan) || startDan > endDan) {
alert('올바른 숫자를 입력해주세요.');
return;
}
const result = document.getElementById('result');
result.innerHTML = createGugudanTable(startDan, endDan);
return false; // 폼 제출 방지
};
</script>
</head>
<body>
<form onsubmit="return showGugudan()" style="margin: 8px; border: 1px solid black; padding: 10px;">
시작 단: <input type="number" id="startDan" min="1" max="9" required>
끝 단: <input type="number" id="endDan" min="1" max="9" required>
<button type="submit">구구단 보기</button>
</form>
<hr>
<div id="result"></div>
</body>
</html>
개발자