자료형 변환
document.write(10+20); // 30
document.write("10"+"20"); // 1020
document.write("<hr>");정수 1020과 문자열 1020은 화면 상에서 사용자에게 동일하게 보인다.
하지만 우리는 정수로 입력된 숫자를 문자열로 바꾸거나 또는 문자열을 숫자로 바꿔야 할 상황이 발생할 수 있다.
이때 형 변환을 사용한다.
문자열을 숫자형으로 변환
1. Number()
// 숫자로 구성된 문자열을 숫자형으로 변환 가능
// 참조 https://www.w3schools.com/jsref/jsref_number.asp
document.write(Number("10")); // 10
document.write("<hr>");
document.write(Number("10")+Number("20")); // 30
document.write("<hr>");
document.write(Number("10 ")); // 10
document.write("<hr>");
document.write(Number(" 10")); // 10
document.write("<hr>");
document.write(Number("10.23")); // 10.23
document.write("<hr>");
document.write(Number("KOREA")); // NaN (Not a Number)
document.write("<hr>");
document.write(Number("1 2 3")); // NaN (Not a Number)
document.write("<hr>");2. parseInt()
많이 사용하는 함수로 잘 알아두는 것이 좋다.
// 숫자로 구성된 문자열을 정수형으로 변환
document.write(parseInt("10")); // 10
document.write("<hr>");
document.write(parseInt("-10")); // -10
document.write("<hr>");
document.write(parseInt("10.23")); // 10
document.write("<hr>");
document.write(parseInt("SEOUL")); // NaN
document.write("<hr>");3. parseFloat()
// 숫자로 구성된 문자열을 실수형으로 변환
document.write(parseFloat("10")); // 10
document.write("<hr>");
document.write(parseFloat("10.33")); // 10.33
document.write("<hr>");
document.write(parseFloat("JAVA")); // NaN
document.write("<hr>");
숫자형을 문자형으로 변환
1. String()
document.write(String(123)); // "123"
document.write("<hr>");
document.write(String(123)+String(456)); // "123456"
document.write("<hr>");2. toString()
document.write((123).toString()); // "123"
document.write("<hr>");
document.write((123).toString()+(456).toString()); // "123456"
document.write("<hr>");
참고) 숫자형 데이터는 부분적으로 데이터를 가져올 수 없지만 문자형 데이터는 가능하다.
"123456"에서 6만 따로 가져올 수 있지만 123456에서는 6만 가져올 수 없다.
Boolean 값의 형 변환
document.write(Number(true)); // 1
document.write("<hr>");
document.write(Number(false)); // 0
document.write("<hr>");
document.write(String(true)); // "true"
document.write("<hr>");
document.write(String(false)); // "false"
document.write("<hr>");
연습)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_지폐갯수.html</title>
</head>
<body>
<div id="demo"></div>
<script>
// 연습) 각 지폐갯수를 구해서 표작성해서 본문 id=demo에 출력하시오
/*
| 만원 | 5장 |
| 천원 | 4장 |
| 백원 | 3장 |
| 십원 | 2장 |
*/
let money = 54320;
// let a = parseInt(money/10000); // 5.432 -> 5
// let b = (money%10000) // 4320
// let c = parseInt(b/1000); // 4.32 -> 4
// let d = (b%1000); // 320
// let e = parseInt(d/100); // 3.2 -> 3
// let f = (d%100); // 20
// let g = (f/10); // 2
// 내 풀이
let a = parseInt(money/10000); // 5
let c = parseInt((money%10000)/1000); // 4
let e = parseInt((money%1000)/100); // 3
let g = parseInt((money%100)/10); // 2
/* 강사님 풀이과정
document.write(money/10000); // 5.432
document.write("<hr>");
document.write(money%10000); // 4320
let m = parseInt(money/10000); // 5
money = money%10000; // 4320 money%=10000
let c = parseInt(money/1000); // 4
money = money%1000; // 320
let b = parseInt(money/100); // 3
money = money%100; // 20
leb s = parseInt(money/10); // 2
*/
let result = ""; // 결과값
result = result + "<table border ='1'>"; // result += " ";
result = result + "<tr>";
result = result + " <th>만원</th>";
result = result + " <td>" + a +"장"+ "</td>";
result = result + "</tr>"
result = result + "<tr>";
result = result + " <th>천원</th>";
result = result + " <td>" + c +"장"+ "</td>";
result = result + "</tr>";
result = result + "<tr>";
result = result + " <th>백원</th>";
result = result + " <td>" + e +"장"+ "</td>";
result = result + "</tr>";
result = result + "<tr>";
result = result + " <th>십원</th>";
result = result + " <td>" + g +"장"+ "</td>";
result = result + "</tr>";
result = result + "</table>";
document.getElementById("demo").innerHTML=result;
</script>
</body>
</html>
삼항 연산자
let a = 3;
document.write(a*-1); // 이항
document.write(-a); // 단항
document.write("<hr>");
// 삼항 연산자
// 형식) (조건) ? 참 : 거짓 ( 조건에는 반드시 boolean 값이 와야한다)
// 문1) 절대값을 구하시오(양수값을 구하시오)
let num = -5;
let result = (num < 0) ? num*-1 : num;
// -5 < 0 -5 *-1
document.write(num + " 절대값 : " + result)
document.write("<hr>");
// 문2) 세개의 수 중에서 가장 큰 값(최대값)을 구하시오
// 내 풀이
let x = 7, y = 5, z = 9;
let result2 = ((x>y) ? x : y)>z ? ((x>y) ? x : y) : z;
document.write(x + "," + y + "," + z + "중 최대값 : " + result2);
// 강사님 풀이
let max = (x<y) ? y : x;
// (7<5) 7
max = (max<z) ? z : max;
// (7 < 9) 9
Math 객체
수학 관련 객체이다.
document.write(Math.abs(-3)); // 절대값
document.write("<hr>");
document.write(Math.max(7, 5, 9)); // 최대값
document.write("<hr>");
document.write(Math.min(-7, -5, -9)); // 최소값
document.write("<hr>");
document.write(Math.pow(2, 4)); // 2의 4승
document.write("<hr>");
// 소수점 반올림
document.write(Math.round(4.9)); // 5
document.write("<hr>");
document.write(Math.round(4.4)); // 4
document.write("<hr>");
document.write(Math.round(-4.2)); // -4
document.write("<hr>");
document.write(Math.round(-4.7)); // -5
document.write("<hr>");
// 소수점 올림
document.write(Math.ceil(4.9)); // 5
document.write("<hr>");
document.write(Math.ceil(4.4)); // 5
document.write("<hr>");
document.write(Math.ceil(-4.2)); // -4
document.write("<hr>");
document.write(Math.ceil(-4.7)); // -4
document.write("<hr>");
// 소수점 버림
document.write(Math.floor(4.9)); // 4
document.write("<hr>");
document.write(Math.floor(4.4)); // 4
document.write("<hr>");
document.write(Math.floor(-4.2)); // -5
document.write("<hr>");
document.write(Math.floor(-4.7)); // -5
document.write("<hr>");
document.write(Math.E);
document.write("<hr>");
document.write(Math.PI);
document.write("<hr>");
Math.random()
무작위로 발생한 수 (난수)
random 값의 발생 범위는 0.0 ≤ r < 1이다.
Math.random() : 무작위로 발생한 수
random 값 발생 범위 : 0.0 <= r < 1
document.write(Math.random());
document.write("<hr>");
document.write(Math.random()*2);
document.write("<hr>");
document.write(parseInt(Math.random()*2)); // 0, 1
document.write("<hr>");
document.write(parseInt(Math.random()*4)); // 0, 1, 2, 3
document.write("<hr>");// 문) 주사위 1 ~ 6 사이의 수만 발생시키시오
document.write(parseInt((Math.random()*6)+1)); // (0 1 2 3 4 5) + 1 = 1 2 3 4 5 6
document.write("<hr>");
// 문) 로또번호
document.write(parseInt((Math.random()*45)+1));
document.write("<hr>");
참고
https://www.w3schools.com/js/js_math.asp
JavaScript Math Object
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
제어문
프로그램의 흐름을 제어한다.
- 조건문 : if문, switch ~ case문
- 반복문 : for문, while문, do ~ while문
- break문
- continue문
if 조건문
boolean 값으로 판단한다.
1) if (조건) { 조건이 true이면 처리 }
2) if (조건) { 조건이 true이면 처리 }
else { 조건이 false이면 처리 }
3) if (조건 1) { 조건 1이 true이면 처리 }
else if (조건 2) { 조건 2가 true이면 처리 }
else if (조건 3) { 조건 3이 true이면 처리 }
else { 조건 1, 2, 3까지 만족하지 않으면 무조건 처리 }
// 성적 프로그램
let name = "무궁화";
let kor = 100, eng = 95, mat = 35;
let total = kor + eng + mat; // 총점 구하시오
let aver = parseInt(total/3); // 평균 구하시오
document.write("이름 : " + name + "<hr>");
document.write("국어 : " + kor + "<hr>");
document.write("영어 : " + eng + "<hr>");
document.write("수학 : " + mat + "<hr>");
document.write("총점 : " + total + "<hr>");
document.write("평균 : " + aver + "<hr>");
//문1) 평균 95점이상이면 장학생을 출력하시오
if (aver >= 95) { // 76>=95
document.write('<span style="color:red; font-weight:bold">장학생</span><hr>');
} // if end
//문2) 국어점수가 70점이상이면 합격, 아니면 불합격
if (70 <= kor) { // 100 >= 70
document.write("국어 : 합격<hr>");
} else {
document.write("국어 : 불합격<hr>");
} // if end
//문3)수학점수가 90점이상이면 "A"
// 80점이상이면 "B"
// 70점이상이면 "C"
// 60점이상이면 "D"
// 나머지는 "F"
if (mat >= 90) {
document.write("A");
} else if (mat >= 80) {
document.write("B");
} else if (mat >= 70) {
document.write("C");
} else if (mat >= 60) {
document.write("D");
} else {
document.write("F");
}
// 문4) 과락
// 평균이 70점 이상이면 결과 : 합격
// (단, 국영수 세과목 중 한 과목이라도 40점 미만이면 결과 : 재시험)
// 평균이 70점 미만이면 결과 : 탈락
// 내 풀이
if (aver < 70) {
document.write("결과 : 탈락<hr>");
} else if (kor < 40 || eng < 40 || mat < 40) {
document.write("결과 : 재시험<hr>");
} else {
document.write("결과 : 합격<hr>");
}
// 강사님 풀이
//1) OR 조건
if (aver >=70 ) { // 76>=70
if (kor<40 || eng<40 || mat<40) { // 100<40 || 95<40 || 35<40
// false false true
// true
document.write("결과 : 재시험<hr>");
} else {
document.write("결과 : 합격<hr>");
}
} else {
document.write("결과 : 탈락<hr>");
}
//2) AND 조건
if (aver >=70 ) { // 76>=70
if (kor>=40 && eng>=40 && mat>=40) { // 100>=40 && 95>=40 && 35>=40
// true true false
// false
document.write("결과 : 합격<hr>");
} else {
document.write("결과 : 재시험<hr>");
}
} else {
document.write("결과 : 탈락<hr>");
} //if end
'웹개발 교육 > JavaScript' 카테고리의 다른 글
| [12일] JavaScript (6) - 요일 구하기, Date 객체, 함수 (0) | 2022.08.10 |
|---|---|
| [11일] JavaScript (5) - 배열, 연습문제 (0) | 2022.08.09 |
| [10일] JavaScript (4) - 이중 반복문, for 연습 (0) | 2022.08.08 |
| [9일] JavaScript (3) - switch ~ case문, for문, break, continue, while, do ~ while (0) | 2022.08.05 |
| [7일] JavaScript (1) - 자료형, 연산자 (0) | 2022.08.03 |
