<14:30 5교시>
■ 삼항연산자의 활용
■ 증감연산자의 활용
증감연산자 중 변수의 뒤에 넣는 건 대입 연산자보다 순서가 늦다.
■ typeof 연산자
typeof 연산자 뒤에 오는 데이터 형의 종류를 명시해준다.
■ 제어문 : 실행의 흐름을 제어하는 역할을 함
1. 특정 코딩 블럭을 조건부로 실행할 수 있다.
2. 특정 코딩 블럭을 원하는 횟수 만큼 반복 실행할 수 있다.
3. 실행의 흐름을 바꿀 수 있다.
<15:30 6교시>
■ 제어문 if 문 : 조건이 맞으면 그 조건부를 실행하고 바로 마지막으로 가서 결과를 도출
- 단일 if 문 : 조건부 실행 블록을 하거나 안 하거나 둘 중 하나(단일 블록)
- if ~else 문 : 조건부 두 개 중 한 개 양자택일을 반드시 수행 (만일 트루면 실행하고, 그렇지 않으면 트루가 아니면 else 블럭 수행)
- if~else if~else문 : 조건부 여러 개 중에서 하나를 반드시 수행되고, 이때의 else문은 기본으로 수행되는 조건으로 봐도 된다.(왜냐하면 위에가 다 false이면 else문이 유일하게 선택되어 수행되기 때문)
- 중첩 if문 : if 문 안에 또 다른 if문이 들어가 있는 경우. 마찬가지로 if 문 바깥에 else가 있다면 그게 default로서 실행될 것이다.
<16:30 7교시>
html로 표현된 UI 하나 하나도 object로서 사물함의 key를 얻어낼 필요가 있다.
UI에서 글자 출력해오거나 입력하는 것을 알았다. 이제 if3 파일을 만들 것
듣다가 졸아서 엉망진창 혼자 삽질한 결과는 망했음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>if3</title>
</head>
<body>
<input type="text" id="testscore" placeholder="0-100점수입력">
<button onclick="scoreResult()">내 점수는?</button>
<br>
<p id="result"></p>
<script>
function scoreResult(){
document.querySelector("#testscore").value = score
if(score>=90){
console.log('A학점')
}else if(score>=80){
console.log('B학점')
}else if(score>=70){
console.log('C학점')
}else if(score>=60){
console.log('D학점')
}else{
console.log('F학점')
}
document.querySelector("#result").innerText(result)
}
</script>
</body>
</html>
<17:30 8교시>
코딩을 할 때 막막하면 주석으로 먼저 논리의 흐름에 맞게 적고 그 주석에 맞는 코딩을 적으면서 단계적으로 나아간다. 동작을 한 다음에 효율적인 코딩을 고민해야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>if3</title>
</head>
<body>
<input type="text" id="score" placeholder="0-100점수입력">
<button onclick="scoreResult()">내 점수는?</button>
<br>
<p id="result"></p>
<script>
function scoreResult(){;
//1. 입력한 점수를 읽어온다.
let score = document.querySelector("#score").value;
//2. 입력한 점수를 비교해서 결과를 p요소의 innerText에 출력한다.
if(score>=90){;
document.querySelector("#result").innerText='A학점';
}else if(score>=80){;
document.querySelector("#result").innerText='B학점';
}else if(score>=70){;
document.querySelector("#result").innerText='C학점';
}else if(score>=60){;
document.querySelector("#result").innerText='D학점';
}else{;
document.querySelector("#result").innerText='F학점';
document.querySelector("#result").style.color="#ff0000";
//font-size라고 하기 어려운 이유는 자바스크립트에서 -f를 빼기로 인식하기 때문에
//쓴다해도 fontSize 이런식으로 camel 타입으로 작성해야 한다
//자바 스크립트에서 조작하는 거는 자동으로 인라인 CSS로 들어간다
//<p id="result"></p> 원래는 이렇게 써 있었는데 이 한 줄 자바 스크립트로
//<p id="result" style="color: rgb(255, 0, 0);">F학점</p> 으로 바뀜
};
};
</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>if3</title>
</head>
<body>
<input type="text" id="testscore" placeholder="0-100점수입력">
<button onclick="scoreResult()">내 점수는?</button>
<br>
<p id="result"></p>
<script>
function scoreResult(){
let score = document.querySelector("#testscore").value
if(score>=90){
document.querySelector("#result").innerText='A학점'
}else if(score>=80){
document.querySelector("#result").innerText='B학점'
}else if(score>=70){
document.querySelector("#result").innerText='C학점'
}else if(score>=60){
document.querySelector("#result").innerText='D학점'
}else{
document.querySelector("#result").innerText='F학점'
}
}
</script>
</body>
</html>
졸았던 부분 확인해보기
'공부의 기록 > 자바 풀 스택 : 수업내용정리' 카테고리의 다른 글
| 자바 풀 스택 12/5 오후 기록 011-2 (1) | 2024.12.05 |
|---|---|
| 자바 풀 스택 12/5 오전 기록 011-1 (0) | 2024.12.05 |
| 자바 풀 스택 12/4 오전 기록 010-1 (0) | 2024.12.04 |
| 자바 풀 스택 12/3 오후 기록 009-2 (0) | 2024.12.03 |
| 자바 풀 스택 12/3 오전 기록 009-1 (0) | 2024.12.03 |