form 태그를 통해 데이터 받아오기
- input, textarea, select, html element 속성
- input => value 속성에 값이 맵핑 되어있음. value 속성을 통해 값을 js로 가져올 수 있음.
- select=>option, radio, checkbox value 값을 추가해주어야만 선택 값을 가져올 수 있음.
- value / innerText 값은 모두 string 처리됨.
- string 처리된 value값을 숫자로 사용시 변환이 필요
활용 )
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border-collapse: collapse;
}
table th, td{
border: 1px solid black;
text-align: center;
}
.bgc{
background-color: blanchedalmond;
}
.w30{
width: 30%;
}
.w50{
width: 50%;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend> 성적확인 </legend>
이름: <input type="text" id="name"><br>
국어: <input type="text" id="kor"><br>
영어: <input type="text" id="eng"> <br>
수학: <input type="text" id="math"><br>
<button type="button" id="btn">성적계산</button>
</fieldset>
</form>
<ul id="ul"></ul>
<table id="table">
</table>
<script>
const myObject = {
name:'',
kor:'',
eng:'',
math:''
};
document.getElementById('btn').addEventListener('click',()=>{
let name = document.getElementById('name').value;
let kor = document.getElementById('kor').value;
let eng = document.getElementById('eng').value;
let math = document.getElementById('math').value;
myObject.name = name;
myObject.kor = kor;
myObject.eng = eng;
myObject.math = math;
console.log(myObject);
let sum = Number(kor)+ Number(eng) + Number(math);
// Math.round() => 정수로 반올림. (소수점을 남기지 않음)
// .toFixed(2) : 소수 자리수 표현 (반올림하여 소수점 자르기)
let avg = (sum / 3).toFixed(2);
// table 태그의 테이블로 표시
const table = document.getElementById('table');
let tableStr = `<tr><th class="w30">이름</th><td class="w50">${name}</td></tr>`;
tableStr += `<tr><th>국어점수</th><td>${kor}</td></tr>`;
tableStr += `<tr><th>영어점수</th><td>${myObject.eng}</td></tr>`;
tableStr += `<tr><th>수학점수</th><td>${myObject.math}</td></tr>`;
tableStr += `<tr class="bgc"><th>합계</th><td>${sum}</td></tr>`;
tableStr += `<tr class="bgc"><th>평균</th><td>${avg}</td></tr>`;
table.innerHTML = tableStr;
let ul = document.getElementById('ul');
let str = `<li>name : ${name}</li>`;
str += `<li>kor : ${kor}</li>`;
str += `<li>eng : ${eng}</li>`;
str += `<li>math : ${math}</li>`;
str += `<li>sum : ${sum}</li>`;
str += `<li>avg : ${avg}</li>`;
ul.innerHTML = str;
})
</script>이벤트 창
- alert : 안내문을 띄워주는 창 => 확인버튼
- confirm : 확인(true) / 취소(false) 조건으로 사용가능
- prompt : 값을 입력받을 수 있는 창 alert + input 값을 받을 변수가 필요
리스트의 구조에따라 자바스크립트 객체 생성
<form action="">
이름: <input type="text" id="name"><br>
거주지: <input type="text" id="addr"><br>
좋아하는 리스트<br>
리스트1: <input type="text" id="favor1"><br>
리스트2: <input type="text" id="favor2"><br>
리스트3: <input type="text" id="favor3"><br>
이메일: <input type="text" id="email"><br>
내가 가장 좋아하는 것 : <input type="text" id="wanna"><br>
<button type="button" onclick="getDatas()">객체로 전송</button>
</form>
전송받은 데이터 표로 <button type="button" id="printBtn">출력</button>
<table border="1" id="dataTable"></table>
<script>
const dataObject = {
name:'',
addr:'',
favors:{
favor1:'',
favor2:'',
favor3:''
},
email:'',
wanna:''
};
document.getElementById('printBtn').addEventListener('click',()=>{
const dataTable = document.getElementById('dataTable');
let str = `<tr><th>이름</th><td>${dataObject.name}</td></tr>`;
str += `<tr><th>주소</th><td>${dataObject.addr}</td></tr>`;
str += `<tr><th>좋아하는 리스트</th>`;
str += `<td><ul>`;
str+= `<li>${dataObject.favors.favor1}</li>`;
str+= `<li>${dataObject.favors.favor2}</li>`;
str+= `<li>${dataObject.favors.favor3}</li>`;
str += `</ul></td></tr>`;
str += `<tr><th>이메일</th><td>${dataObject.email}</td></tr>`;
str += `<tr><th>좋아하는 것</th><td>${dataObject.wanna}</td></tr>`;
dataTable.innerHTML = str;
});
function getDatas(){
dataObject.name = document.getElementById('name').value;
dataObject.addr = document.getElementById('addr').value;
dataObject.favors.favor1 = document.getElementById('favor1').value;
dataObject.favors.favor2 = document.getElementById('favor2').value;
dataObject.favors.favor3 = document.getElementById('favor3').value;
dataObject.email = document.getElementById('email').value;
dataObject.wanna = document.getElementById('wanna').value;
console.log(dataObject);
}
</script>'화면 수업 정리' 카테고리의 다른 글
| HTML,CSS,JS 11일차 (0) | 2024.08.08 |
|---|---|
| HTML,CSS,JS 10일차 (0) | 2024.08.07 |
| HTML,CSS,JS 8일차 (0) | 2024.08.05 |
| HTML,CSS,JS 7일차 (0) | 2024.08.02 |
| HTML,CSS,JS 6일차 (0) | 2024.08.01 |
