달달한 봉봉

String을 ','나 기타 문자로 나눠야 할 경우가 많다.

그럴 경우에 forEach문을 사용하면 편하게 나눌 수 있다.

var a = "aaa,bbb,ccc";
a.split(',').forEach(function(idx){
	console.log(a[idx]);
})
--> result
aaa
bbb
ccc

var b = a.split(',');
--> result
a = ["aaa","bbb","ccc"];

Form 데이터를 가져오는 방법은 다음과 같다.

// form name값과 value값을 가져오는 방법
const test = document.forms[0].elements;
for(var i = 0; i<test.length;i++){
	console.log(test[i].name);
	console.log(test[i].value);
}

// 해당 form id 인지 확인하는 방법
for(var i = 0; i<document.forms.length;i++){
	if(document.forms[i].id == "Form_id"){
		break;
	}
}

Javascript에서 객체를 복사하는 방법은 다음과 같다.

const cloneObj = obj => JSON.parse(JSON.stringify(obj));
fileList = cloneObj(begFileList);
// 객체를 복사해서 변경해도 기존에 원본 객체는 바뀌지 않음

cloneObj에 obj를 복사한 것이다.

bind()와 unbind()는 요즘에는 안 쓴다고 알고 있다.

하지만 이렇게 만들어진 코드가 많기에 알아두면 좋다.

먼저 bind는 말그대로 이벤트를 묶는것이다. 그러면 unbind는 모든 이벤트를 다 풀어버린다.

그래서 새로운 창이나 다이나믹하게 이벤트 함수가 변경될 가능성이 있는 경우 unbind를 사용후 bind를 사용해야지 이전에 묶인 이벤트가 사라지고 새로운 이벤트가 실행 될 수 있다.

// 예를 들어 input이 다이나믹하게 증가할 경우 새로 생성된 input에 대해서 click 이벤트를 묶어준다.
// 또는 다이나믹하게 input 버튼을 생성해야할때 화면이 뜨면서 이벤트를 걸 수 있다.
$("#").find("input").each(function(idx){                    // input을 찾아서 반복적으로 가져온다.
    $(this).unbind().bind("click",function(){               // 해당 input 마다 클릭 이벤트를 걸어준다.
        console.log("클릭");
    })	
})

Array로 되어 있는 데이터를 한줄로 묶어서 서비스로 보내야 할 때가 있다.

Array에 있는 String 데이터들을 한 줄의 코드를 사용해서 콤마로 구분된 한줄의 String 으로 나타낼 수 있다.

// Array를 생성해서 aa와 bb를 넣어준다.
var temp = new Array();
temp.push("aa");
temp.push("bb");

// temp.join()을 사용하면 콤마를 사용한 한줄로 변경된다.
console.log(temp.join());
// result : "aa,bb"

라디오 버튼을 script에서 체크하는 방법은 간단하다.

prop에서 "checked"에 true 값을 넣어주면 된다.

$("#radio_1").prop("checked", true);

serializeArray을 사용하면 JSP에서 From 안에 있는 데이터를 Key와 Value 값을 Array로 바로 가져올 수 있다.

먼저 JSP에서 다음과 같이 name과 value값이 있다.

<form id = "test" >
	<input type="text" name="input1" value="1">
	<input type="text" name="input2" value="2">
</form>

Script는 다음과 같이 사용한다.

const arrayTest = $("#test").serializeArray();
// result --> 0: {name: "input1", value: "1"}
//	          1: {name: "input2", value: "2"}
var param = {};
arratTest.map(function(data,index){
	param[data.name] = data.value;
})
// result --> {input1: "1", input2: "2"}

arrayTest에 form id를 가지고 serializeArray를 사용하면 자동으로 name과 value 값이 Array 형태로 저장된다.

여기서 map 함수를 사용하면 param 변수에 key, value 값을 저장할 수 있다.

Ajax를 사용할때는 다음과 같이 사용한다.

1. 먼저 화면상에서 버튼을 넣어준다.

<td><input type="button" value="수정" class="select" style="text-align: center"></td>

2. 클릭 이벤트를 만들어 준뒤, ajax 코드를 넣어준다.

<script type="text/javascript">
	$(document).on("click", ".select", function() {
		$.ajax({      // 비동기 방법
			type : "POST",
			data : {
				"idkey" : "value"
			},
			url : "detail",
			success : function(returnData){
				console.log(returnData + " success");
				location.href=returnData;
			},
			error : function(){
				console.log("failed");
			}
		});
	});
</script>

여기에 data-id를 이용해서 데이터를 저장한다. 

Ajax가 성공하면 success 함수가 실행되고, 실패하면 error 함수안에 내용이 실행된다. 

여기서 success와 error이 없으면 Ajax가 실행이 안되니 함께 사용해야 한다. 

이렇게 보낸 정보는 Java에서 다음과 같이 받아준다.

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	// TODO Auto-generated method stub
    
	HttpSession  session = request.getSession();
	String stuNum = request.getParameter("idkey");
    
	member = sql.detail(stuNum);
	session.setAttribute("memDetail", member);
    
	response.getWriter().append("updateForm.jsp");
}

doPost는 session으로 데이터를 보내준다.