2022.12.14 Wep 6일차 JS(JS기초)
2022. 12. 14. 17:09ㆍWep
상수 키워드 : const
JS는 변수 선언 할 때 대부분 상수로 선언 함
문자열 감싸는법
선언방법이 여러가지가 있는 이유 : 문자열 안에 문자열을 처리하기 위해서
1. const str1 = 'Hello';
2. const str2 = "Hello";
예)
const str4 = "<p class = 'red' > 빨강</p>";
const str5 = '<p class = "red" > 빨강</p>';
3. const str3 = `Hello`; //템플릿 문자열
템플릿 문자열 사용방법
let style = "red";
let content = "불합격";
const str6 = `<p class="${style}">${content}</p>`;
JS의 getter, setter
const count = document.querySelector("#count").innerHTML; >getter
document.querySelector("#total").innerHTML = total; > setter
JS 문자열에서 숫자로 바꾸는 방법
parseInt();
예)
const count = parseInt(document.querySelector("#count").innerHTML);
예제) 국어 영어의 합계, 평균,합격여부를 순서대로 출력, 평균이 70이상이면 합격
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<p>국어 : <span id="kor">70</span></p>
<p>영어 : <span id="eng">69</span></p>
<p>합계 : <span id="sum"></span></p>
<p>평균 : <span id="avg"></span></p>
<p id="value"></p>
</div>
<script>
const kor = parseInt(document.querySelector("#kor").innerHTML);
const eng = parseInt(document.querySelector("#eng").innerHTML);
const sum = kor + eng;
const avg = sum / 2;
document.querySelector("#sum").innerHTML = sum;
document.querySelector("#avg").innerHTML = avg;
document.querySelector("#value").innerHTML =
avg >= 70 ? "합격" : "불합격";
</script>
</body>
</html>출력1 : 불합격
국어 : 70
영어 : 69
합계 :
평균 :
출력2 : 합격
'Wep' 카테고리의 다른 글
| 2022.12.09 Wep5일차 HTML(text속성 선택자),CSS(box-shadow) (0) | 2022.12.09 |
|---|---|
| 2022.12.08 Wep4일차 HTML,CSS(input 추가요소) (1) | 2022.12.08 |
| 2022.12.07 Wep3일차 HTML,CSS (0) | 2022.12.07 |
| 2022.12.06 Wep2일차 HTML,CSS (0) | 2022.12.06 |
| 2022.12.05 Wep1일차 비주얼 스튜디오 코드 설치,HTML (1) | 2022.12.05 |