1. input text태그 안에서  문자열 들어오더라도 문자열 막게 필터하는 스크립트



1
2
3
4
<div class="input_field">
    <input type="text" maxlength="5" id="firstNum" value="" onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;" />
    <input type="submit" value="서브밋" id="ptcp" aria-controls="o3poaExpsr_pop" aria-pressed="false"/>
</div>
cs




2. 화면에서 여러번 클릭 되지 않게 막는 스크립트.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
    var submitProcess = true;
    
    $("#ptcp").click(function(){
        if(!submitProcess){
            alert("처리중입니다.");
            return;
        }
       
        isEventPtcpPsb = false;
        ajaxCallFunction();
        
    });
});
cs



3. 키보드로 글자수 입력 받았을 때 글자카운트 스크립트



1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 키보드로 글자수 입력 받았을 때 글자카운트 스크립트
$( "#textSpace" ).keyup(function() {
    
    var data = $("#textSpace").val();
    var dataLength = data.length;
    $("#textCount").text(dataLength+"/300");
    if(dataLength > 300){
        alert("내용은 300자를 초과할수 없습니다.");
        data = data.substring(0,300);
        var subDataLength = data.length;
        $("#textSpace").val(data);
        $("#textCount").text(subDataLength +"/300");
    }
});
cs


'전체 > JS & Jquery' 카테고리의 다른 글

JS Function Definitions Variable 자바스크립트 함수 선언방법  (0) 2018.10.28
게시판 페이징 ajax 스크립트  (2) 2018.08.17
자바스크립트의 중괄호{} 대괄호[] key, value 배열 json 형식 구조 만들기  (2) 2018.08.16
Email Validation Check 정규표현식 이용하기  (0) 2018.04.04
문자열 3자리마다 콤마찍기, 특정문자 없애기, 마지막 문자 자르는방법  (0) 2018.04.04


자바스크립트의 중괄호 대괄호 key, value 배열 구조 만들기 [] {}


View에서 key, value를 가진 json 배열 형식으로 만들어 보내고 싶은데 

단건이 아닌 다건의 여러개 데이터를  보낼때 중괄호와 대괄호에 개념을 정리하게 되었다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var dataList = [];
 
for (var i = 1, j= 100; i <= 3; i++,j+= 100) {
    var data = {};
    data.number = i;
    data.priorSeq = j;
    dataList.push(data); // 데이터 푸시
}
 
var reqData = {};
reqData.dataList = dataList;
 
var sendData = {};
sendData.reqData = reqData;
 
console.log(sendData);
debugger;
cs


--> 개발자도구를 통해 debugger 전 결과를 확인해보면



 reqData : {dataList: Array(3)}

 dataList : (3) [{…}, {…}, {…}]


 0 : {number: "1", priorSeq: "100"}

 1 : {number: "2", priorSeq: "200"}

 2 : {number: "3", priorSeq: "300"}


다음과 같이 나오게 되고



reqData 는 { [ { }, { }, { } ] } 이런 구조가 된다.




'전체 > JS & Jquery' 카테고리의 다른 글

게시판 페이징 ajax 스크립트  (2) 2018.08.17
JS 문자열 막는 스크립트, 키보드 입력 글자 카운트 스크립트, 화면에서 여러번 클릭 막는 스크립트  (2) 2018.08.17
Email Validation Check 정규표현식 이용하기  (0) 2018.04.04
문자열 3자리마다 콤마찍기, 특정문자 없애기, 마지막 문자 자르는방법  (0) 2018.04.04
jquery 사용한 클래스 변경 추가 제거 방법  (0) 2017.10.18


사용자가 데이터를 입력해서 해당 내용을 저장할때 그 값이 유효한지 안 한지 확인하는 방법은 필수적이다.


저장버튼을 누를때 Validation 로직을 태워 return하는 flag 값이 true이냐 false이냐에 따라 저장로직을 탈지 안탈지 결정할 수 있다.


그 중 이메일 유효성 체크 로직을 보려고 한다.



1. 정규표현식 이용한 Email Validation 만들기


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
scwin.validate = function() {
    var list = dlt_testerList.getAllJSON();
    console.log(list);
    for(var i=0; i<list.length; i++){ 
        if(checkEmail(list[i].emailAddr) != true){ // 이메일형식이 맞는지  확인한다.
            return false;
        }    
    }        
    return true;
};
 
// 이메일 정규표현식 체크
function checkEmail(myValue) {        
    var email = myValue;
    var exptext = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
        if(exptext.test(email)==false){
            //이메일 형식이 알파벳+숫자@알파벳+숫자.알파벳+숫자 형식이 아닐경우            
            alert("이메일형식이 올바르지 않습니다.");
            return false;
        };
        return true;
};
 
scwin.btn_save_onclick = function(e) { // 저장할 때 이메일형식 validation 체크함.
    if( !scwin.validate() ){ // scwin.validate()에서 false가 나오면 안으로 진입 
        return;
    }
    
    if(confirm("저장 하시겠습니까?") ){
        $w.executeSubmission("sbm_insertTester");
    }
};
cs



return 되는 값이 true 일때만 confirm 창이 뜨게 되고 false 일 경우 저장로직을 타지 않게 되는것을 확인할수 있었다.




'전체 > JS & Jquery' 카테고리의 다른 글

JS 문자열 막는 스크립트, 키보드 입력 글자 카운트 스크립트, 화면에서 여러번 클릭 막는 스크립트  (2) 2018.08.17
자바스크립트의 중괄호{} 대괄호[] key, value 배열 json 형식 구조 만들기  (2) 2018.08.16
문자열 3자리마다 콤마찍기, 특정문자 없애기, 마지막 문자 자르는방법  (0) 2018.04.04
jquery 사용한 클래스 변경 추가 제거 방법  (0) 2017.10.18
Jquery each function 사용하기  (0) 2017.08.29



1. 문자열의 마지막 문자를 자르는 방법



1
2
3
4
5
var myDcVal = "100000원"
 
myDcVal = myDcVal.slice(0,-1);
 
console.log(myDcVal);
cs


출력결과

100000



2. 문자열의 3자리마다 콤마 찍어주기



1
2
3
4
5
6
7
8
9
10
11
var myData = "1000000";
 
myData = AddComma(myData);
 
function AddComma(data_value) {
 
 return Number(data_value).toLocaleString('en');
 
}
 
console.log(myData);
cs


출력결과

1,000,000



3. 문자열의 특정문자(콤마) 없애기



1
2
3
4
5
6
7
var myData = "1,000,000";
 
if(myData.indexOf(",") != -1){ // 콤마가 있다면
  myData = myData.replace(/(,)/g, ""); // 콤마를 ""로 replace함                
}
 
console.log(myData);
cs


출력결과

1000000



4. 문자열의 특정 위치 찾기


var myString1 = "Hello,World"


다음은 문자열의 특정위치를 찾기위한 Hello,World의 위치값을 표기한 것이다.

0H1e2l3l4o5,6W7o8r9l10d11



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 1. substring([시작위치], [종료위치]);
 
var myString1 = "Hello,World"
 
myString1 = myString1.substring(0,5);
console.log(myString1);
 
// 출력결과 Hello
 
/*****************************************/
 
// 2. substr([시작위치], [길이]);
 
var myString1 = "Hello,World"
 
myString1 = myString1.substr(6,5)
console.log(myString1);
 
// 출력결과 World
 
/*****************************************/
 
// 3. indexOf([검색 문자열]);
 
var myString1 = "Hello,World"
 
console.log(myString1.indexOf(","));
 
// 출력결과 5
 
/*****************************************/
 
// 4. lastIndexOf([검색 문자열]);
 
var myString1 = "Hello,World"
 
console.log(myString1.lastIndexOf("o"));
 
// 출력결과 7
 
/*****************************************/
cs


다음과 같은 방법을 통해 문자열의 필요한 값을 추출할 수 있었다.



'전체 > JS & Jquery' 카테고리의 다른 글

자바스크립트의 중괄호{} 대괄호[] key, value 배열 json 형식 구조 만들기  (2) 2018.08.16
Email Validation Check 정규표현식 이용하기  (0) 2018.04.04
jquery 사용한 클래스 변경 추가 제거 방법  (0) 2017.10.18
Jquery each function 사용하기  (0) 2017.08.29
access-control-allow-origin 크로스 도메인 이슈 해결방법  (0) 2017.05.12


1.1 Jquery 사용한 클래스 변경 추가 제거 방법


1
2
3
4
5
6
7
8
9
// 클래스 변경 
$(this).attr('class','class_name');
 
// 클래스 추가 
$(this).addClass("class_name");
 
// 클래스 제거 
$(this).removeClass("class_name");
 
cs

1.2 사용 예시


1
2
3
4
5
6
// 사용 예시
$('#search-btn1').click(function() {
    $('#check-design').addClass("checkbox");
    $('#check-design').removeClass("check-checked");
    return false;
});
cs



2.1 Jquery attr(), prop(), is() 메소드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
 
<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
  p {
    margin: 20px 0 0;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
 
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
 
<script>
$( "input" ).change(function() {
  var $input = $( this );
  $( "p" ).html(
    ".attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    ".prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    ".is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>
cs


속성에 대해 prop(), is()는 true, false 를 갖지만 attr()은 checked로 변하지 않는다.


.attr( "checked" ): checked

.prop( "checked" ): false

.is( ":checked" ): false


.attr( "checked" ): checked

.prop( "checked" ): true

.is( ":checked" ): true



2.2 사용 예시


1
2
3
4
5
6
7
8
9
10
11
$('#check-all-1').click(function() {
    if($('#check-all-1').is(':checked') == true) {
        $('#ui-col-cont input[name=check]').each(function(){
            $(this).prop('checked', true);
        });
    } else {
        $('#ui-col-cont input[name=check]').each(function(){
            $(this).prop('checked', false);
        });
    }
});
cs


prop() 를 통해 check 속성의 값을 true, false로 변경하는 것을 확인할 수 있다.




'전체 > JS & Jquery' 카테고리의 다른 글

자바스크립트의 중괄호{} 대괄호[] key, value 배열 json 형식 구조 만들기  (2) 2018.08.16
Email Validation Check 정규표현식 이용하기  (0) 2018.04.04
문자열 3자리마다 콤마찍기, 특정문자 없애기, 마지막 문자 자르는방법  (0) 2018.04.04
Jquery each function 사용하기  (0) 2017.08.29
access-control-allow-origin 크로스 도메인 이슈 해결방법  (0) 2017.05.12


Jquery each 함수 사용하기


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
_DATA = {_DATA=[{param_value1=N, param_value2=12345,
 param_value3=[{"param_value3_1": "1", "param_value3_2" : "2"},{"param_value3_1": "3", "param_value3_2" : "2"}]}
 
var myValue = "";
var myArray = new Array();
 
<c:forEach var="entity" items="${_DATA}">
var param_value3 =  "<c:out value="${entity.param_value3}" />";
param_value3 = param_value3.replace(/"/gi,'\"'); // json 파싱 위한 특수문자 변환
param_value3 = $.parseJSON(param_value3 ); // Json 파싱
 if($(param_value3).size() > 0){
    $.each(param_value3,function(key,val){ 
            if(val.param_value3_1 == "2"){
                return false // This mean is break
            }else {
                if((val.param_value3_2 == "2")){
                    myArray.push(val.param_value3_1); // Input value in array
                    myValue = Math.max.apply(null, myArray); // Max value in array
                    }  
                }             
    });
}
</c:forEach
cs


_DATA 안의 param값 안의 배열에 접근할때 each 함수를 사용하여 key를 통해 반복하여 해당 반복문을 실행할 수 있다.


return false는 each 함수 사용 시 break 역할을 한다.


return 의 경우 continue의 기능이다.


현재 배열에 값을 넣어 최대값을 뽑고 있다.




'전체 > JS & Jquery' 카테고리의 다른 글

자바스크립트의 중괄호{} 대괄호[] key, value 배열 json 형식 구조 만들기  (2) 2018.08.16
Email Validation Check 정규표현식 이용하기  (0) 2018.04.04
문자열 3자리마다 콤마찍기, 특정문자 없애기, 마지막 문자 자르는방법  (0) 2018.04.04
jquery 사용한 클래스 변경 추가 제거 방법  (0) 2017.10.18
access-control-allow-origin 크로스 도메인 이슈 해결방법  (0) 2017.05.12


Jquery의 ajax() 사용시 url type 호출방법으로 GET, POST 방법 등을 쓰게 되는데 


다음 소스와 같이 직접적으로 url에 넣어 통신을 할 경우 access-control-allow-origin 크로스 도메인 이슈가 발생하게 됩니다.



1
2
3
4
5
6
7
8
9
$(document).ready(function(){
    var seoul = ['http://www.kma.go.kr/wid/queryDFSRSS.jsp?zone=1159063000']
        $.ajax({
            url : seoul[i],
            type : "GET",
            success : function(xml){
            }
        });
});
cs


해결방법으로는 클라이언트에서 처리하는 방법과 서버에서 처리하는 방법이 있는데


클라이언트에서 처리하는 방법을 사용할 시 서비스를 사용하는 사용자에게 플러그인을 모두 깔아서 보게하거나 설정해야 할 일이 생겨


서버쪽에서 처리해주어야 합니다.



제가 해결한 방법으로는 controller를 만들어 해결하는 것입니다.


저는 get방식으로 컨트롤러를 태워 기상청 RSS 데이터 XML을 파싱해 가져오려고 합니다.


servlet을 통해 다음과 같이 어노테이션을 주어 컨트롤러로 이동시킵니다.



1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
 
        $.ajax({
            url : 'get.do',
            type : "GET",
            success : function(xml){
            }
        });
 
});
cs



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@WebServlet("/get.do")
public class Test1 extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    public Test1() {
        super();
    }
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String addr = "http://www.kma.go.kr/wid/queryDFSRSS.jsp?zone=1159063000";
        URL url = new URL(addr);
        
        
        InputStream in = url.openStream(); 
        CachedOutputStream bos = new CachedOutputStream();
        IOUtils.copy(in, bos);
        in.close();
        bos.close();
        
        String data = bos.getOut().toString();        
        out.println(data);
     }
}
cs


다음과 같이 작성하여


controller를 통해 데이터를 받게되면 클라이언트에서 크로스 도메인 이슈가 나타나지 않습니다.


'전체 > JS & Jquery' 카테고리의 다른 글

자바스크립트의 중괄호{} 대괄호[] key, value 배열 json 형식 구조 만들기  (2) 2018.08.16
Email Validation Check 정규표현식 이용하기  (0) 2018.04.04
문자열 3자리마다 콤마찍기, 특정문자 없애기, 마지막 문자 자르는방법  (0) 2018.04.04
jquery 사용한 클래스 변경 추가 제거 방법  (0) 2017.10.18
Jquery each function 사용하기  (0) 2017.08.29

+ Recent posts

티스토리툴바