Search Results for 'JavaScript'

3 POSTS

  1. 2007.12.12 [두번째] Javascript를 사용한 rich Editor. 2
  2. 2007.12.09 [첫번째] Javascript를 사용한 rich Editor. 1
  3. 2007.09.09 [Ajax.Net] JavaScript로 Animation 제어하기

[두번째] Javascript를 사용한 rich Editor.

Posted onionmen : 2007. 12. 12. 11:39, Filed under: 개발
2007/12/09 - [개발] - [첫번째] Javascript를 사용한 rich Editor.


이전에 우리는 아래와 같은 화면을 보여주는 코드를 작성한 적이 있습니다.
사용자 삽입 이미지


이제 여기에 좀 더 기능을 추가해 보도록 하겠습니다.

우선 가장 기본적으로, 굵게, 기울임체, 밑줄긋기 의 세 버튼을 추가해보겠습니다.

<input type="button" value="기울임" onClick="doCommand('italic');"/>
<input type="button" value="밑줄" onClick="doCommand('underline');"/>

위와 같은 코드를 추가해서 효과를 얻을 수 있습니다.

doCommand 메소드안에 인자값으로 italic 과 underline 을 주었습니다.
인자값의 자세한 내용은 다음 링크를 참조 하세요.


사용자 삽입 이미지


효과가 적용되는것을 확인할 수 있습니다.
이제 우리가 원하는 대로 조금씩 가까워 지고 있습니다.

이제 원하는 글씨체를 넣어볼 차례입니다.
웹 페이지를 제작하면서 글꼴은 화면을 보는 사람 입장에서 생각해야 합니다. 자신의 컴퓨터에 상용글꼴들이 설치되어 있다고 상용글꼴을 사용하면, 정작 그것을 읽는 사용자 입장에선 기본폰트로 보여지기 때문에 디자인에 영향을 줄 수 있습니다. 이는 지금 이 강좌에서도 동일하게 적용됩니다.

그렇기 때문에 우리는 윈도우 기본 글꼴을 사용해서 코드를 작성할 것 입니다. 기본글꼴의 수만해도 굉장히 많이 있지요. 우선은 간단하게 굴림체와 바탕체와 궁서체만 등록을 해 보겠습니다.

<input type="button" value="바탕" onClick="doCommand('fontname','바탕');"/>
<input type="button" value="굴림" onClick="doCommand('fontname','굴림');"/>
<input type="button" value="궁서" onClick="doCommand('fontname','궁서');"/>

위와 같은 코드를 넣음으로 해서 다음과 같은 결과를 얻을 수 있습니다.

사용자 삽입 이미지


글꼴이 추가되면 계속 버튼을 추가해서 넣어야 합니다. 글꼴을 20개 넣는다면, 너무 길어져서 디자인을 제대로 할 수 없습니다.

우리는 <select> 라는 태그를 사용해서 이것을 해결할 수 있습니다.

<select>
    <option>바탕</option>
    <option>굴림</option>
    <option>궁서</option>
</select>

다음과 같은 공간활용이 가능한 결과물을 얻었습니다.

사용자 삽입 이미지


이제 셀렉트 박스(SELECT BOX) 의 선택값으로 글자체를 바꾸는 코드를 넣어보도록 합시다.

<select onChange="doCommand('fontname',this.value);">
    <option value="'Batang'">바탕</option>
    <option value="'Gulim'">굴림</option>
    <option value="'Dotum'">돋움</option>
</select>

화 면은 동일하지만 내용물이 좀 바뀌었습니다. 버튼의 경우 클릭 이벤트를 받아야했기 때문에 onClick 이벤트를 사용했는데, 셀렉트박스의 경우 내용이 바뀌는 경우를 받아야 하기 때문에 onChange 이벤트를 사용했습니다. doCommand 의 경우 이번엔 인자값이 두개인데, 하나는 폰트를 바꾼다고 알려주는 것이고, 두번째는 어떤 폰트로 바꿀지 알려주는 것 입니다. this.value로 현재 선택된 value 값을 인자값으로 넘겨줄 수 있도록 합니다.

<select onChange="doCommand('fontname',this.value); this.selectedIndex=0;">
    <option>글자체</option>
    <option value="'Batang', 'Serif'">바탕</option>                                                 <option value="'BatangChe', ' Serif'">바탕체</option>                                   
    <option value="'Gulim', 'Sans-serif'">굴림</option>                                   
    <option value="'GulimChe', 'Sans-serif'">굴림체</option>                       
    <option value="'Dotum', 'Sans-serif'">돋움</option>                           
    <option value="'DotumChe', 'Sans-serif'">돋움체</option>               
</select>

코드를 넣고 각각의 option에 style="font-family: 'Batang';" 과 같은 스타일을 주어 직접 보여지는 보습의 폰트를 변경 할 수 도 있습니다.

사용자 삽입 이미지


동일한 방법으로 크기에 대한 코드를 넣습니다.

사용자 삽입 이미지


이제 얼추 기능이 추가된 것 같습니다.
좀 더 세심한 기능을 원하시는 분은 위 링크에 들어가셔서 기능을 연구해 보세요. Tistory의 편집창도 직접 만드실 수 있을 거예요.

'개발' 카테고리의 다른 글

Nullable<T>  (1) 2008.01.22
[첫번째] Javascript를 사용한 rich Editor.  (1) 2007.12.09
Revu스타일의 슬라이딩 로그인 패널 만들기 (1)  (0) 2007.09.19
[Ajax.Net] JavaScript로 Animation 제어하기  (0) 2007.09.09
ExtremeSwank OpenID Consumer For ASP.Net 2.0  (3) 2007.09.03
Posted by : onionmen
Response : ,

[첫번째] Javascript를 사용한 rich Editor.

Posted onionmen : 2007. 12. 9. 21:17, Filed under: 개발

4년~5 년 전만 해도, 게시판에 글을 쓸 때 폰트의 크기를 키우거나, 색상을 변경하고 싶으면, 사용자가 직접 HTML 태그를 사용해서 글을 작성해야 했습니다. 그나마도 게시판에서 HTML을 지원해 줘야 가능한 일이었습니다. 그러다가 점점 기술이 발전해 나가고, 사용자의 편의를 신경 쓰게 되니, ActiveX를 사용한 웹게시판이 포털사이트를 중심으로 등장했습니다. 귀여운 아이콘도 넣을 수 있도록 말이죠. 하지만 최근 반ActiveX 지향적인 바람이 불면서, MS IE에서만 동작하는 이러한 게시판에 대한 원성이 높아지고 있습니다. ActiveX를 도입했던 많은 곳에서 이제 ActiveX 를 제거하고, javascript를 사용한 에디터 게시판으로 전향했습니다. 별도의 프로그램을 설치하지 않아도 되는 rich 게시판은 사용자에게 유용하게 사용될 수 있습니다. 물론 이전에도 이런 기술은 존재 하였고, 몇몇 곳에서 이미 도입하여 사용하고 있었지만, 조명을 받기 시작한 건 얼마 되지 않았습니다.

본 포스팅에서 크로스브라우징이 가능한 RICH Editor를 제작해보도록 하겠습니다.

보통 게시판을 제작할 때, 글 내용을 입력하는 부분은 <textarea> 라는 태그를 사용합니다. 하지만 <textarea>는 text 외에 어떤 html도 입력할 수 없고, 입력하더라도 단지 입력만 될 뿐 외관상 아무런 영향을 미치지 않습니다. 그래서 이 부분은 frame 의 designMode 라는 DOM을 사용하여 처리하게 됩니다. 그럼 코드를 작성해 보도록 하겠습니다.

<html>

    <head>

        <title>simple rich editor</title>

    </head>

    <body>

        <iframe id="richEditor"></iframe>

    </body>

</html>

Html 코딩이 끝났습니다. 추가한 것은 iframe 태그가 전부입니다. 이 상태로 화면을 확인해 봐도 아무것도 할 수 없으니 다음 코드를 작성해 보겠습니다.

<head>

    <title>simple rich editor</title>

    <script langauge="javascript">

    function load()

    {

        document.frames['richEditor'].document. designMode = "On";

        }

    </script>

</head>

<body onload="load();">

    <iframe id="richEditor"></iframe>

</body>

페이지가 열린 후 iframe 안에 내용을 편집 가능하게 하려면 designMode 가 on 이 되어야 합니다. 그러기 위해서 <body> 안에 onload 이벤트를 사용하여, 페이지가 로드 되면 자동으로 designmode를 on 시키는 코드를 넣었습니다.

이제 코드를 작성하고 Explorer 를 실행시켜 동작시켜보면 Iframe안에 글씨를 써넣을 수 있게 됩니다. 그런데 위 코드는 파이어폭스(FF)에서는 제대로 실행이 되지 않는다는 큰 문제가 있습니다. 애써서 자바스크립트로 새로 코딩하는데, FF에서 제대로 실행되지 않으면 ActiveX를 사용하는 것과 큰 차이점이 없겠지요?

크로스 브라우징을 위해 코드를 조금 개선시켜 보겠습니다.

function load()

{

    if (document.getElementById('richEditor').contentDocument)

    {

        return document.getElementById('richEditor').contentDocument.designMode = "On";

    }

    else

    {

        return document.frames['richEditor'].document.designMode = "On";

    }

}

나머지 부분은 그대로 놔두고, 자바스크립트 부분만 바꾼 모습입니다. 이러면 IE와 FF 모두 잘 동작하는 모습을 볼 수 있습니다. 코드가 지저분해 보이니 리펙토링을 조금 해보면.

function load()

{

    getIFrameID("richEditor").designMode = "On";

}

function getIFrameID(aID)

{

    if (document.getElementById(aID).contentDocument)

    {

        return document.getElementById(aID).contentDocument;

    }

    else

    {

        return document.frames[aID].document;

    }

}

이렇게 해서 조금은 깔끔한 코드가 완성되었습니다.

이제 글씨들의 스타일을 변경할 수 있는 버튼들을 만들어 넣을 차례입니다.

Html:

<input type="button" value="굵게" onClick="doCommand('bold');"/>

선택된 곳을 굵게 표시할 수 있는 버튼을 만들었습니다. onClick 이벤트로 클릭하면 doCommand 가 실행됩니다.

Javascipt:

function doCommand(command, args)

{

    getIFrameID('richEditor').execCommand(command,false,args);

    document.getElementById('richEditor').contentWindow.focus()

}

doCommand 메소드 입니다. 좀 전에 리펙토링 하면서 만들었던 getIFrameID 메소드와 execCommand 메소드를 사용합니다.

execCommand메소드는 두개의 인자를 갖습니다. 다음 페이지를 참고 하세요.

doCommand(command, args)의 인자 값 중 처음 command는 굵게 만들지, 이텔릭체로 만들지, 언더라인을 그을지 등을 결정합니다. 두번째 args는 첫번째 인자에 따라서 결정되는데, 굵게 만들기와 같은 작업엔 사용하지 않고, 폰트종류나 크기를 결정할 때 입력합니다.

Html :

<input type="button" value="궁서" onClick="doCommand('fontname','궁서');"/>

위 코드를 추가하고 테스트를 해보면, 어떤 의미인지 잘 알 수 있을 것 입니다.

완성된 코드 입니다.

<html>

<head>

    <title>simple rich editor</title>

    <script langauge="javascript">

    function load()

    {

        getIFrameID("richEditor").designMode = "On";

    }

    function getIFrameID(aID)

    {

        if (document.getElementById(aID).contentDocument)

        {

            return document.getElementById(aID).contentDocument;

        }

        else

        {

            return document.frames[aID].document;

        }

    }

    function doCommand(command, args)

    {

        getIFrameID('richEditor').execCommand(command,false,args);

        document.getElementById('richEditor').contentWindow.focus()

    }

</script>

</head>

<body onload="load();">

    <p>

        <input type="button" value="굵게" onClick="doCommand('bold');"/>

        <input type="button" value="궁서" onClick="doCommand('fontname','궁서');"/>

    </p>

    <iframe id="richEditor"></iframe>

</body>

</html>

다음에는 위 코드에, 기능을 좀 더 추가하고, 페이지의 값을 넘겨 스크립트언어에서 받는 방법을 소개해보도록 하겠습니다.

'개발' 카테고리의 다른 글

Nullable<T>  (1) 2008.01.22
[두번째] Javascript를 사용한 rich Editor.  (2) 2007.12.12
Revu스타일의 슬라이딩 로그인 패널 만들기 (1)  (0) 2007.09.19
[Ajax.Net] JavaScript로 Animation 제어하기  (0) 2007.09.09
ExtremeSwank OpenID Consumer For ASP.Net 2.0  (3) 2007.09.03
Posted by : onionmen
Response : ,

[Ajax.Net] JavaScript로 Animation 제어하기

Posted 알 수 없는 사용자 : 2007. 9. 9. 18:28, Filed under: 개발

시작하기

Ajax.net 에서 Animation을 제어 할 수 있는 방법은 두 가지가 있습니다. 첫 번째는 AnimationExtender를 사용하는 방법이고, 다른 한 방법은 JavaScript 로 직접 제어 하는 방법입니다.

 

Ajax가 대중적으로 확산됨과 함께 Ajax.Net도 덩달아 많은 관심을 받고 있습니다. 이에 따라 AnimationExtender와 같은 ControlToolkit의 자료 또한 많이 공개되어 있습니다. 그래서 저는 JavaScript 로 Animation을 직접 제어하는 방법을 설명하겠습니다.

 

Ajax.Net을 사용하기 위해선 다음과 같은 프로그램들이 설치되어 있어야 합니다.

 

1.     VisualStudio 2005 혹은 Visual WebDeveloper Express 2005 이상의 버전이 설치되어 있어야 합니다. (이곳에서 무료로 다운로드 받을 수 있습니다.)

2.     ASP.NET Extension v1.0 이상의 버전이 설치되어 있어야 합니다. (이곳에서 무료로 다운로드 받을 수 있습니다.).

3.     ASP.NET AJAX Control Toolkit이 설치되어 있어야 합니다. (이곳에서 무료로 다운로드 받을 수 있습니다.)


Animation Hierarchy

Ajax.Net의 Animation은 다음과 같은 계층으로 구성되어 있습니다.

 

Animation --- Parent Animation   --- Parallel Animation      --- Move Animation
                                                                              --- Resize Animation
                                             --- Sequence Animation  --- Pulse Animation
                                             --- Selection Animation   --- Condition Animation
                                                                              --- Case Animation
              --- Fade Animation      --- FadeIn Animation
                                             --- FadeOut Animation
              --- Property Animation --- Discrete Animation
                                             --- Interpolated Animation
              --- Color Animation   
              --- Length Animation 
              --- Scale Animation
              --- Action                 --- Enable Action
                                            --- Hide Action
                                            --- Style Action
                                            --- Opacity Action
                                            --- Script Action

 

 크게 3가지로 분리할 수 있는데, SequenceAnimation이나 parallelAnimation과 같이 Animation들의 순서를 제어할 수 있는 Container클래스와, Fade In/Out 과 같은 실질적으로 화면을 구성하는 클래스, 그리고 시간을 기준으로 동작하는 Animation과는 달리 실행한 그 시점. 단 한번만 효력을 발휘하는 Action이 있습니다.

 

다음 URL에서 각각의 Animation을 테스트 해 보십시오.

http://66.232.144.57/suda/animation.aspx

 

사용자 삽입 이미지

Animation Example

 
사용자 삽입 이미지

FadeIn, FadeOut, Color 실행결과













Hello Ajax

간단한 Hello Ajax라는 글씨를 FadeIn하는 Animation을 작성해 보도록 하겠습니다.

 

1.     새 웹 사이트 생성합니다.

2.     폼에 TookitScriptManager를 등록합니다. 혹시 ToolkitScriptManager가 없다면, 도구상자에서 우클릭 -> 항목선택 -> 다운받은 ControlToolkit 디렉토리안의 /SampleWebsite /Bin /AjaxControlToolkit.dll 을 선택하여 추가하십시오.

3.     폼에 아무런 ControlToolkitExtender가 없으면 Animation관련 자바스크립트가 로드되지 않기 때문에 임의로 아무 Extender나 폼에 올려둡니다.

<!-- AjaxControlToolkit 라이브러리를 사용하기 위해 아무 extender나 폼에 올려 두어야 함 -->

         <asp:Panel ID="Panel1" runat="server" Width="1px" Height="1px" Visible="false" />

        <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">

            <Animations>

                <OnHoverOver>

                    <FadeIn MinimumOpacity="0.1"/>

                </OnHoverOver>

            </Animations>

        </cc1:AnimationExtender>

4.     FadeIn시킬 Div를 추가하고 Text를 설정합니다.

<div id="fadein" style="opacity:0;">

<h2>Hello Ajax</h2>

</div>

5.     <head></head>태그 사이에 다음과 같은 자바 스크립트를 추가합니다.


<script language="javascript">

function FadeIn()

{

// Animation을 재생합니다.

    AjaxControlToolkit.Animation.FadeInAnimation.play($get('fadein'), 1, 25);}

 

function Initialize()

{

    $addHandler($get('fadein'),"click",FadeIn);

}

</script>

6.     Initialize를 호출하기 위해 body태그에 onload이벤트를 설정합니다.


<body onload="Initialize();">


코드설명

AjaxControlToolkit.Animation.FadeInAnimation.play()  

FadeInAnimation을 재생하는 메소드 입니다. Play외에도 Stop과 Pause와 같은 제어 메소드들과, onStart, onStep, onEnd와 같은 이벤트리스너들도 등록할 수 있습니다. API Reference는 다음 사이트를 참고하시길 바랍니다.

http://asp.net/AJAX/Control-Toolkit/Live/Walkthrough/AnimationReference.aspx

 

$get(‘fadein’)

 Sys.UI.DomElement.getElementById() 메소드의 축약 형태입니다. $get() 외에도 다른 축약형을 알고 싶으시면 다음 사이트를 참고하시길 바랍니다.

http://asp.net/AJAX/Documentation/Live/ClientReference/default.aspx

 

.play($get(‘fadein’), 1, 25)

 두 번째 인자인 1은 duration입니다. Duration은 해당 Animation이 몇 초간 진행될 것인지를 결정하는 단위 입니다. 세 번째 인자인 25는 fps입니다.

 

$addHandler($get(‘fadein’),”click”,FadeIn)

 $addHandler는 Sys.UI.DomEvent.addHandler()메소드의 축약형 입니다. 인자로 3개를 받는데, 첫 번째 인자는 이벤트를 핸들링할 DomObject입니다. 두 번째 인자는 이벤트의 이름입니다. 세 번째 인자는 이벤트가 발생할 시 호출할 함수 이름입니다.

 

 

결론

이것으로 대략적인 Javascript로 Animation을 제어하는 방법에 대해 알아 보았습니다. 혹시 제가 잘못 알고 있는 내용이나, 추가할 점이 있으시면 댓글 혹은 트랙백으로 남겨 주십시오.

ps: 워드 2007에서 바로 포스팅 하니까 다 깨지는군요-_-;;

첨부

invalid-file
invalid-file

'개발' 카테고리의 다른 글

Nullable<T>  (1) 2008.01.22
[두번째] Javascript를 사용한 rich Editor.  (2) 2007.12.12
[첫번째] Javascript를 사용한 rich Editor.  (1) 2007.12.09
Revu스타일의 슬라이딩 로그인 패널 만들기 (1)  (0) 2007.09.19
ExtremeSwank OpenID Consumer For ASP.Net 2.0  (3) 2007.09.03
Posted by : 알 수 없는 사용자
Response : ,

Notice

  1. 팀블로그 시작합니다.

Tag cloud

Recent Posts

Recent Comments

Recent Trackbacks

Calendar

«   2024/04   »
일 월 화 수 목 금 토
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

Bookmarks

  1. 신선한바람
  2. onionmen
  3. onionmen 미투데이
  4. 신선한바람 미투데이
  5. 횸피그
  6. 횸피그 미투데이

Site Stats

TOTAL HIT
TODAY HIT
YESTERDAY HIT

티스토리툴바