반응형
JSON과 동일하지만 명시적으로 Class로 표현을 하면, 데이터 분석이 쉬워진다.
JSON인 경우에는 name과 value 값을 확인해봐야 하기 때문이다.
클래스 안에서 메소드 만들때
출력
데이터 표현 방식(JSON과 유사하다)
<!-- JavaScript External 연결 -->
<script src="../js/person.js">
// 주의) 절대 경로 연결되어있는 script 사이에 다른 코드 작성하지 말 것
</script>
<script type="text/javascript">
const p = new Person("홍길동",30,"010-1234-1234");
document.write("p's name : " + p.name + "<br>");
document.write("p's age : " + p['age'] + "<br>");
document.write("p's tel : " + p.tel + "<br>");
document.write("p's JSON : " + p.toJSON() + "<br>");
</script>
toJSON(){
// Person 객체가 가지고 있는 Data를 JSON 형태로 출력하는 메소드
return `{"name":"${this.name}", "age":${this.age}, "tel":"${this.tel}"}`;
}
/**
*
*/
class Person{
constructor(name,age,tel){
this.name = name;
this.age = age;
this.tel = tel;
}
toJSON(){
// Person 객체가 가지고 있는 Data를 JSON 형태로 출력하는 메소드
return `{"name":"${this.name}", "age":${this.age}, "tel":"${this.tel}"}`;
}
// setter
set age(nai) {
if(nai<0) {
console.log("올바른 나이 값이 아닙니다.")
}
// 내부에서만 사용하는 이름에는 _언더바를 붙인다.
this._age = nai;
}
// getter(this.age라고 표기하면 age() 메서드를 재귀함수처럼 반복해서 호출한다)
get age() {
return this._age;
}
}
클래스를 활용해서 주민번호를 통해 정보 얻기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
width: 400px;
}
span {
display: inline-block;
text-indent: 20px;
}
</style>
<script src="../js/jumin.js">
</script>
<script type="text/javascript">
const regular_jumin = /^[0-9]{2}([0]\d|[1][0-2])([0][1-9]|[1-2]\d|[3][0-1])-[0-9]\d{6}$/;
// 객체 생성
const jumin = new Jumin("");
function result_show() {
let jumin_no = document.getElementById("jumin_no").value;
if(regular_jumin.test(jumin_no) == false) {
alert("주민번호 형식이 틀립니다.");
return;
}
// jumin object의 jumon_no
jumin.jumin_no = jumin_no;
// 각각의 부가정보(출생년도/나이/...) 구한다
const year = jumin.getYear();
document.getElementById("birth-year").innerHTML = year;
const age = jumin.getAge();
document.getElementById("age").innerHTML = age + "(세)";
const tti = jumin.getTti();
document.getElementById("tti").innerHTML = tti + "(띠)";
const gender = jumin.getGender();
document.getElementById("gender").innerHTML = gender;
const season = jumin.getSeason();
document.getElementById("season").innerHTML = season;
const local = jumin.getLocal();
document.getElementById("local").innerHTML = local;
const ganji = jumin.getGanji();
document.getElementById("ganji").innerHTML = ganji;
}
</script>
</head>
<body>
주민번호:<input id="jumin_no" value="901212-1234568">
<input type="button" value="결과보기" onclick="result_show();">
<hr>
<table border="1" width="400">
<tr>
<th>출생년도</th>
<td><span id="birth-year">1990</span></td>
</tr>
<tr>
<th>나이</th>
<td><span id="age">30</span></td>
</tr>
<tr>
<th>띠</th>
<td><span id="tti">호랑이</span></td>
</tr>
<tr>
<th>성별</th>
<td><span id="gender">남자</span></td>
</tr>
<tr>
<th>계절</th>
<td><span id="season">겨울</span></td>
</tr>
<tr>
<th>지역</th>
<td><span id="local">서울</span></td>
</tr>
<tr>
<th>간지</th>
<td><span id="ganji">갑인</span></td>
</tr>
</table>
</body>
</html>/**
*
*/
class Jumin{
constructor(jumin_no){
this.jumin_no = jumin_no;
}
// 01234567891234 <- index
// this.jumin_no = "901212-1234567";
/*
내국인 외국인
남 여 남 여
1900 1 2 5 6
2000 3 4 7 8
1800 9 0
*/
// 출생년도
getYear() {
let year = parseInt(this.jumin_no.substr(0,2));
let gender = parseInt(this.jumin_no.charAt(7));
switch(gender) {
case 1 : case 2: case 5: case 6: year += 1900; break;
case 3 : case 4: case 7: case 8: year += 2000; break;
default: year += 1800;
}
return year;
}
// 나이
getAge() {
// 자바스크립트에서 현재날짜 구해서 처리
const now = new Date();
let result = now.getFullYear();
let age = result - this.getYear();
return age;
}
getTti() {
let tti = ["신(원숭이)","유(닭)","술(개)","해(돼지)","자(쥐)",
"축(소)","인(호랑이)","묘(토끼)","진(용)","사(뱀)","오(말)","미(양)"];
let myTti = tti[this.getYear()%12];
return myTti;
}
getGender() {
let gender = parseInt(this.jumin_no.charAt(7));
let myGender = "";
if(gender%2==1) myGender = "남자";
else myGender = "여자";
return myGender;
}
getSeason() {
let season = parseInt(this.jumin_no.substr(2,2));
let result = "";
switch(Math.floor(season/3)) {
case 1: result = "봄"; break;
case 2: result = "여름"; break;
case 3: result = "가을"; break;
default: result = "겨울"; break;
}
return result;
}
getLocal() {
let local_num = parseInt(this.jumin_no.substr(8,2));
let result = "";
if(0 <= local_num && local_num <= 8) {
result = "서울";
} else if(local_num <= 12) {
result = "부산";
}
else if(local_num <= 15) {
result = "인천";
}
else if(local_num <= 25) {
result = "경기";
}
else if(local_num <= 34) {
result = "강원";
}
else if(local_num <= 39) {
result = "충북";
}
else if(local_num <= 41) {
result = "대전";
}
else if(local_num == 44 || local_num == 96) {
result = "세종";
}
else if(42 <= local_num && local_num <= 47) {
result = "충남";
}
else if(local_num <= 54) {
result = "전북";
}
else if(local_num <= 64) {
result = "전남";
}
else if(local_num <= 66) {
result = "광주";
}
else if(local_num <= 69 || local_num == 76 || local_num == 77) {
return "대구";
}
else if(local_num <= 75 || (78 <= local_num && local_num <= 81)) {
result = "경북";
}
else if(local_num == 85 || local_num == 90) {
result = "울산";
}
else if(local_num <= 84 || (86 <= local_num && local_num <= 93)) {
result = "경남";
} else result = "제주";
return result ;
}
getGanji() {
let ganji = ["갑","을","병","정","무","기","경","신","임","계"];
let ganji2 = ganji[this.getYear() % 10];
let myGanji = ganji2 + this.getTti() ;
return myGanji;
}
// 01234567891234 <- index
// this.jumin_no = "901212-123456 7";
// 2345670892345
isValid() {
let sum = 0;
sum += parseInt(this.jumin_no.charAt(0))*2;
sum += parseInt(this.jumin_no.charAt(1))*3;
sum += parseInt(this.jumin_no.charAt(2))*4;
sum += parseInt(this.jumin_no.charAt(3))*5;
sum += parseInt(this.jumin_no.charAt(4))*6;
sum += parseInt(this.jumin_no.charAt(5))*7;
sum += parseInt(this.jumin_no.charAt(7))*8;
sum += parseInt(this.jumin_no.charAt(8))*9;
sum += parseInt(this.jumin_no.charAt(9))*2;
sum += parseInt(this.jumin_no.charAt(10))*3;
sum += parseInt(this.jumin_no.charAt(11))*4;
sum += parseInt(this.jumin_no.charAt(12))*5;
let check_sum = (11-(sum%11))%10;
console.log("check_sum", check_sum);
let last_num = parseInt(this.jumin_no.charAt(13));
return ( last_num == check_sum );
}
isValid2() {
let sum = 0;
let multiply = 2;
for(let i = 0; i < 13; i++) {
if(i==6) continue;
sum += parseInt(this.jumin_no.charAt(i))*parseInt(multiply++);
if(multiply==10) multiply = 2;
}
let check_sum = (11-(sum%11))%10;
console.log("check_sum", check_sum);
let last_num = parseInt(this.jumin_no.charAt(13));
return ( last_num == check_sum );
}
}
반응형
'javaScript↗' 카테고리의 다른 글
| [오류주의]javaScript의 치명적인 오류 (함수에 괄호 누락 ()) (0) | 2024.06.14 |
|---|---|
| jQuery (제이쿼리) (0) | 2024.06.12 |
| JavaScript JSON(제이슨) (1) | 2024.06.11 |
| JavaScript 정리 (0) | 2024.06.10 |
| [ jS] HTML 태그 추가 / 클래스 관리 (1) | 2024.04.12 |