안녕하세요
오늘은 javascript 이중 for문으로 구구단 / 별 / 역삼각형 / 체스박스 만드는 방법을 알려드리겠습니다.
이중 for 문은 javascript에서 매우 흔히 쓰기에 반드시 학습하기를 추천드립니다.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이중 for문으로 구구단 만들기</title>
</head>
<body>
<script>
for(let i=2; i<=9; i++){
document.write("*****" +i+"단*****"+"<br>");
for(let j=1; j<=9; j++){
document.write(i+"*"+j+"="+i*j+"<br>");
}
}
</script>
</body>
</html>
별만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>For loop2</title>
</head>
<body>
<script>
for(let i=1; i<=5; i++){
document.write("<br>");
for(let j=1; j<=i; j++){
document.write("*");
}
}
</script>
</body>
</html>
역삼각형 별 만들기
이해하기 쉽게 설명드려보자면
1.첫번째 for문에서 5부터 1까지 나래비를 하겠다
2.star라는 변수를 두고 여기에 채워넣겠다.
3.두번째 for문에서 j를 1부터 i만큼(즉, 첫째줄은 5, 둘째줄은 4, 셋째줄은 3만큼) 채워넣겠다.
4.star에 채워넣은 변수를 입력하겠다.
html코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>For loop2</title>
</head>
<body>
<script>
for(let i=5; i>=1; i--){
let star ="";
for(let j=1; j<=i; j++){
star += "*";
}
document.write(star+"<br>");
}
</script>
</body>
</html>
체스판 만들기
ver1. 검정박스 흰색박스 번갈아가면서 나래비 세우는 방법(간단한 방법)
html코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>체스박스 만들기</title>
<style>
.outBox {
width: 500px;
height: 500px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
/* flex-direction: column; */
border-color: black;
border-style: groove;
flex-wrap: wrap;
}
.blackBox{
width: 100px;
height: 100px;
background-color: black;
display: flex;
justify-content: left;
}
.whiteBox{
width: 100px;
height: 100px;
background-color: white;
}
</style>
</head>
<body>
<script>
let outBox = "";
outBox = '<div class="outBox">';
for(let i=1; i<=25; i++){
if(i%2==0){
outBox +='<div class="blackBox"></div>';
}else {
outBox +='<div class="whiteBox"></div>';
}
}
outBox +="</div>";
document.write(outBox);
</script>
</body>
</html>
ver2. 한줄씩 크게 만들고 그 안에 5개 도형 만들어 나래비 세우는 방법
이중 for문을 활용한 예제라서 이게 더 정확하지만
이게 조금 더 복잡합니다;;
html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>체스박스 만들기</title>
<style>
.outBox {
width: 500px;
height: 500px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
/* flex-direction: column; */
border-color: black;
border-style: groove;
flex-wrap: wrap;
}
.rowBox {
width: 100%;
height: 10%;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
}
.inBox {
width: 19%;
height: 19%;
background-color: blue;
border: 3px solid black;
}
.whiteBox {
width: 20%;
height: 100%;
background-color: white;
}
.blackBox {
width: 20%;
height: 100%;
background-color: black;
}
</style>
</head>
<body>
<script>
let outBox = "";
outBox = '<div class="outBox">';
// 바깥 테두리를 만들어 놓고 시작하겠다
for (let i = 1; i<= 10; i++) {
outBox += '<div class="rowBox">';
for (let j=1; j<=10; j++) {
// outBox += '<div class="inBox"></div>'
if( (i+j)%2 ==0){
outBox += '<div class="whiteBox"></div>';
} else{
outBox += '<div class="blackBox"></div>';
}
}
outBox += "</div>";
}
// outBox +='<div class="whiteBox"></div>';
outBox += "</div>";
document.write(outBox);
</script>
</body>
</html>
배열
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [3,6,9,12,15,18];
let sum = 0;
for(let i=0; i<6; i++){
sum += arr[i];
document.write(arr[i] + "/");
// arr배열의 하나하나씩 호출을 하겠다
}
document.write("="+sum);
</script>
</body>
</html>
배열안에 있는 인자들을 비교해서 가장 큰 수를 찾는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [10,7,22,5,4,15,3,1,2];
let max = 0;
for(let i=0; i<arr.length; i++){
// 뭐가 되었던 비교해서 큰 수를 남기겠다
if(arr[i]>max) {
max =arr[i];
}
document.write(arr[i] + "/");
// arr배열의 하나하나씩 호출을 하겠다
}
document.write("중 가장 큰수는"+max);
</script>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 지하벙커 만들기 (0) | 2023.06.18 |
|---|---|
| 배열안에 있는 숫자중 가장 작은 값 출력하기 (0) | 2023.06.16 |
| javascript if 및 for문 활용방법 (0) | 2023.06.14 |
| DOM 개념 간단 정리 / 짝수 판별 / 점수 분류 / 계절 판별 / 로그인 판독 문제 (0) | 2023.06.13 |
| Visual Studiocode로 javascipt로 나머지를 구하는 프로그램 만들기 기초 1 (0) | 2023.06.12 |
