JavaScript 정리 06
12 Feb 2019
Reading time ~7 minutes
JavaScript 정리 06 - 값 얻기, HTML Form Control 사용
값이 여러개가 나오는 경우
- 배열로 처리된다.
- 배열은 일괄처리를 함
- checkbox, radio는 checked를 확인
- select는 selected를 확인
<input type="checkbox" value="전송할 값" name="이름">
<input type="checkbox" value="전송할 값" name="이름">
<input type="checkbox" value="전송할 값" name="이름">
<!-- 이름이 같아야 배열로 처리됨 -->
document.폼이름.컨트롤명[인덱스].value // 값얻기
.checked // 선택상태 얻기(boolean)
// 체크여부에 따라 true, false반환
선택된 모든 값 얻기(radio, check)
- 체크박스, 라디오버튼 동일
- 체크박스 선택지가 적거나, 라디오버튼인 경우 굳이 for를 사용하지 않음
var obj = document.폼이름;
for(var i=0; i<obj.컨트롤명.length; i++) {
if(obj.컨트롤명[i].checked) {
obj.컨트롤명[i].value;
}
}
<body>
<form name="frm">
<div>
<label>성별</label>
<input type="radio" name="gender" value="M"/>남자
<input type="radio" name="gender" value="F"/>여자
</div>
<div>
<label>게임</label>
<input type="checkbox" name="games" value="철권"/>철권
<input type="checkbox" name="games" value="아스팔트"/>아스팔트
<input type="checkbox" name="games" value="GTA2"/>GTA2
<input type="checkbox" name="games" value="하스스톤"/>하스스톤
<input type="checkbox" name="games" value="리니지"/>리니지
<input type="checkbox" name="games" value="마인크래프트"/>마인크래프트
</div>
<div>
<input type="button" value="라디오 값 얻기" id="radio"/>
<input type="button" value="체크박스 값 얻기" id="check"/>
</div>
</form>
<div id="output"></div>
</body>
<script type="text/javascript">
// 배열(name속성이 같다면 배열)로 된 값 얻기
window.onload = function() {
document.getElementById("radio").addEventListener("click", processRadio);
document.getElementById("check").addEventListener("click", processCheck);
}
function processRadio() {
var obj = document.frm;
// alert(obj.gender[0].value+"/"+obj.gender[1].value); // M/F
// alert(obj.gender[0].checked+"/"+obj.gender[1].checked); // false /false(선택안하면)
if(!(obj.gender[0].checked || obj.gender[1].checked)) {
alert("성별을 선택해주세요");
return;
}
var checkedGender = "";
for(var i=0; i<obj.gender.length; i++) {
if(obj.gender[i].checked) {
checkedGender = obj.gender[i].value;
}
}
document.getElementById("output").innerHTML = "선택성별 : "+checkedGender;
}
function processCheck() {
// 선택된 체크박스 값얻기
var obj = document.frm;
var flag = false;
var output = "<ul>";
for(var i=0; i<obj.games.length; i++) {
if(obj.games[i].checked) {
flag = true;
output += "<li>"+obj.games[i].value+"</li>";
}
}
output += "</ul>";
if(!flag) {
output+="<li>선택하신 게임이 없습니다.</li>";
}
document.getElementById("output").innerHTML = output;
}
</script>
선택된 값 얻기(select)
- select로는 선택된 값 하나를 얻는다.
<select name="컨트롤명">
<option value="값">보여질값</option>
<option value="값" selected="selected">보여질값</option>
...
</select>
- select는 배열 안쓰고도 간단히 선택된 값을 얻을 수 있다.
document.폼이름.컨트롤명.value;
- 배열로 값 얻을 때
- select의 name 속성은 하나이나 옵션이 여러개이므로 배열로 처리한다.
- select는 배열로 값을 잘 얻지 않는다.
var obj = document.폼이름;
for(var i=0; i<obj.컨트롤명.length/*옵션 개수*/; i++) {
if(obj.control명[i].selected) { // 선택된 option에서 true 발생
obj.control명[i].value;
}
}
- selectedIndex 속성을 이용하여 값을 구할 수도 있다.
var obj = document.폼이름;
obj.컨트롤명[obj.컨트롤명.selectedIndex].value
- select의 값이 변경될 때 이벤트는 “change”
<body>
<form name="frm">
<label>관심직업선택</label>
<select name="job" id="select">
<option value="none">----관심 직업----</option>
<option value="쓰앵님">쓰앵님</option>
<option value="FrontEnd개발자">FrontEnd 개발자</option>
<option value="BackEnd개발자">BackEnd 개발자</option>
<option value="운영">운영</option>
<option value="유지보수개발자">유지보수개발자</option>
</select>
</div>
</form>
<div id="output"></div>
</body>
<script type="text/javascript">
// 배열(name속성이 같다면 배열)로 된 값 얻기
window.onload = function() {
document.getElementById("select").addEventListener("change",processSelect);
}
function processSelect() {
var obj = document.frm;
// select 값 얻기(가장 간단)
var output = obj.job.value;
// 선택된 인덱스 번째 값 얻기
alert(obj.job.selectedIndex);
alert(obj.job[obj.job.selectedIndex].value);
if(output == "none") {
alert("직업을 선택해주세요.");
return;
}
// select는 굳이 배열을 쓸 필요가 없다.
/* var output = "";
for(var i =0; i<obj.job.length; i++) {
if(obj.job[i].selected) {
output+=obj.job[i].value;
}
} */
document.getElementById("output").innerHTML = output;
}
</script>
JavaScript의 값을 HTML Form Control에 설정
- name속성이 유일한 경우
document.form이름.control명.value = 값;
- checked 속성을 변경
- radio, checkbox
document.form이름.control명[인덱스].checked = true; // 또는 false
- selected 속성을 변경
document.form이름.control명[인덱스].selected = true; // 또는 false
- HTML Form Control에 값 넣기 예제
<style type="text/css">
fieldset { border:1px solid :#333; width:400px; margin-top:10px; }
img { width: 100px; }
</style>
<body>
<div>
<h2>JavaScript의 값을 HTML Form Control에 설정</h2>
<form name="frm">
<fieldset>
<legend>이름이 유일한 Form Control</legend>
<label>이름</label>
<input type="text" name="name"/><br/>
<label>나이</label>
<input type="password" name="password"/><br/>
<label>주소</label>
<input type="hidden" name="addr"/><br/>
<label>이미지</label>
<img src="../common/images/img.png" name="img"/><br/>
<label>날짜</label>
<input type="date" name="date"/><br/>
<label>범위</label>
0<input type="range" name="range" min="0" max="100"/>100<br/>
<input type="button" value="값설정" id="unique"/>
</fieldset>
<fieldset>
<legend>checked 속성 변경</legend>
<label>성별</label>
<input type="radio" name="gender" value="남자">남자
<input type="radio" name="gender" value="여자">여자<br/>
<label>취미</label>
<input type="checkbox" name="hobby" value="게임">게임
<input type="checkbox" name="hobby" value="등산">등산
<input type="checkbox" name="hobby" value="낚시">낚시
<input type="checkbox" name="hobby" value="독서">독서
<input type="checkbox" name="hobby" value="음악감상">음악감상
<br/>
<input type="button" value="checked설정" id="checked"/>
</fieldset>
<fieldset>
<legend>selected 속성 변경</legend>
<label>국번 선택</label>
<select name="tel1">
<option>---국번 선택---</option>
<option value="010">010</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="018">018</option>
<option value="019">019</option>
</select>
<br/>
<input type="button" value="selected 설정" onclick="setSelected()"/>
</fieldset>
</form>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
document.getElementById("unique").addEventListener("click", uniqueVal);
document.getElementById("checked").addEventListener("click", setChecked);
}
function uniqueVal() {
var obj = document.frm;
obj.name.value = "정택성"; // text 값설정
obj.password.value = "jmt111"; // password 값설정
obj.addr.value = "서울시 구로구"; // hidden 값설정, 소스보는 상태에서 버튼 클릭 시 값 추가 확인가능
obj.img.src = "../common/images/img1_1.png"; // img변경
// HTML 5에서 제공하는 Form Control
obj.date.value = "1993-07-29"; // date 변경, 년-월-일 형태만 적용됨
obj.range.value = 80; // range 변경
}
function setChecked() {
// checked 상태 변경
var obj = document.frm;
// radio의 상태 변경
obj.gender[0].checked = "true";
// checkbox의 상태 변경
obj.hobby[0].checked = "true";
obj.hobby[1].checked = "true";
obj.hobby[4].checked = "true";
}
function setSelected() {
// selected 상태 변경
var obj = document.frm;
obj.tel1[1].selected = "true";
}
</script>
- 메일 전체 선택하기
- flag 체크박스에서 change 이벤트 발생 시 전체 변경
<body>
<div>
<form name="frm">
<table>
<thead>
<tr>
<th width="10"><input type="checkbox" name="flag" id="flag"/></th>
<th width="350">제목</th>
<th width="80">작성자</th>
<th width="80">수신일</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>안녕하세요? 저번에 바다에서 뵀던... 바다이야기</td>
<td>김실장</td>
<td>2018-02-12</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>안녕하세요? 저번에 바다에서 또 뵀던... 바다이야기</td>
<td>김실장</td>
<td>2018-02-12</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>대박 승률... 야마토</td>
<td>이실장</td>
<td>2018-02-12</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>[업무협조]김정윤 담당자님 안녕하세요? 저번에 바다에서...</td>
<td>이실장</td>
<td>2018-02-12</td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
document.getElementById("flag").addEventListener("change", setChecked);
}
function setChecked() {
var obj = document.frm;
for(var i=0; i<obj.mail.length; i++) {
// flag 선택여부를 전체에 반영
obj.mail[i].checked = obj.flag.checked;
}
}
</script>
함수 사용
- 정수 변경
parseInt(값); // 값은 실수, 문자열
- 난수 발생
Math.random(); // 0.00...0 ~ 0.99...9, 15~16자리 난수
- 범위가 있는 난수 발생시키기
parseInt(Math.random()*발생하고싶은수);
// 0~9 난수 발생
parseInt(Math.random*10));
<body>
<div id="output">
</div>
<div>
<input type="button" value="함수사용" onclick="useFunc()"/>
</div>
</body>
<script type="text/javascript">
function useFunc() {
var divNode = document.getElementById("output");
var i = "2";
var j = 12;
var output = i+" * "+j+" = "+(parseInt(i)*j);
var randomNumber = 0;
for(var i=0; i<5; i++) {
randomNumber = parseInt(Math.random()*10);
output += "<br/>"+randomNumber;
}
divNode.innerHTML = output;
}
</script>
숙제1
- 주사위게임 만들기
- 참여설정이 클릭되면 사용자1과 2의 공백을 체크한 후 값이 없다면 alert(“사용자를 입력해주세요”)를 보여줄 것
- 내용이 있다면 id가 p1Name, p2Name span에 값이 들어간다.
- 라디오버튼이 선택된 상태에서 “던지기”가 눌려지면 주사위가 변경되고 합산값이 저장된다.
- 던지기를 누르기 전에 라디오 버튼 둘 중 하나는 반드시 선택돼있어야 함
- 3회로 게임을 종료한다
- 같은 사람은 또 던질 수 없다.
- 주사위를 두번 연속 던질 수 없다.
- 시작은 1번부터 시작한다.
- 게임이 종료되면 판정에 “XXX님이 승리하셨습니다.” 를 보여준다.
- 초기화버튼이 눌려지면 최초 상태로 돌아간다.
<body>
<div id="diceWrap">
<form name="frm">
<div id="inputHeader">
<h2>주사위 게임</h2>
<div>
<label>사용자1</label>
<input type="text" name="player1"/>
<label>사용자2</label>
<input type="text" name="player2"/>
<input type="button" value="참여설정" id="checkPlayer"/>
</div>
<div style="text-align:center; margin-top:10px;">
<input type="radio" name="turn1"/><span id="p1Name"></span>
<input type="radio" name="turn2"/><span id="p2Name"></span>
<input type="button" value="던지기" id="throwBtn">
</div>
</div>
<div id="score">
판정 : <span id="result"></span><br/>
<input type="button" value="초기화" id="reset"/>
</div>
<div id="diceView">
<img src="../common/images/dice/dice_1.png" name="dice1"/>
<img src="../common/images/dice/dice_1.png" name="dice2"/>
</div>
</form>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
setGameStart();
document.getElementById("checkPlayer").addEventListener("click", setPlayer);
document.getElementById("throwBtn").addEventListener("click", throwDice);
document.getElementById("reset").addEventListener("click", setGameStart);
}
function setGameStart() {
player1 = "";
player2 = "";
playerReady = false; // 아이디 입력여부 확인용
p1Cnt = 0;
p2Cnt = 0;
turnFlag = true; // 번갈아가며 플레이하기 위한 변수
result = new Array();
result[0] = new Array(); // player1 점수
result[1] = new Array(); // player2 점수
// 화면 초기화
var obj = document.frm;
obj.player1.value = "";
obj.player2.value = "";
obj.turn1.checked = false;
obj.turn2.checked = false;
obj.dice1.src = "../common/images/dice/dice_1.png";
obj.dice2.src = "../common/images/dice/dice_1.png";
document.getElementById("p1Name").innerHTML = "";
document.getElementById("p2Name").innerHTML = "";
document.getElementById("result").innerHTML = "";
}
function showResult() {
var p1Sum = 0;
var p2Sum = 0;
for(var i=0; i<result[0].length; i++) {
p1Sum += result[0][i];
p2Sum += result[1][i];
}
if (p1Sum > p2Sum) {
document.getElementById("result").innerHTML = player1+"님이 승리하셨습니다.";
} else if (p2Sum > p1Sum) {
document.getElementById("result").innerHTML = player2+"님이 승리하셨습니다.";
} else if (p1Sum == p2Sum) {
document.getElementById("result").innerHTML = "무승부 입니다..";
}
}
function throwDice() {
var obj = document.frm;
if (p1Cnt == 3 && p2Cnt == 3) {
alert("게임이 끝났습니다. 초기화를 눌러주세요.");
obj.turn1.checked = false;
obj.turn2.checked = false;
return;
}
if (!playerReady) {
alert("사용자 정보를 먼저 입력해주세요.");
return;
}
if(!(obj.turn1.checked || obj.turn2.checked)) {
alert("게임을 시작할 사용자를 선택해주세요.");
return;
}
if(obj.turn1.checked && obj.turn2.checked) {
alert("사용자는 한 명만 선택가능합니다.");
obj.turn1.checked = false;
obj.turn2.checked = false;
return;
}
if (obj.turn1.checked) {
if (turnFlag) {
result[0][p1Cnt] = changeDice();
p1Cnt++;
turnFlag = false;
obj.turn1.checked = false;
} else {
alert(plyaer2+"의 차례입니다.");
obj.turn1.checked = false;
return;
}
} else if (obj.turn2.checked) {
if (!turnFlag) {
result[1][p2Cnt] = changeDice();
p2Cnt++;
turnFlag = true;
obj.turn2.checked = false;
} else {
alert(player1+"의 차례입니다.");
obj.turn2.checked = false;
return;
}
}
if (p1Cnt == 3 && p2Cnt == 3) { // 경기 끝
showResult();
}
}
function changeDice() {
var obj = document.frm;
var num1 = parseInt(Math.random()*6)+1;
var num2 = parseInt(Math.random()*6)+1;
obj.dice1.src = "../common/images/dice/dice_"+num1+".png";
obj.dice2.src = "../common/images/dice/dice_"+num2+".png";
return num1+num2;
}
function setPlayer() {
var obj = document.frm;
if (obj.player1.value == "") {
alert("사용자1의 이름을 입력해주세요.");
return;
}
if (obj.player2.value == "") {
alert("사용자2의 이름을 입력해주세요.");
return;
}
player1 = obj.player1.value;
player2 = obj.player2.value;
// 플레이어의 이름을 세팅
document.getElementById("p1Name").innerHTML = player1;
document.getElementById("p2Name").innerHTML = player2;
playerReady = true;
}
</script>
숙제2
- 30px * 30px 이미지를 range태그로 300px까지 크기를 조절시키기
- change로 이벤트 처리
<body>
<div style="height:300px; width:300px; border:1px solid #333">
<img src="../common/images/img.png" width="30" height="30" id="img"/>
</div>
<div>
30<input type="range" id="rangeBox" min="30" max="300" value="30"/>300
</div>
</body>
<script type="text/javascript">
window.onload = function() {
document.getElementById("rangeBox").addEventListener("mousemove", changeSize);
}
function changeSize() {
var img = document.getElementById("img");
var rangeBox = document.getElementById("rangeBox");
img.width = rangeBox.value;
img.height = rangeBox.value;
}
</script>