728x90
반응형
불러오기: 기본정보(userId)를 입력하고 불러오기 버튼을 누르면 해당 회원이 json 파일에 있는 회원이면 해당하는 회원의 정보를 불러온다.저장: 기본정보, 이름, 주소, 나이, 핸드폰 번호는 필수값이고 입력하지 않고 저장버튼을 누르면 입력필드를 빨갛게 표시한다.
json 데이터
{"users": [
{"userId": "hong", "name": "홍길동", "address": "서울특별시 중랑구", "age": 29, "phone": "01011112222", "housePhone": "0212345678"},
{"userId": "chulsoo", "name": "배철수", "address": "경기도 오산시 오산구", "age": 59, "phone": "01055543467", "housePhone": ""},
{"userId": "hyejin", "name": "김혜진", "address": "강원도 춘천시 천천구", "age": 40, "phone": "01098765432", "housePhone": "03103204406"}
]}화면 구성
<head>
<meta charset="utf-8">
<title></title>
<style>
a {
display: inline-block;
width: 120px;
text-align: right;
}
</style>
</head>
<body>
<a>기본정보 : </a> <input type="text" id="userInfo"></input>
<button onclick="selectHref();">불러오기</button> <br />
<a>이름 : </a> <input type="text" id="userName"></input><br />
<a>주소 : </a> <input type="text" id="userAdd"></input><br />
<a>나이 : </a> <input type="text" id="userAge"></input><br />
<a>핸드폰번호 : </a> <input type="text" placeholder="-빼고 형식" id="userNum"></input><br />
<a>집전화번호 : </a> <input type="text" id="userHomeNum"></input><br />
<button onclick="saveHref();">저장</button>화면을 먼저 구성해준다.
jQuery 사용
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"> </script>데이터 불러오기
<script>
function selectHref() {
$.ajax({
url: "./../JSON/user.json",
type: "get",
success: function(oResult) {
// var inputValue = document.getElementById("userInfo").value;
var inputValue = $("#userInfo").val(); //get
for (var i = 0; i < oResult.users.length; i++) {
if (oResult.users[i].userId === inputValue) {
$("#userName").val(oResult.users[i].name);
$("#userAdd").val(oResult.users[i].address);
$("#userAge").val(oResult.users[i].age);
$("#userNum").val(oResult.users[i].phone);
$("#userHomeNum").val(oResult.users[i].housePhone);
break;
}
}
}
});
}
</script>
$("").val();
입력한 문자열을 입력필드에 보여준다.val()은 값을 가져올 수도 있고, 설정할 수도 있다. 아무것도 입력하지 않으면 get으로 값을 가져오겠다는거고,val(문자열)로 입력하면 입력한 문자열을 set으로 설정한다.
사용자가 회원정보에 입력한 값을 가져와 변수 inputValue에 담는다. json파일에서 입력한 값과 동일한 userid를 찾으면 해당하는 인덱스의 이름,주소,나이,번호, 집번호데이터를 가져온다. 데이터를 찾으면 반복문을 멈춘다.
저장
var flag = 0;
function saveHref() {
if (!$("#userInfo").val()) {
$("#userInfo").css("border", "2px red solid")
flag = 1;
}
if (!$("#userName").val()) {
$("#userName").css("border", "2px red solid")
flag = 1;
}
if (!$("#userAdd").val()) {
$("#userAdd").css("border", "2px red solid")
flag = 1;
}
if (!$("#userAge").val()) {
$("#userAge").css("border", "2px red solid")
flag = 1;
}
if (!$("#userNum").val()) {
$("#userNum").css("border", "2px red solid")
flag = 1;
}
if (flag === 1) {
alert("필수값을 입력하세요.")
flag = 0;
} else {
alert("저장되었습니다!")
}
}각각의 필드에 값이 false값일때 빨간색선을 표시한다. 이때 flag변수의 값은 1이고, flag변수의 값이 1이면 false값이므로 1일때 필수값을 입력하라는 알림창을 뜨게한다. 이 모든 경우에 포함되지 않는다면 모든 값을 입력했으므로 저장되었다는 알림창을 뜨게한다.
현재 코드는 코드가 중복되는게 많아 좋은 코드가 아니다. 그래서 코드를 줄일 수는 없을까? 해서 다른 방법을 생각해봤다.
<script>
var flag = 0;
var idList = ["#userName", "#userAdd", "#userAge", "#userNum"];
function saveHref() {
for (var i = 0; i < idList.length; i++) {
if (!$(idList[i]).val()) {
$(idList[i]).css("border-color", "red")
flag = 1;
}
}
if (flag === 1) {
alert("필수 정보 값을 입력하세요.");
flag = 0;
} else {
alert("저장되었습니다.");
}
}
</script>각 입력필드의 id를 배열로 가진 변수 idList를 선언하고 idList의 인덱스로 접근해 해당하는 인덱스의 값이 없으면 빨간색선을 표시한다.
현재 코드는 중복이 많아 로직이 길어진 bad code이다. 이 중복을 제거하고 코드 디자인을 개선해주기 위해 리펙토링 작업을 수행한다.
리펙토링?
결과의 변경 없이 내부 구조를 변경하는 것. 리펙토링 수행시 코드의 불필요한 부분들이 사라져 코드를 이해하기 쉬워지고, 개발 속도를 높여주고, 버그도 더 잘찾을 수 있게 해준다.
Code Refactoring
<script>
function selectHref() {
var aInputTags = document.querySelectorAll("input");
var sBasicInfo = aInputTags[0].value; // 기본정보에 입력된 값
$.ajax({
url: "./../JSON/user.json",
type: "get",
success: function(oResult) { //데이터 불러오는게 성공했을때
var aUsers = oResult.users;
var bMatch = false; //개인정보 값이 일치하는값 없을때
for (var i = 0; i < aUsers.length; i++) {
if (sBasicInfo === aUsers[i].userId) {
// aInputTags[1].value = aUsers[i].name;
// aInputTags[2].value = aUsers[i].name;
// aInputTags[3].value = aUsers[i].name;
// aInputTags[4].value = aUsers[i].name;
// aInputTags[5].value = aUsers[i].name;
putInputData(aInputTags, aUsers[i]);
bMatch = true;
break; //일치하는 값 찾으면 for문 빠져나감
}
}
// bmatch가 false이면 일치하는 값이 없고, true면 값이 있는것
// 일치하는 값이 없을때 if문을 타게된다
if (!bMatch) {
// aInputTags[1].value = "";
// aInputTags[2].value = "";
// aInputTags[3].value = "";
// aInputTags[4].value = "";
// aInputTags[5].value = "";
putInputData(aInputTags);
alert("일치하는 데이터가 없습니다.")
}
}
});
}
//input에 데이터 세팅
function putInputData(aInputTags, oInputData) {
var aFieldName = ["name", "address", "age", "phone", "housePhone"];
for (var i = 1; i < aInputTags.length; i++) {
aInputTags[i].value = oInputData ? oInputData[aFieldName[i - 1]] : "";
//aFieldName[i-1] : aFieldName index와 aInputTags index맞춰주려고
}
}
</script>중복되는 코드는 함수로 빼서 사용한다. 그럼 원래 있던 코드 부분에는 함수를 실행하기만 하면 된다.
<script>
function saveHref() {
var aInputTags = document.querySelectorAll("input");
var bCheckEmptyInput = false; //빈문자열 체크
for( var i=1; i<aInputTags.length-1; i++){
if( aInputTags[i].value === "") {
// aInputTags[i].style.borderColor = "red";
$(aInputTags[i]).css("border-color","red")
bCheckEmptyInput = true;
//break안넣어줌, 넣으면 이름말고 다른것도 다 안넣었을때 이름만 체크하고 끝나기 때문
} else {
aInputTags[i].style.borderColor = "";
}
}
if (!bCheckEmptyInput){
alert("저장되었습니다!");
}
}
</script>
728x90
반응형
'Fiori > UI5' 카테고리의 다른 글
| [UI5] UI5 구성 (0) | 2023.03.07 |
|---|---|
| [JavaScript] To Do List 예제 (1) | 2023.03.07 |
| [JavaScript] jQuery (0) | 2023.03.07 |
| [JavaScript] JSON (0) | 2023.03.07 |
| [JavaScript] 이벤트 (0) | 2023.03.07 |
댓글