BlueⓘBlog » JavaScript

bit.ly Short URL API – jQuery로 Shorten 메소드 이용해보기

Blueⓘ — Mon, 07 Jun 2010 02:55:35 +0000

PHP – bit.ly Short URL API

이번에는 jQuery를 이용 한 bit.ly API 코딩 실전으로 들어가겠습니다.

기본적으로 jQuery(JavaScript)를 이용한 외부 서버 접속은 보안상의 이슈로 처리 되지 않습니다만, JSON의 경우는 JavaScript로도 보안상의 문제 없이 외부 서버의 JSON을 처리 할 수 있습니다. bit.ly의 API는 JSON을 지원하기때문에 우리는 jQuery AJAX의 JSON을 이용하여 동적으로 Shorten URL을 서비스 할 수 있습니다.

jQuery로 Shorten메소드 호출

앞서 3장에서 다룬 내용대로 “http://www.blueiblog.com/ko/archives/1976″을 줄일때 우리는 “http://api.bit.ly/shorten?version=2.0.1&longUrl=http://www.blueiblog.com/ko/archives/1976&login=xxxx&apiKey=xxxxxxxxxxxx”와 같이 Shorten URL을 요청했습니다.

그럼 3장과 같은 내용의 함수를 jQuery로 바꾸어보도록 하겠습니다.

/**
 * License by Blueⓘ
 *
 * @param String longURL 짧게 변경할 긴 문자열의 URL
 * @return String 짧게 변환된 URL
 */
function getShortURL(longURL) {
	var ret;
	$.getJSON(
		"http://api.bit.ly/shorten?version=2.0.1&longUrl="+longURL+"&login=xxxx&apiKey=xxxxxxxxxxxx",
		function(data) {
			ret = data.results[url].shortUrl;
		}
	);
	return ret;
} 
 
$(function() {
	alert(getShortURL("http://test.com"));
});
// OUTPUT : http://bit.ly/9ICmwA

이렇게 바뀔 수 있겠네요.. 위 코드는 테스트 없이 그냥 즉석에서 소스를 jQuery용으로 변경 한 것입니다. 테스트 없이 코드를 올려서 죄송합니다 ㅠ.ㅠ 혹 문제가 없을거라고 믿으나 있다면 댓글로 노티 부탁드리겠습니다.

이 글이 도움이 않되셨더라도 왼쪽 아래에 있는 손 모양의 추천을 눌러주세요...^^

[JavaScript] 문자열을 숫자로 변환(Converting Strings to Numbers)

Blueⓘ — Mon, 22 Mar 2010 02:40:53 +0000

자바스크립트는 형 지정형 언어가 아니기에 스크립트가 자동으로 상황에 맞게 형을 지정해주게 됩니다. 이에 숫자를 저장한 변수지만 문자열로 인식 계산전에 형을 변환해주어야 할 필요성이 있습니다.

아래는 자바스크립트에서 Float 그리고 Int로 형으로 형 변환을 하는 예제 입니다.

parseFloat syntax: parseFloat(‘string’)

parseFloat('1.45kg') // 1.45 parseFloat('77.3') // 77.3 parseFloat('077.3') // 77.3 parseFloat('0x77.3') // 0 parseFloat('.3') // 0.3 parseFloat('0.1e6') // 100000

parseInt syntax: parseInt( ‘string’ [, base] )

parseInt('123.45') // 123 parseInt('77') // 77 parseInt('077',10) // 77 parseInt('77',8) // 63 (= 7 + 7*8) parseInt('077') // 63 (= 7 + 7*8) parseInt('77',16) // 119 (= 7 + 7*16) parseInt('0x77') // 119 (= 7 + 7*16) parseInt('099') // 0 (9 is not an octal digit) parseInt('99',8) // 0 or NaN, depending on the platform parseInt('0.1e6') // 0 parseInt('ZZ',36) // 1295 (= 35 + 35*36)

jQuery 1.4 공식 릴리즈 소식

Blueⓘ — Thu, 04 Feb 2010 05:52:11 +0000

jQuery 1.4가 공식 릴리즈 되었습니다. 2010년 1월 14일이니 좀 됐군요…

1.4버젼이 공식 릴리즈 되면서 jQuery API 페이지의 변화가 보이는군요…(jQuery 1.4가 릴리즈 되었는데 홈페이지의 변화 부터 봅니다 ㅡㅡ;) 그동안 좀 보기 어려웠다고 할만한 API페이지가 조금 더 보기 쉽게 변화 되었습니다. 워낙 다른 API에 비해 메뉴얼이 어려워서 진입장벽이 있다고 생각하는 jQuery이기때문에 API 페이지에 신경쓴건 좋았다고 평하고 싶습니다.

jQuery 1.4 Release Note

우선 jQuery 1.4에서 변화된 내용을 살펴보면…

좀 더 쉬운 setter 함수

.css()와 .attr()의 성능 향상

빠른 element 생성

기타 등등

입니다… 뭐 워낙 많아서… 번역하기 힘듭니다 ^^ http://jquery14.com/day-01/jquery-14 에 접속하시면 직접 보실 수 있습니다. 게을러서 죄송합니다 ㅠ.ㅠ

뭐 전체적으로 성능이 무척 향상 되었고 괜찮은 기능좀 넣었다 라고 보시면 될거 같습니다.

이 글이 도움이 않되셨더라도 왼쪽 아래에 있는 손 모양의 추천을 눌러주세요...^^

클립보드 복사 스크립트

Blueⓘ — Thu, 19 Nov 2009 02:58:14 +0000

예전에 썼던 포스팅중 분실되었던 클립보드 복사 스립트의 내용을 다시 올려봅니다.

트랙백 클릭시 자동으로 클립보드 복사해주는 스크립트 만들려다가 보니 Firefox에서는 제대로 작동을 하지 않아 만들어 봤습니다.

Flash의 Clipboard를 이용하여 클립보드에 저장하는 방법입니다. IE+Firefox둘다 잘 작동됩니다. 오페라에서는 작동 않되는거 같군요..

swf파일은 다음 링크에서 다운로드 받으시면 됩니다.
http://www.jeffothy.com/weblog/uploads/clipboard.php

[copy_clipboard.js]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
function copyClipboard(inElement) { if (inElement.createTextRange) { var range = inElement.createTextRange(); if (range && BodyLoaded==1) range.execCommand('Copy'); } else { var flashcopier = 'flashcopier'; if(!document.getElementById(flashcopier)) { var divholder = document.createElement('div'); divholder.id = flashcopier; document.body.appendChild(divholder); } document.getElementById(flashcopier).innerHTML = ''; var divinfo = '+encodeURIComponent(inElement.innerHTML)+'" width="0" height="0" type="application/x-shockwave-flash">'; document.getElementById(flashcopier).innerHTML = divinfo; } alert('클립보드에 복사되었습니다.'); }

[example.html]

1 2 3 4 5 6 7 8 9
<html> <head> <title>Flash를 이용한 클립보드 복사 예제</title> </head> <body> <script type='text/javascript' src='copy_clipboard.js'></script> <span id="myurl" onclick="copyClipboard(document.getElementById('myurl'));" style="cursor: pointer;">http://www.blueiblog.com</span> - URL을 클릭하시면 클립보드에 복사됩니다. </body> </html>

SELECT BOX에서 데이터 좌우 이동

Blueⓘ — Thu, 19 Nov 2009 01:57:44 +0000

옛날에 작성했던 코드가 유실되어 다시 찾아서 올려 봅니다.
다빈님의 블로그에서 코드를 발견했네요.

http://blog.naver.com/davincigo?Redirect=Log&logNo=60090722631

다빈님 덕분에 자료를 다시 올릴수 있게되어 감사드립니다.

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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
<html> <head> <script language="javascript"> </script> </head> <body> <form method="post" name="FORM"> <table width="600" align="center"> <tr> <td width="280"> <select multiple name="left[]" size="15" style="width:100%;"> <option value="111">111</option> <option value="222">222</option> <option value="333">333</option> <option value="444">444</option> <option value="555">555</option> <option value="666">666</option> </select> </td> <td width="40"> <a href="javascript:move(document.FORM.elements['left[]'],document.FORM.elements['right[]'])">▶</a> <a href="javascript:move(document.FORM.elements['right[]'],document.FORM.elements['left[]'])">◀</a> </td> <td width="280"> <select multiple name="right[]" size="15" style="width:100%;"> <option value="777">777</option> <option value="888">888</option> </select> </td> </tr> </table> </form> </body>

[jQuery Plug-in] 이미지 크롭 플러그인 – jCrop

Blueⓘ — Mon, 16 Nov 2009 06:39:06 +0000

오늘 소개해드릴 플러그인은 jCrop이라는 이미지 크롭 플러그인입니다.

jCrop은 사용자가 올린 이미지 또는 기타 등등의 이유로 사용자 직접 크롭핑 할 부분을 선택하여 크롭핑을 할 수 있도록 도와주는 jQuery 플러그인입니다.

아래는 jCrop의 Live Demo입니다.

<html> <head> <script src="js/jquery.Jcrop.js"></script> <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" /> <script> jQuery(document).ready(function(){ jQuery('#cropbox').Jcrop({ aspectRatio: 1, onSelect: updateCoords, setSelect: [ 100, 100, 200, 200 ] }); }); </script> </head> <body> <center><img src="/include/postExamples/jCrop/demos/demo_files/flowers.jpg" id="cropbox" /></center> </body> </html>

다운로드 : jquery.Jcrop-0.9.8.zip

이 글이 도움이 않되셨더라도 왼쪽 아래에 있는 손 모양의 추천을 눌러주세요...^^

jQuery Core – jQuery(=$) – 작성중

Blueⓘ — Wed, 15 Jul 2009 02:22:11 +0000

jQuery의 기본중 기본인 jQuery Core의 jQuery메소드에 대한 강좌를 진행하겠습니다.

jQuery(=$)메소드는 jQuery Core의 핵심 메소드로 jQuery 또는 $로 사용 할 수 있습니다. 다음은 그 예제 입니다.

jQuery('#textBox'); $('#textBox');

위 예제는 textBox라는 ID를 가진 HTML객체를 jQuery를 이용하여 찾는 예제입니다. 앞에 설명한대로 jQuery와 $가 동일하다고 하였기에 각각의 명령은 동일한 결과를 가집니다.

jQuery(=$)

문법

jQuery(expression [, context])

jQuery(html, [ownerDocument])

jQuery(elements)

jQuery(callback)

Blueⓘ의 요약 설명

jQuery메소드는 4개가 오버라이드 되어 있습니다… 처음에는 똑같은 메소드가 4개 존재하여 습득하는데 어려움이 있을것이라 생각하고 계실지 모르겠지만, 간단하게 요약하면 jQuery메소드는 HTML안에서 내가 원하는 Element를 최대한 쉽고 빠르게 컨트롤 하기 위해 존재하는 메소드입니다. 즉 4개의 오버라이드된 메소드 역시 그런 역활을 담당하기 위해서 존재하므로 Element 컨트롤용이라고 생각하시면 두려움이 좀 사라질까요? ^^

각각의 jQuery 메소드의 사용 문법을 한글로 표기하자면 다음과 같습니다.

1. jQuery(“검색하고자하는 selector 표현식” [, "검색 대상 구문"])
2. jQuery(“Document에 추가할 HTML형식의 문자열” [, "추가 대상 Document"])
3. jQuery(“검색하고자 하는 Element”)
4. jQuery(“콜백 메소드”)

자 그럼 위의 4개의 메소드를 예제를 통해 익혀보도록 하겠습니다.

위 4개의 메소드를 익히는동안 우리를 도와줄 HTML군을 소개해드리겠습니다.

<html> <head> <title>jQuery Core - jQuery(=$)</title> <script type="text/javascript" src="/js/common/jquery-1.3.2.min.js"></script> </head> <body> <h3>Examples for jQuery</h3> <div id="myDiv">Hello, jQuery <ul class="ulOfDiv"> <li>What is jQuery Core</li> </ul> </div> <p id="myP">Hello, jQuery <ul class="ulOfP"> <li>What is jQuery Core</li> </ul> </p> <p>Thanks, Blueⓘ</p> </body> </html>

jQuery(expression [, context])

jQuery(expression [, context])는 jQuery를 이용하여 여러분이 원하는 객체를 찾도록 도와주는 메소드입니다. 인자로는 expression이 있고 context는 옵션인자로 입력하지 않아도 무방합니다.

그럼 각 인자를 살펴보도록 하죠.

expression은 단어뜻을 보면 표현입니다. 즉 jQuery를 이용하여 원하는 객체를 찾도록 표현하라는것입니다. jQuery의 객체 탐색은 이 표현을 통해 이루어집니다. 보통 HTML태그를 통해서 찾기를 원한다면 jQuery(‘input’)과 같이 “input태그를 찾아라”라고 명령할수 있으며 ID값으로 찾기를 원한다면 jQuery(‘#아이디’)와 같이 찾을수 있습니다. 또한 class값으로 찾기를 원한다면 jQuery(‘.클래스’)로 찾을수 있습니다.

자 그럼 jQuery를 통해 첫번째 div태그를 찾아보도록 하겠습니다. 어떤 방법이 있을까요?

alert(jQuery('div').html()); alert(jQuery('#myDiv').html());

위의 예제에서 보듯이 두가지 방법으로 찾을 수 있겠죠? 첫번째는 태그를 통해서… 두번째는 태그안에 설정된 ID값을 통해서 찾아 보았습니다. 위 예제에서는 태그를 찾은다음 그 안에 있는 HTML값을 alert을 이용하여 출력하도록 한 예제입니다.

Blueⓘ의 사족

여기서 기존 JavaScript와 차이가 보입니다. 그럼 그 차이를 한번 보겠습니다.

alert(document.getElementByID('myDiv').innerHTML); alert(jQuery('#myDiv').html());

위 예제는 jQuery를 사용하지 않고 DIV태그의 ID를 통해 객체를 찾은다음 그 객체 안에 존재하는 HTML을 출력하는 예제이며 아래는 jQuery를 이용해서 객체 안에 존재하는 HTML을 출력하는 예제입니다. 소스가 짧고 간편하게 처리 할 수 있어 좋긴 하지만 html()이라는 메소드는 도대체 무엇일까요? 옆에 있는 정아무개씨는 “내가 자바스크립트를 10년째 하지만 본적도 없는 메소드다”라고 합니다.

맞습니다. html()이라는 메소드는 jQuery의 메소드이지 기존 JavaScript의 메소드가 아닙니다. Prototype이라는 또다른 JavaScript프레임워크와 jQuery와 가장 큰 차이점중 하나가 이것입니다. Prototype은 객체를 찾은다음 순수한 JavaScript의 객체값을 넘겨주지만 jQuery는 탐색한 객체를 jQuery객체로 만들어서 리턴을 해줍니다.

그럼 좀더 알기 쉽게 하기위해 각각 어떤 객체를 넘겨주는지 알아보도록 하겠습니다. 아래 그림은 alert(jQuery(‘#myDiv’));와 alert(document.getElementById(‘myDiv’));로 각각 어떤 값이 리턴되어 넘어오는지 확인해본 결과 입니다.

jQuery를 통한 결과는 일반 Object를 getElementById를 통한 결과는 DivElement를 리턴 해주었습니다. 결국 jQuery를 이용한여 탐색은 객체는 기존 JavaScript의 상식으로는 처리 할 수 없다는 단점을 가지고 있습니다. 하지만 이런 단점들을 웃어넘길수 있을정도로 jQuery의 세계는 막강합니다.

그럼 두번째 P태그는 어떤 방식으로 찾을 수 있을까요? 벌써 응용력이 생기셨을거라 생각합니다. 답은 아래와 같습니다.

alert(jQuery('p').html()); alert(jQuery('#myP').html());

jQuery와 Prototype 같이 사용하는 방법

Blueⓘ — Tue, 14 Jul 2009 03:14:53 +0000

JQuery와 Prototype을 같이 써야 하는 경우가 발생 할 수 있습니다. Jquery와 Prototype모두 장단점이 있기때문이기도 한데 이렇게 두 API를 모두 사용 할 경우 $메소드가 중복되어 Javascript에러가 발생합니다.

이경우에는 prototype과 jquery를 인클루드 한다음 jQuery.noConflict();명령을 하단에 추가해주시면 됩니다.

jQuery.noConflict()는 jQuery에서 $메소드 사용을 하지 않겠다는 의미입니다.

그렇다면 “jQuery는 어떻게 사용하죠??” 하고 물으신다면 jQuery메소드를 사용하면 된다고 말씀드리겠습니다. 원래 jQuery에서 $(=jQuery)이므로 $를 사용하지 않는다면 jQuery사용시에는 jQuery메소드를 사용하시면 됩니다. 아래는 noConflict의 예제입니다.

<html> <head> <script type='text/javascript' src="/js/prototype.js?ver=1.6"></script> <script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); </script> </head> <body> </body> </html>

다음은 jQuery의 $메소드 사용과 jQuery.noConflict를 사용하여 jQuery에서 $메소드를 사용 할 수 없을경우를 비교한것입니다.

// $메소드를 사용 할 수 있는 경우 $('#btn').click( function() { alert('ok'); } ); // $메소드를 사용 할 수 없는 경우(jQuery와 Prototype을 동시에 쓸 경우) jQuery('#btn').click( function() { alert('ok'); } );

즉 $만 jQuery로 변경하시면 됩니다.