'자바스크립트' 태그의 글 목록 (2 Page)

'자바스크립트'에 해당되는 글 16건

2009.12.28 [Javascript] js개발 시 alert대신 쓸 수 있는 디버그메세지창 - Blackbird 7
2009.09.28 [Javascript] jQuery의 getJSON사용 시 다른 도메인 데이터가져오기(CrossDomain)
2008.10.09 [Javascript유틸리티] 매우 심플한 Javascript Calendar(Date Picker) 3
2008.09.14 [AIR] HTMLLoader를 이용한 Javascript(Prototype)연동테스트. 4
2008.08.06 [Flex] Flex와 javascript간의 통신을 쉽게 해주는 FABridge 사용후기. 10

[Javascript] js개발 시 alert대신 쓸 수 있는 디버그메세지창 - Blackbird

자바스크립트(Javascript) 2009. 12. 28. 23:01

Javascript로 개발하다보면 값을 확인하기 위해 alert을 가끔씩 찍습니다-_- 요즘은 FireBug와 같은 Javascript 디버그 툴들이 참 많이 있긴하죠.
FireBug는 console.log를 통해서 메세지를 찍을 수 있죠.
하지만, FireBug를 켜지 않으면 에러를 뿜어버리는 단점이 존재를 하죠-_- 그래서 가장 간단히 값을 확인하는 것은 역시나 alert이죠. 하지만, alert의 단점은 마우스동작으로 인한 값을 추출하기 위해서는 확인하기 힘든 단점이 있어요.
마우스로 드래그앤드랍을 하는 사이에 값을 확인하고 싶은데, 거기서 얼럿이 떠버리면 확인하기 힘들죠-_-

그 단점을 극복해주는 Blackbird라는 놈이 있는데요. 이름 참 잘 지은 것 같네요. 웹사이트에서 검은창으로 떠다니는 디버그메세지창을 보여주거든요-_-

아래는 다운받고 데모를 볼 수 있는 사이트입니다.
http://www.gscottolson.com/blackbirdjs/

사이트 방문하시면 사용법은 그냥 알 수 있구요.
추가도 그냥 해당 사이트에 js와 css파일을 추가만 하시면 바로 쓸 수 있습니다^^
그리고 웹사이트 한쪽 구석에 나오게 되는데 저것에 의해서 화면이 가려질까봐를 염려한-_- 창 이동 단축키가 존재합니다-_-
단축키로 창을 보이고 안보이게 할 수 있습니다. 클리어로 창 내용을 지울 수도 있구요^^

로그찍는 것도 로그레벨에 따라 찍을 수 있어서 좋네요. 그리고, 프로파일링 기능(이라고 하기에 좀 뭐한-_-)이 있는데, 성능을 개선을 위한 수행시간 측정을 해주는 기능도 제공합니다^^

다만 아쉬운 점이 있다면 객체나 배열을 한번에 로그로 찍을 수 있는 기능이 없네요.
Arthropod이라는 Adobe AIR로 개발된 Flash디버그메세지창이 있는데요(이것과 매우 비슷하죠^^). 이것은 그냥 Debug.object(object명); 이라고 치면 그 객체정보가 다 나오는 기능이 있죠.
배열도 Debug.array(array명);하면 배열내용을 확인할 수 있구요.

그래도 크로스브라우징으로 로그를 찍을 수 있어서 참 좋은 듯^^ FireBug는 FireFox에서 밖에 안되서-_-

PS. 이 프로그램은 http://twitter.com/xguru님으 트위터를 빨로우 하다가 발견했습니다. 역시 트위터의 힘은 대단한 것 같아요^^ 감사해요~

Posted by 머드초보

[Javascript] jQuery의 getJSON사용 시 다른 도메인 데이터가져오기(CrossDomain)

자바스크립트(Javascript) 2009. 9. 28. 22:37

몰랐는데, 그냥 자신의 도메인에서 가져올 땐 잘 가져와지는데, 다른 도메인에서 하려니까 잘 안되서 찾아보니 하는 방법이 있네요.
예로 다음 오픈api같은 경우 callback파라메터에 메소드명을 넣어주면 "메소드명({jsondata})" 형태로 넘어옵니다.
그래서 크로스도메인을 사용하려면 이와 같이 구현해야합니다.

다음OpenAPI를 보면 위와 같이 json이 출력이 됩니다.
url : http://apis.daum.net/contents/movie?apikey=키값&q=awake&output=json&callback=aa
결과 : aa({json~~})

그래서 실제 크로스도메인형태로 구현할 때 callback함수를 받은 값을 앞에다가 그냥 넣어주면 됩니다-_-

php코드는 대충 이런식으로-_-
[code]$json = $_GET["c"] . "(" . json데이터 . ")";
echo $json;[/code]

아.......아마 저런 형태로 안하면 callback함수가 호출 되지 않고 firebug에서 이런 에러를 뿜을 꺼에요.
"invalid label"
이것 때문에 미치는 줄 알았는데, crossdomain인 경우에는 이런식으로 해줘야하더군요.

참고사이트
http://www.ajaxlines.com/ajax/stuff/article/jquery_ajax_cross_domains_using_jsonp_getjson.php

Posted by 머드초보

[Javascript유틸리티] 매우 심플한 Javascript Calendar(Date Picker)

자바스크립트(Javascript) 2008. 10. 9. 21:48

주소는 여기입니다.
http://www.calendarview.org/

일하다가 데이트픽커가 좀 필요해서 만들기 귀찮고 해서-_-; 찾아보던중-_-;
매우 심플한 Date Picker를 발견했습니다.

Prototype과 Script aculous기반의 Calendar입니다.
Prototype은 이곳에서 다운.
http://www.prototypejs.org/download
Script Aculous는 이곳에서 다운(필요한 것은 builder.js파일 1개뿐)
http://script.aculo.us/downloads

릴리즈 히스토리를 보게 되면 더이상 업데이트가 되지 않고 있습니다-_-;

암튼 한줄이면 바로 생성할 수 있습니다.

[code]
Calendar.setup({
dateField : 'fromdate',
triggerElement : 'fromDateButton'
});
[/code]
triggerElement에 버튼 id를 넣어주면 버튼을 클릭했을 때 Calendar가 표시됩니다.
dateField는 Calendar에서 날짜를 클릭하면 해당 dateField에 YYYY-MM-DD형식으로 표시해줍니다.

Posted by 머드초보

[AIR] HTMLLoader를 이용한 Javascript(Prototype)연동테스트.

에어(AIR) 2008. 9. 14. 14:13

이거 완전 신기하네요-_-;
HTMLLoader라는 클래스가 AIR전용으로 있는데요.
HTML을 읽어와서 보여주는 역할 뿐아니라 JAVASCRIPT함수를 호출할 수 있으며(ActionScript3에서 자바스크립트 문법을 그대로 사용할 수 있는 듯 합니다-_- 아직많이 해보지는 않았지만-_-), 물론 자바스크립트 프레임워크 메소드도 호출이 가능하겠죠.

한번 해보니 잘 되네요-_-;

AIR로 프로젝트를 만들고, src폴더에 prototype-1.6.0.2.js 파일을 넣구요.
prototypetest.html파일을 아래와 같이 작성했습니다.
[code]
<?xml version="1.0" encoding="EUC-KR" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AIR와 JAVASCRIPT(prototype)연동</title>
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
</head>
<body>
<div id="myDiv">
안녕하세요!<br />
후....추석날 뭔짓이냐..-_-;
</div>
</body>
</html>
[/code]
저기 DIV내용을 FLEX로 가져오겠습니다.
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private var _htmlLoader:HTMLLoader;

private function clickHandler():void
{
_htmlLoader = new HTMLLoader();
_htmlLoader.addEventListener(Event.COMPLETE, completeHandler);
_htmlLoader.load(new URLRequest("prototypetest.html"));
}

private function completeHandler(event:Event):void
{
Alert.show(_htmlLoader.window.$("myDiv").innerHTML);
}
]]>
</mx:Script>

<mx:Button label="DIV내용을 프로토타입함수 사용해서 가져오기" click="clickHandler()"/>

</mx:WindowedApplication>
[/code]
간단합니다. HTMLLoader를 이용해서 HTML파일을 읽어와서 다 읽어오게 되면, HTMLLoader객체에 포함되어있는 window라는 property가 있는데 이것을 이용해서 prototype함수를 호출하면 됩니다.
$('') 요게 먹힙니다-_-; 아래는 결과입니다.

우선 이게 되서 제가 기쁜게...Oauth인증이.....AIR에서 안되더라구요-_-;
AIR에서도 되는군요-_-; 다시 시도를...-_-;
근데, 신기하게 JAVASCRIPT에서는 되더라구요. 그래서 왠지 JAVASCRIPT를 이용해서 인증하고 사용하면 될 것 같은 느낌이 들어서 시도해보려고 해요. 망할..Oauth-_-;

Posted by 머드초보

[Flex] Flex와 javascript간의 통신을 쉽게 해주는 FABridge 사용후기.

플렉스(Flex) 2008. 8. 6. 16:33

자바스크립트와 Flex와 통신을 해주는 FABridge라는 놈은.....
우선 처음에 접하게 되면 혈압을 약 50%를 상승시켜주는 효과를 가져다 줍니다.

그 이유는 로컬에서는 테스트를 할 수 없습니다-_-;
즉, file:///D:/workspace/flex/~~~ 요런 경로에서는 실행할 수 없습니다.
처음에 그냥 flex builder에서 실행할 때에는 아무런 경고가 뜨지 않습니다. 하지만, export해서 build release를 한다음에 bin-release에 있는 html파일을 실행하면 요런 에러가 뜹니다-_-; 이걸로 혈압이 10%상승했죠.

SecurityError: Error #2060: 보안 샌드박스 문제가 발생했습니다. ExternalInterface 호출자 file:///D:/workspace/flex/FABridgeTest111/bin-release/FABridgeTest.swf은(는) file:///D:/workspace/flex/FABridgeTest111/bin-release/FABridgeTest.html에 액세스할 수 없습니다.
at flash.external::ExternalInterface$/_initJS()
at flash.external::ExternalInterface$/addCallback()
at bridge::FABridge/initializeCallbacks()
at bridge::FABridge()
at FABridgeTest/_FABridgeTest_FABridge1_i()
at FABridgeTest()
at _FABridgeTest_mx_managers_SystemManager/create()
at mx.managers::SystemManager/initializeTopLevelWindow()
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::docFrameHandler()

아놔...그렇구나....-_-; 그래서 꼼수로....톰캣과 blazeds를 이용합니다-_-;
프로젝트를 생성할 때 ProjectName에 FABridgeTest로 하고, Web application으로 하고, Application ServerType을 J2EE로합니다. 톰캣을 사용하는 겁니다. 이렇게 생성한 놈은 실행할 때 http://localhost:8080/프로젝트명/프로젝트명.html로 실행해주기 때문에 테스트를 할 수 있습니다.
Next를 하고, Target runtime에 tomcat을 설정해주고, Flex War파일에는 blazeds.war파일을 선택합니다. Finish를 선택하여 프로젝트를 만듭니다.

기존에 있던 index.templete.html은 FABridge사용에 문제가 좀 있어서 다시 생성만들어야합니다.
http://olegflex.blogspot.com/2008/06/swfobject-2-flex-template.html
여기에 가면 templete을 만들어 놓은 것이 있는데 다운받고 압축을 풀면, html-template폴더가 있는데, 기존의 html-template폴더 날려버리고, 이걸로 대체합니다.

이제 필요한 것은 FABridge.js파일인데, 이 파일은 기존의 것을 사용하면 swfobject 2.1에서는 사용할 수 없습니다. 그래서 수정한 버전이 필요합니다. 기존것으로 하려다 혈압이 약 20%상승한 듯 합니다.
http://www.swffix.org/swfobject/swfobject_flex3/
이곳에 가면 예제와 FABridge.js와 history.js파일이 있는데 이걸 html-templete폴더와 ./history폴더에 각각 복사합니다.
예제를 만들어봅시다.
index.templete.html파일을 열어서 bridgeName을 지정해줍니다.
[code]
var flashvars = {
bridgeName: "mudchobo"
};
[/code]
지정해주지 않으면 flash가 디폴트가 됩니다.
html-templete폴더에 test.js파일을 만들어서 테스트를 만들어봅시다.
test.js
[code]

var flexApp;

FABridge.addInitializationCallback( "mudchobo", function() {
flexApp = FABridge.mudchobo.root();
var callback = function() {
alert('flex로 호출한 javascript메소드');
}
flexApp.getMyButton().addEventListener("click", callback);
});

function callFlexFunction() {
flexApp.flexFunction('javascript로 호출한 flex메소드');
}
[/code]
FABridge.addInitializationCallback함수는 birdge이름이 mudchobo인 flash가 초기화가 다 되면 호출이 되는 듯합니다. 로드가 다 된 상태면 저 뒤에 함수를 호출하게 되는 듯합니다.
window.onload에다가 때려박으면 FABridge.mudchobo가 undefined가 되더라구요. 이걸로 혈압이 약 10%상승했습니다.
javascript에서 flex버튼 이벤트가 발생했을 때 이벤트를 걸 수 있습니다. getMyButton()네이밍 룰은 flex에서 버튼 id가 myButton이면 getMyButton으로 해당 컴포넌트를 가져올 수 있습니다. id가 mudchobo면 getMudchobo()가 되겠죠. addEventListener에 click시 callback함수를 호출하도록 이벤트를 추가합니다.

그리고, callFlexFunction이라는 메소드를 추가해서 이것은 flex메소드를 호출하는 겁니다.
flexApp객체를 통해 그냥 함수명을 호출하면 호출이 됩니다.

index.templete.html에다가는 head부분에다가
[code]
<script type="text/javascript" src="FABridge.js"></script>
<script type="text/javascript" src="test.js"></script>
[/code]
body부분에다가 button을 추가
[code]
<div>
<input type="button" id="javascriptButton" value="callFlex" onclick="callFlexFunction();"/>
</div>
[/code]
이제 flex코드로 가봅시다. 우선 FABridge.as파일이 필요합니다. 이 파일은 C:\Program Files\Adobe\Flex Builder 3 Plug-in\sdks\3.0.0\frameworks\javascript\fabridge\src에 있습니다. 아주 꼭꼭 숨겨두셨어요-_-;
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:bridge="bridge.*" width="300" height="150">

<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function flexFunction(data:String):void
{
Alert.show(data);
}
]]>
</mx:Script>

<mx:Button id="myButton" label="callJavaScript" />

<bridge:FABridge />
</mx:Application>
[/code]
중요한 점은 xmlns:bridge="bridge.*"랑 <bridge:FABridge /> 입니다.
이제 실행을 해봅시다.
아...여기서 이제 html-templete내용의 js파일을 고쳤는데 파폭에서 열고 소스보기하면 안바뀌어 있을 때가 있습니다. 그때는 Flex메뉴에서 Project -> clean을 해주면 되더라구요. 이걸로 혈압 10%상승!

실행하면 localhost로 뜨기 때문에 잘 될 겁니다. 소스파일입니다.

invalid-file