날짜 관련 함수
new Date(); => 오늘 날짜 반환 new Date(string); => string 날짜 형식으로 변환
getFullYear(); 연도만 리턴
getMonth()+1; => 0월부터 11월까지 +1
getDate(); => 1~31 리턴
getDay(); => 요일을 리턴 0(일)~6(토)
getHours(), getMinutes(), getSeconds() : 시분초 추출
toLocaleDateString() : 2024. 08.07. toLocaleTimeString() toLocaleString()
활용)
<body>
이름 : <input type="text" id="name"><br>
주민번호 : <input type="text" id="rNum"><br>
<button type="button" onclick="result()">확인</button>
<h3 id="result"></h3>
<script>
function result(){
let today = new Date(); //오늘날짜
//주민등록번호
// 980101-1234567 => 1900년대 (1/2면 1900+98)
// 010101-3456789 => 2000년대 (3/4면 2000+01)
let name = document.getElementById('name').value;
let rNum = document.getElementById('rNum').value;
// 생년월일, 나이, 성별
//생년월일
let birth = rNum.substring(0, rNum.indexOf("-"));
console.log(birth);
//성별
let getNum = rNum.charAt(rNum.indexOf("-")+1);
console.log(getNum);
let mw = (getNum==1 || getNum==3)? "남" : "여";
console.log(mw);
//나이
// 오늘날짜 - 태어난 연도
// 2024 - (2000+01) / 2024 - (1900+97)
let year = today.getFullYear();
let birthYear = Number(rNum.substring(0, 2));
let age = (getNum<=2)? year-(1900+birthYear) : year - (2000+birthYear);
console.log(age);
document.getElementById('result').innerText =
`이름:${name}, 생년월일:${birth}, 나이:${age}, 성별:${mw}`;
}
</script>
</body>
수학관련 함수
Math 클래스 : 반올림, 올림, 버림, 최대값, 최소값, 난수발생...
Math.round(), Math.ceil(), Math.floor() Math.max(), Math.min(), Math.random() ...
Math.random() : 0(포함) ~ 1(미포함) 사이의 난수를 리턴
Math.floor(Math.random()*개수)+시작값
타입 변환 casting(형변환)
문자 -> 숫자 : Number("string"), parseInt("1"), parseFloat("0.5")숫자 -> 문자 : 123.toString()
문자 -> 불리언 : Boolean("true")
불리언 -> 문자 : String(true);
숫자 -> 불리언 : Boolean(1)=true / Boolean(0)=false
불리언 -> 숫자 : Number(true) = 1 / Number(false) = 0
조건문
if / switch() : 조건문
if(조건식) { 실행문; } :조건식은 반드시 true/false 여야만 한다.
if(조건식){ 조건식이 true이면
실행문;
} else { false
실행문;
} if(조건식) {
실행문;
} else if {
실행문;
} else { 모든조건이 false 일경우
실행문;
}
switch 조건문
switch(식/값){
case 1:
처리문;
break;
case 2:
처리문;
break;
case 3:
처리문;
break;
default : 처리문;
}
switch(식/값){ 케이스를 묶어서 사용도 가능
case 1: case 2: case 3:
처리문;
break;
case 4: case 5: case 6:
처리문; break;
default: 처리문;
}
if문 활용)
<form action="">
<fieldset>
<legend>성적확인</legend>
이름 : <input type="text" id="name"> <br>
국어 : <input type="text" id="kor"> <br>
영어 : <input type="text" id="eng"> <br>
수학 : <input type="text" id="math"> <br>
<button type="button" id="btn">성적계산</button>
</fieldset>
</form>
<h3 id="result"></h3>
<script>
// 이름, 국어, 영어, 수학 점수를 입력받아 합계, 평균, 합격여부 출력
// 합격여부는 평균이 60이상이면 pass / fail
document.getElementById('btn').addEventListener('click',()=>{
let name = document.getElementById('name').value;
let kor = document.getElementById('kor').value;
let eng = document.getElementById('eng').value;
let math = document.getElementById('math').value;
if(check(kor) && check(eng) && check(math)){
let sum = Number(kor) + Number(eng) + Number(math);
let avg = sum / 3;
let pass = "";
if (avg >= 60){
pass="pass";
}else{
pass="fail";
}
document.getElementById('result').innerText =
`이름:${name}, 합계:${sum}, 평균:${avg.toFixed(2)}, 패스여부:${pass}`;
}
})
// 입력 값의 범위가 0~100 사이의 점수가 아니면 alert 창 띄어 안내
function check(num){
//num : 국어점수, 영어점수, 수학점수
if(num < 0 || num > 100){
alert("0~100사이의 값을 입력해주세요.");
// 점수의 값을 비우기
document.getElementById('kor').value = "";
document.getElementById('eng').value = "";
document.getElementById('math').value = "";
document.getElementById('result').innerText ="";
document.getElementById('kor').focus();
return false;
}else{
return true;
}
}
</script>
switch문을 사용해서 짝수 홀수 찍어보기
<script>
let num = 21;
switch(num % 2){
case 0:
console.log("짝수");
break;
case 1:
console.log("홀수");
break;
default:
console.log("이상한수");
}
</script>
반복문 : for, while, do~while
for : 반복 횟수가 명확할 때 for(초기값; 조건식; 증감식){ => 조건식이 true이면 반복실행 실행코드; }
while : 반복 횟수가 명확하지 않을 때 while(조건식){ => 조건식이 true이면 반복실행 실행코드; (조건식이 false가 될 수 있도록 조건식의 변경값을 포함.) }
조건식이 계속 true를 유지하면 무한루프 실행문 안에 조건식이 false가 될 수 있는 구문이 반드시 있어야 함.
break; 구문을 통해 반복문을 빠져나갈 수 있음.
향상된 for
for of : 배열안의 내용을 탐색할 때 사용 [] for(let value of Array){ code....; }
for in : 객체 안의 내용을 탐색할 때 사용 { } for(let value in Object){ code...; }
ex) 반복문 활용해서 가위바위보를 하고 승률 출력해보기
<body>
<h1>가위바위보 10번하여 승률 출력</h1>
<button type="button" id="btn">결과 출력</button>
<h3>10게임의 승률은 <span id="result"></span>% 입니다.</h3>
<script>
// 가위 = 1 , 바위 =2 , 보 = 3
// com = random / player = random
// 승률 (승 / 10-무) * 100 소수점 2자리까지 표현
// 콘솔 com / player 출력
// 콘솔에 승: 무: 패:
document.getElementById('btn').addEventListener('click', () => {
let com = 0;
let player = 0;
let win = 0;
let equal = 0;
let lose = 0;
for(let i = 1; i <= 10; i++){
com = Math.floor(Math.random()*3)+1;
player = Math.floor(Math.random()*3)+1;
console.log(`${com} / ${player} `)
if(com == player){
equal++;
}else if(player == 1 && com == 2){
lose++;
}else if(player == 1 && com == 3){
win++;
}else if(player == 2 && com == 1){
win++;
}else if(player == 2 && com == 3){
lose++;
}else if(player == 3 && com == 1){
lose++;
}else if(player == 3 && com == 2){
win++;
}
}
console.log(` 승: ${win} 무: ${equal} 패: ${lose} `)
let rate = (( win / (10-equal))*100).toFixed(2);
let result = document.getElementById('result');
result.innerText = ` ${rate} ` ;
})
</script>
</body>
'화면 수업 정리' 카테고리의 다른 글
| HTML,CSS,JS 12일차 (0) | 2024.08.09 |
|---|---|
| HTML,CSS,JS 11일차 (0) | 2024.08.08 |
| HTML,CSS,JS 9일차 (0) | 2024.08.06 |
| HTML,CSS,JS 8일차 (0) | 2024.08.05 |
| HTML,CSS,JS 7일차 (0) | 2024.08.02 |
