HTML 우클릭 금지와 드레그 금지
contextmenu="return false" 우클릭 방지
ondragstart="return false" 드래그 방지
onselectstart="return false" 선택 방지
<HTML>
<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
내용
</body>
</HTML>
'DEVELOPMENT > Javascript' 카테고리의 다른 글
| var 키워드의 변수 범위 (0) | 2016.06.01 |
|---|---|
| javascript grap library (0) | 2014.03.06 |
| [Android]app <---> javascript 통신 (0) | 2011.04.18 |
| [jquery] ajax 사용하기 (0) | 2010.12.17 |
| javascript 정리 (0) | 2010.12.17 |
[jquery] JQuery Ajax 사용하기
jquery 에서는 상당히 심플한 인터페이스를 제공합니다.. 플젝하다가 갖다썼는데 상당히 만족스럽네요
여러가지 ajax 타입을 소개할까합니다. 재밌는것도 몇개있네요.
타입1.
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
기본형을 보시면 ajax() 라는 메서드안에 속성 3개를 가진 객체를 생성한후 인자로 때려넣고 있군요.
동적으로 js파일을 로드해서 실행시키는 기능을합니다. 기능이 재밌어 보이긴하는데, 실제로 별로 안쓸것같네요 -_-;
타입2.
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
some.php 에 POST 타입으로 name 과 location 을 parameter 로 넘기고있네요. success 프라퍼티는 서버에서 http response 를 받은후에 수행될 콜백함수를 지정합니다. "데이타가 저장되었어염" 라고 알려주네요.
갠적으로 이 타입을 가장많이 사용하고있습니다. 실무에서도 가장많이 사용되죠.
타입3.
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});
cache 라는 프라퍼티가 추가되었군요. test.html 을 가장 최근에 수정된 페이지로 받겠다는거죠.
"캐쉬를 사용하지 않겠다" 이겁니다. html 을 받은후에 results라는 아이디를 가진 엘리먼트의 자식노드로써 추가하고있네요. 쌩 dom api 로 쓰면 이렇겠죠. document.getElementById("results").innerHTML = html;
음 근데 이거랑은 좀 차이점이있어요. append 는 "result 엘리먼트의 자식이 존재할경우, 가장 마지막 자식으로 붙인다" 라는 규칙을 가지고있거든요. 반면에 innerHTML 으로넣으면 자식이 존재하든안하든 덮어써버리는거죠. 기존의 html 엘리먼트는 사라지고 새로운 엘리먼트로 교체되는 개념입니다.
타입4.
var html = $.ajax({
url: "some.php",
async: false
}).responseText;
async(비동기) 라는 프라퍼티가 추가되었군요. false를 때려넣었으니까 "동기"로 요청한다는말이네요.
뭔말이냐면, some.php로 request를 날린후에 response가 오기전까지는 브라우저를 블락킹 시켜버립니다.
유저의 어떠한 인터렉션도 허용되지않죠. 보시면 콜백함수를 때려넣는 success라는 프라퍼티도없네요
그럼 어떻게 응답데이타를 받나염? 바로 저렇게요. var html = $.ajax().responseText;
어차피 서버로부터 response 가 오기전까지는 스크립트수행이 블락되어있으니까 저 코드가 가능한겁니다.
웹플밍을 하다보면 이 타입을 "써야만" 할때가 종종있더군요.
타입 5.
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: handleResponse
});
출처 : http://boast.tistory.com/entry/JQuery-Ajax-사용하기
'DEVELOPMENT > Javascript' 카테고리의 다른 글
| [jquery] ajax 사용하기 (0) | 2010.12.17 |
|---|---|
| javascript 정리 (0) | 2010.12.17 |
| [javascript] 위도, 경로를 이용한 거리 계산 소스 (0) | 2010.07.14 |
| 유용한 jQuery 플러그인 리스트 (0) | 2010.06.18 |
| [jquery] Form 플러그인 함수 (0) | 2010.04.06 |
[TIP] <IMG> 태그의 ALT에 줄바꿈 하기
이미지 태그의 속성인 ALT 속성의 내용중에 많은 양이 있을 경우 줄바꿈을 해야 되는 경우가 있다 그럴때 를 사용하면 된다..
'DEVELOPMENT > HTML & CSS' 카테고리의 다른 글
| [canvas] 2D를 이용한 객체 회전 (0) | 2016.06.01 |
|---|---|
| [canvas] 키보드를 이용한 객체 이동 (0) | 2016.06.01 |
| CSS framework (0) | 2014.01.17 |
| DOCTYPE. (0) | 2009.10.28 |
| CSS 작성 기초 - 선택자 사용하기 (0) | 2009.10.28 |
[javascript] 사이트 즐겨찾기 추가하기
특정 사이트를 즐겨찾기에 추가하는 방법임다..
굳이 설명이 필요 없으리라..
<head>
<title>즐겨찾기 추가</title>
<script language="javascript">
/**
* 해당 사이트를 즐겨찾기에 추가한다.
* 이 스크립트를 사용하기 위해서는 각 브라우저마다 기능 여부를 체크후에 사용
*
**/
function addBookMark(){
var url = "http://hmjkor.tistory.com";
var title = "맹돌이의 블로그입니다.";
window.external.AddFavorite(url, title);
}
</script>
</head>
<body>
<a href="javascript:addBookMark();">즐겨찾기 추가</script>
</body>
</html>
'DEVELOPMENT > Javascript' 카테고리의 다른 글
| Ajax 정복하기 (0) | 2009.10.10 |
|---|---|
| 크로스 브라우저 투명 코드 처리 (0) | 2009.09.21 |
| favicon 생성 (0) | 2009.09.17 |
| [javascript] 현재 페이지를 시작페이지로 설정하기 (0) | 2009.09.17 |
| [javascript] 바탕화면에 사이트 바로가기 만들기 (0) | 2009.09.15 |
favicon 생성
브라우저의 주소창이나 탭, 즐겨찾기에 사이트만의 특정 로고나 이미지를 삽입하는 방법이다.
1. favicon.ico 제작
먼저 사용될 favicon 아이콘을 제작한다.
사이즈는 16*16, 32*32, 48*48로 제작
jpg,gif,png 등의 파일을 사이즈에 맞게 제작을 하여 파일명은 favicon, 확장자는 ico 확장자로 변경한다. 직접 제작을 해도 되나 그러지 못한 경우는 검색해보면 많이 나오니 찾아서 제작
하나 추천 : http://www.html-kit.com/favicon
2. html 페이지 코드 삽입
만들어진 favicon.ico를 WebRoot 하위에 업로드 함
index 페이지에 다음 코드를 삽입
방법 1
<html>
<head>
<title>favicon</title>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
</body>
</html>
방법 2
<head>
<title>favicon</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
</body>
</html>
이미지가에 문제가 있는경우는 나타나지 않을 수도 있다.
'DEVELOPMENT > Javascript' 카테고리의 다른 글
| 크로스 브라우저 투명 코드 처리 (0) | 2009.09.21 |
|---|---|
| [javascript] 사이트 즐겨찾기 추가하기 (0) | 2009.09.17 |
| [javascript] 현재 페이지를 시작페이지로 설정하기 (0) | 2009.09.17 |
| [javascript] 바탕화면에 사이트 바로가기 만들기 (0) | 2009.09.15 |
| [prototype.js] Element 생성하기 (0) | 2009.09.09 |
[HTML/JavaScript] Select list move options
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="JavaScript" type="text/javascript">
<!--
/**
* option 추가
**/
function addOption(theSel, theText, theValue){
var newOpt = new Option(theText, theValue);
var selLength = theSel.length;
theSel.options[selLength] = newOpt;
}
/**
* option 삭제
**/
function deleteOption(theSel, theIndex){
var selLength = theSel.length;
if(selLength>0){
theSel.options[theIndex] = null;
}
}
/**
* option 삭제
**/
function moveOptions(theSelFrom, theSelTo){
var selLength = theSelFrom.length;
var selectedText = new Array();
var selectedValues = new Array();
var selectedCount = 0;
var i;
// Find the selected Options in reverse order
// and delete them from the 'from' Select.
for(i=selLength-1; i>=0; i--){
if(theSelFrom.options[i].selected){
selectedText[selectedCount] = theSelFrom.options[i].text;
selectedValues[selectedCount] = theSelFrom.options[i].value;
deleteOption(theSelFrom, i);
selectedCount++;
}
}
// Add the selected text/values in reverse order.
// This will add the Options to the 'to' Select
// in the same order as they were in the 'from' Select.
for(i=selectedCount-1; i>=0; i--){
addOption(theSelTo, selectedText[i], selectedValues[i]);
}
if(NS4) history.go(0);
}
</script>
<form action="yourpage.asp" method="post">
<table border="0">
<tr>
<td>
<select name="sel1" size="10" multiple="multiple">
<option value="1">Left1</option>
<option value="2">Left2</option>
<option value="3">Left3</option>
<option value="4">Left4</option>
<option value="5">Left5</option>
</select>
</td>
<td align="center" valign="middle">
<input type="button" value="-->"
onclick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
<input type="button" value="<--"
onclick="moveOptions(this.form.sel2, this.form.sel1);" />
</td>
<td>
<select name="sel2" size="10" multiple="multiple">
<option value="1">Right1</option>
<option value="2">Right2</option>
<option value="3">Right3</option>
<option value="4">Right4</option>
<option value="5">Right5</option>
</select>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
출처 : http://www.mredkj.com/tutorials/tutorial_mixed2b.html
'DEVELOPMENT > Javascript' 카테고리의 다른 글
| [javascript] 바탕화면에 사이트 바로가기 만들기 (0) | 2009.09.15 |
|---|---|
| [prototype.js] Element 생성하기 (0) | 2009.09.09 |
| [HTML/JavaScript ]select box option 추가 삭제 예제 (0) | 2009.08.11 |
| HTML 특수문자코드표 (0) | 2009.07.22 |
| [Event] observe 에서의 onload와 dom:loaded 의 차이 (0) | 2009.05.21 |
[HTML/JavaScript ]select box option 추가 삭제 예제
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="JavaScript" type="text/javascript">
<!--
var count1 = 0;
var count2 = 0;
* 선택된 option의 이전에 새로운 option 을 추가한다.
**/
function insertOptionBefore(num){
var elSel = document.getElementById('selectX');
if(elSel.selectedIndex >= 0) {
var elOptNew = document.createElement('option');
elOptNew.text = 'Insert' + num;
elOptNew.value = 'insert' + num;
var elOptOld = elSel.options[elSel.selectedIndex];
try {
elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
}catch(ex){
elSel.add(elOptNew, elSel.selectedIndex); // IE only
}
}
}
* 선택된 옵션을 삭제한다.
**/
function removeOptionSelected(){
var elSel = document.getElementById('selectX');
var i;
for (i = elSel.length - 1; i>=0; i--) {
if (elSel.options[i].selected) {
elSel.remove(i);
}
}
}
* 마지막에 새로운 option을 추가한다.
**/
var elOptNew = document.createElement('option');
elOptNew.text = 'Append' + num;
elOptNew.value = 'append' + num;
var elSel = document.getElementById('selectX');
try {
elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
}catch(ex) {
elSel.add(elOptNew); // IE only
}
}
/**
* 마지막 옵션을 삭제한다.
**/
function removeOptionLast(){
var elSel = document.getElementById('selectX');
if (elSel.length > 0){
elSel.remove(elSel.length - 1);
}
}
//-->
</script>
</HEAD>
<form>
<input type="button" value="이전 추가" onclick="insertOptionBefore(count1++);" />Insert Before Selected<br />
<input type="button" value="삭제" onclick="removeOptionSelected();" />Remove Selected<br />
<select id="selectX" size="10">
<option value="original1" selected="selected">Orig1</option>
<option value="original2">Orig2</option>
</select>
<br />
<input type="button" value="마지막 추가" onclick="appendOptionLast(count2++);" />Append Last<br />
<input type="button" value="마지막 삭제" onclick="removeOptionLast();" />Remove Last
</form>
</BODY>
</HTML>
'DEVELOPMENT > Javascript' 카테고리의 다른 글
| [prototype.js] Element 생성하기 (0) | 2009.09.09 |
|---|---|
| [HTML/JavaScript] Select list move options (0) | 2009.08.11 |
| HTML 특수문자코드표 (0) | 2009.07.22 |
| [Event] observe 에서의 onload와 dom:loaded 의 차이 (0) | 2009.05.21 |
| [IE8] 웹 표준 개발자의 IE8 웹사이트 호환성 대응 (0) | 2009.04.13 |
HTML 특수문자코드표
|
표현문자 |
숫자표현 |
문자표현 |
설명 |
|
- |
�- |
- |
사용하지 않음 |
|
space |
	 |
- |
수평탭 |
|
space |
|
- |
줄 삽입 |
|
- |
- |
- |
사용하지 않음 |
|
space |
  |
- |
여백 |
|
! |
! |
- |
느낌표 |
|
" |
" |
" |
따옴표 |
|
# |
# |
- |
숫자기호 |
|
$ |
$ |
- |
달러 |
|
% |
% |
- |
백분율 기호 |
|
& |
& |
& |
Ampersand |
|
' |
' |
- |
작은 따옴표 |
|
( |
( |
- |
왼쪽 괄호 |
|
) |
) |
- |
오른쪽 괄호 |
|
* |
* |
- |
아스트릭 |
|
+ |
+ |
- |
더하기 기호 |
|
, |
, |
- |
쉼표 |
|
- |
- |
- |
Hyphen |
|
. |
. |
- |
마침표 |
|
/ |
/ |
- |
Solidus (slash) |
|
0 - 9 |
0-9 |
- |
0부터 9까지 |
|
: |
: |
- |
콜론 |
|
; |
; |
- |
세미콜론 |
|
< |
< |
< |
보다 작은 |
|
= |
= |
- |
등호 |
|
> |
> |
> |
보다 큰 |
|
? |
? |
- |
물음표 |
|
@ |
@ |
- |
Commercial at |
|
A - Z |
A-Z |
- |
A부터 Z까지 |
|
[ |
[ |
- |
왼쪽 대괄호 |
|
\ |
\ |
- |
역슬래쉬 |
|
] |
] |
- |
오른쪽 대괄호 |
|
^ |
^ |
- |
탈자부호 |
|
_ |
_ |
- |
수평선 |
|
` |
` |
- |
Acute accent |
|
a - z |
a-z |
- |
a부터 z까지 |
|
{ |
{ |
- |
왼쪽 중괄호 |
|
| |
| |
- |
수직선 |
|
} |
} |
- |
오른쪽 중괄호 |
|
~ |
~ |
- |
꼬리표 |
|
- |
-Ÿ |
- |
사용하지 않음 |
|
  |
|
Non-breaking space | |
|
¡ |
¡ |
¡ |
거꾸로된 느낌표 |
|
￠ |
¢ |
¢ |
센트 기호 |
|
￡ |
£ |
£ |
파운드 |
|
¤ |
¤ |
¤ |
현재 환율 |
|
￥ |
¥ |
¥ |
엔 |
|
| |
¦ |
¦ |
끊어진 수직선 |
|
§ |
§ |
§ |
섹션 기호 |
|
¨ |
¨ |
¨ |
움라우트 |
|
ⓒ |
© |
© |
저작권 |
|
ª |
ª |
ª |
Feminine ordinal |
|
≪ |
« |
« |
왼쪽 꺾인 괄호 |
|
￢ |
¬ |
¬ |
부정 |
|
|
­ |
­ |
Soft hyphen |
|
? |
® |
® |
등록상표 |
|
&hibar; |
¯ |
¯ |
Macron accent |
|
° |
° |
° |
Degree sign |
|
± |
± |
± |
Plus or minus |
|
² |
² |
² |
Superscript two |
|
³ |
³ |
³ |
Superscript three |
|
´ |
´ |
´ |
Acute accent |
|
μ |
µ |
µ |
Micro sign (Mu) |
|
¶ |
¶ |
¶ |
문단기호 |
|
· |
· |
· |
Middle dot |
|
¸ |
¸ |
¸ |
Cedilla |
|
¹ |
¹ |
¹ |
Superscript one |
|
º |
º |
º |
Masculine ordinal |
|
≫ |
» |
» |
오른쪽 꺾인 괄호 |
|
¼ |
¼ |
¼ |
4분의 1 |
|
½ |
½ |
½ |
2분의 1 |
|
¾ |
¾ |
¾ |
4분의 3 |
|
¿ |
¿ |
¿ |
거꾸로된 물음표 |
|
A |
À |
À |
Capital A, grave accent |
|
A |
Á |
Á |
Capital A, acute accent |
|
A |
 |
 |
Capital A, circumflex accent |
|
A |
à |
à |
Capital A, tilde |
|
A |
Ä |
Ä |
Capital A, dieresis or umlaut mark |
|
A |
Å |
Å |
Capital A, ring (Angstrom) |
|
Æ |
Æ |
Æ |
Capital AE diphthong (ligature) |
|
C |
Ç |
Ç |
Capital C, cedilla |
|
E |
È |
È |
Capital E, grave accent |
|
E |
É |
É |
Capital E, acute accent |
|
E |
Ê |
Ê |
Capital E, circumflex accent |
|
E |
Ë |
Ë |
Capital E, dieresis or umlaut mark |
|
I |
Ì |
Ì |
Capital I, grave accent |
|
I |
Í |
Í |
Capital I, acute accent |
|
I |
Î |
Î |
Capital I, circumflex accent |
|
I |
Ï |
Ï |
Capital I, dieresis or umlaut mark |
|
Ð |
Ð |
Ð |
Capital Eth, Icelandic |
|
N |
Ñ |
Ñ |
Capital N, tilde |
|
O |
Ò |
Ò |
Capital O, grave accent |
|
O |
Ó |
Ó |
Capital O, acute accent |
|
O |
Ô |
Ô |
Capital O, circumflex accent |
|
O |
Õ |
Õ |
Capital O, tilde |
|
O |
Ö |
Ö |
Capital O, dieresis or umlaut mark |
|
× |
× |
× |
Multiply sign |
|
Ø |
Ø |
Ø |
width="130"Capital O, slash |
|
U |
Ù |
Ù |
Capital U, grave accent |
|
U |
Ú |
Ú |
Capital U, acute accent |
|
U |
Û |
Û |
Capital U, circumflex accent |
|
U |
Ü |
Ü |
Capital U, dieresis or umlaut mark |
|
Y |
Ý |
Ý |
Capital Y, acute accent |
|
Þ |
Þ |
Þ |
Capital Thorn, Icelandic |
|
ß |
ß |
ß |
Small sharp s, German (sz ligature) |
|
a |
à |
à |
Small a, grave accent |
|
a |
á |
á |
Small a, acute accent |
|
a |
â |
â |
Small a, circumflex accent |
|
a |
ã |
ã |
Small a, tilde |
|
a |
ä |
ä |
Small a, dieresis or umlaut mark |
|
a |
å |
å |
Small a, ring |
|
æ |
æ |
æ |
Small ae diphthong (ligature) |
|
c |
ç |
ç |
Small c, cedilla |
|
e |
è |
è |
Small e, grave accent |
|
e |
é |
é |
Small e, acute accent |
|
e |
ê |
ê |
Small e, circumflex accent |
|
e |
ë |
ë |
Small e, dieresis or umlaut mark |
|
i |
ì |
ì |
Small i, grave accent |
|
i |
í |
í |
Small i, acute accent |
|
i |
î |
î |
Small i, circumflex accent |
|
i |
ï |
ï |
Small i, dieresis or umlaut mark |
|
ð |
ð |
ð |
Small eth, Icelandic |
|
n |
ñ |
ñ |
Small n, tilde |
|
o |
ò |
ò |
Small o, grave accent |
|
o |
ó |
ó |
Small o, acute accent |
|
o |
ô |
ô |
Small o, circumflex accent |
|
o |
õ |
õ |
Small o, tilde |
|
o |
ö |
ö |
Small o, dieresis or umlaut mark |
|
÷ |
÷ |
÷ |
Division sign |
|
ø |
ø |
ø |
Small o, slash |
|
u |
ù |
ù |
Small u, grave accent |
|
u |
ú |
ú |
Small u, acute accent |
|
u |
û |
û |
Small u, circumflex accent |
|
u |
ü |
ü |
Small u, dieresis or umlaut mark |
|
y |
ý |
ý |
Small y, acute accent |
|
þ |
þ |
þ |
Small thorn, Icelandic |
|
y |
ÿ |
ÿ |
Small y, dieresis or umlaut mark |
'DEVELOPMENT > Javascript' 카테고리의 다른 글
| [HTML/JavaScript] Select list move options (0) | 2009.08.11 |
|---|---|
| [HTML/JavaScript ]select box option 추가 삭제 예제 (0) | 2009.08.11 |
| [Event] observe 에서의 onload와 dom:loaded 의 차이 (0) | 2009.05.21 |
| [IE8] 웹 표준 개발자의 IE8 웹사이트 호환성 대응 (0) | 2009.04.13 |
| [javascript] select box (0) | 2009.02.16 |
[javascript] select box
매번 까먹는다.
한번 쓸때는 이제 알겠지 하면서 어제 썼던걸 오늘 또 찾게 된다.
<option value="3">포도</option>
<option value="4">귤</option>
<option value="5">자두</option>
text 값 가져오기
var obj = document.getElementById('selectbox');
var text = obj.options[obj.selectedIndex].text;
alert(text);
value 값 가져오기
var value = obj.options[obj.selectedIndex].value;
alert(value);
'DEVELOPMENT > Javascript' 카테고리의 다른 글
| [Event] observe 에서의 onload와 dom:loaded 의 차이 (0) | 2009.05.21 |
|---|---|
| [IE8] 웹 표준 개발자의 IE8 웹사이트 호환성 대응 (0) | 2009.04.13 |
| [HTML] 제어 문자 (0) | 2009.01.16 |
| [HTML 팁] HTML 소스 정렬 사이트 (0) | 2008.12.27 |
| [tip] 영문 alert 메세지 (0) | 2008.09.25 |
[HTML 팁] HTML 소스 정렬 사이트
HTML 소스를 정렬해주는 사이트입니다.
탭 들여쓰기, 자동 들여쓰기, 자동 줄바꿈 등 여러가지가 지원이 됩니다.
드림위버로 코딩이 된 소스를 보면 줄바꿈이라던가 소스 관리가 엉망인데 이 사이트에서 한번 정렬 하신후에 사용하시면 개발하기가 참 편할꺼 같네요.
URL : http://www.mycoolform.com/
'DEVELOPMENT > Javascript' 카테고리의 다른 글
| [javascript] select box (0) | 2009.02.16 |
|---|---|
| [HTML] 제어 문자 (0) | 2009.01.16 |
| [tip] 영문 alert 메세지 (0) | 2008.09.25 |
| javascript 디버거 툴 (0) | 2008.08.18 |
| 클립보드 복사 (0) | 2008.08.18 |
