javascript - 해당되는 글 26건

새해복 많이 받으세요 ^^

오랜만에 포스팅을 하는 것 같습니다. 이런 저런 일로 바쁘게 지내다 보니 한참을 잊고 있었네요..ㅎㅎ

오늘은 간만에 반가운 소식을 전해볼까 합니다. 이미 다들 알고 계실지도 모르겠지만..

Ajax의 XHR통신중 크로스 도메인이 상당히 불편해 하고 있는걸로 알고있습니다. 허나 W3C에서 이를 공식적으로 지원하기 위해
움직이고 있군요. http://www.w3.org/TR/access-control/ 이곳을 보시면 자세한 설명이 나와있으니, 참고하시면 되겠습니다.

허나 영어이기때문에.. 조금은 난해할 수 도 있지만, 저희는 글보다는 코드를 주로 보지 않습니까? ㅎㅎ

그럼 오늘은 이 기쁜(?)소식을 짧게 전하는 것으로 마치겠습니다.

posted by blankus

Tip  |  2008/01/08 23:52
사용자 삽입 이미지

AjaxLab에 MessageBox v0.7.2가 릴리즈 되었습니다.

0.6버전에서 안되던 한개 이상의 창을 띄울 수 있고, DTD 적용시 에러나는 부분에 대해서도 수정이 되었습니다. 또한 몇가지 버그들도 수정되었고 보다 안정적인 구현을 위해 id-detect를 제외시켰습니다.

버전에서 알 수 있듯이 아직 1.0이 안되는 버전이기 때문에 구현해야 할 부분이 많이 남아있습니다. 보다 다양한 기능을 추가하고 싶지만 그에 따라 커질 용량도 걱정이 되는군요.

버그를 알려주신 azki님 감사합니다.

posted by blankus

AjaxLab  |  2007/12/13 14:21
오늘은 제목에서 밝힌 것처럼 저러한 내용에 대해서 이야기 해보려합니다.

OOP! 이것은 무엇일까요? 그리고 자바와같은 언어에서의 OOP와 JS에서의 OOP는 어떻게 다른걸까요?

다들 아시다시피 OOP는 컴퓨터친화적이 아닌 인간친화적입니다. 즉, 개발의 방법의 주체를 컴퓨터에 맞추지 말고, 만드는 사람인 인간에게 맞춰 개발하자는 것이지요. 여러분은 한번쯤 이러한 고민을 해보시지 않으셨나요?
개념은 이러한데 과연 JS에서 OOP란 무엇인가...

그에 대한 여러분들의 의견을 듣고싶습니다.

posted by blankus
태그 - javascript, OOP
Javascript_base  |  2007/12/12 15:45
AjaxLab에 "MessageBox for  MooTools" 가 초기 릴리즈가 되었습니다.

구현소스는 기존과 동일하며 내부에서 실행되는 Event와 Element 등의 메소드를 MooTools용으로 교체하여 배포되었습니다.
MooTools는 아시다 시피 각 모듈간 결합도가 낮기때문에 원하는 모듈만을 모아서 사용하는 것이 가능합니다.

이번에 초기 릴리즈된 "MessageBox for  MooTools"는  MooTools 1.11 버전이 필요하며, 필수 포함 모듈은 Core, Class, Native, Element 입니다.

>>바로가기

posted by blankus
AjaxLab  |  2007/12/12 12:10
어느덧 2007년의 12월도 1/3이 훌쩍 지나가버렸습니다.

여러분들은 2007년에 계획했던 것들을 모두 이루셨는지요, 많은 분들이 그러하듯이~ 저또한 일부 이룬것도 있고, 이루지 못한 것도 있습니다.
언제나 그러하듯이 게으름이 가장 큰 요인인듯 합니다. 하지만 그러한 게으름도 제주위에서 열심히 응원해주시는 많은 분들이 계시기에 그나마 지금까지 온 것 같습니다.

오늘은 AjaxLab에서 선보이는 MessageBox를 소개할까합니다. 아직 준비중인 곳이니까~
AjaxLab에서 많은 부분이 미완성입니다. 앞으로 계속 발전하는 모습을 지켜봐 주세요~

MessageBox 0.6.1(http://www.ajaxlab.kr/Projects/Blankus)


MessageBox를 사용하기 위해 커다란 라이브러리를 include하여 사용하는 것은 바람직하지 않다. 하여 자주 사용하는 MessageBox를 각 Framework(또는 non-Framework)에서 작동 할 수 있도록 최대한 가볍게 작성한다.

구현 목표

  • MessageBox의 크기를 지정할 수 있다. (가로, 세로)
  • MessageBox의 제목을 지정할 수 있다.
  • MessageBox의 내용을 지정할 수 있다. (text, html)
  • MessageBox와 브라우저의 충돌여부를 판단하여 이동범위를 제한할 수 있다.
  • MessageBox의 출현후 콜백함수를 지정할 수 있다.
  • MessageBox의 출현지점 좌표를 지정할 수 있다.
  • MessageBox의 드래그가 가능하다.

사용법

해당 JS를 인클루드 하고, 아래와 같이 선언하여 사용하고, 원하는 정보를
설정하여 사용한다.

<script type="text/javascript" src="js/MSGBox.js"></script>

/*
new MSGBox({width, height, collision, callback})

width : 메세지박스 가로사이즈 (number) height : 메세지박스 세로사이즈 (number) collision : 메세지박스의 충돌상태 (boolean) callback : 메세지박스의 출현후 콜백지정 (function)
*/
var msg = new MSGBox({width:200, height:120, collision:true, callback:''});

/*
drawBox(title, closeImg, contents, X, Y)

title : 제목줄에 표시될 텍스트 (string)
closeImg : 닫기버튼 사용시에 이미지 경로, 없으면 텍스트 대체 (string)
contents : 메세지박스의 내용에 보여줄 내용 (string)
X : 메세지박스 출현의 x좌표 (number)
Y : 메세지박스 출현의 y좌표 (number)
*/
msg.drawBox('긴 제목줄은 어떻게 될까요? 테스트해봐요','close.gif','내용');

스크린샷


AjaxLab이란 곳은 Ajax를 좋아하는 사람들이 모여 만든 곳이고, 저뿐만 아니라 다른 분들도 곧 프로젝트를 오픈할 예정입니다. 많이들 사랑해주시구요~ 제 블로그를 통해서 이곳의 소식을 전하도록 하겠습니다.

posted by blankus
AjaxLab  |  2007/12/11 13:49
오늘은 무지 추운날입니다 ㅠㅠ

세상을 위해서는 겨울이 더욱 추워져야 하는데 저를 생각하면 날이 따스했으면 합니다. 어제 다큐멘터리를 보는데 지구의 온난화때문에 많은 자연의 재앙들이 생긴다고 하더라구요. 걱정입니다

오랜만에 기초강좌를 올려보려고 합니다. 순서에 맞지는 않다고 보여집니다만..^^ 제목처럼 데이터타입들에 대해서 알아보려고 합니다. 많은 분들이 잘 알고계신 부분이지만 놓치면 후회(?)할 부분도 있으니까 이부분을 너무 저평가하여 생각하시면 안됩니다. 저도 사실 많은부분을 할애한 부분이기도 합니다.

상세한 부분을 알아보기 전에 전체적인 그림을 그려보도록 하겠습니다.
여러분은 데이터타입에 대해서 잘알고 계신가요? 자바스크립트에서 사용하는 데이터타입은 크게 세가지로 나눌 수 있습니다. 원시타입(primitive datatype), 단순타입(trivial datatype), 혼합타입(composite)이 그것입니다. 다시 원시타입은 Number, String, Boolean으로, 단순타입은 null과 undefined으로, 혼합타입은 Object입니다. 우리가 흔히들 사용하는 function, array등은 모두 Object에 해당됩니다. 나중에 알아보겠지만 Object와 Array는 좀 특별한 내용이 있습니다. 그리고 프로그램을 하다보면 자주 접하게 되는 By value와 By reference의 차이점에 대해서도 알아볼 것이고, Wrapper에 대해서도 알아볼겁니다.

자 이제 전체적인 그림을 그려봤으니 자세하게 알아보도록 하겠습니다.

Number
다른 언어에서는 Integer와 floating-point를 따로 구분해서 사용하고 있습니다. 허나, 자바스크립트에서는 따로 구분하지 않습니다. 쉽게 var num = 10 도 되지만 var num = 3.14 도 된다는 이야기지요. 앞선 예제처럼 직접적으로 숫자를 사용하는 것을 numeric literal이라고 부릅니다. Number는 3가지의 Literals를 가집니다.
  1) Integer Literals : 다들 아시다시피 10진수 기반의 모든 숫자를 이야기합니다.
  2) Hexadecimal 과 Octal Literals :  16진수(ex : 0xff or 0Xff)와 8진수(ex : 0377)를 사용하는 number입니다
  3) Floating-point Literals : 소수점을 사용하는 number입니다. 형식은 [digits][.digits][(E|e)[(+|-)]digits]입니다.
위의 예제는 따로 구성하지 않겠습니다. 뒷편에 조금씩 다룰것이니까요 ^^
혹시 여러분들은 Number.MAX_VALUE / Number.MIN_VALUE를 아시나요? 혹시 파이어버그를 사용하신다면 console창에 한번 찍어보세요. 자바스크립트에서 사용할 수 있는 최대/최소값을 알려줍니다. 그리고 isNaN()이라는 함수가 있습니다. 숫자인지 판별하여 그값을 boolean형태로 돌려줍니다. isFinite()라는 함수는 주어진 값이 Number.MAX_VALUE 또는 Number.MIN_VALUE 사이에 값이 존재하는지의 여부를 boolean형태로 알려줍니다.

String
프로그램을 짜면서 가장 많이 사용되는 데이터타입이 아닐까 합니다. String literal은 원칙적으로 한줄에 써야하는건 아시죠? ㅎㅎ String literal에 대해서는 특별한건 없구요 한번 집어보는 정도로만 하겠습니다.
여러분들은 숫자를 문자로 어떻게 변경(converting)하시나요? 보통 toString()을 많이 사용하시죠? 네 그렇습니다. 저도 그렇지요 ㅎㅎ 그렇다면 아래의 예제를 보세요.

var n = 123456.789;
n.toFixed(0) // "123456"
n.toFixed(2) // "123456.78"
n.toExponential(1) // "1.2e+5"
n.toExponential(3) // "1.235e+5"
n.toPrecision(4) // "1.235e+5"
n.toPrecision(7) // "123456.8"

평소에 사용해본 적이 있으신 함수인가요? 중요한건 아닙니다. 이런것도 있다~ 정도만 아시면 되겠습니다. 그래도 실제로 한번씩은 실습을 해보시기 바랍니다.

그렇다면 반대로 문자를 숫자로 변경(convertin)을 해보셨나요? 어떤 방법을 사용하시나요? 보통은 아래처럼 사용합니다.

var num = Number(string_value)  또는 var num = parseInt(string_value)
둘의 차이점을 아시나요? 다음의 예제를 보시죠

var txt = "3 blind mice"
var num_1 = Number(txt)
var num_2 = parseInt(txt)

num_1과 num_2의 값을 예상하시나요? 네~ num_1은 undefined이고 num_2는 3이 나옵니다. 직접해보세요 ㅎㅎ 그렇다면 아래의 경우는 어떨까요?

var txt = "3.14입니다"
var num = parseInt(txt)
답은 3입니다. 너무 쉬웠나요? ㅎㅎ 답은 parseIntInt에 있습니다. Int는 Integer의 약자이고 앞에서 Integer는 10진수를 기반으로 한다고 했습니다. 하지만 이것은 기본값이구요, 만약 parseInt("11", 2)라고 한다면 답은 3이 됩니다. 왜냐하면 11이란 값을 2진수의 값으로 변경하기 때문입니다. 그리고 한가지 팁아닌 팁을 알려드리면,

var txt = "$72.34"
var num = parseInt(txt) // return NaN

입니다. ^^ 자세히 설명하지 않아도 느낌이 오셨을거라 생각합니다.

오늘은 여기까지하고 다음 강좌는 Boolean 데이터타입부터 하겠습니다.
좋은밤 되세요 ㅎㅎ

posted by blankus
Javascript_base  |  2007/11/18 21:40