웹눈의 웹이야기

jQuery 강좌 - Selector(선택자) 개념

웹눈 — Sun, 07 Feb 2010 15:29:47 +0900

우리가 선택하고자 하는것이 무엇이든지, jQuery 는 달러 사인으로 된 함수: $() 로 시작을 하게 됩니다.
$() 함수는 일반적으로 html 태그와 ID , Class 속성값과 함께 사용됩니다.

표1. CSS와 jQuery 의 선택자 비교문

Selector	CSS	jQuery	설명
ID	#ID_Name	$('#ID_Name')	ID값이 'ID_Name' 을 가지는 하나의 엘리먼트를 선택합니다.
Class	.Class_Name	$('.Class_Name')	Class 속성값이 'Class_Name' 값을 가지는 모든 엘리먼트를 선택합니다.
Tag	P	$('P')	모든 P 태그를 선택합니다.

여기서 주목할만한 점은 Class Selector와 Tag Selector는 해당하는 엘리먼트를 하나만 선택하는것이 아니라 조건이 만족되는 모든 엘리먼트를 선택하고 있다는 점입니다.

관련 자료
- jQuey Selector 종류

컴퓨터가 그린 설리와 손담비

웹눈 — Thu, 04 Feb 2010 12:40:43 +0900

ㅋㅋ... 그리는 과정은 아래에..

네이버 BQ 테스트 136~

웹눈 — Mon, 01 Feb 2010 08:52:11 +0900

멋도모르고 처음 했을때.. 상처 많이 받았었는데...ㅋㅋ
136이라..이정도면 만족함..

Flash Actionscript Media Art - Line

웹눈 — Thu, 21 Jan 2010 15:08:08 +0900

just click..

Visual C++ / OpenGL 개발 환경 설정

웹눈 — Mon, 18 Jan 2010 11:55:44 +0900

http://www.mrmoen.com/2008/03/30/opengl-with-visual-c-express-edition/

위 블로그에 Visual C++ / OpenGL 개발환경 설정에 대한 자세한 설명이 있습니다.

액션스크립트와 수학 - Bezier(베지어) 곡선 소스 source

웹눈 — Mon, 11 Jan 2010 16:57:37 +0900

위키미디아 에 나와있는 베지어 공식입니다.

위 식을 액션스크립트 3 코드로 짜보았습니다.

package sk_engine.math {

/**
* @author Lee Seul - ki
* http://webnoon.net
*/
public class Bezier {
  public function Bezier():void
  {

  }
  /*
   * 매개변수 t는 분활되는 정도. 값이 클수록 비용이 크다.
   */
  public static function getPath(t:uint,pt:Vector.<Number>):Vector.<Number>
  {
   var n : uint = pt.length*.5 - 1 ;
   var path : Vector.<Number> = new Vector.<Number>() ;
   var dist : Number = 1 / t ;
   var tv : Number = 0 ;
   for (var j : Number = 0; j <= t; j++) {
    var x : Number = 0 ;
    var y : Number = 0 ;
    for (var i : int = 0; i <= n; i++) {
     x += cn(n,i)*Math.pow((1-tv),n-i)*Math.pow(tv, i)*pt[i*2] ;
     y += cn(n,i)*Math.pow((1-tv),n-i)*Math.pow(tv, i)*pt[i*2+1] ;
    }
    path.push(x);
    path.push(y);
    tv += dist ;
   }
   return path ;
  }
  /*
   * (n i) 연산
   */
  private static function cn(n : uint, i : uint):Number
  {
   return factorial(n)/(factorial(i)*factorial(n-i)) ;
  }
  /*
   * 팩토리얼 연산
   */
  private static function factorial(val:int):uint
  {
   var cr : uint = 1 ;
   for (var i : int = val; i > 1; i--) {
    cr *= i ;
   }
   return cr ;
  }
}
}

이것을 활용한 예제를 보시려면 이곳으로 가세요.

액션스크립트 3 . 전구줄 효과

웹눈 — Mon, 11 Jan 2010 16:19:26 +0900

Bezier 커브와 Hook's law 를 응용..

한글과 유니코드

웹눈 — Tue, 05 Jan 2010 14:12:38 +0900

개요

한글 한 글자의 십진수 유니코드 = [{(초성)×588}+{(중성)×28}+(종성)]+44032
- 여기서 초성, 중성, 종성은 아래에 제시된 각 낱소리에 대한 값
16진수로 나타내기도 하며 이경우 U+XXXX 과 같은 표현을 사용
'가'의 경우
- 초성 ㄱ 0
- 중성 ㅏ 0
- 십진수 유니코드는 44032
- 16진수로는 U+AC00
'뷁'의 경우
- 초성 ㅂ 7
- 중성 ㅔ 5
- 종성 ㄺ 9
- {(7*588) + (15*28) + 9} + 44032=48577
- 16진수로는 U+BDC1

초성

ㄱ 0
ㄲ 1
ㄴ 2
ㄷ 3
ㄸ 4
ㄹ 5
ㅁ 6
ㅂ 7
ㅃ 8
ㅅ 9
ㅆ 10
ㅇ 11
ㅈ 12
ㅉ 13
ㅊ 14
ㅋ 15
ㅌ 16
ㅍ 17
ㅎ 18

중성

ㅏ 0
ㅐ 1
ㅑ 2
ㅒ 3
ㅓ 4
ㅔ 5
ㅕ 6
ㅖ 7
ㅗ 8
ㅘ 9
ㅙ 10
ㅚ 11
ㅛ 12
ㅜ 13
ㅝ 14
ㅞ 15
ㅟ 16
ㅠ 17
ㅡ 18
ㅢ 19
ㅣ 20

종성

없음 0
ㄱ 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

액션스크립트 3 - 확률 구하는 알고리즘

웹눈 — Sat, 02 Jan 2010 00:32:38 +0900

RPG 게임을 하다가 ( ㅡㅡ; ) 흔히 말하는 '아이템 지르기' 를 했다.

성공할 확률은 60%. 즉, 10 번 시도하면 6번은 성공한다는 말인데... 도대체 왜 자꾸 아이템을 날려 먹는것이냐고..

그래서 확률에 대해서 생각을 해보다가 함수를 만들었는데, 목적은 0< p < 1 의 값을 넘겨주면 그 확률(p)에 대한 Boolean 값을 반환하는 함수 이다.

즉, p = 0.1 이 되면 10번 중에 1 번 꼴로 true 값을 반환하는 함수이다.

(분명 어딘가에.. 아름다운 알고리즘이 있을테지만...무식한게 용감하다고...)

public function probability(percent:Number):Boolean
        {
             var divvy : Number = Math.min(1,percent);
             divvy = Math.max(0,divvy);

             var $i : uint = 0 ;
             var divideValue : Number = 10 ;


             while(divvy != Math.round(divvy))
             {
                 $i++ ;
                 divvy = divvy * divideValue ;
             }
             var N : Number = Math.floor(Math.pow(divideValue,$i)*Math.random()) ;
             return (N < divvy) ;
        }

예를 들어 다음과 같이 이 함수를 실행하면..

for(var i:uint = 0 ; i < 100 ; i++ )
{
      if(probability(0.03))
      {

trace("성공") ;

}

}

성공 메세지는 평균 3회 정도 출력된다.

Actionscript 3 , Isometric 과 PathFinding A*(astar) 알고리즘을 사용..

웹눈 — Mon, 28 Dec 2009 16:32:25 +0900

기존의 것을 접목시킨 정도..

Actionscript 3 원과 원 충돌 테스트

웹눈 — Mon, 21 Dec 2009 17:42:58 +0900

<-클릭

기존의 방식은 두 원간의 거리 차가 두 원의 반지름의 합보다 작으면, 충돌을 확인하는 방법이였다면, 이 방식은 두 원의 속도 벡터를 분석하여, 충돌이 일어날지의 여부를 미리 예측하고 그에 따른 적절한 대응을 해준것이다.

두 원을 각각 s0 , s1 이라고 하고, 두원의 시간(t)에 대한 위치를 p0 , p1 이라고 하자. (0<= t <= 1 )

p0(t) = C0 + V0*t
p1(t) = C1 + V1*t

로 쓸수 있다.

그럼 시간에 따른 두 원간의 거리를 d(t) 로 나타내어 보면

d(t) = p1(t) - p0(t) = (c1 - c0) + (v1 - v0)*t

즉, d의 length 가 두 원의 반지름의 합(r0 + r1) 보다 작으면 충돌이 일어나게 된다.

if (|d| <= r0 + r1 ) -> 충돌

Cost 를 절감하기 위해서(sqrt 함수 사용을 피하자, 이는 고비용을 요구한다.)

d.dot(d) = = r^2 일때의 t의 값을 구하면 충돌지점을 알아낼수 있다.

d = c + v*t 라고 하면,

c.dot(c) + 2*c.dot(v)*t + v.dot(v)*t^2 = r^2

이 방정식을 근의 공식을 사용해서 풀면 t를 구할수 있음..

즉, c0.add(v0 * t) 의 위치에서 충돌이 발생한다.

Actionscript3 - TheFWA 따라한것..

웹눈 — Wed, 25 Nov 2009 11:53:49 +0900

여기저기서 눈에 많이 뛰는 예제네.. TheFWA와 wonderfl 에서 나왔길래.. 한번 만들어 본것..

Actionscript3 - 원과 선의 충돌 테스트

웹눈 — Mon, 23 Nov 2009 13:42:22 +0900

jQuey 강좌 6 - Select 필드를 동적으로 변경하기 width PHP

웹눈 — Sat, 14 Nov 2009 23:06:33 +0900

이제 슬슬 서버사이드 언어인 PHP 와 jQuery 를 함께 사용하는 예제를 다루어 보도록 하겠습니다.
이번 강좌에서는 Select 필드의 항목이 변경되면 다른 필드가 동적으로 변경되는것을 해보도록 하겠습니다.

이 예제는, 여러 사이트의 회원가입 양식에서 보셨을텐데요. 예로, 내가 해당하는 국가를 선택하면 그에 따른 도시명들이 나열되는 select 필드가 동적으로 생성되는 예제입니다.

1. 먼저, Client Language 를 살펴보고, (jQuery 와 Html)
2. Server-side code 를 살펴본다음,
3. 코드에 대한 설명을 하도록 하겠습니다.

1. jQuery & html Code

2. PHP - Code

<?php
    switch($_REQUEST['country'])
    {
        case "ko":
        $cities = array('서울','대전','부산','대구');
        break ;

        case "us":
        $cities = array('New york','Cicago','L.A','또 뭐가 있니');
        break ;

        case "uk":
        $cities = array('London','도시1','도시2','도시3');
        break;
        default :
        $cities = false ;
        break;
    }
    if(!$cities) echo "나라를 선택해 주시와요.";
    else echo "<select name='city'><option>".
            join('</option><option>',$cities).
            '</option></select>';
?>

3. 코드에 대한 설명

먼저, 전체적인 그림을 잡아보도록 하지요.
사용자가 하는 행위를 생각해 보면, 우선 나라를 선택을 하게 될것입니다.. 이런 행위를 프로그래밍에서는 '이벤트가 발생한다' 고 하는데요, 즉, 사용자가 나라를 선택하는 행위의 발생을 말합니다.

그러면 우리가(코더 혹은 프로그래머)가 해야 할 일은 이러한 사용자의 행위(이벤트) 의 발생을 감지해서 그에 따른 적절한 조치들을 취해야 겠지요? 이번 예제에서는 선택하는 이벤트가 발생하면 해당 국가의 도시명들을 가지고 오는 작업을 해주어야 하겠습니다.

그럼 1번 jQuery 코드를 살펴보면, 사용자의 이벤트를 감지하는 코드를 볼수가 있습니다. 무엇이냐구요? 바로 setup_country_change() 함수 안에 있는 $('#country').change(update_cities) 부분이 사용자의 이벤트를 감지하는 부분입니다.

$('#country') 라는 'Object(객체)' 에 변화(change) 가 감지되면 update_cities 라는 콜백 함수를 실행하라는 내용이지요. html 코드를 보면 id가 country 로 되어 있는 부분이 select box 로 되어있는것을 알수 있습니다. 즉, 사용자가 select box를 선택(변경) 하면 발생하는 이벤트를 감지해서 update_cities() 라는 함수를 실행한다는 내용입니다.

그럼 변화가 발생하면 실행되는 함수인 update_cities() 함수를 살펴보도록 하지요.
이 함수는 어느 나라가 선택되어졌는지 확인하고, 서버사이드 언어인 PHP에 선택되어진 나라 정보를 전송하게 됩니다.

var country = $('#country').attr('value'); 이 부분이 선택되어진 나라를 변수에 저장하는 부분입니다. select box를 보면 option 마다 속성값이 있는것을 볼수 있는데, 이것이 선택될때마다 #country 객체의 value 값이 바뀌게 됩니다.

만약, '한국'을 선택했다면 country 변수에는 'ko'라는 값이 할당이 되겠지요?

이제 이 예제의 핵심적인 부분을 살펴 보도록 하겠습니다.

$.get('get_cities.php?country='+country,show_cities); 이 부분은 get_cities.php 인 서버측에 선택되어진 나라 정보를 전송하고나서 get_cities.php로 부터 제공되어지는 데이터를 retrieve(되돌려 전송) 받습니다.

선택되어지 나라 정보를 get 방식으로 전송한다는것을 알수 있지요?

$.get() 함수는 두개의 매개변수를 전달 받는데, 첫번째에는 데이터를 전송/수신 할 php 주소를, 두번째는 서버로부터 데이터를 전송받으면 실행할 콜백 함수를 정의합니다. 뭐.. 간단하지요?

마지막으로 show_cities()함수를 살펴보도록 하지요.

show_cities() 함수는 $.get에 의해 불리어지는 함수인데, 서버측에서 제공하는 데이터를 매개변수로 받습니다.
즉, show_cities(res){} 식으로 사용하는데, res에는 서버에서 전송하는 데이터 정보가 담겨져 있지요.
이렇게 서버로부터 전송받은 데이터를 $('#cities').html(res); 와 같은 식으로 #cities 필드의 html 값을 변경시키는 것입니다.

그럼 이제, 서버측 언어를 살펴보도록 하지요. 대충 어떻게 되어있을지 감이 오지 않나요?

네, 간단합니다. $.get에서 전송한 나라 정보를 switch문을 사용해서 판별한다음에,
그에 맞는 도시명들을 반환하는 역할을 하고 있습니다.

여기서는 DB와 연동 하지는 않았지만, DB와도 문제없이 사용할수 있겠지요?
그럼 강좌는 여기서 마치도록 하겠습니다.

p.s - 예제 소스는 파일로 첨부하였으니, 다운받아서 실행해 보시기 바래요. 질문은 언제나 환영입니다~

dynamicSelectBox.zip

Actionscirpt 3.0 - Papervision3D

웹눈 — Thu, 12 Nov 2009 20:15:00 +0900

(<-흰색 영역 마우스 클릭)

open API 를 사용하는건 별로 안좋아하는데...

그냥 심심해서 만들어 본것....

Actionscript 3.0 - 탄성 이미지

웹눈 — Sat, 07 Nov 2009 20:28:50 +0900

FDT3 테스트겸 만든것...

"수치해석과 그의 알고리즘" 구입

웹눈 — Fri, 06 Nov 2009 20:56:36 +0900

다니게될 직장 근처에 방을 알아보기 위해 이리저리 돌아만 다니다가, 결국은 마음에 드는 방을 찾지 못했다.

1시간 반에서 2시간 정도 걸리는 출퇴근 시간을 각오하고, 결국 집에서 다니기로 결정했는데, 그렇게 결정한 결정적인 이유는 "직장에서 아주 가깝거나 혹은 아주 먼곳으로" 직장을 다니라고 하셨던 허순 선생님의 말씀이 생각이 나서이다.

가까운 거리야 몸도 편안하고 시간도 절약할수 있으니까 그렇다지만 일부러 멀리서 다니라고 한 이유는 '출퇴근' 시간도 잘 활용하면 유용하게 사용할수 있어서 이겠지.

그래서 이 출퇴근 시간을 어떻게 하면 유용하게 쓸수 있을까.. 생각하다가..(한 10초정도 생각..)

채...책을 읽기로 결정(생각 한거냐?!)

그래서 출퇴근 시간을 알차게 보낼수 있는 책을 사려고 교보문고까지 가서 고른 책은 바로 "수치해석과 그의 알고리즘 - 유동선 지음" 이다.

나같은 초보자에게는 굉장히 읽기도 편하고, 이해하기도 쉽게 구성되어 있는 책이다. 꼭 중학생 수학 문제집 같다고 해야 할까나..

하루 출퇴근 시간이면 20일안으로 정독을 할수 있을것 같다. ㅡㅡ

Actionscript 3.0 3D Cube

웹눈 — Tue, 03 Nov 2009 20:54:42 +0900

Actionscript3.0 Wave

웹눈 — Sun, 01 Nov 2009 20:59:14 +0900

Actionscript 3.0 흐름...

웹눈 — Sun, 01 Nov 2009 16:16:32 +0900

Actionscript 3.0 역기구학

웹눈 — Sat, 31 Oct 2009 20:15:38 +0900

ActionScript 3.0, 스프링, 탄성운동

웹눈 — Fri, 23 Oct 2009 15:47:20 +0900

(마우스로 클릭 한번!)

BitmapData에 그려야 하는데...
그렇게 하지 않아서 CPU점유율이 높다.

써먹을때는 bitmapdata에 draw해야..

Actionscript 3.0 // spaceship

웹눈 — Sun, 11 Oct 2009 23:45:40 +0900

Actionscript 3.0 Particle Motion

웹눈 — Sat, 10 Oct 2009 19:46:03 +0900

아..기쁘다..

웹눈 — Tue, 06 Oct 2009 22:59:24 +0900

가슴속이 다 시원하다.. 해결했어 ㅋㅋㅋ...

결국은 cs4에서 힌트를 얻었네..

플래시&Actionscript3 RssReader기

웹눈 — Sun, 27 Sep 2009 22:31:33 +0900

이것 역시 프로젝트에 써먹을 녀석.. Flex로 구현하면 좀더 간단하려나..

아무튼 그동안 만든 프레임워크를 시험해볼겸 간단히 만들어보았다..

그나저나.... 협업은 어렵구나....

[Actionscript3] 3D 파티클..

웹눈 — Fri, 25 Sep 2009 23:29:51 +0900

원래는 별이 되어야 할 모양인데... 대충 그렸더니 ㄷㄷㄷ...

디스플레이 오브젝트의 위치값에 이 파티클의 위치값을 대입하면.. 괜찮은 퍼포먼스가 나오겠지..

[Actionscript3] Tweener 제작

웹눈 — Fri, 25 Sep 2009 17:53:41 +0900

이번 프로젝트를 진행하면서 OpenAPI를 사용하지 않고 내 힘으로 만들어보자고 다짐했다.
그래서 일단 Tweener 를 만들어 보았다.(아마 내장 API가 있으려나..)

나는 먼저 무엇을 만들기 전에 그것을 어떻게 사용할것인지부터 생각을 한다.

여러가지 고민을 해보았지만 그냥 Tween.go(대상객체,Duration,{속성:값}); 의 형식이 가장 사용하기 편하다고 생각했다.

우선 Tweener 라 하면은, Duration 동안 대상 객체의 현재 속성값이 얼마간의 '횟수'를 통해 지정된 '값'에 도달하도록 하는것이 목적이다.

이 애니메이션을 적용하기 위해 Timer 클래스를 사용하였고, Timer가 실행되는 '주기'는 stage.frameRate*duration 에 반비례 하게 된다.

frameRate와 Timer의 실행 주기를 계산해보면 1:stage.frameRate = duration:실행될 횟수 -> 즉, 실행될 횟수 = stage.frameRate*duration 이 된다.

그러면 실제로 Timer가 실행되어야 할 주기는 1/(stage.frameRate*duration) 이 된다.

그럼 이제 duration 값에 따라 Timer가 총 실행될 '횟수'를 계산해보자.

Timer가 총 실행될 '횟수'는 duration 에 반비례하고, 즉 총 실행될 횟수는 frameRate/duration 이 된다.

그럼 이제, Timer가 한번씩 실행될때마다 대상객체의 속성값에 더해져야 할 값은 (대상객체가 가져야 할 목표값 - 대상객체 초기 위치)/실행될 총 횟수
가 된다.

[Flash/Actionscirpt3] 3D 로테이션

웹눈 — Thu, 17 Sep 2009 15:18:14 +0900

3D 벡터 클래스를 만들어서 구현..
프로젝트에 써먹어야지

장난감...

웹눈 — Sun, 13 Sep 2009 18:15:22 +0900

그냥 따라해 본거..