배열
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script type="text/javascript">
proc1 = () => {
var fruit = ["사과", "바나나", "참외",100, 200, 123.67, "딸기"];
print(fruit, "result1");
}
print = (fr, out) => {
str = "";
for(i=0; i<fr.length; i++){
str += fr[i] + " ";
}
document.getElementById(out).innerHTML = str;
}
proc2 = () => {
var fruit = new Array("사과", 1000, 2000, "바나나", "참외", "딸기");
print(fruit,"result2");
}
proc3 = () => {
var fruit = new Array()
fruit[0] = "사과"
fruit[1] = 123.4567;
fruit[2] = "참외"
fruit[3] = "딸기"
print(fruit, "result3");
}
</script>
</head>
<body>
<div class="box">
배열 : 많은 양의 데이터를 일괄처리 하기 위해서 연속된 공간에 저장한다<br>
데이터 타입은 구별하지 않는다<br>
배열의 크기가 자동으로 증가한다<br>
배열 - 리터럴로 생성<br>
fruit = ["사과", "바나나", "참외", "딸기"]
<br>
<button type="button" onclick="proc1()">확인</button>
<div id="result1"></div>
</div>
<div class="box">
배열 - Array객체 생성<br>
생성자의 파라미터로 인수를 전달<br>
fruit = new Array("사과", "바나나", "참외", "딸기")
<br>
<button type="button" onclick="proc2()">확인</button>
<div id="result2"></div>
</div>
<div class="box">
배열 - Array객체로 생성<br>
fruit = new Array()<br>
fruit[0] = "사과"<br>
fruit[1] = "바나나"<br>
fruit[2] = "참외"<br>
fruit[3] = "딸기"<br>
<br>
<button type="button" onclick="proc3()">확인</button>
<div id="result3"></div>
</div>
</body>
</html>
변수 - 지역,전역
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script type="text/javascript">
function proc1(){
su1 = parseInt(prompt("수1입력"));
su2 = parseInt(prompt("수2입력"));
add(su1, su2);
document.getElementById('result1').innerHTML = "합 = " + sum +"<br>";
res = sub(su1, su2);
document.getElementById('result1').innerHTML += "차 = " + res + "<br>";
}
function add(a,b){
sum = a + b;
}
function sub(a,b){
var sub = a - b;
return sub
}
</script>
</head>
<body>
<div class="box">
<br>
<button type="button" onclick="proc1()">확인</button>
<div id="result1"></div>
</div>
</body>
</html>
반복문 문제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script type="text/javascript">
var proc1 = () => {
sum = 0;
for(i=1; i<=200; i++){
if(i % 2 != 0) continue;
else sum += i;
}
document.getElementById('result1').innerHTML = sum;
}
var proc2 = () => {
sum = 0;
res = "";
while(true){
input = parseInt(prompt("수 입력"));
if(input == 0) break;
res += input + " ";
sum += input;
}
str = "입력 값 : " + res + "<br>";
str += "더한 결과 : " + sum + "<br>";
document.getElementById('result2').innerHTML = str;
}
var proc3 = () => {
sum = 0;
res = "";
for(i=1; i<=10; i++){
for(k=1; k<=10; k++){
if((i+k) % 3 != 0)continue;
sum += i + k;
res +=`${i} + ${k} = ${i+k} <br>`
}
res += "<br>"
}
str = "합 : " + "<br>" + res + "<br>";
str += "총합 : " + sum + "<br>";
document.getElementById('result3').innerHTML = str;
}
var proc4 = () => {
res = "";
sum =0;
for(i=1; i<=100; i++){
if(i % 2 == 0 && i % 3 == 0) {
res += i + "<br>";
sum += i;
}
}
str = "2의 배수이면서 3의 배수인 수 : " + res + "<br>";
str += "합 : " + sum
document.getElementById('result4').innerHTML = res;
}
var proc5 = () =>{
res1 ="";
res2 ="";
while(true){
num1 = parseInt(prompt("수1 입력"));
num2 = parseInt(prompt("수2 입력"));
if(num1==0 && num2==0) break;
sum = num1 + num2;
if(sum >= 100) res1 += num1 + " " + num2 + "<br>";
else res2 += num1 + " " + num2 + "<br>";
}
str = "두 수의 합이 100이상인 경우 <br>"
str += res1 + "<br><br>";
str += "두 수의 합이 100미만인 경우 <br>"
str += res2 + "<br><br>";
document.getElementById('result5').innerHTML = str;
}
</script>
</head>
<body>
<div class="box">
<h4>1~200까지 짝수의 합</h4>
continue를 이용한다<br>
<button type="button" onclick="proc1()">확인</button>
<div id="result1"></div>
</div>
<div class="box">
사용자가 입력한 값을 계속 더하고<br>
사용자가 0을 입력하면 그때까지 누적된 값을 출력<br>
<button type="button" onclick="proc2()">확인</button>
<div id="result2"></div>
</div>
<div class="box">
다중 for문을 이용해서 1 ~ 10 까지 중 <br>
i와 k의 더한 합이 3의 배수일때만 출력 continue를 이용<br>
<button type="button" onclick="proc3()">확인</button>
<div id="result3"></div>
</div>
<div class="box">
1~100 까지 중 2의 배수이면서 3의 배수인것만 출력 <br>
<button type="button" onclick="proc4()">확인</button>
<div id="result4"></div>
</div>
<div class="box">
두 수를 입력(prompt) <br>
두 수의 합이 100이상일때와 100미만일때의 수를 구분해서<br>
출력<br>
두 수 모두 0이면 종료한다.<br>
<button type="button" onclick="proc5()">확인</button>
<div id="result5"></div>
</div>
</body>
</html>
구구단 테이블
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script type="text/javascript">
var proc1 = () => {
str = "<table border='1'>";
for(i=1; i<10; i++){
str += "<tr><td>" + i +"</td>";
for(k=2; k<10; k++){
str += "<td>" + k*i +"</td>";
}
str += "</tr>";
}
str += "</table>"
document.getElementById('result1').innerHTML = str;
}
</script>
<style>
table{
border : 2px solid blue;
border-spacing: 10px;
border-collapse: collapse;
}
td{
width: 50px;
height: 30px;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<div class="box">
<h4>구구단 출력</h4>
<button type="button" onclick="proc1()">확인</button>
<div id="result1"></div>
</div>
</body>
</html>
