<!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>
<!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>
