Javascript
배열 마음대로 갖고 놀기
Antonio Bae
2023. 6. 30. 11:13
유리수: 소수부의 숫자가 유한하거나 무한히 나열되어도 일정한 규칙에 반복
무리수: 소수분의 숫자가 일정한 규칙없이 무작위로 나열
실수: 실제로 표현되고 연산될 수 있는 수중 가장 큰 집합
허수:i를 포함하는 수를 즉 a > 0 일 때, √-a = √a·i
복소수: a,b가 실수이고. i=루트-1일 때 a + bi 꼴의 수를 복소수
BOM/DOM
BOM: 브라우저 문서
DOM: 웹문서
배열 마음대로 갖고 놀기 시간입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>reference</title>
</head>
<body>
<script>
const name = prompt("이름을 적어주세요");
document.write("안녕" + name +"님 <br>");
info = []
const codeA = [1004,1008,1012,1016,1020];
const codeB = [104,108,112,116,120];
const codeC = [[01, 05, 10],
[07, 35, 11],
[14, 33, 11]];
for(let i=0; i<10; i++) {
document.write(name+" 님 코드번호는" +String(codeA[i]+ "입니다."+"<br>"));
}
</script>
</body>
</html>
for each
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>for each1</title>
</head>
<body>
<script>
const codeC = [
[1, 5, 10],
[7, 35, 11],
[14, 33, 18]
];
// for(let i=0; i<10; i++) {
// document.write(String(name[i])+" 님 코드번호는" +String(codeC[i]+ "입니다."+"<br>"));
// }
for(let countI in codeC){
for (let countJ in codeC[countI]) {
document.write(codeC[countI][countJ] +"<br>");
}
}
codeC.forEach(function(v,i,a){
document.write(v+"<br>")
});
//한덩어리를 갖고옴
codeC.forEach(function(v,i,a){
v.forEach(function(v2,i2,a2){
document.write(v2+"<br>");
});
});
//하나씩 갖고옴
codeC.forEach(function(v,i,a){
v.forEach(function(v2,i2,a2){
document.write(v[i2]+"<br>");
});
});
</script>
</body>
</html>
계산기 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>예제2-6.최대공약수 프로그램</title>
<style>
* {
margin: 0;
padding: 0;
}
.num1 {
width: 100px;
height: 30px;
background-color: pink;
font-size: 20px;
}
.answerArea {
display: : inline;
font-size: 20px;
}
.plusBn {
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<input id = "num1" class="num1" type="text" value="0">
<button id = "plusBtn" class="plusBtn">+</button>
<input id = "num2" class="num1" type="text" value="0">=
<p class="answerArea">0</p>
<!-- (
<input class="num1" type="text" value="0">+
<input class="num1" type="text" value="0">i
) +
(
<input class="num1" type="text" value="0">+
<input class="num1" type="text" value="0">i
) -->
<script>
const plusBtn = document.getElementById("plusBtn");
plusBtn.onclick = function() {
const num1 = document.getElementById("num1");
const num2 = document.getElementById("num2");
const answerArea = document.getElementById("answerArea");
let resultValue = 0;
resultValue = Number(num1.value) + Number(num2.value);
answerArea.innerHTML = String(resultValue);
}
</script>
</body>
</html>
실수_허수 계산기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>실수_허수계산기</title>
<style>
* {
margin: 0;
padding: 0;
}
.num1 {
width: 100px;
height: 30px;
background-color: pink;
font-size: 20px;
}
.answerArea {
display: inline;
font-size: 20px;
}
.plusBtn {
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
}
.plusBtn:hover { background-color: pink; }
.answerArea2 {
display: inline;
font-size:20px;
}
</style>
</head>
<body>
<input id="num1" class="num1" type="text" value="0">+
<input id="huh1" class="num1" type="text" value="0">i
<button id="plusBtn1" class="plusBtn1">+</button>
<input id="num2" class="num1" type="text" value="0">+
<input id="huh2" class="num1" type="text" value="0">i=
<p id="answerArea1" class="answerArea1">0</p>
<p id="answerArea2" class="answerArea2">0 i</p>
<p>--------------------</p>
<input id="num3" class="num1" type="text" value="0">+
<input id="huh3" class="num1" type="text" value="0">i
<button id="mulBtn" class="mulBtn">*</button>
<input id="num4" class="num1" type="text" value="0">+
<input id="huh4" class="num1" type="text" value="0">i=
<p id="answerArea3" class="answerArea3">0</p>
<p id="answerArea4" class="answerArea4">0 i</p>
<script>
const plusBtn1 = document.getElementById("plusBtn1");
plusBtn1.onclick = function () {
const num1 = document.getElementById("num1");
const num2 = document.getElementById("num2");
const huh1 = document.getElementById("huh1");
const huh2 = document.getElementById("huh2");
const answerArea1 = document.getElementById("answerArea1");
let resultValue1 = 0;
resultValue1 = Number(num1.value) + Number(num2.value);
resultValue2 = Number(huh1.value) + Number(huh2.value);
console.log(resultValue1,resultValue2);
answerArea1.innerHTML=String(resultValue1);
answerArea2.innerHTML=String(resultValue2);
}
const mulBtn = document.getElementById("mulBtn");
mulBtn.onclick = function () {
const num3 = document.getElementById("num3");
const num4 = document.getElementById("num4");
const huh3 = document.getElementById("huh3");
const huh4 = document.getElementById("huh4");
const answerArea3 = document.getElementById("answerArea3");
let resultValue3 = 0;
resultValue3 = Number(num3.value) * Number(num4.value);
resultValue4 = Number(huh3.value) * Number(huh4.value);
console.log(resultValue3,resultValue4);
answerArea3.innerHTML=String(resultValue3);
answerArea4.innerHTML=String(resultValue4);
}
</script>
</body>
</html>