▶ if문 사용해서 점수 평균 구하기
<body>
<ul>
<li>국어<span id="kor">80</span>점</li>
<li>영어<span id="eng">85</span>점</li>
<li>수학<span id="math">95</span>점</li>
<li>평균<span id="avg"></span>점</li>
<li>학점<span id="grade"></span>학점</li>
</ul>
<script>
// 국어, 영어, 수학 점수 변수로 저장하기
var kor = Number(document.getElementById('kor').textContent);
var eng = Number(document.getElementById('eng').textContent);
var math = Number(document.getElementById('math').textContent);
// 평균 구하기
var avg = (kor + eng + math) / 3;
// 학점 구하기
var grade;
if(avg >= 90) {
grade = 'A';
} else if (avg >= 80) {
grade = 'B';
} else if (avg >= 70) {
grade = 'C';
} else if (avg >= 60) {
grade = 'D';
} else {
grade = 'F';
}
// 결과 표시하기
document.getElementById('avg').textContent = avg;
document.getElementById('grade').textContent = grade;
</script>
</body>
▶반복문 for문
<body>
<div id="box1"></div>
<script>
var str = '';
for(let n = 1; n <= 5; n++){
str += (n + '<br>');
}
document.getElementById('box1').innerHTML = str;
</script>
↓1번째 부터 10번째 사진을 나란히 나오게 하기위해 for문 사용합니다 innerHTML은 안에 HTML문서가있으면 쓰고 없으면
textContent
<div id="box2"></div>
<script>
var str = '';
for(let n = 1; n <= 10; n++){
str += '<img src=../../assets/image/animal' + n + '.jpg width="200px">';
}
document.getElementById('box2').innerHTML = str;
</script>
▶ <select>문으로 사용해 월선택지 버튼 만들기
<div id="box3"></div>
<script>
var str = '<select name="month"><option value="">월 선택</option>';
for(let n = 1; n <= 12; n++){
str += '<option value="' + n + '">' + n +'월</option>';
}
str += '</select>';
document.getElementById('box3').innerHTML = str;
</script>
▶ 2중 for문을 사용해 표만들기 표만들때 사용하는 html<table>을 사용합니다.
식을 쓰기 전 먼저 아래에 표를 구성해보고 식을 작성합니다
n은 행(row)을, m은 열(column)을 나타내며, 1부터 3까지의 값을 가집니다. ((n - 1) * 3 + m)은 이차원 행렬에서의 1차원 인덱스로 변환하는 과정을 나타냅니다.
예를 들어, n=1, m=1일 때, 식은 ((1 - 1) * 3 + 1)로 계산됩니다. 이 값은 1이 되어 첫 번째 셀에 1이 들어갑니다. n=1, m=2일 때는 ((1 - 1) * 3 + 2)로 계산되어 2가 되어 두 번째 셀에 2가 들어갑니다. 이렇게 순차적으로 셀에 1부터 9까지의 숫자가 들어가게 됩니다.
m=1 m=2 m=3
n = 1 1 2 3
n = 2 4 5 6
n = 3 7 8 9
----------------------------
(1~9) = (n - 1) * 3 + m
<div id="box4"></div>
<script>
var str = '<table border="1"><tbody>';
for(let n = 1; n <= 3; n++){
str += '<tr>';
for(let m = 1; m <= 3; m++){
str += '<td>'+ ((n - 1) * 3 + m )+ '</td>';
}
str += '</tr>';
}
str += '</tbody></table>';
document.getElementById('box4').innerHTML = str;
</script>
'코딩기록 저장소 🐕 > 프론트(리액트, JS)' 카테고리의 다른 글
| CSS보충 메뉴바, 로그인창 (0) | 2023.08.29 |
|---|---|
| JS 배열, function함수 (0) | 2023.08.29 |
| JS 태그, 객체... (0) | 2023.08.28 |
| JS (0) | 2023.08.28 |
| CSS position, 반응형 웹 (0) | 2023.08.25 |