'JavaScript' 카테고리의 글 목록

[jQuery || JavaScript] <select>box change 강제 선택하기 총 정리

2020.04.25
[jQuery || JavaScript] 동적 생성된 태그에 이벤트 주기(feat.append)

2020.03.31
[jQuery || JavaScript] HTML + jQuery Event 총 정리

2020.03.31
[jQuery || JavaScript] title 속성 다루기 정리 및 버그 해결

2020.03.25
[JavaScript] 날짜 관련 유용 함수 총 정리(feat.String to Date)

2019.12.28
[jQuery] Class 관련 함수,문법 총 정리

2019.12.15
[jQuery || JavaScript] 비밀번호 유효성 검사 문법 총 정리(feat.정규식)

2019.12.11
[JavaScript] JSON 데이터 다루기 문법 총 정리
6

2019.11.15

JSP

<select id="dynamicId">
<option value="apple">사과</option>
<option value="kiwifruit">키위</option>
<option value="Korean melon">참외</option>
</select>

JavaScript

$(target).val(option value).trigger('change');

$('#dynamicId').val('kiwifruit').trigger('change');

실전 예제

목표 : 페이지 진입 시 셀렉트 박스에 두 번째, 세 번째 값을 선택되어 있게 만드는 것.

JSP

<select id="dynamicId">
<option value="apple">사과</option>
<option value="kiwifruit">키위</option>
<option value="Korean melon">참외</option>
</select>

<p id="resultId"></p>

<select class="dynamicClass">
<option value="apple">사과</option>
<option value="kiwifruit">키위</option>
<option value="Korean melon">참외</option>
</select>

<p id="resultClass"></p>

JavaScript

setTimeout(function(){
test();
},0)

function test(){
	
	var html = '';
	
	$('#dynamicId').val('kiwifruit').trigger('change');
	
	html = $('#dynamicId').val();
	
	$('#resultId').append(html);

	$('.dynamicClass').val('Korean melon').trigger('change');
	
	html = $('.dynamicClass').val();
	
	$('#resultClass').append(html);
	
}

View

※ 주의 : test() 메소드를 그냥 실행하면 적용되지 않습니다. setTimeout으로 감싸줘야 합니다.

저작자표시

'JavaScript' 카테고리의 다른 글

[jQuery \|\| JavaScript] 동적 생성된 태그에 이벤트 주기(feat.append) (0)	2020.03.31
[jQuery \|\| JavaScript] HTML + jQuery Event 총 정리 (0)	2020.03.31
[jQuery \|\| JavaScript] title 속성 다루기 정리 및 버그 해결 (0)	2020.03.25
[JavaScript] 날짜 관련 유용 함수 총 정리(feat.String to Date) (0)	2019.12.28
[jQuery] Class 관련 함수,문법 총 정리 (0)	2019.12.15

동적으로 생성된 태그의 이벤트를 걸면 뜻대로 동작하지 않는다.

예를 들면

JSP

<script type="text/javascript">

$(document).ready(function(){
	
	$("#staticSB").change(function() {
	      alert(" 정적 변경 감지");
	   })
       
})

function appendTest(){
	
	var html = '';
	
	html += '<select id="staticSB">';
	html += '<option>dynamic1</option>';
	html += '<option>dynamic2</option>';
	html += '<option>dynamic3</option>';
	html += '<option>dynamic4</option>';
	html += '<option>dynamic5</option>';
	html += '</select>';
	
	$("#parent").empty();
	$("#parent").append(html);
	
}


</script>

</head>
<body>
<button type="button" onclick="appendTest()">append?</button>
<div id="parent">

</div>
</body>
</html>

View

이미 'staticSB'라는 id을 가진 selectBox에 change 메서드를 걸어놨지만,

동적으로 생성된 'staticSB'라는 id를 가진 selectBox가 아무런 동작도 하지 않는다.

원인

1. 처음 페이지가 로드될 때 (클라이언트가 페이지에 접속할 때)

2.

$("#staticSB").change(function() { alert(" 정적 변경 감지"); })

이 부분이 ready 함수 안에 있기 때문에 제일 먼저 실행하게 된다.

2.'staticSB'라는 id를 가진 태그를 찾는다.

3.하지만 'staticSB'라는 id는 아직 존재하지 않기 때문에 찾지 못한다.

4. 결국 찾지 못한 JavaScript는 포기하고 이벤트를 연결하지 않는다.

해결

.on

.on : 간단하게 말해서 특정 이벤트를 실행할 때 그 실행하는 순간, 바로 그 자리에서 찾아 연결해주는 메서드

이벤트 바인딩 메서드 변화

 .bind() -> .live() -> .delegate() -> .on()

조건

jQuery 1.7 이상

문법

.on (events [, selector] [, data], handler)

문법 예시01

$(document).on('change','#staticSB',function(){
		alert(" 동적 변경 감지");
	})

문법 예시02

$("#staticP").on({ "click": function() { alert("click!"); },
		"mouseenter": function() { alert("mouseenter"); }, 
		"mouseleave": function() { alert("mouseleave"); }, 
		"copy": function() {alert("copy")},
		"cut": function() {alert("cut")}
		});

실전 예시

<script type="text/javascript">

$(document).ready(function(){

$(document).on('change','#staticSB',function(){
		alert(" 동적 변경 감지");
	}) 

})

function appendTest(){
	
	var html = '';
	
	html += '<select id="staticSB">';
	html += '<option>dynamic1</option>';
	html += '<option>dynamic2</option>';
	html += '<option>dynamic3</option>';
	html += '<option>dynamic4</option>';
	html += '<option>dynamic5</option>';
	html += '</select>';
	
	$("#parent").empty();
	$("#parent").append(html);
	
}


</script>

</head>
<body>
<button type="button" onclick="appendTest()">append?</button>
<div id="parent">

</div>
</body>
</html>

View

이렇게 잘 작동하는 것을 볼 수 있습니다.

.on 메소드엔 다양한 이벤트를 걸 수 있습니다.

[jQuery || JavaScript] HTML + jQuery Event 총 정리

Event jQuery 홈페이지에 .on 메소드를 보던 중 .on (events [, selector] [, data], handler) 이런 식으로 나와있었다. 여기서 말하는 events 칸엔 뭘 적는 걸까? 그렇다 바로 그것을 알아보겠습니다. (무조건 .o..

java119.tistory.com

저작자표시

'JavaScript' 카테고리의 다른 글

[jQuery \|\| JavaScript] <select>box change 강제 선택하기 총 정리 (0)	2020.04.25
[jQuery \|\| JavaScript] HTML + jQuery Event 총 정리 (0)	2020.03.31
[jQuery \|\| JavaScript] title 속성 다루기 정리 및 버그 해결 (0)	2020.03.25
[JavaScript] 날짜 관련 유용 함수 총 정리(feat.String to Date) (0)	2019.12.28
[jQuery] Class 관련 함수,문법 총 정리 (0)	2019.12.15

Event

jQuery 홈페이지에 .on 메소드를 보던 중

.on (events [, selector] [, data], handler)

이런 식으로 나와있었다.

여기서 말하는 events 칸엔 뭘 적는 걸까? 그렇다 바로 그것을 알아보겠습니다.

(무조건 .on 메소드만 이벤트를 쓸 수 있는 것이 아니라 이해를 돕기 위해 예시로 사용한 것입니다.)

자주 쓰는 jQuery Event

예시

jQuery

문법 1.$("#staticP").on({ "click": function() { alert("click!"); } });

문법 2.$(document).on('change','#staticSB',function(){ alert("change"); })

문법 3.$('#staticP').click(function() { $('#staticP').mouseleave(); });

jQuery 한 태그의 여러 이벤트 걸기

$("#staticP").on({ "click": function() { alert("click!"); },
		"mouseenter": function() { alert("mouseenter"); }, 
		"mouseleave": function() { alert("mouseleave"); }, 
		"copy": function() {alert("copy")},
		"cut": function() {alert("cut")}
		});

※주의 : 한 이벤트 문법이 끝날 때마다 ","(콤마)를 찍어야 한다.

마우스 관련

이벤트	설명
click	노드(elements)를 마우스 포인터로 눌렀다가 떼었을 때에 발생
dblclick	노드를 더블 클릭 했을 때에 발생
hover	mouseenter와 mouseleave 이벤트를 한 번에 bind 한다.
mousedown	노드 영역에서 마우스를 눌렀다가 떼었을 때에 발생
mouseenter	노드에 마우스가 진입했을 때에 발생(자식 노드에서는 이벤트를 감지 못함)
mouseleave	마우스가 노드에서 벗어났을 때에 발생
mousemove	노드 영역에서 마우스를 움직였을 때에 발생
mouseout	노드에서 마우스 포인터가 떠났을 때에 발생
mouseover	노드 영역에서 마우스를 올려놓았을 때 발생 (내부 노드까지 이벤트를 감지)
mouseup	마우스 포인터를 노드에 올려놓고 마우스 버튼을 눌렀다 떼었을 때에 발생
toggle	click 이벤트에 핸들러를 바인딩하고 클릭할 때마다 실행될 함수들을 차례대로 실행

폼 관련

이벤트	설명
blur	노드에서 포커스가 떠날 때에 발생
change	노드의 값이 변경될 때에 발생
focus	노드가 포커스를 획득했을 때에 발생
select	유저가 텍스트를 선택했을 때에 발생
submit	폼의 내용을 전송할 때에 발생

키보드 관련

이벤트	설명
keydown	해당 영역에서 키보드를 눌렀을 때에 발생
keypress	해당 영역에서 키보드를 계속 누르고 있을 때에 발생
keyup	해당 영역에서 키보드를 눌렀다가 떼었을 때 발생

문서 로딩 관련

이벤트	설명
ready	해당 페이지가 로딩되었을 때에(처음 읽힐 때에) 발생
unload	해당 페이지를 빠져나갈 때에 발생

웹 브라우저

이벤트	설명
resize	웹브라우저 윈도 사이즈의 변화가 있을 때
scroll	스크롤이 움직일 때에 발생

- 출처 : 란쯔 스토리

HTML Event

예시

jQuery

$("#staticP").on({
"copy": function() {alert("복사를 금지 합니다.")}, 
"cut": function() {alert("잘라내기를 금지 합니다.")} 
});

※주의 : jQuery로 사용 시 앞에 "on" 단어를 빼고 사용합니다.

HTML

<input type="text" oncopy="myFunction()" value="Try to copy this text">
<input type="text" oncut="myFunction()" value="Try to cut this text">

HTML 한 태그의 여러 개 함수 걸기

<button type="button" onclick="fun1(); fun2(); fun3();">

";"(세미콜론)으로 구분해서 함수를 여러개 연결 시킬 수 있다.

onabort	이미지의 다운로드를 중지할 때 (브라우저의 중지버튼)
onactivate	개체가 활성화될 때 발생 (태그의 기능이 작용할 때 발생하는 이벤트로 예를 들어 링크를 누를 경우 링크가 옮겨질때 발생하는 것을 감지하는 이벤트 핸들러)
onafterprint	문서가 출력되거나 혹은 출력하기 위해 출력미리보기를 한 후에 발생
onafterupdate	데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가 업데이트 되었을 때 발생(데이터 개체부분 참조)
onbeforeactivate	개체가 활성화 상태로 되기 바로 직전에 발생 (onactivate 참고)
onbeforecopy	선택 영역이 시스템의 클립보드로 복사되기 바로 직전에 발생
onbeforecut	선택 영역이 지워지기 바로 직전에 발생
onbeforedeactivate	부모 문서에서 현재 개체에서 다른 개체로 activeElement가 바뀔 때 발생 (activeElement는 개체를 지칭하는 예약어로도 쓰임)
onbeforeeditfocus	편집가능한 개체 내부에 포함된 개체가 편집활성화된 상태가 되거나 혹은 편집가능한 개체가 제어를 위해 선택될 때
onbeforepaste	시스템의 클립보드에서 문서로 붙여넣기 될 때 대상 개체에서 발생
onbeforeprint	문서가 출력되거나 혹은 출력하기 위해 출력미리보기 직전에 발생
onbeforeunload	페이지가 언로드되기 직전에 발생
onbeforeupdate	데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가 업데이트 되기전에 발생 (데이터 개체부분 참조)
onblur	개체가 포커스를 잃었을 때
onbounce	마퀴태그에서 alernate상태에서 스크롤이 양 사이드에서 바운드될 때 발생
oncellchange	데이터 제공 개체에서 데이터가 변화할 때 발생
onchange	개체 혹은 선택영역의 내용이 바뀔 때 발생
onclick	개체위에서 마우스의 왼쪽 버튼을 누를 때 발생
oncontextmenu	클라이언트 영역에서 사용자가 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴를 열 때 발생
oncontrolselect	사용자가 개체의 제어 영역을 만들 때 발생
oncopy	시스템의 클립보드에 선택영역 혹은 개체를 복사할 때 소스 개체로부터 발생
oncut	시스템의 클립보드에 선택영역 혹은 개체를 잘라낼때 소스 개체로부터 발생
ondataavailable	비정기적으로 데이터를 전달하는 데이터 소스 개체로부터 데이터가 도착할 때마다 정기적으로 발생
ondatasetchanged	데이터 소스개체의 변화에 의해 데이터가 노출된 상태로 될 때 발생
ondatasetcomplete	데이터 소스 개체로부터 모든 데이터가 유용한 상태로 표시될 때 발생
ondblclick	사용자가 개체에 더블클릭 할때 발생
ondeactivate	모 문서에서 현재 개체에서 다른 개체로 activeElement가 변할 때 발생
ondrag	드래그 상태가 지속되는 동안 소스 객체로부터 발생
ondragend	드래그 상태가 끝날 때 소스 객체로부터 발생
ondragenter	사용자가 개체를 드래그하여 드롭가능 위치로 지정된 영역으로 이동할 때 타갯 개체에서 발생
ondragleave	사용자가 개체를 드래그하여 드롭가능 위치로 지정된 영역을 떠날 때 타갯 개체에서 발생
ondragover	사용자가 개체를 드래그하여 드롭가능 위치로 지정된 영역내에서 드래그할 때 계속적으로 타갯 개체에서 발생
ondragstart	선택된 개체 혹은 텍스트 영역에서 사용자가 드래그를 시작할 때 발생
ondrop	드래그앤드롭 작용에서 상태가 진행되는 동안 개체가 타갯 개체에 드롭되었을 때 타갯 개체에서 발생
onerror	개체가 로드되는 동안 발생하는 이벤트
onerrorupdate	데이터 소스 개체 내에 데이터가 없데이트 되는 동안 에러가 발생할 때 데이터 영역 개체에서 발생
onfilterchange	비주얼 필터의 상태가 바뀌거나 트랜지션이 완료되었을 때 발생
onfinish	마퀴개체의 loop가 완료되었을 때 발생
onfocus	개체가 포커스를 받았을 때 발생
onfocusin	개체에 포커스가 셋팅되기 바로 직전 개체에 대해 발생
onfocusout	포커스가 다른 개체로 이동한 후에 포커스를 가고 있는 현재 개체에서 발생
onhelp	브라우저가 활성화 되어 있는 동안 F1키를 눌렀을 때
onkeydown	사용자가 키를 눌렀을 때
onkeypress	기능키를 제외한 키를 눌렀을 때 발생
onkeyup	사용자가 키를 놓았을 때 발생
onlayoutcomplete	소스 문서로 부터 콘텐드를 가지는 객체가 미리보기나 출력을 할때 현제 LayoutRect 개체를 모두 채우는 것이 끝났을 때 발생
onload	브라우저가 개체를 로드한 후에 발생
onlosecapture	개체가 마우스 캡쳐를 잃었을 때 발생
onmousedown	개체 위에 마우스 버튼을 누를 때 발생(좌우 어느 버튼이든)
onmouseenter	개체 안으로 마우스 포인터가 들어올 때 발생
onmouseleave	개체의 경계밖으로 마우스 포인터가 이동할 때 발생
onmousemove	개체위에서 마우스가 움직일 때 발생
onmouseout	개체밖으로 마우스 포인터가 빠져나갈 때 발생
onmouseover	개체위로 마우스 포인터가 들어올 때 발생
onmouseup	마우스가 개체위에 있는 동안 마우스를 누른 상태에서 해제될 때 발생
onmousewheel	마우스 휠이 돌아갈 때 발생
onmove	개체가 움직일 때 발생
onmoveend	개체가 움직임이 끝날 때 발생
onmovestart	개체가 움직이기 시작할 때 발생
onpaste	문서에 클립보드로부터 데이터가 전송될 때 타겟 개체에서 발생
onpropertychange	개체의 속성이 바뀔 때 발생
onreadystatechange	개체의 상태가 변화할 때 발생
onreset	Form 을 사용자가 리셋할 경우 발생
onresize	개체의 크기가 바뀔 때 발생
onresizeend	제어영역에서 개체의 크기가 사용자에 의해 변화가 끝날 때 발생
onresizestart	제어영역에서 개체의 크기가 사용자에 의해 변화되기 시작할 때 발생
onrowenter	데이터 소스 내에서 현재 열이 변화되거나 개체에 새로운 유용한 데이터가 입력될 때 발생
onrowexit	데이터 소스 콘트롤이 개체 내의 현재 열을 변화시킬 때 발생
onrowsdelete	레코드셋에서 열이 삭제될 때 발생
onrowsinserted	현재 레코드셋에 새로운 열이 추가된 후에 발생 (데이터 개체에서)
onscroll	사용자가 개체 내의 스크롤 바를 스크롤할 때 발생
onselect	현재 선택된 영역이 바뀔 때 발생
onselectionchange	문서의 선택 영역의 상태가 바뀔 때 발생
onselectstart	개체가 선택되기 시작할 때 발생
onstart	마퀴개체에서 루프가 매번 시작될 때 발생
onstop	사용자가 stop 버튼을 눌렀을 경우 혹은 페이지를 떠날 때 발생
onsubmit	폼이 전송되기 직전에 발생
onunload	개체가 언로드되기 직전에 발생

저작자표시

'JavaScript' 카테고리의 다른 글

[jQuery \|\| JavaScript] <select>box change 강제 선택하기 총 정리 (0)	2020.04.25
[jQuery \|\| JavaScript] 동적 생성된 태그에 이벤트 주기(feat.append) (0)	2020.03.31
[jQuery \|\| JavaScript] title 속성 다루기 정리 및 버그 해결 (0)	2020.03.25
[JavaScript] 날짜 관련 유용 함수 총 정리(feat.String to Date) (0)	2019.12.28
[jQuery] Class 관련 함수,문법 총 정리 (0)	2019.12.15

개념

title 속성이란?

a, link, img, blockquote 4가지 태그에서 많이 쓰이고, 앞에 태그에 따라 용도와 기능이 조금 달라집니다.

title 속성의 값은 [툴팁]으로 표시할 때 가장 많이 쓰입니다.

예시

<p id="p_tag" title="로그인 정보">환영합니다 ${sessionScope.loginInfo.nickname }님 
<a href="/jquery/logout">로그아웃</a></p>

이와 같이 마우스를 p 태그에 갖다대면 툴팁 같은 정보가 나온다.

이것이 바로 title 속성입니다.

~~(심지어 속성이름이 title이 아니라 tooltip으로 알고 계시는 분들도 있다.)~~

문법

<태그 title="들어갈 내용"></태그>

공통 예제 JavaScript 함수

function dynamictitleChange(index) {

		if (index == 1) {

			var titleValue = $("#titleValue").val();

			$("#p_tag").attr("title", titleValue);
			$("#titleValue").val('');

		} else if (index == 2) {

			$("#p_tag").attr("title", "대한민국만세");

		} else if (index == 3) {
			var msg = "dynamic? wow!";
			var html = '';

			html += '<p title='+day+'>move!</p>';

			$("#dynamic_tag").append(html);

		}

	}

공통 예제 HTML

<div id="dynamic_tag"></div>
<p id="p_tag" title="로그인 정보">환영합니다 ${sessionScope.loginInfo.nickname }님 
<a href="/jquery/logout">로그아웃</a></p>

상황 1.input 창에 내용을 title 속성으로 적용하기

소스

<input type="text" id="titleValue">
<button onclick="dynamictitleChange(1)">title input 값으로 변경하기</button>

결과

상황 2.title 속성의 값을 대한민국만세로 변경하기

소스

<button onclick="dynamictitleChange(2)">title 값을 '대한민국만세'로 바꾸기</button>

결과

상황 3.동적으로 title 속성이 담긴 태그 생성하기

<button onclick="dynamictitleChange(3)">동적 title 속성이 담긴 태그 생성하기</button>

결과

끝! 이 아니다. 상황 3의 결과가 조금 이상합니다. 저는 분명히 "dynamic? wow!"라고 했는데

띄어쓰기(공백) 부분부터는 잘려서 나오질 않습니다.

해결

쌍 따옴표(더블 쿼테이션 Double quotation)를 넣어줘야 합니다.

html += '<p title='+day+'>move!</p>'; (X)

//쌍 따옴표(더블 쿼테이션 Double quotation)를 넣어줘야 합니다.
html += '<p title="'+day+'">move!</p>'; (O)

결과

저작자표시

'JavaScript' 카테고리의 다른 글

[jQuery \|\| JavaScript] 동적 생성된 태그에 이벤트 주기(feat.append) (0)	2020.03.31
[jQuery \|\| JavaScript] HTML + jQuery Event 총 정리 (0)	2020.03.31
[JavaScript] 날짜 관련 유용 함수 총 정리(feat.String to Date) (0)	2019.12.28
[jQuery] Class 관련 함수,문법 총 정리 (0)	2019.12.15
[jQuery \|\| JavaScript] 비밀번호 유효성 검사 문법 총 정리(feat.정규식) (0)	2019.12.11

입력한 날짜(yyyyMMdd)가 유효한 날짜인지 검사

function is_valid_date(date_str)
{
    var yyyyMMdd = String(date_str);
    var year = yyyyMMdd.substring(0,4);
    var month = yyyyMMdd.substring(4,6);
    var day = yyyyMMdd.substring(6,8);

    if (!is_number(date_str) || date_str.length!=8)
        return false;

    if (Number(month)>12 || Number(month)<1)
        return false;

    if (Number(last_day(date_str))<day)
        return false;

    return true;
}

yyyy-MM-dd 날짜 문자열을 Date형으로 반환

function to_date2(date_str)
{
    var yyyyMMdd = String(date_str);
    var sYear = yyyyMMdd.substring(0,4);
    var sMonth = yyyyMMdd.substring(5,7);
    var sDate = yyyyMMdd.substring(8,10);

    //alert("sYear :"+sYear +"   sMonth :"+sMonth + "   sDate :"+sDate);
    return new Date(Number(sYear), Number(sMonth)-1, Number(sDate));
}

일 차이 : date2(일) - date1(일)

function between_date(date1, date2)
{   
    var y1970 = new Date(1970, 0, 1).getTime();
    var time1 = null;
    var time2 = null;

    if(date1.length > 8)
        time1 = to_date2(date1).getTime() - y1970;
    else
        time1 = to_date(date1).getTime() - y1970;
   
    if(date2.length > 8)
        time2 = to_date2(date2).getTime() - y1970;
    else
        time2 = to_date(date2).getTime() - y1970;

    var per_day = 1000 * 60 * 60 * 24;              // 1일 밀리초

    return Math.floor(time1/per_day) - Math.floor(time2/per_day);
}

yyyyMMdd 날짜 문자열을 Date형으로 반환

function to_date(date_str)
{
    var yyyyMMdd = String(date_str);
    var sYear = yyyyMMdd.substring(0,4);
    var sMonth = yyyyMMdd.substring(4,6);
    var sDate = yyyyMMdd.substring(6,8);

    return new Date(Number(sYear), Number(sMonth)-1, Number(sDate));
}

yyyyMMdd 날짜문자열을 gubun으로 포맷을 변경

function to_date_format(date_str, gubun)
{
    var yyyyMMdd = String(date_str);
    var sYear = yyyyMMdd.substring(0,4);
    var sMonth = yyyyMMdd.substring(4,6);
    var sDate = yyyyMMdd.substring(6,8);

    return sYear + gubun + sMonth + gubun + sDate;
}

Date형을 yyyyMMdd형의 문자열로 변환

function get_date_str(date)
{
    var sYear = date.getFullYear();
    var sMonth = date.getMonth() + 1;
    var sDate = date.getDate();

    sMonth = sMonth > 9 ? sMonth : "0" + sMonth;
    sDate  = sDate > 9 ? sDate : "0" + sDate;
    return sYear + sMonth + sDate;
}

Date형을 구분자로 구분된 형식의 날짜 문자열 변환

function get_date_str_gubun(date, gubun)
{
    var sYear = date.getFullYear();
    var sMonth = date.getMonth() + 1;
    var sDate = date.getDate();

    sMonth = sMonth > 9 ? sMonth : "0" + sMonth;
    sDate  = sDate > 9 ? sDate : "0" + sDate;
    return sYear + gubun + sMonth + gubun + sDate;
}

오늘 날짜를 yyyyMMdd형의 문자열로 변환

function get_today()
{
    return get_date_str(new Date());
}

주어진 날짜가 윤년인지를 검사

function is_leap_year(date_str)
{
    var year = date_str.substring(0,4);
    if (year%4 == 0)
    {
        if (year%100 == 0)
            return (year%400 == 0);
        else
            return true;
    }
    else
        return false;
}

주어진 날짜(yyyyMMdd, yyyyMM) 그 달의 마지막 날짜를 반환

function last_day(date_str)
{
    var yyyyMMdd = String(date_str);
    var days = "31";
    var year = yyyyMMdd.substring(0,4);
    var month = yyyyMMdd.substring(4,6);

    if (Number(month) == 2)
    {
        if (is_leap_year(year+month+"01"))
            days = "29";
        else
            days = "28";
    }
else if (Number(month) == 4 || Number(month) == 6 || Number(month) == 9 || Number(month) == 11)
        days = "30";

    return days;
}

오늘 날짜 중 연도 반환

function get_today_year()
{
    var today = new Date();
    return today.getYear();
}

오늘 날짜 중 Month반환. format: MM

function get_today_month()
{
    var today = new Date();
    return (today.getMonth()+1) > 9 ?  (today.getMonth()+1) : "0" + (today.getMonth()+1)
}

저작자표시

'JavaScript' 카테고리의 다른 글

[jQuery \|\| JavaScript] HTML + jQuery Event 총 정리 (0)	2020.03.31
[jQuery \|\| JavaScript] title 속성 다루기 정리 및 버그 해결 (0)	2020.03.25
[jQuery] Class 관련 함수,문법 총 정리 (0)	2019.12.15
[jQuery \|\| JavaScript] 비밀번호 유효성 검사 문법 총 정리(feat.정규식) (0)	2019.12.11
[JavaScript] JSON 데이터 다루기 문법 총 정리 (6)	2019.11.15

먼저 선행돼야 할 가장 기본인 주타깃(id, name, class) 접근 방법

id 접근 $(“#id”)

$("#notifi")

class로 접근 $(“.class”)

$(".notifi")

name으로 접근 $(tag_name[name=name])

 $("input[name=notifi]")

특정 아이디 기준으로 설명합니다.

특정 아이디 클래스

클래스 추가

$("#notifi").addClass('active');

여러 개 클래스 추가 (스페이스(공백)로 구분)

$("#notifi").addClass('active active2 active3');

변경

$("#notifi").attr('class','active');

삭제

$("#notifi").removeClass('active');

Toggle

id가 'notifi'라는 태그가 'active'라는 클래스를 가지고 있다면 없어지고,

'active'라는 클래스가 없다면 'active'라는 클래스를 해당 태그에 만든다.

$("#notifi").toggleClass('active')

특정 아이디에 특정 클래스이 존재하는지 체크

id가 'notifi'라는 태그의 'active'라는 클래스가 존재하는가?

3가지 방법

hasClass

if($("#notifi").hasClass("active") === true) {
// Method 실행
}

is

if($("#notifi").is(".active") === true) {
// Method 실행
}

length

if($("#notifi.active").length) {
// Method 실행
}

저작자표시

'JavaScript' 카테고리의 다른 글

[jQuery \|\| JavaScript] title 속성 다루기 정리 및 버그 해결 (0)	2020.03.25
[JavaScript] 날짜 관련 유용 함수 총 정리(feat.String to Date) (0)	2019.12.28
[jQuery \|\| JavaScript] 비밀번호 유효성 검사 문법 총 정리(feat.정규식) (0)	2019.12.11
[JavaScript] JSON 데이터 다루기 문법 총 정리 (6)	2019.11.15
[jQuery] 동적 테이블 생성하기 (feat.append()) (1)	2019.11.13

먼저 사용할 방식은 jQuery를 이용한 val() 방식을 사용합니다.

조금 코드를 수정하셔서 매개변수로 password 값을 받으셔도 됩니다.

공통 HTML

<input type="text" id="id">
<input type="password" id="password">
<button onclick="chkPW()">signUp</button>

1. 조건

필수 항목

영문(대소문자) 포함

숫자 포함

특수 문자 포함

공백 X

비밀번호 자리 8~20자

function chkPW(){

 var pw = $("#password").val();
 var num = pw.search(/[0-9]/g);
 var eng = pw.search(/[a-z]/ig);
 var spe = pw.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);

 if(pw.length < 8 || pw.length > 20){

  alert("8자리 ~ 20자리 이내로 입력해주세요.");
  return false;
 }else if(pw.search(/\s/) != -1){
  alert("비밀번호는 공백 없이 입력해주세요.");
  return false;
 }else if(num < 0 || eng < 0 || spe < 0 ){
  alert("영문,숫자, 특수문자를 혼합하여 입력해주세요.");
  return false;
 }else {
	console.log("통과"); 
    return true;
 }

}

$("#password").val()을 사용하기 때문에 jQuery 라이브러리 필요

2.조건

필수 항목

영문,숫자,특수문자 중 2가지 혼합 (영문,숫자 = 통과) (특문,숫자 = 통과)

비밀번호 10~20자리

function chkPW(){

 var pw = $("#password").val();
 var num = pw.search(/[0-9]/g);
 var eng = pw.search(/[a-z]/ig);
 var spe = pw.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);

 if(pw.length < 10 || pw.length > 20){
  alert("10자리 ~ 20자리 이내로 입력해주세요.");
  return false;
 }else if(pw.search(/\s/) != -1){
  alert("비밀번호는 공백 없이 입력해주세요.");
  return false;
 }else if( (num < 0 && eng < 0) || (eng < 0 && spe < 0) || (spe < 0 && num < 0) ){
  alert("영문,숫자, 특수문자 중 2가지 이상을 혼합하여 입력해주세요.");
  return false;
 }else {
	console.log("통과");	 
 }

}

3.조건

필수 항목

비밀번호 8자리 이상

숫자 포함

영대 문자 포함

영소 문자 포함

특수문자 포함

function chkPW(){

var reg = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;

var pw = $("#password").val();

if(false === reg.test(pw)) {
alert('비밀번호는 8자 이상이어야 하며, 숫자/대문자/소문자/특수문자를 모두 포함해야 합니다.');
}else {
console.log("통과");
}

}

4.조건

특수문자+영문+숫자 혼합

같은 문자 4번 반복 X

아이디 포함 X

function chkPW(){

		var pw = $("#password").val();
		var id = $("#id").val();
	    var checkNumber = pw.search(/[0-9]/g);
	    var checkEnglish = pw.search(/[a-z]/ig);
	 
	    if(!/^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,25}$/.test(pw)){            
	        alert('숫자+영문자+특수문자 조합으로 8자리 이상 사용해야 합니다.');
	        return false;
	    }else if(checkNumber <0 || checkEnglish <0){
	        alert("숫자와 영문자를 혼용하여야 합니다.");
	        return false;
	    }else if(/(\w)\1\1\1/.test(pw)){
	        alert('같은 문자를 4번 이상 사용하실 수 없습니다.');
	        return false;
	    }else if(pw.search(id) > -1){
	        alert("비밀번호에 아이디가 포함되었습니다.");
	        return false;
	    }else {

		console.log("통과");
		
		}

}

5.헬(끝판)

비밀번호 8자리 이상

숫자 포함

영대 문자 포함

영소 문자 포함

특수문자 포함

공백 X

같은 문자 4번 반복 X

아이디 포함 X

한글 X

function chkPW(){

	var pw = $("#password").val();
	var id = $("#id").val();
		
	var reg = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;
	var hangulcheck = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
	 
	if(false === reg.test(pw)) {
	alert('비밀번호는 8자 이상이어야 하며, 숫자/대문자/소문자/특수문자를 모두 포함해야 합니다.');
	}else if(/(\w)\1\1\1/.test(pw)){
	 alert('같은 문자를 4번 이상 사용하실 수 없습니다.');
	 return false;
	 }else if(pw.search(id) > -1){
	 alert("비밀번호에 아이디가 포함되었습니다.");
	  return false;
	 }else if(pw.search(/\s/) != -1){
	 alert("비밀번호는 공백 없이 입력해주세요.");
	 return false;
	 }else if(hangulcheck.test(pw)){
	 alert("비밀번호에 한글을 사용 할 수 없습니다."); 
	 }else {
	 console.log("통과");
	 }

}

끝 마치며..

실컷 설명해놓고 찬 물 끼얹는 소리일 수 있지만 시간이 촉박한 SI가 아닌 이상 프런트인 JavaScript단에서

유효성 검사를 하기보단 백 엔드단에서 하는 것이 바람직합니다.^^

저작자표시

'JavaScript' 카테고리의 다른 글

[JavaScript] 날짜 관련 유용 함수 총 정리(feat.String to Date) (0)	2019.12.28
[jQuery] Class 관련 함수,문법 총 정리 (0)	2019.12.15
[JavaScript] JSON 데이터 다루기 문법 총 정리 (6)	2019.11.15
[jQuery] 동적 테이블 생성하기 (feat.append()) (1)	2019.11.13
[JavaScript] 새로고침시 GET 파라미터 제거하기 (0)	2019.10.31

JSON(JavaScript Object Notation)을 모른다면 선행 해야 할 글

[IT용어] JSON(JavaScript Object Notation)

JSON(JavaScript Object Notation) 개념 경량(Lightweight)의 DATA-교환 형식이다. 경량(Lightweight)의 DATA-교환 형식~ 경량(Lightweight)의 DATA-교환 형식~~!! 속성-값 쌍 || 키-값 쌍으로 이루어진 데이터 오..

java119.tistory.com

JSON의 개념은

위 글에서 설명하였으니, 먼저 보시기 바랍니다.

저도 처음에 JSON 데이터를 다룰 때 상당히 삽질을 많이 했는데요.

그러한 피해자(?)가 더 없게 문법 정리정리해보았습니다.

다양한 예제를 제공하니 하나 하나 직접 해보시면서 이해하길 바랄게요.

바로 문법 진행하겠습니다.

문법

key : value 형식

문법 양식

 {

    "key": "value",
    "key": "value",
    "key": "value"

}

key : value만 기억하자

문법 제공

1. 쉬운예제

2. 복잡한예제 1,2,3 유형

3.json 파일 형태 데이터 추출

4.json 형식 ajax 통신 데이터 추출

JavaScript에서 JSON 데이터 뽑기,추출하기

쉬운 예제

JSON 형태 데이터

var param1= {

    "fruit": "Apple",
    "size": "Large",
    "color": "Red"

}

JavaScript

$(document).ready(function(){

jsonTest();

})

function jsonTest(){

console.log(param1.fruit);
console.log(param1.color);
}

결과

간단 설명

처음 하신분들이 많이 당황하는게 굉~장히 복잡한 포맷 때문인데

자세히 보면 아주 쉽습니다.

먼저 JSON 형식 데이터를 param1이라는 변수에 담았으니 param1.으로 시작하는게 맞는거죠 이해 됐죠잉

Map에서 배웠다시피 객체를 뽑을 때 "key"로 뽑는다고 했죠 "key"로~

그리고 JSON은 key : value 포맷이라고 했죠

그래서 param1.key 즉, param1.fruit , param1.size , param1.color가 되는 겁니다.

(간단 설명은 쉬운 예제에만 제공됩니다 다른 예제들은 보면서 감을 익히시면 됩니다.)

복잡한 예제

JSON 형태 데이터

var param2 = {
    "quiz": {
        "sport": {
            "q1": {
                "question": "Which one is correct team name in NBA?",
                "options": [
                    "New York Bulls",
                    "Los Angeles Kings",
                    "Golden State Warriros",
                    "Huston Rocket"
                ],
                "answer": "Huston Rocket"
            }
        },
        "maths": {
            "q1": {
                "question": "5 + 7 = ?",
                "options": [
                    "10",
                    "11",
                    "12",
                    "13"
                ],
                "answer": "12"
            },
            "q2": {
                "question": "12 - 8 = ?",
                "options": [
                    "1",
                    "2",
                    "3",
                    "4"
                ],
                "answer": "4"
            }
        }
    }
}

JavaScript

$(document).ready(function(){
jsonTest();
})

function jsonTest(){
console.log(param2.quiz["sport"].q1.question);
console.log(param2.quiz["sport"].q1.options[2]);
console.log(param2.quiz["sport"].q1.answer);

console.log(param2.quiz["maths"].q1.question);
console.log(param2.quiz["maths"].q2.question);
}

결과

복잡한 예제 2

JSON 형태 데이터

var param3 = {"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}

JavaScript

$(document).ready(function(){

jsonTest();

})

function jsonTest(){
console.log(param3.menu.popup.menuitem[1].value);
console.log(param3.menu.popup.menuitem[0].onclick);
}

결과

복잡한 예제 3

JSON 형태 데이터

var param4 = {

    "glossary": {
        "title": "example glossary",
"GlossDiv": {
            "title": "S",
"GlossList": {
                "GlossEntry": {
                    "ID": "SGML",
"SortAs": "SGML",
"GlossTerm": "Standard Generalized Markup Language",
"Acronym": "SGML",
"Abbrev": "ISO 8879:1986",
"GlossDef": {
  "para": "A meta-markup language, used to create markup languages such as DocBook.",
"GlossSeeAlso": ["GML", "XML"]
                    },
"GlossSee": "markup"
                }
            }
        }
    }
}

JavaScript

$(document).ready(function(){

jsonTest();

})

function jsonTest(){
console.log(param4.glossary.GlossDiv.GlossList.GlossEntry.GlossDef.para);
console.log(param4.glossary.GlossDiv.GlossList.GlossEntry.GlossDef.GlossSeeAlso[0]);
}

결과

이 방법은 jQuery 플러그인이 필수로 필요합니다.

jQuery(JavaScript)에서 .JSON 파일로 된 import(파일 데이터 뽑기,추출하기)

js_jsonEx1.json 파일의 경로 (Spring MVC 기준입니다 참고바랍니다.)

파일 내용

[{"id":1,"first_name":"Eolanda","last_name":"Druce","email":"edruce0@cbsnews.com","gender":"Female"},
{"id":2,"first_name":"Hyman","last_name":"Steely","email":"hsteely1@columbia.edu","gender":"Male"},
{"id":3,"first_name":"Mommy","last_name":"Ghirardi","email":"mghirardi2@rambler.ru","gender":"Female"},
{"id":4,"first_name":"Darnall","last_name":"Earry","email":"dearry3@irs.gov","gender":"Male"},
{"id":5,"first_name":"Lionello","last_name":"Le Franc","email":"llefranc4@home.pl","gender":"Male"},
{"id":6,"first_name":"Chastity","last_name":"Egle","email":"cegle5@linkedin.com","gender":"Female"},
{"id":7,"first_name":"Moe","last_name":"Pryde","email":"mpryde6@clickbank.net","gender":"Male"},
{"id":8,"first_name":"Erminia","last_name":"Brigden","email":"ebrigden7@dedecms.com","gender":"Female"},
{"id":9,"first_name":"Ingram","last_name":"Nestoruk","email":"inestoruk8@weibo.com","gender":"Male"},
{"id":10,"first_name":"Joanie","last_name":"Von Der Empten","email":"jvonderempten9@bloomberg.com","gender":"Female"}]

파일 제공

js_jsonEx1.json

0.00MB

JavaScript

$.getJSON('/resources/external_json/js_jsonEx1.json', function(data) {

for(key in data){
    console.log("first Name :"+data[key].first_name+" , last Name :"+data[key].last_name);
		}
    });

결과

간단 설명

$.getJSON('/resources/external_json/js_jsonEx1.json', function(data)

해당 url 매개변수에 '/resources/external_json/js_jsonEx1.json'가 들어가서 경로를 확인 후 파일에 있는 내용을 스캔합니다.

스캔된 내용을 function(data) 데이터 인자에 넣어줍니다.

여기서 $.getJSON('/resources/external_json/js_jsonEx1.json', function(data) 부분의 data는 파일이 스캔된 데이터를 인자로 넘겨받는거기 때문에 꼭 이름이 data가 아니여도 됩니다.

예를 들어

$.getJSON('/resources/external_json/js_jsonEx1.json', function(people) {

for(key in people){
    console.log("first Name :"+people[key].first_name+" , last Name :"+people[key].last_name);
	}
    });

data -> people로 변경하여도 정상적으로 동작합니다.

아 ajax로 JSON 데이터를 받으신다구요? 알겠습니다.

jQuery(JavaScript)에서 ajax 통신 JSON 형태로 된 데이터 뽑기,추출하기

function jQueryajaxJSON(){

$.ajax({

url : "/jquery/jqueryData",
dataType : "json",
success:function(data){

for(key in data){
console.log(data[key].first_name);
console.log(data[key].last_name);
console.log(data[key].email);
}
}
})
}

결과

+추가(20191206)

JSON(Object) 키만 추출하기

REST API를 조회해서 뽑거나 .json 파일을 받았다면 데이터가 와장창 쏟아져 나오게 되는데요,

당황하지 않고 뽑으려면 Object의 KEY만 추출해서 데이터 가공을 한다면 훨씬 수월합니다.

JSON KEY 추출

첫 번째 방법

Object.keys(ObjData)

두 번째 방법

Object.getOwnPropertyNames(ObjData)

JSON(Object) length 추출

var obj_length = Object.keys(ex_obj).length;

JSON 형태의 String(스트링) 값 JSON으로 변환

String -> JSON

JSON.parse(text[, reviver])

var json = '{"result":true, "count":42}';
obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

주의 : 모든 String이 변환되는 것이 아니라 JSON 형태로 된 String만 변환됩니다. 에러가 뜨셨다면 문법을 확인해주세요.

JSON -> String

JSON.stringify()
JSON.stringify({});                  // '{}'
JSON.stringify(true);                // 'true'
JSON.stringify('foo');               // '"foo"'
JSON.stringify([1, 'false', false]); // '[1,"false",false]'
JSON.stringify({ x: 5 });            // '{"x":5}'

내가 받아온 값의 타입이 String인지 JSON(Object)인지도 모른다면?

console.log(typeof '타입확인할값');

typeof 쓰시면 됩니다.

이 정도만 알고 있어도 JSON 데이터를 JavaScript/jQuery로 뽑는데 문제없다고 봅니다.

만약 자기가 원하는 방법이 없으신 분들은 덧글 남겨주세요. 글 업데이트하겠습니다

JSON 모의(가짜) 데이터 만드는 사이트

https://www.mockaroo.com/

저작자표시

'JavaScript' 카테고리의 다른 글

[jQuery] Class 관련 함수,문법 총 정리 (0)	2019.12.15
[jQuery \|\| JavaScript] 비밀번호 유효성 검사 문법 총 정리(feat.정규식) (0)	2019.12.11
[jQuery] 동적 테이블 생성하기 (feat.append()) (1)	2019.11.13
[JavaScript] 새로고침시 GET 파라미터 제거하기 (0)	2019.10.31
[jQuery] select box 선택값 가져오기,value 값 여러 개 가져 오기 (1)	2019.10.27

.java의 개발일기

JavaScript

[jQuery || JavaScript] <select>box change 강제 선택하기 총 정리

'JavaScript' 카테고리의 다른 글

[jQuery || JavaScript] 동적 생성된 태그에 이벤트 주기(feat.append)

.on

'JavaScript' 카테고리의 다른 글

[jQuery || JavaScript] HTML + jQuery Event 총 정리

Event

자주 쓰는 jQuery Event

HTML Event

'JavaScript' 카테고리의 다른 글

[jQuery || JavaScript] title 속성 다루기 정리 및 버그 해결

'JavaScript' 카테고리의 다른 글

[JavaScript] 날짜 관련 유용 함수 총 정리(feat.String to Date)

'JavaScript' 카테고리의 다른 글

[jQuery] Class 관련 함수,문법 총 정리

특정 아이디 클래스

특정 아이디에 특정 클래스이 존재하는지 체크

'JavaScript' 카테고리의 다른 글

[jQuery || JavaScript] 비밀번호 유효성 검사 문법 총 정리(feat.정규식)

1. 조건

2.조건

3.조건

4.조건

5.헬(끝판)

'JavaScript' 카테고리의 다른 글

[JavaScript] JSON 데이터 다루기 문법 총 정리

'JavaScript' 카테고리의 다른 글

+ Recent posts

티스토리툴바