예전에 익스트림 CRUD에 나왔던 그거 맞다. 대신 익스트림 CRUD에 비해 입력받는 항목도 적고, 형식검사도 한 가지 부분에 대해서만 진행하면 되기때문에 코드가 비교적 간소하다.
입력인자 중 공백 여부를 체크할 것은
- 시퀀스
- 시퀀스 이름
- 시퀀스 정보
이고, 형식을 체크할 것은 시퀀스 하나뿐이다. DNA는 다들 아시다시피 A, T, G, C로 구성되어 있고 DNA 시퀀스에도 당연히 A, T, G, C만 들어간다. 대소문자 입력을 감안해도 atgcATGC 이렇게 여덟개다.
어? 제한효소 인식 시퀀스에는 W나 N같은 것도 있잖아요! 그건 DNA 시퀀스가 문제가 아니라 그 제한효소가 인식하는 염기가 두 개 이상이라는 소리다. 예를 들어서 GGWCC라는 인식 시퀀스를 가지는 제한효소가 있다면, 이 효소는 GGACC나 GGTCC 둘 다 인식한다는 소리이다. 그래서 Cutter와 Finder에서도 효소의 인식 시퀀스에 있는 A, T, G, C 외의 알파벳은 해당 알파벳이 지정하는 염기에 맞게 정규식 처리를 한 다음 돌린다. GG[AT]CC 이런 식으로.
function cutFilter() {
const checked_input = document.querySelectorAll('#cutter_select');
const textarea = document.querySelectorAll('textarea');
const checked_fasta = document.querySelectorAll('#FASTA');
const checked_gen = document.querySelectorAll('#Genbank');
const NEB_filter = document.getElementsByName('option_NEB');
const cut_filter = document.getElementsByName('option_cut');
const sequence_name = document.getElementById('sequence-name').value;
const sequence_desc = document.getElementById('sequence-desc').value;
const sequence_valid = RegExp(/[^atgcATGC]/g)
let sequence = '';
if (checked_input[0].checked == true) {
sequence = textarea[0].value;
if (sequence_valid.test(sequence)) {
alert('시퀀스 형식이 올바르지 않습니다! ')
}
}
for (let i = 0; i < NEB_filter.length; i++) {
if (NEB_filter[i].checked == true) {
NEB_filter_val = NEB_filter[i].value;
}
}
for (let i = 0; i < cut_filter.length; i++) {
if (cut_filter[i].checked == true) {
cut_filter_val = cut_filter[i].value
}
}
if (sequence_name.length == 0 || sequence_desc.length == 0 || sequence.length == 0) {
alert('빈 칸을 채워주세요!')
}
if (sequence_name.length != 0 && sequence_desc.length != 0 && sequence.length != 0 && !sequence_valid.test(sequence)) {
$.ajax({
type: "POST",
url: "/cutter",
data: {
NEB_give: NEB_filter_val,
cut_give: cut_filter_val,
sequence_give: sequence,
sequence_name_give: sequence_name,
sequence_desc_give: sequence_desc
},
success: function (response) {
let head_msg = response['head_give']
let result_msg = response['result_give']
let end_message = response['end_give']
let result = document.getElementById('cut_result');
result.innerHTML = head_msg;
for (let i = 0; i < result_msg.length; i++) {
result.innerHTML = result.innerHTML.concat("\n", result_msg[i])
}
result.innerHTML = result.innerHTML.concat("\n", end_message)
}
})
}
}
Cutter의 경우 라디오버튼이 있어서 코드가 좀 더 길다.
function findFilter() {
const input_enz = document.getElementById('enzyme').value;
const textarea = document.querySelectorAll('textarea');
const checked_fasta = document.querySelectorAll('#FASTA');
const checked_gen = document.querySelectorAll('#Genbank');
const sequence_name = document.getElementById('sequence-name-finder').value;
const sequence_desc = document.getElementById('sequence-desc-finder').value;
const sequence_valid = RegExp(/[^atgcATGC]/g)
let sequence = textarea[2].value
if (sequence_valid.test(sequence)) {
alert('시퀀스 형식이 올바르지 않습니다! ')
}
if (sequence_name.length == 0 || sequence_desc.length == 0 || sequence.length == 0) {
alert('빈 칸을 채워주세요!')
}
if (sequence_name.length != 0 && sequence_desc.length != 0 && sequence.length != 0 && !sequence_valid.test(sequence)) {
$.ajax({
type: "POST",
url: "/finder",
data: {
sequence_give: sequence,
enzyme_give: input_enz,
sequence_name_give: sequence_name,
sequence_desc_give: sequence_desc
},
success: function (response) {
let msg = response['head_give']
let result = document.getElementById('find_result');
result.innerHTML = msg;
}
})
}
}
Finder는 라디오버튼이 없기때문에 비교적 코드가 짧다.
![](https://miro.medium.com/max/1400/1*9rKwPEnv39752Mqpi_MIvQ.png)
![](https://miro.medium.com/max/1400/1*tK72DNMvMShSL829tpns0g.png)
Reply