JavaScript - 해당되는 글 9건
마스터페이지 작업시, ASP.NET AJAX의 ScriptManger 컨트롤에 ScriptReference 로 등록된
외부 JS 파일의 함수를 비하인드 코드에서 RegisterClientScriptBlock 으로 호출하고자 한다.
방법은 아래와 같은데, RegisterStartupScript 의 특성 때문에 페이지가 로드 되고나서 스크립트가 동작한다.
매우 지저분하게 처리되므로 왠만하면 실행할 코드를 마스터페이지의 <script> 블록에 등록해놓고
RegisterClientScriptBlock 으로 바로 호출해버리는게 나을 것 같다.

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "ScriptReferer", "<script type=text/javascript src='~/JavaScript/Common.js' ></script>", false);

ScriptManager.RegisterStartupScript(this, this.GetType(), "alertgo", "alertgo('로그인 하신 후 이용 가능합니다.', 'Default_Page.aspx');", true);

1. RegisterClientScriptBlock 으로 외부 JS 파일의 참조 <script> 블럭을 등록한다.
2. RegisterStartupScript 으로 외부 JS 파일내의 함수를 호출한다.

코드 순서는 상관없이 동작하는 것 같다. AJAX를 사용하지 않을 경우에는
ScriptManager 클래스 대신에 ClientScriptManager 나 Page.ClientScript 를 사용하면 된다.

아래는 강사님이 소개해 준 참조 코드... 난 조금 응용.

Trackbacks 1 | Comments 0
웹 폼에서 엔터키를 눌렀을때 Form Submit 이 아닌 지정된 버튼이 클릭되도록 하는 스크립트.

if(event.which || event.keyCode)
{
   if ((event.which == 13) || (event.keyCode == 13))
   {
      document.getElementById('" + 버튼이름.UniqueID + "').click();
      return false;
   }
}
else
{
     return true
};

< ASP.NET에서 적용하고자 할 때의 코드 >
TextBox1.Attributes.Add("onkeydown", "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('" + Button1.UniqueID + "').click();return false;}} else {return true}; ");

 
Trackbacks 1 | Comments 0

가장 흔하게 등장하는 유효성 검사 예제를 살펴 보자.
버튼 클릭시 텍스트박스에 빈 값이 들어갔는지를 자바스크립트로 처리하려고 한다.


1. 디자인 페이지 (aspx) 에서 <head> 태그 내에 <script> 블럭을 추가하고 자바스크립트 함수를 만든다.
function fnc_Chk_Value(objTagName, strMsg)
{
   var rtnVal;
   var tmp;
 
   tmp = objTagName.value.replace(/\s/g,'');
   if(tmp == "")
   {
     alert(strMsg + ' 입력 하세요');
     objTagName.value='';
     objTagName.focus();
     rtnVal = false;
    }
    else
    {
      rtnVal = true;
    }
    return  rtnVal;
}

2. submit을 일으키는 버튼에 다음과 같은 속성을 추가한다.
<asp:Button ID="btn_OK" runat="server" Text="확인" onClientClick="return fnc_Chk_Value(텍스트박스 ID, '값을')" onClick="btn_OK_Click()" />

정리하자면...
onClientClick 이벤트에서 return 값을 반환하는 자바스크립트 함수를 먼저 실행해서
true를 반환하면 서버사이드의 onClick 이벤트를 실행하고,
false를 반환하면 onClick 이벤트가 실행되지 않도록 막는것이다.
Trackbacks 0 | Comments 0

이따금씩 어떤 홈페이지 가보면, 스크롤 길게 하다가 옆에 따라 움직이는 [▲ 위로] 같은 버튼 누르면
스크롤 첫부분인 페이지 최상단으로 워프시켜주는 것을 볼 수 있다. 아래 소스로 js 파일을 만들어서
사용할 페이지에 include 시켜주면 간단하게 적용된다. 응용하면 움직이는 메뉴도 가능할 거다.


다음 소스는 조금 특별한 팝업창을 생성하는 스크립트다.
보통은 팝업을 띄우기 위해 window.open ( 'url', 'name', 'options') 와 같은 메서드를 쓰지만,
이건 popupWindow('url', 'width', 'height', 'target','scrollbars','resizeable') 로 팝업을 만들고,
팝업창이 뜨면 닫기 위해 맨구석의 x 버튼을 누르는게 아니라 Esc키로도 닫을 수 있다.

Trackbacks 0 | Comments 0
연일 학습후 포스팅이 상당히 지치는 관계로 적당히만 설명해두겠음.
이번엔 이미지 갤러리에 많이 쓰이는 스크립트를 살펴보겠다.
이미지 갤러리의 일반적인 구성은 상단에 큰 이미지를 보여주고 하단에 썸네일식으로 작은 이미지 보여준다.
우리가 하고자 하는 짓거리는 하단의 썸네일 위에 커서를 올리면 큰 이미지로 확대되어 나오는거다.

먼저 해두어야 할 짓거리는... 이미지를 순서대로 이름을 주는 것이다. 000_1.jpg 000_2... 이딴식으로.
그리고 큰 이미지, 작은 이미지를 big, small 폴더로 따로 넣어주겠다.

- 큰 이미지 코드 -
<img src='/big/000_0.jpg' name='BigImg' width='800' height='600 ' vspace='5' id='BigImg'></td>

- 작은 이미지 코드 -
<img name=img0 src='/small/000_1.jpg' width='55' height='41' hspace='5' title='1번' onmouseover=Swap_Img(0)>
<img name=img1 src='/000_2.jpg' width='55' height='41' hspace='5' title='2번' onmouseover=Swap_Img(1)>
..............

- 자바스크립트 함수 -
function Swap_Img(str)
{
    TransStr = eval("document.images.BigImg")
    TransStr.src = "/000_" + str + ".jpg"
}

눈치 빠른 사람은 다 눈치 까셨겠지만. 작은 이미지 코드의 onmouseover 시에 Swap_Image가
작은그림 1의 번호를 들고 가서 큰 이미지 코드의 src 부분을 큰 그림의 같은 그림 1번으로
싹 바꿔줌으로써 간단하게 고급 갤러리 효과를 볼 수 있는 것이다. 함수에서 처리해주는 부분은
저 두 코든데, 큰 그림과 작은 그림 짝을 맞춰주고, 번호를 순서대로 매겨야 하는 노가다 성이 있다.
좀 더 짱돌을 굴리자면, 저장되는 그림명을 배열에 넣어두고 배열로 값을 일치시켜줄수도 있겠다.

응용하면 네이버 메인화면의 쇼핑레이어의 탭효과로써 탭을 선택시 해당탭의 테이블을 바꿔줄수 있고,
옛날 홈페이지에서 많이 뵈는 버튼 선택효과로써 버튼위에 커서 올리면 눌러진 버튼으로 바뀐다던가
하는 여러가지 효과로 응용해 볼 수 있겠다. 하지만 이미지 갤러리로 제일 많이 써먹더라.
그나마도 요즘은 플래쉬가 다 해주지만서도... -_-a 플래쉬를 배울까.
Trackbacks 0 | Comments 0

오늘은 플래시 파일이 웹 페이지에 링크됐을 경우 자동으로 활성화 시키는 방법을 배웠다.
... 무슨 말인지 글로는 감이 잘 안오지만 아무튼 대략적으로 설명하자면.
우리가 YouTube나 MnCast 같은 플래쉬 동영상을 웹페이지에 링크했을 경우 바로 플레이 버튼이 뜨지 않고,
플레이 버튼을 눌렀는데 플래쉬 틀이 선택된 경우를 생각해보면 된다. 이런경우 없으면 대충 유사한거라도.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
#version=6,0,29,0
" width="169" height="167" VIEWASTEXT>
      <param name="movie" value="/a.swf">
      <param name="quality" value="high">
      <embed src="/a.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave
-flash" width="169" height="167">

자... 이와 같은 태그를 동영상 퍼오기로 들고오게 된다. 이걸 그냥 페이지에 삽입하면 위에 설명한 현상이
일어날 것이다. 객체를 클릭하고 나서 플레이해야 하는 현상... -_-a 뭐, 이하 '플래쉬 비활성화'라 칭하자.

이렇게 해결한다. 위의 소스를 document.write로 쓰는 스크립트를 외부 js 파일로 따로 만든다.
document.write('<object classid=........ 중략 '); 소스는 대략 이런 형태가 되겠지.
그럼 위의 태그를 적용할 페이지 상에서는 쓱싹 지우고 <script src="외부JS파일.js"></script>
대신 넣어버린다. 그럼 활성화되어 바로 플레이 버튼을 누를수 있을것이다.

PS. 검색해보니, 이런 귀찮은 짓하기 싫으면 방법은 많다. 파일 하나만 첨부하면 그냥 내부에 태그써도 된다.
      ... 그럼 난 왜 이런 귀찮은 짓을... -_-;;;
Trackbacks 0 | Comments 0
오늘 보너스로 배운 내용은 내용을 숨기는 자바스크립트다.
네이버 게시판을 예로 들어볼까. 덧글을 숨기는 기능을 알고 있는가?
덧글 보기 하면 덧글리스트가 펼쳐진다. 자바스크립트로 똑같이 해줄수 있다.
뭐... 불가능한게 없네 이거. 다음 소스를 보자.

function fnc_View()
{
    if(document.all.Tbl.style.display == "none")
    {
     document.all.Tbl.style.display = "";
    }
    else
    {
     document.all.Tbl.style.display = "none";
    }
}

적용을 위한 핵심 요소는 바로 style.display="none" 이다. 여기에선 table을 사용했다.
자, 그럼 display 요소까지 도달해보도록 하자.
document 객체에서, 테이블 id를 Tbl로 바로 가져올 수 읍다. all을 항상 중간에 끼워줘야한다.
display 요소는 Tbl.style.display에 있으므로 바로 갖다 붙이면 된다.
document.all.Tbl.style.display 요소까지 도달했으면, display엔 어떤게 적용되는가?
= "" 으로 적용하면 된다. 총합해보면... [ document.all.테이블id.style.display="" ] 이거다.

display 요소에 적용되는 값으로는 none, inline, block이 있는데. 이중에 none을 하면 숨겨진다.
곁다리로, inline은 같은 라인에서 보이도록, block은 다른 라인에서 보이도록 해준다. (잘 쓰이는지는...)
display는 따로 설정하지 않는 한 값을 가지지 않는 상태로 개체가 바로 화면상에 보여지는거다.

아무튼 저 fnc_View() 함수로 넘어와서, 어떻게 처리하는가? 간단하다.
저 함수가 호출 됐을때, ....display="none" 으로 숨겨져 있으면 display 요소에 빈값( "" ) 을 주어
보이도록 처리하고, 아니라면 none 으로 바꿔주어 숨기라는 것이다.
테이블의 <td>클릭!</td> 요소에 onClick="fnc_View"를 적용하고 클릭해보면 끝이다.

보너스로... 한가지 더, 우리가 버튼 같은데 마우스 커서를 올리면 손모양으로 커서가 바뀌는 것을 알수있다.
근데, 테이블 같은 경우는 버튼같은 컨트롤 타입 요소가 아니기 때문에 올려봤자 손모양으로 안나온다.
어떻게 처리할까. 버튼처럼 사용할 <td>나 <tr>요소에 style="cursor:hand;" 라고 줘버리자.

보너스 two! 고급.... 까지는 아니고 어느정도 예쁜 게시판을 보면 리스트에서 해당 게시물위에 커서 올리면
커서가 간 게시물만 색상이 변하는 것을 볼 수 있을것이다. 어떻게 처리하는가? 아래와 같다.
<td onMouseOver="this.style.backgroundColor='#000C00'" onMouseOut="this.style.backgroundColor='#ffffff'">
Trackbacks 0 | Comments 0

[ 2008년 3월 18일 과제였던 회원 가입시 유효성 검사하는 자바스크립트 함수. 두번째.]

지난번과 순서는 동일하다. fnc_FormCheck() 함수에 여러가지 유효성 체크 외장 함수들을 걸어놓았다.
버튼을 클릭하면 위에서 부터 차례로 if문을 실행해나가며 유효성 검사를 해준다.
과제로 페이지에 걸어놓은건 총 10가지다.

  1. 아이디 입력란은 공백 불가 , 글자 중간에 공백도 불가, 아이디는 6자리 이상, 아이디에는 특수문자(태그) 사용 불가 예) %, >, < 등등등....
  2. 이름 입력란은 공백 불가 , 이름은 한글만 가능(영어, 숫자는 안됨)
  3. 주민 입력란은 공백 불가 , 주민번호는 숫자만 가능, 앞의 칸 다 채우면 다음칸으로 자동 넘김 추가
  4. 비밀번호 입력란은 공백 불가 , 비밀번호 입력은 6자리 이상, 비밀번호는 오직 영문과 숫자만(한글 안됨) 가능
  5. 4와 동일, 비밀번호와 비밀번호 확인의 두개의 값은 반드시 일치 하여야 함.
  6. selPhone1 태그의 선택 항목이 "선택" 일 경우는 통신사를 선택하세요 라는 경고 박스를 뛰움.
    나머지 입력란 txtPhone1, txtPhone2는 오로지 숫자만 (당연히 공백 검사 포함) 가능하고 최대 4글자 까지만 가능
  7. 공백 입력 불가, e-mail 양식에 어긋나면 안됨
  8. 자기 소개란은 공백 입력 불가, 자기소개는 한글 25자, 영문 50자 내로 입력
같이 제공되는 common.js 라이브러리에는 다양한 유효성검사 함수가 있다.
솔직히... 이걸 안보고 짜면 좋겠지만, 현실은 시궁창이다. 함수가 어떻게 돌아가는지를 이해하고,
수많은 라이브러리들을 보면서 이 함수는 이렇게 써먹을 수 있다. 정도만 알아두면 정신건강에 이롭다.

Trackbacks 0 | Comments 0

[ 2008년 3월 14일 과제였던 회원 가입시 유효성 검사하는 자바스크립트 함수.]

동작순서를 따져보자, fnc_FormChceck()를 Button이 OnClick 되는 이벤트 발생시 동작시킨다.
먼저 document 내의 Text 객체들(txtID, txtPwd)을 받아서 common.js에 있는 다른 함수들을 호출해서
첫 함수에서 유효성체크를 하고 false 값이 넘어오면 false를 반환해서 다른 함수는 동작하지 않는다.
그 함수에서 false를 반환했다는건, 조건에 걸려서 해당하는 유효성검사 메시지가 뜬다는 것이다.
보너스로 날짜 범위 체크 스크립트도 테스트 할 수 있다. (-_- 근데, 닷넷가면 Validation 컨트롤이 나오지.)
아래는 예제 홈의 소스이고, 그 아래는 common.js의 소스이다.


Trackbacks 0 | Comments 0

microdesk's Blog is powered by Daum & tistory