Java World

Java Korean

Category Archives: Javascript

자바스크립트 위키 – http://ko.wikipedia.org/wiki/자바스크립트

자바스크립트 키보드 코드키(ACSII Code)

Posted on by Posted in Javascript
자바스크립트에서 키보드 이벤트를 받았을 때 키 값을 구별할 수 있는 Keycode (ACSII 코드) 목록입니다.

알파벳(대소문자 동일함)

키
Mozilla
IE
Opera
pseudo ASCII codes
a
65
b
66
c
67
d
68
e
69
f
70
g
71
h
72
i
73
j
74
k
75
l
76
m
77
n
78
o
79
p
80
q
81
r
82
s
83
t
84
u
85
v
86
w
87
x
88
y
88
z
90

기능키

키
Mozilla
IE
Opera
pseudo ASCII codes
Backspace
8
Tab
9
Enter
13
Shift
16
Control
17
Alt
18
Pause / Break
19
Caps Lock
20
ESC
27
Space
32
Page Up
33
Page Down
34
End
35
Home
36
왼쪽 방향키
37
윗 방향키
38
오른쪽 방향키
39
아래 방향키
40
Insert
45
Delete
46
왼쪽 Windows키
91
219
0
오른쪽 Windows키
92
220
0
메뉴키
93
0
Num Lock
144
Scroll Lock
145

숫자

키
Mozilla
IE
Opera
pseudo ASCII codes
0
48
1
49
2
50
3
51
4
52
5
53
6
54
7
55
8
56
9
57

키패드

키
Mozilla
IE
Opera
pseudo ASCII codes
0 / Ins
96 / 45
48 / 45
1 / End
97 / 35
49 / 35
2 / 아래 방향키
98 / 40
50 / 40
3 / Pg Dn
99 / 34
51 / 34
4 / 왼쪽 방향키
100 / 37
52 / 37
5
101 / 12
53 / 12
6 / 오른쪽 방향키
102 / 39
54 / 39
7 / Home
103 / 36
55 / 36
8 / 윗 방향키
104 / 38
56 / 38
9 / Pg Up
105 / 33
57 / 33
*
106
42
+
107
43
–
109
45
/
111
47
. / Del
110 / 46
78 / 46

F키

키
Mozilla
IE
Opera
pseudo ASCII codes
F1
112
F2
113
F3
114
F4
115
F5
116
F6
117
F7
118
F8
119
F9
120
F10
121
F11
122
F12
123

기호

키
Mozilla
IE
Opera
pseudo ASCII codes
; / :
59
186
59
59 / 58
= / +
107
187
61
61 / 43
, / <
188
44
44 / 60
– / _
109
189
45
45 / 95
. / >
190
46
46 / 62
/ / ?
191
47
47 / 63
` / ~
192
96
96 / 126
[ / {
219
91
91 / 123
\ / |
220
92
92 / 124
] / }
221
93
93 / 125
‘ / “
222
39
39 / 34

간단히 죽~ 정리하려고 했는데 하다보니까 브라우저마다 다른것도 있고 예외상황이 꽤 많군요 ㅡ..ㅡ 일단 참고자료보고 대충 정리했습니다. JavaScript Madness: Keyboard Events에 제일 잘 나와 있더군요. 키별로 keydown, keypress, keyup이벤트에 대한 발생여부도 표시되어 있습니다. 키이벤트 사용할 때 꽤나 도움이 될만한 자료인듯 합니다.(이벤트까지 정리하기는 내용이 많네요. ㅡ..ㅡ)

Javascript Key Event Test Script를 보시면 키이벤트에 대해서 테스트를 해보실 수 있습니다. 키이벤트 확인하기에 좋네요. 이벤트는 IE계열에서는 event.keyCode로 받을 수 있고 비IE계열에서는 event.which로 받을 수 있습니다.(물론 event는 계열에 맞게 제대로 받았다는 가정하에서입니다.)

자바스크립트 객체 합치기

Posted on by Posted in Javascript

자바스크립트 객체 합치기-

자바스크립트에 두객체 내용을 합쳐야되는 경우가 있습니다.

뭐 여러가지 방법이 있겠지만

제가한 방법은 두 객체를 하나의 객체로 만들어준다음에

하나씩 꺼내어 (hasOwnProperty 오브젝트의 속성여부를 검사)

하나의 객체로 만들어주는 방법으로 해봤는데요

코드는 다음과 같습니다. 

/* 실행하는 코드 */
var x1 = { "a1" : 1, "c2" : 2 };
var x2 = { "c1" : 3, "c2" : 4 };
var param = [x1, x2];
var result = this.mergeObjectProperty(param);
console.log(result);


/* 객체 합치는 메서드 */
mergeObjectProperty : function (objectArray) {

var resultObject = {};

for(var i = 0, length = objectArray.length; i < length; i++) {
var object = objectArray[i];

for (var property in object) {
if (object.hasOwnProperty(property)) {
resultObject[property] = object[property];

}

}

}

return resultObject;

}


/* 결과 */
// Object {a1: 1, b2: 2, c1: 3, c2: 4}

자바스크립트 기기타입 확인하기

Posted on by Posted in Javascript

브라우저에서 특정 기기 타입을 확인해야할 경우가 있습니다.

안드로이드인지 Ios인지 윈도우인지.. 맥인지.. 등등

아래와같이 확인 방법 공유합니다 ^^

var isMobile = (/iphone|ipod|android|blackberry|opera|mini|windows\sce|palm|smartphone|iemobile/i.test(navigator.userAgent.toLowerCase())),
isTablet = (/ipad|android|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent.toLowerCase())),

isiPhone = (/iphone/i.test(navigator.userAgent.toLowerCase())),
isAndroid = (/android/i.test(navigator.userAgent.toLowerCase())),
isBlackberry = (/blackberry/i.test(navigator.userAgent.toLowerCase())),
isMsmobile = (/iemobile/i.test(navigator.userAgent.toLowerCase())),
isWindow = (/windows/i.test(navigator.userAgent.toLowerCase())),
isMac = (/macintosh/i.test(navigator.userAgent.toLowerCase())),
isLinux = (/linux/i.test(navigator.userAgent.toLowerCase())),

isWebkit = (/webkit/i.test(navigator.userAgent.toLowerCase())),
isFirefox = (/firefox/i.test(navigator.userAgent.toLowerCase())),
isIE = (/msie/i.test(navigator.userAgent.toLowerCase())),
isIE = (/rv:11/i.test(navigator.userAgent.toLowerCase())),
isOperam = (/opera mini/i.test(navigator.userAgent.toLowerCase()));

자바스크립트 새로고침

Posted on by Posted in Javascript

현재 웹페이지를 다시 읽어오는 것이다.

일반적인 다시 읽기
window.location.reload();
이렇게 하면 컴퓨터의 캐쉬에서 우선 파일을 찾아봅니다. 없으면 서버에서 받아옵니다.

적극적인 다시 읽기
window.location.reload(true);
true 라는 파라미터를 입력하면, 무조건 서버에서 직접 파일을 가져 오게 됩니다. 캐쉬는 완전히 무시됩니다.

소극적인 다시 읽기
history.go(0);
이렇게 하면, 캐쉬에서 현재 페이지의 파일들을 항상 우선적으로 찾습니다.

라디오 버튼 체크 여부

Posted on by Posted in jQuery 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    function checkAnimal(){
        var animal = $(':input[name=animal]:radio:checked').val();


        if( animal ){
            alert(animal+"을 선택했습니다");
            return true;
        }else{
            alert("동물을 선택하세요");
            return false;
        }
    }
</script>
<form onsubmit="return checkAnimal()">
    <input type="radio" name="animal" value="Dog">Dog
    <input type="radio" name="animal" value="Monky">Monky
    <input type="radio" name="animal" value="Cat">Cat
    <input type="radio" name="animal" value="Horse">Horse
    <input type="submit" value="선택">
</form>

jquery serialize 사용시 한글 깨지는 문제

Posted on by Posted in jQuery Leave a comment

사실 이문제 때문에 여러 자료를 찾아봤지만 속시원한 해결책이 별로 없었다
그러던 중 간단히 해결할 수 있는 방법을 알아냈다..



var dataString = $("#Form1").serialize();

$.ajax({

url:"SurveyPreviewSingle.aspx",

type: "POST",

data:dataString,

contentType: "application/x-www-form-urlencoded; charset=UTF-8",

dataType: "text",

success:function(data){

alert('success');

}

});

위에서 보듯 contentType 과 dataType 만 잘 지정해주면 된다.
물론 호출하는 페이지에서 굳이 content-type에서 charset 을 utf-8로 명시할 필요도 없이 잘된다.
프로그램 개발 환경 및 상황에 따라서 달라지겠지만 asp.net 환경에서는 위의 코딩만으로 form 변수를 정상적으로 한글까지 처리할 수 있었다.

제이쿼리 체크박스 전체 선택/해제

Posted on by Posted in jQuery Leave a comment 
제이쿼리를 이용하여 체크박스 전체석탠을 해봅시다.

prop 메서드를 이용하여 checked내용을 확인해주면 끝 ! ! 



<!doctype html>
 <html lang="ko">
 	<head>
 		<meta charset="utf-8">
 		  <title>jQuery Tip | Check All</title>
 		   <script src="//code.jquery.com/jquery-1.11.0.js"></script>
 		      <script>
 		       $( document ).ready( function() {
 		       		$( '.check-all' ).click( function() {
 		       			$( '.ab' ).prop( 'checked', this.checked );
 		       		} );
 		       	} );
 		       </script>
 	</head>   

 	<body>
 		 <form>
 		 	<p><input type="checkbox" name="all" class="check-all">
 		 		<label>Check ALL</label></p>       <hr>       <p><input type="checkbox" name="cb1" class="ab"> <label>Checkbox 1</label></p>
 		 		<p><input type="checkbox" name="cb2" class="ab"> <label>Checkbox 2</label></p>
 		 		<p><input type="checkbox" name="cb3" class="ab"> <label>Checkbox 3</label></p>
 		 		<p><input type="checkbox" name="cb4" class="ab"> <label>Checkbox 4</label></p>
 		 </form>
 	 </body>
 </html>



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">

	$(document).ready(function() {

		// 체크 박스 모두 체크
		$("#checkAll").click(function() {
			$("input[name=box]:checkbox").each(function() {
				$(this).attr("checked", true);
			});
		});

		// 체크 박스 모두 해제
		$("#uncheckAll").click(function() {
			$("input[name=box]:checkbox").each(function() {
				$(this).attr("checked", false);
			});
		});

		// 체크 되어 있는 값 추출
		$("#getCheckedAll").click(function() {
			$("input[name=box]:checked").each(function() {
				var test = $(this).val();
				console.log(test);
			});
		});

		// 서버에서 받아온 데이터 체크하기 (콤마로 받아온 경우)
		$("#updateChecked").click(function() {
			var splitCode = $("#splitCode").val().split(",");
			for (var idx in splitCode) {
				$("input[name=box][value=" + splitCode[idx] + "]").attr("checked", true);
			}
		});

		// test case
		test1();

	});

	function test1() {

		console.log("################################################");
		console.log("## test1 START");
		console.log("################################################");

		var cnt = $("input:checkbox").size();
		console.log("checkboxSize=" + cnt);

		$("input[name=box]:checkbox").each(function() {
			var checkboxValue = $(this).val();
			console.log("checkboxValue=" + checkboxValue);
		});

		console.log("----------------------------------------------");

		$("#checkboxArea").children().each(function() {
			var checkboxValue = $(this).children(":checkbox").val();
			var text = $(this).children().eq(1).text();
			console.log(text + "=" + checkboxValue);
		});
	}

</script>
</head>
<body>

	<div id="checkboxArea">
		<li><input type="checkbox" name="box" value="A" /><label>1번째 checkbox</label></li>
		<li><input type="checkbox" name="box" value="B" /><label>2번째 checkbox</label></li>
		<li><input type="checkbox" name="box" value="C" /><label>3번째 checkbox</label></li>
		<li><input type="checkbox" name="box" value="D" /><label>4번째 checkbox</label></li>
	</div>

	<br/><br/>

	<div id="buttonGroups">
		<input type="button" id="checkAll" value="check all" />
		<input type="button" id="uncheckAll" value="uncheck all" />
		<input type="button" id="getCheckedAll" value="get checked all" />
		<input type="button" id="updateChecked" value="updateChecked" />
	</div>

	<input type="hidden" id="splitCode" name="splitCode" value="A,C,D" />

</body>
</html>

jqgrid & jquery 참고 API 사이트

Posted on by Posted in jQuery Leave a comment
1. [ jqGrid] jqGrid Demos 사이트

주요 예제로 이루어 져서 참고하기 좋은 사이트 이다.

예제 – 코드 식..

2. [ jqGrid] 공식 사이트

별로 개발에 도움될 만한 내용은 그닥.. 주로 PHP , ASP, #NET 예제위주…

3. [jqGrid] jQuery Grid Plugin 예제 블로그 (한국분)

정말 간단한 예제 하나 포스팅 해논 블로그임… 알기 쉽게.. ^^ 참고 할 만한 사이트…

4.[jQuery]  jQuery Fundamentals 사이트

Jquery 약간의 영어만 할줄 안다면, 정말 참고하기 좋은 사이트 인것 같다.
다양한 예제와 상세 코드…
but, 영문이라는거.. -_-;;;