일상다반사(日常茶飯事) > 스터디 > Html & Script http://nuno21.net/bbs/board.php?bo_table=html ko Html & Script (2024-11-20 11:31:11) jquery $.ajax error 확인 http://nuno21.net/bbs/board.php?bo_table=html&wr_id=1310 $.ajax({

    url: 'test.php', // PHP 파일 경로

    type: 'POST',

    data: { post_id: postId

    dataType: "json",

    success: function(result) {

        ....

    },

    error: function(jqXHR, textStatus, errorThrown) {

        console.log("요청 실패!");

        console.log("상태 코드:", jqXHR.status); // HTTP 상태 코드 (예: 404, 500)

        console.log("에러 메시지:", textStatus); // 에러 유형 (예: "timeout", "error", "abort", "parsererror")

        console.log("추가 정보:", errorThrown); // 서버에서 전달한 에러 메시지

        console.log("응답 본문:", jqXHR.responseText); // 서버에서 반환된 응답 (에러 상세 메시지)

    }

});

]]> 최고관리자 2024-11-20T11:31:11+09:00 readonly 입력 필드 더블클릭시 수정할 수 있게 하기 http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1309 HTML <input> 요소에 readonly 속성이 설정되어 있으면 기본적으로 사용자가 해당 입력 필드를 수정할 수 없습니다. 하지만 더블 클릭 이벤트를 통해 readonly 속성을 제거하고 수정할 수 있게 할 수 있습니다. 


입력 필드를 수정한 후 포커스가 아웃될 때 readonly 속성을 다시 추가하는 기능을 구현하기 위해서는 blur 이벤트를 사용하면 됩니다. 

아래에 jQuery를 사용하여 이 기능을 추가한 예제를 제공합니다.


<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Double Click to Edit with jQuery</title>

    <!-- jQuery 라이브러리 로드 -->

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>

        $(document).ready(function(){

            // 더블 클릭시 readonly 속성을 제거하는 기능

            $("#editableInput").dblclick(function(){

                $(this).prop("readonly", false);

            });


            // 포커스 아웃될 때 readonly 속성을 추가하는 기능

            $("#editableInput").blur(function(){

                $(this).prop("readonly", true);

            });

        });

    </script>

</head>

<body>

    <input type="text" id="editableInput" value="더블 클릭하여 수정" readonly>

</body>

</html>



이 코드는 다음과 같은 기능을 수행합니다:

  1. HTML 문서에 id가 editableInput인 <input> 요소를 정의합니다.
  2. jQuery를 사용하여 문서가 준비되면 dblclick 이벤트 리스너를 editableInput 요소에 추가하여 더블 클릭 시 readonly 속성을 제거합니다.
  3. blur 이벤트 리스너를 editableInput 요소에 추가하여 입력 필드에서 포커스가 아웃될 때 readonly 속성을 다시 추가합니다.

이 코드를 사용하면 사용자가 입력 필드를 더블 클릭하여 readonly 속성을 제거하고 입력 필드를 수정할 수 있으며, 수정이 끝난 후 입력 필드에서 포커스가 아웃되면 readonly 속성이 자동으로 다시 추가됩니다.



]]> 최고관리자 2024-08-06T14:22:43+09:00 jquery ajax 폼 데이터 전송 http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1308 HTML


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>AJAX Form Submission</title>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>

<body>

    <form id="myForm">

        <label for="name">Name:</label>

        <input type="text" id="name" name="name"><br><br>

        <label for="email">Email:</label>

        <input type="email" id="email" name="email"><br><br>

        

        <label for="subscribe">Subscribe to newsletter:</label>

        <input type="checkbox" id="subscribe" name="subscribe"><br><br>


        <label>Gender:</label><br>

        <input type="radio" id="male" name="gender" value="male">

        <label for="male">Male</label><br>

        <input type="radio" id="female" name="gender" value="female">

        <label for="female">Female</label><br><br>


        <button type="submit">Submit</button>

    </form>


    <script src="script.js"></script>

</body>

</html>



SCRIPT (script.js)


$(document).ready(function() {

    $('#myForm').submit(function(event) {

        event.preventDefault(); // 폼의 기본 제출 방지


        // 폼 데이터를 객체로 변환

        var formData = {

            name: $('#name').val(),

            email: $('#email').val(),

            subscribe: $('#subscribe').is(':checked'), // 체크박스 상태를 불리언 값으로 가져오기

            gender: $('input[name="gender"]:checked').val() // 선택된 라디오 버튼의 값을 가져오기

        };


        // AJAX 요청

        $.ajax({

            url: 'your-server-endpoint', // 서버 엔드포인트 URL로 변경

            type: 'POST',

            contentType: 'application/json', // JSON 데이터 전송

            data: JSON.stringify(formData), // 데이터를 JSON 문자열로 변환

            success: function(response) {

                // 성공 콜백

                console.log('Success:', response);

            },

            error: function(xhr, status, error) {

                // 에러 콜백

                console.error('Error:', error);

            }

        });

    });

});


]]> 최고관리자 2024-08-02T10:52:53+09:00 간단한 정규표현식 es6 기준 http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1307 https://blog.naver.com/shiaru/222272392533


#자바스크립트 #정규표현식


g : 완전일치 - 모든 패턴에 대한 전역검색

i : 대소문자 무시

gi : 대소문자  무시 및 일치하는 값


간단한 정규표현식 es6 기준

// es6 기준 arrow function const regExp = str => { // 특수문자 let reg = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi; if ( reg.test(str) ) // 특수문자가 있으면 체크 { return str.replace(reg, ""); }else{ return str; } } // 공백 체크 let reg = /\s/g; // 숫자만 체크 let reg = /^[0-9]+$/; //이메일 체크 let reg = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; // 핸드폰번호 let reg = /^\d{3}-\d{3,4}-\d{4}$/; // 일반 전화번호 let reg = /^\d{2,3}-\d{3,4}-\d{4}$/; // 아이디 또는 비밀번호 ( 영문, 숫자만 사용 최소 4글자 최대 20글자 ) let reg = /^[a-z0-9_]{4,20}$/; // 휴대폰번호 let reg = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;
]]> nuno 2021-12-06T16:44:52+09:00 javascript - 특정 키 입력 제한 (event.keyCode) http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1305 출처 : ​https://caileb.tistory.com/158 






특정 키 입력 제한(event.keyCode)

 

 

Keyboard Event Property

Web Page에서 키보드 이벤트를 받는 프로퍼티(Keyboard Event Property)인 event.keyCode를 사용해서 특정 키에 대한 입력을 제한할 수 있습니다.

event.keyCode

 

 

Keyboard Event 막기 Sample

아래 예제는 Web Page에서 키를 입력받는 때 발생하는 이벤트인 keydown에 대해 특정 키들을 막는 코드가 담긴 callback 함수를 등록시킨 것입니다.  숫자, 백스페이스, 시프트, 알트, 컨트롤을 페이지에서 입력받지 못하도록 하는 코드입니다.

<script type="text/javascript">
	window.addEventListener("keydown", function (event) {
		if (event.defaultPrevented) {
			return; // Should do nothing if the default action has been cancelled
		}

		var handled = false;
  
  		// 숫자(0 ~ 9) 입력 제한
		if (event.keyCode >= 48 && event.keyCode <= 57)
    		handled = true;
            
		// 백스페이스(backspace) 입력 제한
		else if (event.keyCode == 8)
			handled = true;
            
		// 시프트(shift) 입력 제한
		else if(event.keyCode == 16)
			handled = true;
            
		// 알트(alt) 입력 제한 (keycode 값인 18로 사용 가능)
		else if(event.altKey)
			handled = true;
            
		// 컨트롤(ctrl) 입력 제한 (keyCode 값인 17로 사용 가능)
		else if(event.ctrlKey)
			handled = true;
    
		if (handled) {
			console.log(event.keyCode);
        
			// Suppress "double action" if event handled
			event.preventDefault();
		}
	}, true);
</script>

 

 

Key Code Table

event.keyCode에는 키보드의 각 키에 대한 특정 숫자가 부여되어 있습니다. 아래 테이블을 참조해서 사용하면 됩니다.

  • 특수 키 모음
Backspace8Page Down34Right click93F10121
Tab9End35F1112F11122
Enter13Home36F2113F12123
Shift16Arrow Left37F3114Num Lock144
Ctrl17Arrow Up38F4115Scoll Lock145
Alt18Arrow Right39F5116  
Pause/Break19Arrow Down40F6117  
Caps Lock20Insert45F7118  
Esc27Delete46F8119  
Page Up33Windows91F9120  
  • 일반 키 모음
048a65k75u85
149b66l76v86
250c67m77w87
351d68n78x88
452e69o79y89
553f70p80z90
654g71q81  
755h72r82  
856i73s83  
957j74t84  

 

 

참고 사이트

(MDN) KeyboardEvent.keyCode

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

(w3cSchools) KeyboardEvent.keyCode

https://www.w3schools.com/jsref/event_key_keycode.asp

(MDN) KeyboardEvent.preventDefault

https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault

key code table

http://www.foreui.com/articles/Key_Code_Table.htm

]]> 최고관리자 2021-04-29T16:01:10+09:00 escape(), encodeURI(), encodeURIComponent() get post 전송 http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1304 출처 : https://blog.naver.com/apchima/221603431709



자바스크립트에서 지원하는 url encode / url decode 함수는 3가지가 있다.



escape() 는

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 @*-_+./

위에서 열거된 문자가 아니면 모두 변환을 합니다. 1바이트문자는 %XX 형태로 2바이트 문자는 %uXXXX 식으로 변환합니다. 

(아스키문자가 아니라면 모두 유니코드 형식으로 변한)


encodeURI()는

escape()와 비슷하지만 인터넷 주소표시에 쓰이는 특수문자들은

인코딩하지않는다. 즉, : ; / = ? & 등의 특수문자는 인코딩 되지않는다 .

보통 파라미터 전달하는 인터넷주소 전체를 인코딩할때 사용


encodeURIComponent()는

escape()와 비슷하지만 인터넷 주소표시에 쓰이는 모든 문자들을 추가로 인코딩한다.

즉, : ; / = ? & 등의 특수문자들이 추가로 인코딩이 된다.

그래서 인터넷주소 URL 을 전체로 인코딩할때는 사용할수 없고 필드 하나하나를 따로 인코딩할 때 사용된다.

Java의 java.net.URLEncoder.encode 는 ?

encodeURIComponent 와 비슷하지만 encodeURIComponent 가 인코딩 안하는 ! ( ) 3개도 인코딩한다.

 

ex)

var url = <>;:/[]{}'">'가나다라abcd123!@#$%^&*()-=\,.<>;:/[]{}'

document.write('url : ' + url);

document.write('<br>');

document.write('1 : ' + escape(url));

document.write('<br>');

document.write('2 : ' + encodeURI(url));

document.write('<br>');

document.write('3 : ' + encodeURIComponent(url));

java.net.URLEncoder.encode("<>;:/">가나ab12!@#$%^&*()-=,.<>;:/[]{}", "utf-8")


결과

url : 가나ab12!@#$%^&*()-=,.<>;:/[]{}

1 : %uAC00%uB098ab12%21@%23%24%25%5E%26*%28%29-%3D%2C.%3C%3E%3B%3A/%5B%5D%7B%7D

2 : %EA%B0%80%EB%82%98ab12!@#$%25%5E&*()-=,.%3C%3E;:/%5B%5D%7B%7D

3 : %EA%B0%80%EB%82%98ab12!%40%23%24%25%5E%26*()-%3D%2C.%3C%3E%3B%3A%2F%5B%5D%7B%7D

4 : %EA%B0%80%EB%82%98ab12%21%40%23%24%25%5E%26*%28%29-%3D%2C.%3C%3E%3B%3A%2F%5B%5D%7B%7D


결론

1. escape는 별로 쓸일이 없겠다.

URL 전부를 인코딩할때는 encodeURI 를 사용하고

파라미터만 인코딩 하거나 url 전체를 파라미터로 줄때는 encodeURIComponent 를 사용하면된다.

2. 자바스크립트에서 지원하는 인코딩들은 모두 utf8이다 따라서 javascript로 인코딩한뒤 파라미터를 넘기고 jsp에서 받을때

utf-8로 디코딩을 해줘야 한글이 안깨진다.

3. ajax도 utf8이기때문에 charset이 euc-kr인 페이지에서는 urlencodecomponent로 인코딩해준뒤 넘겨준다.

]]> 최고관리자 2021-04-27T12:39:21+09:00 jquery 타이핑 효과 스크립트 http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1303 <span class="c1" style="display: none;">동해물과 백두산이</span>

<p class="c2"></p>


<script>

function changeText(cont1,cont2,speed){

var Otext=cont1.text();

var Ocontent=Otext.split("");

var i=0;

function show(){

if(i<Ocontent.length)

{

cont2.append(Ocontent[i]);

i=i+1;

};

};

var Otimer=setInterval(show,speed);

};

$(document).ready(function(){

changeText($(".c1"),$(".c2"),150); //  150 = the Delay time in milliseconds between strokes.

clearInterval(Otimer);

});

]]> nuno 2021-02-02T15:11:04+09:00 자바스크립트 현재 시간 Timestamp 얻는 방법 http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1302 출처 : https://webisfree.com/2017-10-18/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%98%84%EC%9E%AC-%EC%8B%9C%EA%B0%84-timestamp-%EC%96%BB%EB%8A%94-%EB%B0%A9%EB%B2%95


# 자바스크립트로 현재시간 timestamp 구하기
먼저 가장 빠른 방법으로 + 연산자를 new Date() 값 앞에 사용하는 것이 가장 빠르고 간편합니다. 아래의 변수 timestamp는 현재 timestamp 값이 저장될 것입니다.

timestamp = + new Date();

// 1508367636506와 같은 값이 저장됨


+ 연산자를 추가했을 뿐인데 timestamp 값을 얻을 수 있었습니다. 그렇다면 또 다른 방법이 없을까요? 다음 방법으로는 Date 내장객체의 getTime()을 사용할 수도 있습니다. 

timestamp = new Date().getTime();


이제 timestamp 변수에 값이 저장되어 사용할 수 있죠.


! 타임스탬프(timestamp)를 사용하여 초 단위로 얻기
필요한 값이 밀리세컨드가 아닌 세컨드... 초 단위인 경우 아래와 같이 수정해서 사용할 수 있습니다.

timestampSecond = Math.floor(+ new Date() / 1000);
]]> nuno 2021-02-01T13:12:30+09:00 CSS filter Property http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1300

Example

Change all images to black and white (100% gray):

img {
  filter: grayscale(100%);
}
Try it Yourself »

Tip: More "Try it Yourself" examples below.

Definition and Usage

The filter property defines visual effects (like blur and saturation) to an element (often <img>).

Default value:none
Inherited:no
Animatable:yes. Read about animatableTry it
Version:CSS3
JavaScript syntax:object.style.filter="grayscale(100%)"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- specify the first version that worked with a prefix.

Property
filter53.0
18.0 -webkit-		13.035.09.1
6.0 -webkit-		40.0
15.0 -webkit-

Note: Older versions of Internet Explorer (4.0 to 8.0) supported a non-standard "filter" property that has been deprecated. This was mostly used for opacity when needed support from IE8 and down.

CSS Syntax

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Tip: To use multiple filters, separate each filter with a space (See "More Examples" below).

Filter Functions

Note: The filters that use percentage values (i.e. 75%), also accept the value as decimal (i.e. 0.75).

FilterDescriptionPlay it
noneDefault value. Specifies no effectsPlay it »
blur(px)Applies a blur effect to the image. A larger value will create more blur.

If no value is specified, 0 is used.		Play it »
brightness(%)Adjusts the brightness of the image.

0% will make the image completely black.
100% (1) is default and represents the original image.
Values over 100% will provide brighter results.		Play it »
contrast(%)Adjusts the contrast of the image.

0% will make the image completely black.
100% (1) is default, and represents the original image.
Values over 100% will provide results with more contrast.		Play it »
drop-shadow(h-shadow v-shadow blur spread color)Applies a drop shadow effect to the image.

Possible values:
h-shadow - Required. Specifies a pixel value for the horizontal shadow. Negative values place the shadow to the left of the image.

v-shadow - Required. Specifies a pixel value for the vertical shadow. Negative values place the shadow above the image.

blur - Optional. This is the third value, and must be in pixels. Adds a blur effect to the shadow. A larger value will create more blur (the shadow becomes bigger and lighter). Negative values are not allowed. If no value is specified, 0 is used (the shadow's edge is sharp).

spread - Optional. This is the fourth value, and must be in pixels. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
Note: Chrome, Safari and Opera, and maybe other browsers, do not support this 4th length; it will not render if added.

color - Optional. Adds a color to the shadow. If not specified, the color depends on the browser (often black).

An example of creating a red shadow, which is 8px big both horizontally and vertically, with a blur effect of 10px:

filter: drop-shadow(8px 8px 10px red);

Tip: This filter is similar to the box-shadow property.		Play it »
grayscale(%)Converts the image to grayscale.

0% (0) is default and represents the original image.
100% will make the image completely gray (used for black and white images).

Note: Negative values are not allowed.		Play it »
hue-rotate(deg)Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted. 0deg is default, and represents the original image.

Note: Maximum value is 360deg.		Play it »
invert(%)Inverts the samples in the image.

0% (0) is default and represents the original image.
100% will make the image completely inverted.

Note: Negative values are not allowed.		Play it »
opacity(%)Sets the opacity level for the image. The opacity-level describes the transparency-level, where:

0% is completely transparent.
100% (1) is default and represents the original image (no transparency).

Note: Negative values are not allowed.
Tip: This filter is similar to the opacity property.		Play it »
saturate(%)Saturates the image.

0% (0) will make the image completely un-saturated.
100% is default and represents the original image.
Values over 100% provides super-saturated results.

Note: Negative values are not allowed.		Play it »
sepia(%)Converts the image to sepia.

0% (0) is default and represents the original image.
100% will make the image completely sepia.

Note: Negative values are not allowed.		Play it »
url()The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element. Example:

filter: url(svg-url#element-id)
initialSets this property to its default value. Read about initial
inheritInherits this property from its parent element. Read about inherit

More Examples

Blur Example

Apply a blur effect to the image:

img {
  filter: blur(5px);
}
Try it Yourself »

Blur Example 2

Apply a blurred background image:

img.background {
  filter: blur(35px);
}
Try it Yourself »

Brightness Example

Adjust the brightness of the image:

img {
  filter: brightness(200%);
}
Try it Yourself »

Contrast Example

Adjust the contrast of the image:

img {
  filter: contrast(200%);
}
Try it Yourself »

Drop Shadow Example

Apply a drop shadow effect to the image:

img {
  filter: drop-shadow(8px 8px 10px gray);
}
Try it Yourself »

Grayscale Example

Convert the image to grayscale:

img {
  filter: grayscale(50%);
}
Try it Yourself »

Hue Rotation Example

Apply a hue rotation on the image:

img {
  filter: hue-rotate(90deg);
}
Try it Yourself »

Invert Example

Invert the samples in the image:

img {
  filter: invert(100%);
}
Try it Yourself »

Opacity Example

Set the opacity level for the image:

img {
  filter: opacity(30%);
}
Try it Yourself »

Saturate Example

Saturate the image:

img {
  filter: saturate(800%);
}
Try it Yourself »

Sepia Example

Convert the image to sepia:

img {
  filter: sepia(100%);
}
Try it Yourself »

Using Multiple Filters

To use multiple filters, separate each filter with a space. Notice that the order is important (i.e. using grayscale() after sepia() will result in a completely gray image):

img {
  filter: contrast(200%) brightness(150%);
}
Try it Yourself »

All Filters

A demonstration of all filter functions:

.blur {
  filter: blur(4px);
}

.brightness {
  filter: brightness(0.30);
}

.contrast {
  filter: contrast(180%);
}

.grayscale {
  filter: grayscale(100%);
}

.huerotate {
  filter: hue-rotate(180deg);
}

.invert {
  filter: invert(100%);
}

.opacity {
  filter: opacity(50%);
}

.saturate {   filter
]]> 최고관리자 2020-08-10T10:12:12+09:00 자식창에서 부모창의 자바스크립트 호출 http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1299 1. 팝업

<script>

opener.parent.함수명();

</script>


2. 아이프레임

<script>

top.함수명();

</script>


3. frameset

<script>

parent.frmes["프레임이름"].함수명();

</script>

]]> nuno 2020-02-12T17:24:46+09:00 jquery 이미지 엑박 또는 없을때 대체 이미지 처리 http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1298 <script>

$(document).ready(function() {

    $('img').on("error", function () {

        $(this).attr("src", "img/noimg.png");

    });

});

</script>

]]> nuno 2020-02-12T14:27:25+09:00 [Javascript] 정규식 체크 예제 http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1297 http://blog.naver.com/PostView.nhn?blogId=ytj0116&logNo=220537763383 



모든 공백 체크 정규식
var regExp = /\s/g;

 

숫자만 체크 정규식
var regExp = /^[0-9]+$/;


이메일 체크 정규식
var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;


핸드폰번호 정규식
var regExp = /^\d{3}-\d{3,4}-\d{4}$/;


일반 전화번호 정규식
var regExp = /^\d{2,3}-\d{3,4}-\d{4}$/;


아이디나 비밀번호 정규식 
var regExp = /^[a-z0-9_]{4,20}$/;


휴대폰번호 체크 정규식 
var regExp = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;

 

##############  정규표현식

1. 확장문자 (: backslash)
    - s : 공백 문자(스페이스, 탭, 폼 피드, 라인 피드)
 
    - b : 단어의 경계
    - B 이를 제외한 모든 문자 매칭
 
    - d : 숫자
    - D : 숫자가 아닌 문자 [^0-9] 와 동일
 
    - w : 알파벳, 숫자로 된 문자, 밑줄 기호(_) [A-Za-z0-9]
    - W : w의 반대 문자 [^A-Za-z0-9]
 
    - 특수문자 : 특수문자 자체를 의미 예) + (+ 기호 자체)
 
2. 특수문자
    - * : 0회 이상 반복
    - + : 1회 이상 반복
    - ? : 0 또는 1개의 문자 매칭
    - . : 정확히 1개 문자 매칭
 
3. 플래그
    - g : 전역매칭
    - i : 대소문자 무시
    - m : 여러 줄 매칭
 
4. 기타
    - () : 괄호로 묶인 패턴은 매칭된 다음, 그 부분을 기억한다.
    - $1,...,$9 : 괄호로 갭처한 부분 문자열이 저장 됨.
    - | : ~또는~
    - {} : 반복 횟수


##############  간단한 정규 표현식
var re = /a/         --a 가 있는 문자열
var re = /a/i        --a 가 있는 문자열, 대소문자 구분 안함
var re = /apple/    -- apple가 있는 문자열
var re = /[a-z]/    -- a~z 사이의 모든 문자
var re = /[a-zA-Z0-9]/    -- a~z, A~Z 0~9 사이의 모든 문자
var re = /[a-z]|[0-9]/  -- a~z 혹은 0~9사이의 문자
var re = /a|b|c/   --  a 혹은 b 혹은 c인 문자
var re = /[^a-z]/  -- a~z까지의 문자가 아닌 문자("^" 부정)
var re = /^[a-z]/  -- 문자의 처음이 a~z로 시작되는 문장
var re = /[a-z]$/  -- 문자가 a~z로 끝남


상기에 정의된 간단한 표현식을 아래에 넣어 직접 해 보시기 바랍니다.
var str = "sample string";
re.test(str)?"true":"false";

* 특수문자('''', ''^'', ''$'', ''*'', ''+'', ''?'', ''.'', ''('', '')'', ''|'', ''{'', ''}'', ''['', '']'')를 검색할 경우는 '''' 를 넣는다.

 

##############  간단한 응용예제
 
 
var re = /s$/;          -- 공백체크
var re = /^ss*$/;   -- 공백문자 개행문자만 입력 거절
var re = /^[-!#$%& amp;'*+./0-9=?A-Z^_a-z{|}~]+@[-!#$%&'*+/0-9=?A-Z^_a-z{|}~]+.[-!#$%& amp;'*+./0-9=?A-Z^_a-z{|}~]+$/; --이메일 체크
var re = /^[A-Za-z0-9]{4,10}$/ -- 비밀번호,아이디체크 영문,숫자만허용, 4~10자리
var re = new RegExp("(http|https|ftp|telnet|news|irc)://([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)","gi") -- 홈페이지 체크

var re = "<[^<|>]*>";  -- 태그제거 
var re = /[<][^>]*[>]/gi;-- 태그제거 
str = str.replace(RegExpTag,""); 

var RegExpJS = "<script[^>]*>(.*?)</script>";  -- 스크립트 제거  
str = str.replace(RegExpJS,""); 

var RegExpCSS = "<style[^>]*>(.*?)";  -- 스타일 제거  
str = str.replace(RegExpCSS,""); 

var RegExpHG = "(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/)";  -- 한글 제거  
str = str.replace(RegExpHG,"");  
 
var RegExpDS = /<!--[^>](.*?)-->/g;   -- 주석 제거  
str6 = str.replace(RegExpDS,""); 

var regExp = /[a-z0-9]{2,}@[a-z0-9-]{2,}.[a-z0-9]{2,}/i; --이메일 체크


## 기타 응용
re = new RegExp("^@[a-zA-Z0-9]+s+","i");//문장의 처음이 @이고 문자가 1나 이상 있으면 ok

 

기타 상기와 동일하나 약간씩 다른 샘픔
영숫자 조합책크
if ((new RegExp(/[^a-z|^0-9]/gi)).test(frm.loginid.value)) {
    alert("ID는 영숫자 조합만 사용하세요"); 
    frm.loginid.focus(); 
}

홈페이지 주소 책크
 function chk(v){
  str='';
  re = new RegExp("^http://","i");  
  re.test(v)?str='y':str='n';
  alert(str);
 }

hanmail인지를 책크
 function chk(v){
  str='';
  re = new RegExp("hanmail.net","i");  
  re.test(v)?str=true:str=false;
  return str
 }

//본문내에서 도메인 구하기
var patt = /(http(s)?://)?w+(.w+)+/gi;
      var result = (aa.value.match(patt));

//본문내에서 url구하기
상기와 유사 var patt = /(http(s)?://)?w+(.w+).S*-gi;

########### 정규식 메소드 및 사용법

참조 http://eknote.tistory.com/1251
참조 http://www.javascriptkit.com/javatutors/redev3.shtml
RegExp.exec(string)
RegExp.test(string)
String.match(pattern)
String.search(pattern)
String.replace(pattern,string)
String.split(pattern)

 

 

 

 

 

 

 

* 특수문자 검증 및 제거

function regExp(){  
 //특수문자 검증 start
 var str = "2011-12-27";
 var regExp = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi
 if(regExp.test(str)){
  //특수문자 제거
  var t = str.replace(regExp, "")
  alert("특수문자를 제거했습니다. ==>" + t)
 }else{
  alert("정상적인 문자입니다. ==>" + str)
 }
 //특수문자 검증 end
}

 

 

* 닉네임 체크 - 특문 제외 2자 ~ 20자

var pattern = /^[\w\Wㄱ-ㅎㅏ-ㅣ가-힣]{2,20}$/;

[\w]는 [A-Za-z0-9_] 이다
[\W]는 \w를 제외한 특수문자들이다.
[ㄱ-ㅎ] 은  ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎ
[ㅏ-ㅣ]는 ㅏㅑㅓㅕㅗㅛㅜㅠㅡㅣ
[가-힣]는 가나다라~~타파하 ~ 기니디리~ 티피히 ~ 각낙닥락 ~ 틱픽힉 ~ 깋닣딯맇 ~ 팋핗힣  이 된다.


즉 그냥 모든 문자열에 대한 {2,20} 글자 수 체크가 된다.

 

 

 

****

 

var pattern = 정규식;
var testee = "테스트 스트링";
var true_or_false = pattern.test( testee);  // 정규식 필터를 통과하면 true, 아니면 false 리턴.

다른 방법들도 있는데 나는 그냥 위와 같이 사용중이다.
아래는 내가 사용하는 정규식 몇 가지 예제..

1) 정수와 소수점 달고다니는 수들만 통과시키는 필터. 예를 들어 '12' '12.123' '-0.571' '-8100' 등에 대해 true를 리턴하고 나머지는 false 리턴.
 
var pattern =  /^[-]?\d+(?:[.]\d+)?$/;
return pattern.test( testee);

1-2) 위의 필터에서 좀더 조건을 추가해서, 양수면서 최대 소수점 2자리 이하까지만 통과시키는 필터. 예를 들어 12.23, 0.41, 51 등에는 true를 리턴하고, -12, -9.43, 1.234 등에는 false를 리턴하는 필터.
var pattern = /^\d+(?:[.]?[\d]?[\d])?$/;
return pattern.test( testee);

2) 숫자 및 x, X, P, E 만 포함한 스트링만 통과시키는 필터. 
예를 들어, 
x123 : true
XPE : true
125 : true
1234O : false
pXP : false

var pattern = /[^1234567890xXPE]/;
return !(pattern.test( testee));

3) 문자 전체에서 특수문자를 하나라도 포함하지 않아야만 함
예를 들어, 
@123 : false
12Hello5 : true
!!! : false

var pattern = /[^\w\s]/i;
return !(pattern.test( testee));

4) 다음과 같은 형식만 통과함. Q로 시작하면서, 0000~9999 까지의 숫자만 Q 뒤에 달고 있어야 함. 
즉, 
Q0001, Q0002, Q1234, Q9999  : true
Q00, Q194, Q1  : false
Q0001A  : false
QUESTION : false

var pattern = /^Q[0-9][0-9][0-9][0-9]$/;
return pattern.test( testee);


5) 정규식에서 g 플래그를 쓸 때 주의해야 한다. 최근에 매칭한 곳에서부터 다시 정규식 검사를 시작하는 속성이 있다.

이것때문에 다음 문제가 일어난다. 연속적으로 한 스트링에 대해 정규식 테스팅을 하면, 처음에는 필터가 잘 동작하다가 나중에는 통과하지 말아야 할 조건을 가진 스트링이 정규식 패턴을 통과했다고 나오게 된다. 구글에서 'regex g flag consecutive' 등으로 검색하면 이 문제로 매우 많은 질문과 답이 나온다. 해결 방법은.. 난 g 플래그 대신 i 플래그를 줘서 해결했다. 아래 링크도 도움이 될 것이다.

http://stackoverflow.com/questions/15610251/why-pattern-testname-opposite-results-on-consecutive-calls
http://stackoverflow.com/questions/6739136/consecutive-calls-to-regexp-test-fail-for-pattern-with-global-option


6) 문자열 양 끝에 공백문자를 없애 주는 정규식. 예를 들어 "   hi hello! "; 를 "hi hello!"; 로 바꿔 주는 코드.
(출처 : http://stackoverflow.com/questions/3000649/trim-spaces-from-start-and-end-of-string)

function trim_whitespace( str) 
{
    return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}


7) "[192.244.1.123]" 같은 string에서 안의 ip부분만 빼낸다("192.244.1.123" 을 빼내는 작업)
function main()
{
    var regex = /\[([.\d]+)]/;
    var str = "[192.244.1.123]";
    var res = regex.exec( str);
    
    // print res[1] = "192.244.1.123";
}

]]> nuno 2019-12-19T10:47:36+09:00 div 순서 변경 (jquery 드래그 방식) http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1296 jQuery UI 이용 (https://jqueryui.com/sortable/)


<style>

#sortWrap {

padding: 10px;

}

#sortWrap div {

margin: 10px;

padding: 10px 0 10px 20px;

background-color: #FFF;

border: 1px solid #ddd;

cursor: ns-resize;

}

</style>


<script>

$("#sortWrap").sortable({

axis: "y",

containment: "parent",

update: function (event, ui) {

var order = $(this).sortable('toArray', {

attribute: 'data-order'

});

console.log(order);

}

});

</script>


<div id="sortWrap">

<div data-order=1>1</div>

<div data-order=2>2</div>

<div data-order=3>3</div>

<div data-order=4>4</div>

<div data-order=5>5</div>

</div>


]]> nuno 2019-10-04T17:39:06+09:00 자바스크립트 javascript number_format http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1295 Formatting numbers in JavaScript

Overview of formatting numbers in JavaScript

JavaScript doesn't have many built-in methods to format numbers. Most of the time customized code needs to be used. Refer below for a couple rounding methods that JavaScript offers, then next up is some custom code I wrote to do more advanced formatting.

Round to a certain number of places

For rounding decimals you can use the built-in JavaScript methods toFixed or toPrecision.

var num = 10;
var result = num.toFixed(2); // result will equal 10.00

num = 930.9805;
result = num.toFixed(3); // result will equal 930.981

num = 500.2349;
result = num.toPrecision(4); // result will equal 500.2

num = 5000.2349;
result = num.toPrecision(4); // result will equal 5000

num = 555.55;
result = num.toPrecision(2); // result will equal 5.6e+2

Learn more

Add commas

This functionality is not built into JavaScript, so custom code needs to be used. The following is one way of adding commas to a number, and returning a string.

function addCommas(nStr)
{
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}
	return x1 + x2;
}

Learn more

Multi-functional number format script

  • commas (configurable digit grouping separators and decimal symbols)
  • certain decimal precision that leave trailing zeros
  • various formats for currency and negative values
  • input can be a string that's already formatted

Learn more

Interactive example

Syntax information

]]> nuno 2019-09-30T16:18:19+09:00 CSS를 말 줄임 방법(text-overflow:ellipsis) 속성 이용 http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1293

출처 : https://goodleedw.blog.me/221465664525



정의 및 이용방법

text-overflow 속성은 표시되지 않는 오버플로 된 콘텐츠를 사용자에게 알려야하는 방법을 지정합니다. 잘라내거나 줄임표 (...)를 표시하거나 사용자 정의 문자열을 표시 할 수 있습니다.

​

텍스트 오버플로에는 다음 속성이 모두 필요합니다.

* white-space: nowrap;

* overflow: hidden;

​

CSS Syntax

text-overflow: clip|ellipsis|string|initial|inherit;

값

설명

clip

기본 값이며, 텍스트를 자를 수 없다.

ellipsis

잘린 텍스트를 줄임표 ("...")로 나타낸다.

string

클립 된 텍스트를 나타내기 위해 주어진 문자열을 렌더링한다.

한줄처리

div { width:200px; height:20px; text-overflow:ellipsis; (...처리) overflow:hidden; // 글자 넘치는 것을 자름 white-space:nowrap; //줄바꿈 안되게 함 }

IE6,IE7, Opera / iE8,IE9 / Chrome, Firefox 이렇게 동일하게 보여졌습니다.

IE8에서 고딕체 국문과 영문은 각각 다르게 보여졌습니다.

​

여러줄 처리

{ max-height:54px; // 보여줄 높이까지(3줄의 높이를 입력해야한다) word-wrap:break-word //잘라버릴 글자 단어 단위로 만들어준다) display:block; display:-webkit-box; -webkit-line-clamp:3; //보여줄 줄 갯수 -webkit-box-orient:vertical; //박스의 방향 설정 overflow:hidden; text-overflow:ellipsis; }

이 여러줄(line-clamp)은 모든 브라우저에서 지원되지 않는다.

line-clamp를 사용하기 위해서는 text-overflow:ellipsis와 display:-webkit-box​가 있어야한다.

자세한건 caniuse에서 보시면 됩니다.

]]> nuno 2019-07-24T15:24:25+09:00 JAVASCRIPT / JQUERY 를 이용한 ID, NAME, CLASS 값 가져오기 http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1292 출처 : https://codethief.io/ko/get-id-name-and-class-values-using-javascript-jquery/


jQuery 사용시


//1. By id

var name_by_id = $('#test_id').attr('name');

var class_by_id = $('#test_id').attr('class');


//2. By class

var name_by_class = $('.test_class').attr('name');

var id_by_class = $('.test_class').attr('id');


//3. By name

var id_by_name = $('[name="test_name"]').attr('id');

var class_by_name = $('[name="test_name"]').attr('class');




javascript 사용시


//1. By id

var name_by_id = document.getElementById("test_id").getAttribute('name');

var class_by_id = document.getElementById('test_id').ClassName;


//2. By class

var name_by_class = document.getElementsByClassName('test_class')[0].getAttribute('name');

var class_by_class = document.getElementsByClassName('test_class')[0].id;


//3. By name

var id_by_name = document.getElementsByName('test_name')[0].id;

var class_by_name = document.getElementsByName('test_name')[0].className;



getElementById의 element는 단수형입니다. class와 name은 복수형이고요. 주의하세요

 class나 name을 중복해서 사용하시는 경우 index값 설정에 주의해서 접근하셔야합니다

]]> nuno 2019-07-18T15:09:07+09:00 CSS ellipsis http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1291 .한줄 자르기 { 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
}

 

.두줄 자르기 {
line-height: 15px; //줄간의 간격
max-height: 5em;     //최대 높이            
overflow: hidden;                
display: -webkit-box;
-webkit-line-clamp: 2; //자를 줄의 수
-webkit-box-orient: vertical;
}

]]> nuno 2019-07-11T09:54:25+09:00 자동 스크롤 스크립트 http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1290

긴글을 읽을때 자동으로 스크롤바를 내려서 글의 포커싱을 바꿔준다.

//body영역 (onload를 통해서 myScr() 함수를 자동으로 호출하도록설정) <body onload="myScr()"> <p> <br><br> My Home Page <br> //글이 짧으면 확인이 어렵기때문에 글의 길이를 웬만하면 길게해주도록 하자 기승간 2017년 7월 25일 자동 스크롤 예제 만들다. 기승간 2017년 7월 25일 자동 스크롤 예제 만들다. 기승간 2017년 7월 25일 자동 스크롤 예제 만들다. 기승간 2017년 7월 25일 자동 스크롤 예제 만들다. 기승간 2017년 7월 25일 자동 스크롤 예제 만들다. 기승간 2017년 7월 25일 자동 스크롤 예제 만들다. 기승간 2017년 7월 25일 자동 스크롤 예제 만들다. 기승간 2017년 7월 25일 자동 스크롤 예제 만들다. 기승간 2017년 7월 25일 자동 스크롤 예제 만들다. </p> </body>
//스크립트 영역 <script type="text/javascript"> myY = 0; //초기 포커싱위치를 0으로 설정해주도록한다 function myScr() { window.scroll(0,myY); //스크롤바의 위치 설정 myY = myY + 2; //y의 값을 점점 내리도록한다 if(myY ==300) myY = 0; //만약 y축의 값이 300이 되면 초기화를 하도록설정 setTimeout("myScr()",100); //0.1초마다 이 함수를 반복하도록설정 } </script>

[출처] 자바 스크립트 : 자동 스크롤 만들기|작성자 기승간

]]> nuno 2019-06-04T15:25:19+09:00 css 이미지 일부분만 보여주기 http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1289 개요

clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다.

  • 기본값 : auto
  • 상속 : No
  • 애니메이션 : Yes
  • 버전 : CSS Level 2

문법

1
clip: auto | shape | initial | inherit
  • auto : 요소의 모든 부분이 나옵니다.
  • shape : 특정 부분이 나오도록 합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

특정 부분만 나오게 할 때는 다음과 같은 코드로 나오는 부분을 정합니다.

1
rect( <top>, <right>, <bottom>, <left> )
  • <top> : 위를 기준으로 시작하는 위치
  • <right> : 왼쪽을 기준으로 끝나는 위치
  • <bottom> : 위를 기준으로 끝나는 위치
  • <left> : 왼쪽을 기준으로 시작하는 위치

position 속성값이 absolute 또는 fixed일 때만 적용됩니다.



예제

이미지의 일부만 보여주는 예제입니다. 사용한 이미지의 크기는 450x300입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        margin: 0px;
      }
      .c {
        position: absolute;
        clip: rect( 20px, 220px, 220px, 20px );
      }
    </style>
  </head>
  <body>
    <img src="images/abc.jpg" class="c">
  </body>
</html>

브라우저 지원

  • Chrome : 1.0+
  • Firefox : 1.0+
  • Internet Explorer : 8.0+
  • Opera : 7.0+
  • Safari : 1.0+



CSS로 이미지의 원하는 부분만 잘라서 보여주는 방법 (Image Clipping)


CSS로 이미지의 원하는 부분만 잘라서 보여주는 방법 (Image Clipping)


css를 활용하여 하나의 이미지에서 원하는 부분만 잘라서 보여주는 방법을 소개 해드릴까 합니다.

 

위 방법은 Image Clipping 이라는 기술인데요 background-image 태그를 사용하지 않고 img 태그를 이용한

방법으로 하였습니다.

background-image 를 활용하게 되면 익스플로러에서 인쇄를 할때 이미지가 출력이 안될 수 있다는 단점이 있습니다만

페이지를 모두 출력해서 사용 하는 것은 아니니 크게 상관은 없겠죠?

 

css

 .menu { width: 500px; height: 500px; position: relative; top: 0; left: -100px }
.menu img { position: absolute; clip: rect(0 299px 29px 193px) }

 

 

 html

 <div class="menu">
     <img src="menu.png" alt="menu" title="menu" width="490" height="490" />
</div>




 

]]> nuno 2019-03-29T15:40:27+09:00 [jQuery] preventDefault(), stopPropagation() http://nuno21.net/bbs/board.php?bo_table=html&amp;wr_id=1288 preventDefault()

preventDefault 는 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드

<a>,<input>,<textarea>의 기본 동작을 막을 수 있다.

a태그는 적용된 href 링크값으로 페이지 이동을 해주는 기본 적인 기능을 가짐

a태그를 클릭 했을 때 preventDefault() 메서드를 실행시키면 페이지 이동을 하는 기본 기능을 막는 것

$('a[href]').on('click', function (event) {

        var href = $(this).attr('href');

        if (href == "" || href == "#" || href.toLowerCase() == 'javascript:' || href.toLowerCase() == 'javascript:void(0)') {

            event.preventDefault();

        }

    });

a태그의 기본적인 기능인 페이지 이동 이벤트를 중지하는 스크립트



stopPropagation()

이벤트가 상위 DOM으로 전달, 전파(1)되지 않도록 하는 메서드.

preventDefault()와의 차이점은 전파만 막아주는 것이다.

preventDefault()처럼 기본 이벤트를 막아주진 않는다.


1. 전달, 전파

ㄴ>1-1 버블링

     자식 el에서 발생된 이벤트가 부모 el순으로 전달 되는 현상

ㄴ>1-2 캡쳐링

     부모 el에서 발생된 이벤트가 자식 el순으로 전달 되는 현상



이벤트 중단에 사용 하는 방식 4가지

1. event.preventDefault()

현재 이벤트의 기본 동작 중단

2. event.stopPropagation()

현재 이벤트가 상위로 전파되지 않도록 중단

3. event.stopImmediatepropagation()

현재 이벤트가 상위 && 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중단

4. return false

jQuery를 사용할 때 위의 두개를 모두 수행한 것과 같고,

jQuery를 사용하지 않을 때는 event.preventDefault()와 같다.


[출처] [jQuery] preventDefault(), stopPropagation()|작성자 랑코



]]> nuno 2018-08-22T15:53:28+09:00