[문항1]Javascript로 해당 배열 데이터를 이용하여 총 합계를 콘솔로 출력하는 코드를 작성 하시오.
[10,55,36,91,25,37,20,34] 결과 : 308
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시험</title>
</head>
<body>
</body>
<script src="./exam2_1.js?v=1"></script>
</html>js
var arr = [10,55,36,91,25,37,20,34];
var i = 0;
var sum = 0;
while(i<arr.length){
sum+=arr[i];
i++;
}
console.log("결과 : " + sum);[문항2] 해당 배열값 중 홀수의 데이터가 몇 개 인지 카운팅 하는 결과값을 콘솔로 출력하는 코드를 작성 하시오. [26,33,31,37,28,60,3,41,44,50] 결과 : 5
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시험</title>
</head>
<body>
</body>
<script src="./exam2_2.js?v=1"></script>
</html>js
var arr = [26,33,31,37,28,60,3,41,44,50];
var i = 0;
var cnt = 0;
while(i<arr.length){
if(arr[i]%2==1){
cnt++;
}
i++;
}
console.log("결과 : "+cnt);[문항3] PC가 무작위 숫자 난수하나를 선택하는 코드를 작성 하시오.
난수 범위는 1~10까지 이며, 다음 결과에 맞게 콘솔로 출력 되도록 합니다.
[결과] 1~4까지 숫자일 경우 : 5미만의 숫자 입니다.
5~7까지 숫자일 경우 : 8미만의 숫자 입니다.
9~10까지 숫자일 경우 : 9이상의 숫자 입니다.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시험</title>
</head>
<body>
</body>
<script src="./exam2_3.js?v=1"></script>
</html>js
var n = Math.ceil(Math.random() * 10);
if(n<=4){
console.log("5미만의 숫자 입니다.");
}else if(n<=7){
console.log("8미만의 숫자 입니다.");
}else{
console.log("9이상의 숫자 입니다.");
}[문항4] SMS인증번호 시스템
인증번호 전송 버튼 클릭시 휴대폰 번호를 모두 입력해야만 인증번호 난수 6자리가 생성됩니다.
인증확인 버튼 클릭시 생성된 인증번호 난수 6자리와 동일하게 입력되면,
"인증이 완료 되었습니다." 라는 경고 메세지가 출력 되어야 하며,
틀릴 경우 "인증번호를 다시 확인해 주세요" 라는 경고 메세지를 출력합니다.
휴대폰 번호 미 입력시 "휴대폰 번호를 입력하세요" 라는 경고 메세지가 출력 되도록 합니다.
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SMS 인증번호 발송</title>
</head>
<style>
body{
font-size: 13px;
box-sizing: border-box;
}
.numbers{
width: 400px;
height: 150px;
margin: 0 auto;
}
.numbers > legend{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 200px;
height: 30px;
background-color: cadetblue;
border-radius: 30px;
color: rgb(225, 239, 235);
font-weight: bolder;
}
.in1{
width: 50px;
height: 20px;
text-indent: 5px;
}
.in2{
width: 80px;
height: 20px;
text-indent: 5px;
}
.in3{
width: 150px;
height: 20px;
text-indent: 5px;
margin-right: 5px;
}
.btn1 {
width: 100px;
height: 25px;
border: 0;
background-color: cadetblue;
border-radius: 5px;
font-size: 12px;
box-sizing: border-box;
cursor: pointer;
}
.div_css {
position: relative;
top: 25px;
text-align: center;
}
.color1{
background-color: black;
color: white;
}
</style>
<body>
<fieldset class="numbers">
<legend>SMS 인증번호 시스템</legend>
<div class="div_css">
<form id="frm">
<input type="text" name="no1" class="in1" maxlength="3" placeholder="010"> -
<input type="text" name="no2" class="in2" maxlength="4" placeholder="1234"> -
<input type="text" name="no3" class="in2" maxlength="4" placeholder="1234">
<input type="button" value="인증번호 전송" class="btn1" onclick="click_btn1()">
<br>
<br>
<input type="text" name="userno" class="in3" maxlength="6" placeholder="인증번호 6자리"><input type="button" value="인증확인" class="btn1 color1" onclick="click_btn2()">
</form>
</div>
</fieldset>
</body>
<script src="./exam2_4.js?v=9"></script>
</html>js
var code = "";
function click_btn1(){
if(frm.no1.value==""||frm.no2.value==""||frm.no3.value==""){
alert("휴대폰 번호를 입력하세요");
}else {
gen_code();
}
}
function gen_code(){
var ea = 6;
this.code = "";
var i = 0;
while(i < ea){
this.code += Math.floor(Math.random() * 10);
i++;
}
}
function click_btn2(){
if(frm.userno.value == this.code){
alert("인증이 완료 되었습니다.");
}else{
alert("인증번호를 다시 확인해 주세요");
}
//console.log(frm.no.value);
}[문항5] 다음 배열 내용이 클릭 버튼을 클릭시 box 오브젝트 안에 다음과 같이 HTML태그가 생성 되어야 합니다.
(JS 생성해서 출력 되어야 합니다) ["SKT","LGT","KT","알뜰폰"]
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>통신사 선택</title>
</head>
<body>
<p>통신사를 선택해 주세요</p>
<select id="corp_sel">
<!--
<option value="">통신사 선택</option>
<option value="SKT">SKT</option>
<option value="LGT">LGT</option>
<option value="KT">KT</option>
<option value="알뜰폰">알뜰폰</option>
-->
</select>
<input type="button" value="클릭" onclick="abc()">
</body>
<script src="./exam2_5.js?v=1"></script>
</html>js
function abc(){
var corp = ["SKT","LGT","KT","알뜰폰"]
var corp_sel = document.getElementById("corp_sel");
var i = 0;
corp_sel.innerHTML += '<option value="">통신사 선택</option>';
while(i<corp.length){
corp_sel.innerHTML += '<option value='+corp[i]+'>'+corp[i]+'</option>';
i++;
}
}[문항6] 할인율과 적립금 사용 금액을 입력 후 적용하기 버튼 클릭시 최종 결제 금액이 변경 되어야 합니다.
할인율은 최대 50%까지 이며, 적립금은 최대 5000 까지 적용 되도록 합니다.
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상품 할인 및 적립금 사용 적용</title>
</head>
<style>
body{
font-size: 13px;
box-sizing: border-box;
}
.m1 { width: 100px; height: 25px; text-align: right;}
.m2 { width: 50px; height: 25px; text-align: right; }
.btn {
width: 100px;
height: 30px;
}
.font1 {
width: 100px;
height: 30px;
line-height: 30px;
color: red;
}
.view {
display: flex;
top: 10px;
position: relative;
}
.total{
width: 100px;
height: 30px;
border: 1px solid #ccc;
padding-right: 5px;
line-height: 30px;
font-size: 14px;
text-align: right;
box-sizing: border-box;
}
</style>
<body>
<fieldset style="height: 90px;">
<legend>상품 할인 및 적립금 사용 적용</legend>
<form id="frm">
결제금액 : <input type="text" name="price" value="50000" class="m1" readonly> 원
| 할인율 : <input type="text" name="sale" class="m2" maxlength="2"> % 할인
| 적립금 사용 : <input type="text" name="point" class="m1" maxlength="4">
<input type="button" value="적용하기" class="btn" onclick="calc()">
</form>
<span class="view">
<font class="font1"> 최종 결제 금액 : </font>
<div class="total" id="realPrice">50000</div>
</span>
</fieldset>
</body>
<script src="./exam2_6.js?v=5"></script>
</html>js
function calc(){
var result = 50000;
var rp = document.getElementById("realPrice");
if(frm.sale.value==""||frm.sale.value > 50 || frm.sale.value < 0){
alert("할인율 0 ~ 50 입력해주세요.");
frm.sale.focus();
}else if(frm.point.value==""||frm.point.value < 0 || frm.point.value > 5000){
alert("포인트 0 ~ 5000 입력해주세요.");
frm.point.focus();
}else{
result = frm.price.value - ((frm.price.value * frm.sale.value) / 100) - frm.point.value;
}
rp.innerHTML = result;
}[문항7] 가입된 회원리스트를 출력하는 페이지를 제작해야 합니다.
해당 퍼블리셔가 제시한 예시 처럼 배열 데이터를 이용하여 전체회원 버튼 클릭시 출력 되도록 합니다.
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=Edge, chrome=1">
<title>회원리스트 배열</title>
<style>
.lists, .lists2 { width: 400px; height: 30px;
background-color: cornflowerblue;}
.lists > label, .lists2 > label { display: inline-block;
width: 190px;
height: 30px; line-height: 30px; text-align: center;
}
.lists2 { background-color: skyblue !important;
height: auto; }
</style>
</head>
<body>
<div class="lists">
<label>아이디</label>
<label>고객명</label>
</div>
<div class="lists2" id="div1">
<!--
<label>hong</label>
<label>홍길동</label>
-->
</div>
<input type="button" value="전체회원" onclick="a()">
</body>
<script src="./exam2_7.js?v=5"></script>
</html>js
const m = [
["hong", "홍길동"],
["lee", "이순신"],
["kims", "김유신"],
["yuri", "유리왕"],
["kang", "강감찬"]
];
function a() {
var div1 = document.getElementById("div1");
var i = 0;
var j = 0;
while (i < m.length) {
j = 0;
while (j < m[0].length) {
var html = document.createElement("label");
var data = document.createTextNode(m[i][0]);
html.append(data);
var html2 = document.createElement("label");
var data2 = document.createTextNode(m[i][1]);
html2.append(data2);
j++;
}
div1.appendChild(html);
div1.appendChild(html2);
i++;
}
}[문항8] 상품 찾아보기 클릭시 문제 9번에 있는 popup.html을 가로 700 * 세로 400 팝업창을 오픈합니다.
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=Edge, chrome=1">
<title>상품 팝업창에서 상품 선택하기1</title>
</head>
<body>
<input type="text" name="product" id="pd" readonly>
<input type="text" name="product_money" id="pdm" readonly>
<input type="button" value="상품 찾아보기" onclick="popup_btn()">
</body>
<script>
function popup_btn() {
window.open("./popup.html","","width=700 height=400");
}
</script>
</html>[문항9] 상품 리스트 데이터 중 클릭시 상품명과 상품가격이 문제 8번 입력란에 각각 입력 되어야 하며,
해당 팝업창은 자동으로 사라지게 합니다.
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=Edge, chrome=1">
<title>상품리스트 팝업창</title>
<style>
body { margin: 0; padding: 0;}
.product { width: 500px; height: auto; font-size: 12px;}
ul { list-style:none; margin: 0; padding: 0;}
.product_title { width: inherit; height: 30px; }
.product_title > li { height: 30px; background-color: lavender;
text-align: center; line-height: 30px; float: left;
}
.product_title > li:nth-of-type(1), .product_view > ul > li:nth-of-type(1){
width: 10%;
}
.product_title > li:nth-of-type(2), .product_view > ul > li:nth-of-type(2){
width: 70%;
}
.product_title > li:nth-of-type(3), .product_view > ul > li:nth-of-type(3){
width: 20%;
}
.product_view { width: inherit; height: inherit; border-top: 1px dashed gray; }
.product_view > ul { width: 100%; height:30px;}
.product_view > ul:hover { background-color: azure;}
.product_view > ul > li {float: left; height: 30px; text-align: center;
line-height: 30px; cursor: pointer;
border-bottom: 1px dashed gray;}
.product_view > ul > li:nth-of-type(2){
text-align: left; text-indent: 5px; }
</style>
</head>
<body>
<p>상품 리스트</p>
<div class="product">
<ul class="product_title">
<li>번호</li>
<li>상품명</li>
<li>상품가격</li>
</ul>
<div class="product_view">
<ul onclick="pd('셔링숄더백','36000')">
<li>4</li>
<li>셔링 숄더백</li>
<li>36000</li>
</ul>
<ul onclick="pd('루이까또즈 숄더백','190000')">
<li>3</li>
<li>루이까또즈 숄더백</li>
<li>190000</li>
</ul>
<ul onclick="pd('꾸찌 오피디아 미디엄 백팩','269000')">
<li>2</li>
<li>꾸찌 오피디아 미디엄 백팩</li>
<li>269000</li>
</ul>
<ul onclick="pd('백스테이 베르스 서류가방','175000')">
<li>1</li>
<li>백스테이 베르스 서류가방</li>
<li>175000</li>
</ul>
</div>
</div>
</body>
<script>
function pd(a, b){
window.opener.document.getElementById("pd").value = a;
window.opener.document.getElementById("pdm").value = b;
self.close();
}
</script>
</html>[문항10] 상품 더 보기 클릭시 배열에 있는 데이터가 순차적으로 한개씩 추가 되도록 합니다.
상품 데이터 ["셔링 숄더백","루이까또즈 숄더백","꾸찌 오피디아 미디엄 백팩","백스테이 베르스 서류가방"]
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>해당 배열에 데이터 값이 순차적으로 출력</title>
</head>
<body>
<ul id="pdlist">
<li>애드에잇 모르딕 백팩</li>
<li>LUNO 여행용 크로스백</li>
</ul>
<input type="button" value="상품 더 보기" onclick="b()">
</body>
<script src="./exam2_10.js?v=2"></script>
</html>js
var pd = ["셔링 숄더백","루이까또즈 숄더백","꾸찌 오피디아 미디엄 백팩","백스테이 베르스 서류가방"];
var pdlist = document.getElementById("pdlist");
var i = 0;
function b() {
var html = document.createElement("li");
var data = document.createTextNode(pd[i]);
html.append(data);
pdlist.appendChild(html);
i++;
}