SsY/Class
[JavaScript] 002. 자바스크립트 활용 실습(1)
planet-si
2023. 5. 9. 18:10
728x90
JavaScript 활용 실습
- Test017
- Math.floor() : 내림
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test017.html</title>
<style type="text/css">
*
{
color: #068af7;
font-weight: bold;
text-align : center;
}
input.textNum
{
color: #000000;
width: 100px;
text-align : right;
}
input.btn
{
width: 60px;
font-weight: bold;
background-color: #068af7;
color: white;
border: #068af7;
margin-left:30px;
}
input.btn:hover
{
color:skyblue;
}
input.btn:active
{
color:#feda6d;
}
</style>
<script type="text/javascript">
function myCalculate()
{
var moneyStr = document.getElementById("money").value;
var money = parseInt(moneyStr);
document.getElementById("totalMoney").value = money;
var m500 = parseInt(money/500); //-- 실수형태를 정수형태로 변환(버림)
//var m500 = Math.floor(money/500) //-- 위와 동일 구문
money = money%500; // money %= 500;
var m100 = parseInt(money/100);
money = money%100;
var m50 = parseInt(money/50);
money = money%50;
var m10 = parseInt(money/10);
document.getElementById("m500").value = m500;
document.getElementById("m100").value = m100;
document.getElementById("m50").value = m50;
document.getElementById("m10").value = m10;
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<!--
특정 금액(10~990)원 을 사용자로부터 입력받아
화폐 단위로 구분하여 출력하는 페이지를 구성한다.
화폐 단위는 편의상 오백원, 백원, 오십원, 십원으로 구분한다.
html, css, javascript 를 활용한다.
페이지 기본 레이아웃 구성
-----------------------------------------------------------
금 액 [ ] 원
<결과> <취소>
총 액 [ ] 원
오백원 [ ] 개
백 원 [ ] 개
오십원 [ ] 개
십 원 [ ] 개
-----------------------------------------------------------
-->
<br>
금 액 <input type="text" class="textNum" id="money"> 원<br>
<p><input type="button" class="btn" value="결과" onclick="myCalculate()"> <input type="reset" class="btn" value="취소"></p>
총  액 <input type="text" class="textNum" id="totalMoney" disabled="disabled"> 원 <br>
오백원 <input type="text" class="textNum" id="m500" disabled="disabled"> 개 <br>
백  원 <input type="text" class="textNum" id="m100" disabled="disabled"> 개 <br>
오십원 <input type="text" class="textNum" id="m50" disabled="disabled"> 개 <br>
십  원 <input type="text" class="textNum" id="m10" disabled="disabled"> 개 <br>
</body>
</html>
- Test017_1 (본인 풀이)
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test017_1.html</title>
<style type="text/css">
*
{
color: #068af7;
font-weight: bold;
}
input.textNum
{
color: #000000;
}
input.btn
{
width: 60px;
font-weight: bold;
background-color: #068af7;
color: white;
border: #068af7;
margin-left:30px;
}
input.btn:hover
{
color:skyblue;
}
input.btn:active
{
color:#feda6d;
}
</style>
<script type="text/javascript">
function cal()
{
// 입력 받은 금액
var inNum = parseInt(document.getElementById("input").value);
if (inNum>990 || inNum<10)
{
alert("10~990원 사이 금액을 입력해주세요.");
}else
{
var cal = inNum;
// 총액 합산해서 담아주기
document.getElementById("total").value = inNum;
// 권종별로 나눠서 박스에 담기~
document.getElementById("obWon").value = Math.floor(cal/500);
cal = cal - 500* Math.floor(cal/500);
document.getElementById("bWon").value = Math.floor(cal/100);
cal = cal - 100* Math.floor(cal/100);
document.getElementById("osWon").value = Math.floor(cal/50);
cal = cal - 50* Math.floor(cal/50);
document.getElementById("sWon").value = cal/10;
}
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<!--
특정 금액(10~990)원 을 사용자로부터 입력받아
화폐 단위로 구분하여 출력하는 페이지를 구성한다.
화폐 단위는 편의상 오백원, 백원, 오십원, 십원으로 구분한다.
html, css, javascript 를 활용한다.
페이지 기본 레이아웃 구성
-----------------------------------------------------------
금 액 [ ] 원
<결과> <취소>
총 액 [ ] 원
오백원 [ ] 개
백 원 [ ] 개
오십원 [ ] 개
십 원 [ ] 개
-----------------------------------------------------------
-->
<div>
<form>
<br> ----------------------------------------------------------- <br><br>
<div>
금 액 <input type="text" class="textNum" id="input"> 원<br><br>
</div>
<div>
<input type="button" class="btn" value="결과" onclick="cal()"> <input type="reset" class="btn" value="취소">
</div>
<div>
총액 <input type="text" class="textNum" id="total" disabled="disabled"> 원 <br>
오백원 <input type="text" class="textNum" id="obWon" disabled="disabled"> 개 <br>
백원 <input type="text" class="textNum" id="bWon" disabled="disabled"> 개 <br>
오십원 <input type="text" class="textNum" id="osWon" disabled="disabled"> 개 <br>
십원 <input type="text" class="textNum" id="sWon" disabled="disabled"> 개 <br>
</div>
<br> ----------------------------------------------------------- <br>
</form>
</div>
</body>
</html>- Test019
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test018.html</title>
<style type="text/css">
*
{
font-family: Fixedsys;
font-weight: bold;
background-color: blue;
color : white;
text-align: center;
}
input.data
{
background-color: #dfe1dd;
width: 100px;
}
input.btn
{
background-color: #dfe1dd;
color: black;
}
input.btn:hover
{
background-color: white;
color: black;
}
input.btn:active
{
background-color: black;
color: white;
}
</style>
<script type="text/javascript">
function actionPerformed()
{
// 확인
//alert("함수 호출 확인~");
var korStr = document.getElementById("kor").value;
var engStr = document.getElementById("eng").value;
var matStr = document.getElementById("mat").value;
var nKor = parseInt(korStr);
var nEng = parseInt(engStr);
var nMat = parseInt(matStr);
var nTot = 0; //-- 총점
var nAvg = 0; //-- 평균
var panStr = ""; //-- 판정
//총점 산출
nTot = nKor + nEng + nMat;
//평균 산출
nAvg = Math.round(nTot/3);
document.getElementById("avg").value = nAvg;
if (nKor>=40 && nEng>=40 && nMat>=40 && nAvg>=60)
panStr="합격";
else if (nAvg>=60)
panStr="과락";
else
panStr="불합격";
document.getElementById("pan").value = panStr;
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<!--
사용자로부터 이름, 국어점수, 영어점수, 수학점수를 입력받아
평균 점수와 판정 결과를 출력하는 페이지를 구성한다.
판정 결과는 합격, 과락, 불합격 중 하나로 처리한다.
합격은 모든 과목 점수가 40점 이상이면서 평균 60점 이상인 경우
과락은 평균이 60점 이상이지만 한 과목이라도 점수가 40점 미만의 과목이 존재하는 경우
불합격은 평균이 60 점 미만인 경우로 처리한다.
html, css, javascript 활용
페이지 레이아웃
-----------------------------------------------------------
이름 [ ]
국어점수 [ ]
영어점수 [ ]
수학점수 [ ]
<처리 결과 확인>
평균 판정결과
[ ] [ ]
-----------------------------------------------------------
-->
<div>
<form>
<div>
이      름 <input type="text" class="data" id="inputName">
<br> 국어점수 <input type="text" class="data" id="kor">
<br> 영어점수 <input type="text" class="data" id="eng">
<br> 수학점수 <input type="text" class="data" id="mat">
</div>
<br>
<div>
<input type="button" class="btn" value="처리 결과 확인" onclick="actionPerformed()">
</div>
<br>
<div>
<table style="margin-left:auto; margin-right:auto;">
<tr>
<th>평균</th>
<th>판정결과</th>
</tr>
<tr>
<th style="bgcolor:grey; color:white; text-align:right;"><input type="txt" class="data" id="avg" disabled="disabled"></th>
<th style="bgcolor:grey; color:white; text-align:center;"><input type="txt" class="data" id="pan" disabled="disabled"></th>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
- Test018_1
- 본인 풀이
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test018_1.html</title>
<style type="text/css">
*
{
font-family: Fixedsys;
font-weight: bold;
background-color: blue;
color : white;
text-align: center;
}
input.data
{
background-color: #dfe1dd;
width: 100px;
}
input.btn
{
background-color: #dfe1dd;
color: black;
}
input.btn:hover
{
background-color: white;
color: black;
}
input.btn:active
{
background-color: black;
color: white;
}
</style>
<script type="text/javascript">
function sungjuk()
{
//alert("성적처리");
var kor = parseInt(document.getElementById("kor").value);
var eng = parseInt(document.getElementById("eng").value);
var mat = parseInt(document.getElementById("mat").value);
var avg = Math.round((kor+eng+mat)/3);
var res = "";
// 성적 처리
// 평균 점수 안내
document.getElementById("avg").value = avg;
// 성적 분기
if (kor<40 || eng<40 || mat<40)
{
res = "과락"
} else if (avg >= 60)
{
res = "합격"
} else if (avg < 60)
{
res = "불합격"
}
// 성적 결과 반환
document.getElementById("res").value = res;
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<!--
사용자로부터 이름, 국어점수, 영어점수, 수학점수를 입력받아
평균 점수와 판정 결과를 출력하는 페이지를 구성한다.
판정 결과는 합격, 과락, 불합격 중 하나로 처리한다.
합격은 모든 과목 점수가 40점 이상이면서 평균 60점 이상인 경우
과락은 평균이 60점 이상이지만 한 과목이라도 점수가 40점 미만의 과목이 존재하는 경우
불합격은 평균이 60 점 미만인 경우로 처리한다.
html, css, javascript 활용
페이지 레이아웃
-----------------------------------------------------------
이름 [ ]
국어점수 [ ]
영어점수 [ ]
수학점수 [ ]
<처리 결과 확인>
평균 판정결과
[ ] [ ]
-----------------------------------------------------------
-->
<div>
<marquee scrollamount="10" style="color:white;"> 안녕하세요 ~ 성적확인 프로그램에 오신 것을 환영합니다~ </marquee>
</div>
<br>
<div>
<form>
<div>
이      름 <input type="text" class="data" id="inputName">
<br> 국어점수 <input type="text" class="data" id="kor">
<br> 영어점수 <input type="text" class="data" id="eng">
<br> 수학점수 <input type="text" class="data" id="mat">
</div>
<br>
<div>
<input type="button" class="btn" value="처리 결과 확인" onclick="sungjuk()">
</div>
<br>
<div>
<table style="margin-left:auto; margin-right:auto;">
<tr>
<th>평균</th>
<th>판정결과</th>
</tr>
<tr>
<th style="bgcolor:grey; color:white; text-align:right;"><input type="txt" class="data" id="avg" disabled="disabled"></th>
<th style="bgcolor:grey; color:white; text-align:center;"><input type="txt" class="data" id="res" disabled="disabled"></th>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>- Test019
- return
- textarea 구성시 주의점
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test019.html</title>
<style type="text/css">
*
{
color: #16943f;
font-weight: bold;
text-align: center;
}
input.textBox
{
color: #000000;
}
input.btn
{
width: 60px;
font-weight: bold;
background-color: #d5f7a6;
color: white;
border: #d5f7a6;
margin-left:30px;
}
input.btn:hover
{
color: green;
}
input.btn:active
{
color:lime;
background-color : green;
}
textarea
{
color: white;
background-color: #b7d735;
border: #b7d735;
font-size: 16px;
text-align: left;
}
</style>
<script type="text/javascript">
function myCalculate()
{
document.getElementById("result").value=""; //-- 시작할 때마다 내용물을 비우고 시작!
//확인
//alert("테스트")
var nNum = Number(document.getElementById("num").value);
var nSum = 0;
if (nNum<100)
{
alert("입력값은 100 이상만 가능합니다!");
return; // 함수의 종료를 의미
}
for (var n = 1; n <= nNum; n++) //-- 1부터 사용자가 입력한 값(nNum) 까지 1씩 증가하며 반복 수행
{
nSum += n; //-- nSum 을 n 만큼씩 증가
//document.getElementById("result").value = "1 ~ " + n + " : " + nSum + "\n"; // 덮어쓰기 당함
if (n%10==0)
document.getElementById("result").value += "1 ~ " + n + " : " + nSum + "\n"; // textarea 개행은 '\n'
}
if(nNum%10!=0)
document.getElementById("result").value += ">> 1 ~ " + nNum + " : " + nSum + "\n";
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<!--
사용자로부터 임의의 정수 n 을 입력받아
1 부터 n 까지의 합을 계산하되
n 은 100 이상만 허용할 수 있도록 처리하고
출력 시 10의 배수가 될 때 마다 중간 합을 출력할 수 있는 페이지를 구성한다.
반복문을 활용할 수 있도록 한다.
html, css, javascript 활용
페이지 레이아웃
-----------------------------------------------------------------
정수 입력 (100 이상) [ 101 ] → 조건 유효성
(입력값은 100 이상만 가능)
< 결 과 > < 취 소 >
----------------------------------- → textarea
1 ~ 10 : xx ┐
1 ~ 20 : xxx │
1 ~ 30 : xxx │ -- 중간 합
: │
1 ~ 100 : xxxx ┘
1 ~ 101 : 5051 -- 최종 합
-----------------------------------
-----------------------------------------------------------------
-->
<div style="color:green;">
🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀
</div>
<br>
<div>
<form>
<div>
정수 입력 (100 이상) <input type="text" class="txtBox" id="num">
</div>
<br>
<div>
<input type="button" class="btn" value=" 결 과 " id="resSum" onclick="myCalculate()">
<input type="reset" class="btn" value=" 취 소 ">
</div>
<br>
<div style="color:#d5f7a6;">
🌻🌼🌷🌱🌻🌼🌷🌱🌻🌼🌷🌱(❁´◡`❁)🌻🌼🌷🌱🌻🌼🌷🌱🌻🌼🌷🌱
</div>
<div>
<textarea rows="30" cols="60" name="final" id="result">
</textarea>
</div>
</form>
</div>
<br>
<div style="color:green;">
🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀
</div>
</body>
</html>
- Test019_1
- 본인 풀이
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test019_1.html</title>
<style type="text/css">
*
{
color: #16943f;
font-weight: bold;
text-align: center;
}
input.textBox
{
color: #000000;
}
input.btn
{
width: 60px;
font-weight: bold;
background-color: #d5f7a6;
color: white;
border: #d5f7a6;
margin-left:30px;
}
input.btn:hover
{
color: green;
}
input.btn:active
{
color:lime;
background-color : green;
}
textarea
{
color: white;
background-color: #b7d735;
border: #b7d735;
font-size: 16px;
text-align: left;
}
</style>
<script type="text/javascript">
function calSum()
{
//alert("함수");
var num = parseInt(document.getElementById("inNum").value);
if (num<100)
{
alert("입력 값은 100 이상이어야합니다.");
} else
{
var sum = 0;
var str1 ="";
for (var i = 1; i <= num; i++)
{
sum += i;
if (i%10==0)
{
document.getElementById("sumSet").value += "\t" + "1~" + i + " : " + sum + "\n";
}
}
if (num%10 !=0)
{
document.getElementById("sumSet").value += "\t" + "1~" + num + " : " + sum + "\n";
}
}
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<!--
사용자로부터 임의의 정수 n 을 입력받아
1 부터 n 까지의 합을 계산하되
n 은 100 이상만 허용할 수 있도록 처리하고
출력 시 10의 배수가 될 때 마다 중간 합을 출력할 수 있는 페이지를 구성한다.
반복문을 활용할 수 있도록 한다.
html, css, javascript 활용
페이지 레이아웃
-----------------------------------------------------------------
정수 입력 (100 이상) [ 101 ] → 조건 유효성
(입력값은 100 이상만 가능)
< 결 과 > < 취 소 >
----------------------------------- → textarea
1 ~ 10 : xx ┐
1 ~ 20 : xxx │
1 ~ 30 : xxx │ -- 중간 합
: │
1 ~ 100 : xxxx ┘
1 ~ 101 : 5051 -- 최종 합
-----------------------------------
-----------------------------------------------------------------
-->
<div style="color:green;">
🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀
</div>
<br>
<div>
<form>
<div>
정수 입력 (100 이상) <input type="text" class="txtBox" id="inNum">
</div>
<br>
<div>
<input type="button" class="btn" value=" 결 과 " id="resSum" onclick="calSum()">
<input type="reset" class="btn" value=" 취 소 ">
</div>
<br>
<div>
<textarea rows="30" cols="60" name="final" id="sumSet">
</textarea>
</div>
</form>
</div>
<br>
<div style="color:green;">
🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀
</div>
</body>
</html>- Test020
- 자바스크립트 배열 활용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test020.html</title>
<style type="text/css">
*
{
text-align : center;
font-weight: bold;
background-color: #fcd63d;
}
input
{
color: white;
background-color: black;
}
</style>
<script type="text/javascript">
// 자바스크립트 배열 선언 및 초기화
var arr = [4, 7, 9, 1, 3, 2, 5, 6, 8];
function init()
{
//테스트
//alert("함수 호출 확인");
document.getElementById("arr1").value = arr; // 더미 전달 check
}
function actionArray()
{
//테스트
//alert("함수 호출 확인");
var str = "";
for (var n = 0; n < arr.length; n++)
{
//테스트
//alert("함수 호출 확인");
//str += arr[n] + " "; // 전체 배열 출력
if (arr[n]%2==0)
{
str += arr[n] + " ";
}
}
//테스트
//alert(str);
document.getElementById("arr2").value = str;
}
</script>
</head>
<body onload="init()"> <!-- 페이지 생성시 호출 -->
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<!--
지정된 정수가 요소로 구성된 1차원 배열의 숫자 데이터들 중에서
짝수만 골라서 출력하는 페이지를 구현한다.
html, css, javascript 를 활용한다.
또한, 자바스크립트 배열을 활용한다.
지정 배열 → 4, 7, 9, 1, 3, 2, 5, 6, 8
페이지 레이아웃
---------------------------------------------------------------
초기 배열 상태 [4 7 9 1 3 2 5 6 8] → 지정된 배열
<결과>
짝수만 출력 [4 2 6 8]
---------------------------------------------------------------
-->
<form>
<div>
초기 배열 상태 <input type="text" class="txt" id="arr1">
</div>
<br><br>
<div>
<input type="button" class="btn" value="결과" onclick="actionArray()" style="width: 260px;">
</div>
<br><br>
<div>
짝수만 출력 <input type="text" class="txt" id="arr2" disabled="disabled">
</div>
<br><br>
</form>
</body>
</html>
- Test021
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test021.html</title>
<style type="text/css">
*
{
text-align : center;
font-weight: bold;
background-color: #fcd63d;
font-family: 맑은 고딕;
}
input
{
color: white;
background-color: black;
}
</style>
<script type="text/javascript">
function actionPerformed()
{
//alert("확인");
//입력값을 활용하여 자바스크립트 배열 구성
var tempStr = document.getElementById("txt01").value; // "10 20 30 40 50"
var arr = tempStr.split(" "); // ["10","20","30","40","50"]
// var arr = ["10","20","30","40","50"]; //-- 공백으로 구분하여 구성된 배열 반환
// 배열의 전체 요소 출력
//document.getElementById("txt02").value = arr;
var allStr = "";
for (var n = 0; n < arr.length; n++)
allStr += arr[n] + " ";
document.getElementById("txt02").value = allStr;
// 가장 큰 수 얻어내기
var max = Number(arr[0]);
for (var n = 1; n < arr.length; n++)
{
if (max<Number(arr[n]))
max = Number(arr[n]);
}
document.getElementById("txt03").value = max;
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<!--
사용자로부터 임의의 정수를 임의의 갯수만큼 입력받고,
그 내용으로 배열을 구성하여
구성한 정수들 중 가장 큰 수를 출력해줄 수 있는 페이지를 구현한다.
html, css, javascript 를 활용한다.
페이지 레이아웃
-----------------------------------------------------------------
데이터 입력(공백 구분) [ ] → 배열 구성
<결과 확인>
- 전체 출력 [ ] → 배열 전체 출력
- 가장 큰 수 [ ] → 가장 큰 수 출력
-----------------------------------------------------------------
-->
<form>
<div style="height:50px">
데이터 입력(공백 구분) <input type="text" class="txt" id="txt01">
</div>
<div style="height:50px">
<input type="button" class="btn" id="btn" value="결과 확인" onclick="actionPerformed()" style="width=200px">
</div>
<div style="height:100px">
- 전체 출력  <input type="text" class="txt" id="txt02" readonly="readonly"><br>
- 가장 큰 수 <input type="text" class="txt" id="txt03" readonly="readonly">
</div>
</form>
</body>
</html>
- Test021_1
- 내가 한 풀이
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test021_1.html</title>
<script type="text/javascript">
function findMax()
{
document.getElementById("arr2").value="";
var str = document.getElementById("arr1").value;
var arr = str.split(" ");
//alert(arr);
document.getElementById("arr2").value = arr;
var max = Number(arr[0]);
for (var i = 0; i < arr.length; i++)
{
if (max < Number(arr[i]))
{
max = Number(arr[i]);
}
}
document.getElementById("big").value = max;
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<!--
사용자로부터 임의의 정수를 임의의 갯수만큼 입력받고,
그 내용으로 배열을 구성하여
구성한 정수들 중 가장 큰 수를 출력해줄 수 있는 페이지를 구현한다.
html, css, javascript 를 활용한다.
페이지 레이아웃
-----------------------------------------------------------------
데이터 입력(공백 구분) [ ] → 배열 구성
<결과 확인>
- 전체 출력 [ ] → 배열 전체 출력
- 가장 큰 수 [ ] → 가장 큰 수 출력
-----------------------------------------------------------------
-->
<form>
<div style="height:50px">
데이터 입력(공백 구분) <input type="text" class="txt" id="arr1">
</div>
<div style="height:50px">
<input type="button" class="btn" id="btn" value="결과 확인" onclick="findMax()" style="width=200px">
</div>
<div style="height:100px">
- 전체 출력  <input type="text" class="txt" id="arr2" disabled="disabled"><br>
- 가장 큰 수 <input type="text" class="txt" id="big" disabled="disabled">
</div>
</form>
</body>
</html>- Test022
- prompt
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test022.html</title>
<script type="text/javascript">
function addMember()
{
//확인
//alert("얍!");
var str = ""; //-- 사용자 입력값을 담아낼 변수
var arr = new Array(); //-- 반복적인 입력값을 보관할 배열 변수
var n = 0; //-- 인원 수 담아낼 변수
/*
str = prompt("이름을 입력하세요"); //-- 프롬프트로 받아내온 값은 해당 prompt ~ ; 까지를 대체하게 됨
alert(str);
*/
do
{
//※ 『prompt()』 대화창을 통해 데이터 입력 안내 → 입력 데이터를 변수 str 에 담아내기
str = prompt("이름 전화번호(" + (n+1) + ") : ");
//확인
//alert(str);
if (str == null || str == "." || str =="" || str == " ")
break;
arr[n] = str;
n++;
} while (true);
document.getElementById("txtCount").value = arr.length;
document.getElementById("txtResult").value = " 이름 전화번호\n"
for (var n = 0; n < arr.length; n++)
document.getElementById("txtResult").value += arr[n] + "\n";
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<!--
여러 명의 이름과 전화번호를 입력받고
그 내용을 전체 출력하는 페이지를 구현한다.
html, css, javascript 를 활용한다.
또한 prompt() 를 활용한다.
페이지 레이아웃
-------------------------------------------
< 회원 정보 입력 >
전체 회원 수 : [ ] 명
---------------------------
이름 전화번호
---------------------------
:
---------------------------
-------------------------------------------
-->
<div>
<form>
<input type="button" value="회원 정보 입력" class="btn" style="width: 200px;" onclick="addMember()">
<br><br>
전체 회원 수 <input type="text" id="txtCount" class="txt" readonly="readonly"
style="width: 20px;">명
<br>
<textarea rows="10" cols="30" id="txtResult" readonly="readonly" style="margin: 2px;"></textarea>
</form>
</div>
</body>
</html>728x90