Notice
Recent Posts
Recent Comments
Link
Everything has an expiration date
Javascript 20231201 [프로그램소스] - Test019, Test019_1, Test020, Test020_1, Test021, 본문
[Javascript]/Program source (Javascript)
Javascript 20231201 [프로그램소스] - Test019, Test019_1, Test020, Test020_1, Test021,
Jelly-fish 2023. 12. 1. 16:03WebApp03
Test019.html
Test019.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test019.html</title>
<style type="text/css">
* {font-family: "나눔고딕코딩"; font-weight: bold; font-size : 20px; background-image: }
input.txt {border-radius: 20px;}
input.btn {background-color: #9ddafc; width: 258px; border: none; color: #3361a1; border-radius: 20px;}
body { background-image: url("images/시나모롤님.jpg"); background-size: 300px; }
input.btn:hover {color: orange; background-color: #ebf059;}
textarea { border-radius: 20px; background-color: #f6ffa6; border: thin;}
</style>
<script type="text/javascript">
function myCalc()
{
var num = parseInt(document.getElementById("num").value);
var sum = 0;
var resultStr = "";
if (!(num >= 100))
{
alert("100 이상의 정수만 입력이 가능합니다.");
}
else
{
for (i = 1; i <= num; i++)
{
sum += i;
if (i % 10 == 0 || i == num)
{
resultStr += "1 ~ " + i + " : " + sum + "\n";
}
}
document.getElementById("result").value = resultStr;
}
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<!--
사용자로부터 임의의 정수 n 을 입력받아
1 부터 n 까지의 합을 계산하되
n 은 100 이상만 허용하고,
출력 시 10의 배수가 될 때마다 중간 합을 출력할 수 있는 페이지를 구성한다.
반복문을 활용할 수 있도록 한다.
HTML, CSS, Javascript 활용
페이지 레이아웃 (입력값은 100 이상만 가능~!!!)
--------------------------------------------↑-----------------------
↑
정수 입력(100 이상) [ 101 ] → 조건 유효성 num
< 결과 > < 취소 >
----------------------------------------- → textarea result
1 ~ 10 : 55 ┐
1 ~ 20 : 210 │
1 ~ 30 : xxx ┃ 중간 합
: │
1 ~ 100 : 5050 ┘
1 ~ 101 : 5151 - 최종 합
-----------------------------------------
---------------------------------------------------------------------
-->
<div>
<form>
<table>
<tr>
<td>정수 입력(100 이상)</td>
<td><input type="text" class="txt" id="num"></td>
</tr>
<tr>
<td><input type="button" class="btn" id="start" value="결과" onclick="myCalc()"></td>
<td><input type="reset" class="btn" id="quit" value="취소"></td>
</tr>
<tr>
<td colspan="2"><textarea rows="10" cols="50" id="result" class="txtBox"></textarea></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Test019_1.html
Test019_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test019_1.html</title>
<style type="text/css">
* {font-family: "나눔고딕코딩"; font-weight: bold; font-size : 20px; background-image: }
input.btn {background-color: #9ddafc; width: 258px; border: none; color: #3361a1; border-radius: 20px;}
body { background-image: url("images/시나모롤님.jpg"); background-size: 300px; }
input.btn:hover {color: orange; background-color: #ebf059;}
</style>
<script type="text/javascript">
function myCalculate()
{
//[CHECK!!]
// ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
// 함수가 호출 되어서 시작 하자마자 칠판을 지워줘야 한다!
// 안 그러면, 연속해서 실행했을 때 계속해서 실행 결과가 누적된다!!!!!
// ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
//document.getElementById("result").value = ""; //-- check~!!!
// 확인
//alert("함수 호출 확인~!!!");
var nNum = Number(document.getElementById("num").value);
var nSum = 0;
if (nNum < 100)
{
alert("입력값은 100 이상만 가능합니다~!!!");
return; // check~!!!
// 【함수를 종료시키는 return 문이 자바 스크립트에도 존재!!】
}
for (var n = 1; n <= nNum; n++) //-- 1 부터 사용자가 입력한 값(nNum)까지 1씩 증가하며 반복 수행
{
nSum += n;
// *************************************************
// ★ [textarea 안에서 만큼은, 개행이 \n이다!!!]
// *************************************************
//document.getElementById("result").value += ">> 1 ~ " + nNum + " : " + nSum + "<br>";
if (n % 10 == 0)
{
document.getElementById("result").value += " 1 ~ " + n + " : " + nSum + "\n";
}
}
document.getElementById("result").value += ">> 1 ~ " + (n-1) + " : " + nSum + "\n";
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<!--
사용자로부터 임의의 정수 n 을 입력받아
1 부터 n 까지의 합을 계산하되
n 은 100 이상만 허용하고,
출력 시 10의 배수가 될 때마다 중간 합을 출력할 수 있는 페이지를 구성한다.
반복문을 활용할 수 있도록 한다.
HTML, CSS, Javascript 활용
페이지 레이아웃 (입력값은 100 이상만 가능~!!!)
--------------------------------------------↑-----------------------
↑
정수 입력(100 이상) [ 101 ] → 조건 유효성 num
< 결과 > < 취소 >
----------------------------------------- → textarea result
1 ~ 10 : 55 ┐
1 ~ 20 : 210 │
1 ~ 30 : xxx ┃ 중간 합
: │
1 ~ 100 : 5050 ┘
1 ~ 101 : 5151 - 최종 합
-----------------------------------------
---------------------------------------------------------------------
-->
<div>
<form>
<table>
<tr>
<td>정수 입력(100 이상)</td>
<td><input type="text" class="txt" id="num"></td>
</tr>
<tr>
<td><input type="button" class="btn" id="start" value="결과" onclick="myCalculate()"></td>
<td><input type="reset" class="btn" id="quit" value="취소"></td>
</tr>
<tr>
<td colspan="2"><textarea rows="10" cols="50" id="result" redonly="readonly"></textarea></td>
<!-- [readonly : 사용자가 쓰는 것이 불가능하고 오직 읽는 용도로만 쓰이는 textarea 속성이다!!] -->
</tr>
</table>
</form>
</div>
</body>
</html>
Test020.html
Test020.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test019_1.html</title>
<style type="text/css">
* {font-family: "나눔고딕코딩"; font-weight: bold; font-size : 20px; background-image: }
input.btn {background-color: #9ddafc; width: 258px; border: none; color: #3361a1; border-radius: 20px;}
body { background-image: url("images/시나모롤님.jpg"); background-size: 300px; }
input.btn:hover {color: orange; background-color: #ebf059;}
</style>
<script type="text/javascript">
function myCalculate()
{
//[CHECK!!]
// ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
// 함수가 호출 되어서 시작 하자마자 칠판을 지워줘야 한다!
// 안 그러면, 연속해서 실행했을 때 계속해서 실행 결과가 누적된다!!!!!
// ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
//document.getElementById("result").value = ""; //-- check~!!!
// 확인
//alert("함수 호출 확인~!!!");
var nNum = Number(document.getElementById("num").value);
var nSum = 0;
if (nNum < 100)
{
alert("입력값은 100 이상만 가능합니다~!!!");
return; // check~!!!
// 【함수를 종료시키는 return 문이 자바 스크립트에도 존재!!】
}
for (var n = 1; n <= nNum; n++) //-- 1 부터 사용자가 입력한 값(nNum)까지 1씩 증가하며 반복 수행
{
nSum += n;
// *************************************************
// ★ [textarea 안에서 만큼은, 개행이 \n이다!!!]
// *************************************************
//document.getElementById("result").value += ">> 1 ~ " + nNum + " : " + nSum + "<br>";
if (n % 10 == 0)
{
document.getElementById("result").value += " 1 ~ " + n + " : " + nSum + "\n";
}
}
document.getElementById("result").value += ">> 1 ~ " + (n-1) + " : " + nSum + "\n";
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<!--
사용자로부터 임의의 정수 n 을 입력받아
1 부터 n 까지의 합을 계산하되
n 은 100 이상만 허용하고,
출력 시 10의 배수가 될 때마다 중간 합을 출력할 수 있는 페이지를 구성한다.
반복문을 활용할 수 있도록 한다.
HTML, CSS, Javascript 활용
페이지 레이아웃 (입력값은 100 이상만 가능~!!!)
--------------------------------------------↑-----------------------
↑
정수 입력(100 이상) [ 101 ] → 조건 유효성 num
< 결과 > < 취소 >
----------------------------------------- → textarea result
1 ~ 10 : 55 ┐
1 ~ 20 : 210 │
1 ~ 30 : xxx ┃ 중간 합
: │
1 ~ 100 : 5050 ┘
1 ~ 101 : 5151 - 최종 합
-----------------------------------------
---------------------------------------------------------------------
-->
<div>
<form>
<table>
<tr>
<td>정수 입력(100 이상)</td>
<td><input type="text" class="txt" id="num"></td>
</tr>
<tr>
<td><input type="button" class="btn" id="start" value="결과" onclick="myCalculate()"></td>
<td><input type="reset" class="btn" id="quit" value="취소"></td>
</tr>
<tr>
<td colspan="2"><textarea rows="10" cols="50" id="result" redonly="readonly"></textarea></td>
<!-- [readonly : 사용자가 쓰는 것이 불가능하고 오직 읽는 용도로만 쓰이는 textarea 속성이다!!] -->
</tr>
</table>
</form>
</div>
</body>
</html>
Test020_1.html
Test020_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test020.html</title>
<style type="text/css">
* { font-family: 나눔고딕코딩; font-size: 20px; font-weight: bold;}
body { background-image: url("images/폼폼푸린님.png");}
input.textArr { background-color: #fceca2; border-radius: 20pt; color: #91642c; border: none; text-align: center;}
input.btn {width: 150px; background-color: #fceca2; border-radius: 20pt; color: #91642c; border: none; text-align: center;}
</style>
<script type="text/javascript">
// 자바스크립트 배열 선언 및 초기화 (전역변수로 선언!)
var arr = [4, 7, 9, 1, 3, 2, 5, 6, 8];
function init()
{
// 더미를 대입시키는 것!!
//document.getElementById("arr1").value = arr; // 더미 check~!!!
//*************************************************************************************
// 더미 객체 자체를 넣는 것을 의미하므로, 배열의 요소 하나하나가 들어가는 것이 아니라
// 4, 7, 9, ... 이 더미 데이터가 들어가게 되는 것이다!!!
//*************************************************************************************
// ⓐ 배열 전체를 value 에 넣도록 구성=======
var str = "";
for (var n=0; n < arr.length; n++)
{
str += arr[n] + " ";
}
document.getElementById("arr1").value = str;
//===========================================
}
function myCalculate()
{
// ⓑ 짝수값만 넣도록 구성===================
var str = "";
for (var n=0; n<arr.length; n++)
{
if (arr[n]%2==0)
{
str += arr[n] + " ";
}
}
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 ] → 지정된 배열 arr1
< 결과 확인 >
짝수만 출력 [ 4 2 6 8 ] arr2
----------------------------------------------------------------------
-->
<div>
<form>
<table>
<tr>
<td>초기 배열 상태</td>
<td><input type="text" class="textArr" id="arr1" value="4 7 9 1 3 2 5 6 8" readonly="readonly"></td>
</tr>
<tr>
<td colspan="2"><input type="button" class="btn" id="resultBtn" value="결과 확인" onclick="myCalculate()"></td>
</tr>
<tr>
<td>짝수만 출력</td>
<td><input type="text" class="textArr" id="arr2"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Test021.html
Test021.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test021.html</title>
<style type="text/css">
* {text-align: center; color: #5b818a; font-family: 나눔고딕코딩; font-weight: bold; font-size: 15pt;}
/* input.btn {width: 340px; background-color: #dfeaf7; background-size: 40px;} */
h2 { padding: 5pt; background-color: white; font-family: 나눔고딕코딩; font-size: 10pt; text-align: left; color: #83d4c8; font-weight: bold;}
input.txt { border-radius: 15pt; background-color: #e8feff; color: #3791a1; border: none; padding: 5pt;}
input.txt:focus { background-color: #faffe8; color: #e8644d; font-weight: bolder; border-color: red; }
img { width: 150px; background-color: white;}
body {background-image: url("images/시나모롤님_패턴.jpg")}
p {background-color: #fffef0; border-radius: 20pt; padding: 5pt;}
table {margin-left: auto; margin-right: auto; background-color: #cce6ff; border-radius: 20pt; padding: 10pt; align-content: center;}
h1 { padding: 10pt; background-color: #fffef0; border-radius: 10pt;}
</style>
<script type="text/javascript">
var clickEventCnt = 0;
function myCalculate()
{
clickEventCnt++;
if (document.getElementById("txt01").value == "")
{
alert("데이터 값을 입력하고 버튼을 눌러주세요.");
clickEventCnt = 0;
return;
}
if (clickEventCnt == 1)
document.getElementById("startBtn").src = "images/시나모롤님.jpg";
else if(clickEventCnt == 2)
{
clickEventCnt = 0;
document.getElementById("startBtn").src = "images/시나모롤님_버튼.jpg";
if (document.getElementById("txt01").value != "")
{
alert("초기화가 완료되었습니다.");
document.getElementById("txt01").value = "";
document.getElementById("txt02").value = "";
document.getElementById("txt03").value = "";
}
}
// String 타입으로 가져오기
var inputStr = document.getElementById("txt01").value;
// 문자열 배열로 변경하기 (" ")을 구분자로 사용하여 문자열을 요소로 분리.
var numArr = inputStr.split(" ");
// 최댓값 저장할 변수 선언, 초기값을 0번째 인덱스로 설정.
var max = parseInt(numArr[0]);
// 최댓값 구하기
for (var i = 1; i <= numArr.length; i++)
{
if (parseInt(numArr[i]) >= max)
{
max = parseInt(numArr[i]);
}
}
// 전체 출력 텍스트 박스에 넣기
document.getElementById("txt02").value = inputStr;
// 최댓값 텍스트 박스에 넣기
document.getElementById("txt03").value = max;
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<!--
사용자로부터 임의의 정수를 임의의 개수만큼 입력받고,
그 내용으로 배열을 구성하여,
구성한 정수들 중 가장 큰 수를 출력해 줄 수 있는 페이지를 구현한다.
HTML, CSS, Javascript 활용한다.
페이지 레이아웃
----------------------------------------------------------------------
데이터 입력(공백 구분) [ 21 86 258 43 7 ] → 배열 구성 txt01
< 결과 확인 >
- 전체 출력 [ 21 86 258 43 7 ] → 배열 전체 출력 txt02
- 가장 큰 수 [ 258 ] txt03
----------------------------------------------------------------------
-->
<!-- <td colspan="2" align="center"><input type="button" class="btn" id="startBtn" value="결과 확인" onclick="myCalculate()"></td> -->
<div>
<form>
<table>
<tr>
<td width="200pt"><p>데이터 입력<br>(공백 구분)</p></td>
<td><input type="text"; class="txt"; id="txt01";></td>
</tr>
<tr bgcolor="white">
<td colspan="2">
<h2>(* 두 번 클릭하면 초기화합니다.)</h2>
<br>
<img src="images/시나모롤님_버튼.jpg" class="btn" id="startBtn" onclick="myCalculate()">
</td>
</tr>
<tr>
<td><p>전체 출력</p></td>
<td><input type="text" class="txt" id="txt02" readonly="readonly"></td>
</tr>
<tr>
<td><p>가장 큰 수</p></td>
<td><input type="text" class="txt" id="txt03" readonly="readonly"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Test021_1.html
Test021_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test021_1.html</title>
<style type="text/css">
* {text-align: center; color: #5b818a; font-family: 나눔고딕코딩; font-weight: bold; font-size: 15pt;}
/* input.btn {width: 340px; background-color: #dfeaf7; background-size: 40px;} */
h2 { padding: 5pt; background-color: white; font-family: 나눔고딕코딩; font-size: 10pt; text-align: left; color: #83d4c8; font-weight: bold;}
input.txt { border-radius: 15pt; background-color: #e8feff; color: #3791a1; border: none; padding: 5pt;}
input.txt:focus { background-color: #faffe8; color: #e8644d; font-weight: bolder; border-color: red; }
img { width: 150px; background-color: white;}
body {background-image: url("images/시나모롤님_패턴.jpg")}
p {background-color: #fffef0; border-radius: 20pt; padding: 5pt;}
table {margin-left: auto; margin-right: auto; background-color: #cce6ff; border-radius: 20pt; padding: 10pt; align-content: center;}
h1 { padding: 10pt; background-color: #fffef0; border-radius: 10pt;}
</style>
<script type="text/javascript">
function actionPerformed()
{
// 확인
//alert("함수 호출 확인~!!!");
// 입력값을 활용하여 자바스크립트 배열 구성
var tempStr = document.getElementById("txt01").value; // 10 20 30 40 50 형식으로 데이터 입력을 받아올 것이다.
var arr = tempStr.split(" "); // 문자열을 대상으로 공백으로 구분하여 구성된 배열 반환
//-- 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 활용한다.
페이지 레이아웃
----------------------------------------------------------------------
데이터 입력(공백 구분) [ 21 86 258 43 7 ] → 배열 구성 txt01
< 결과 확인 >
- 전체 출력 [ 21 86 258 43 7 ] → 배열 전체 출력 txt02
- 가장 큰 수 [ 258 ] txt03
----------------------------------------------------------------------
-->
<!-- <td colspan="2" align="center"><input type="button" class="btn" id="startBtn" value="결과 확인" onclick="myCalculate()"></td> -->
<div>
<form>
데이터 입력(공백 구분)
<input type="text" id="txt01" class="txt">
<br><br>
<input type="button" value="결과 확인" class="btn" onclick="actionPerformed()"
style="width: 320px;">
<br><br>
- 전체 출력
<input type="text" id="txt02" class="txt" readonly="readonly">
<br>
- 가장 큰 수
<input type="text" id="txt03" class="txt" readonly="readonly">
</form>
</div>
</body>
</html>
'[Javascript] > Program source (Javascript)' 카테고리의 다른 글
'[Javascript]/Program source (Javascript)' Related Articles
more
