alert()은 다이알로그 박스에 메시지를 나타낼 때 사용

confirm()은 메시지를 나타내고 확인을 할 때 사용(OK/Cancel)

prompt()는 메시지를 나타내고 문자열의 입력을 받을 때 사용


<예>

<HTML>
<HEAD><TITLE>Alerts, Confirmations, and Prompts</TITLE>
</HEAD>
<BODY>
 <H1>Alerts, Confirmations, and Prompts</H1>
 <HR>
  Use the buttons below to test dialogs in JavaScript.
 <HR>
 <FORM NAME="winform">
  <INPUT TYPE="button" VALUE="Display an Alert"
  onClick="window.alert('This is a test alert.');  ">
  <P><INPUT TYPE="button" VALUE="Display a Confirmation"
  onClick="temp = window.confirm('Would you like to confirm?');
  window.status=(temp)?'confirm: true':'confirm: false'; ">
  <P><INPUT TYPE="button" VALUE="Display a Prompt"
  onClick="var temp = window.prompt('Enter some Text:','This is the default value');
  window.status=temp;  ">
 </FORM>
 <BR>Have fun!
 <HR>
</BODY>
</HTML>

Posted by 철냄비짱
,
<script type="text/javascript">
//내용창 100자 제한
function ismaxlength(obj){
 var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
 if (obj.getAttribute && obj.value.length>mlength) {
  alert("글자수는 100자로 제한되어 있습니다.");
  obj.value=obj.value.substring(0,mlength);
 }
}
</script>

<textarea id="comment" name="content" cols="" rows="" maxlength="100" onkeyup="return ismaxlength(this)"></textarea>
Posted by 철냄비짱
,

SWFObject

Javascript 2008. 10. 10. 14:59



얼마전 부터 플래시를 활성화 시키기가 좀 짜증나 졌다.

익스플러워 업데이트 되고 부터 이런저런 자바스크립트 소스들이 나오기 시작했는데...

어도비에서 제공되는 익스텐션도 괜찮았다.

하지만 요즘 들어 swfObject를 제일 많이 사용하는 것 같다.

 

http://blog.deconcept.com/swfobject/ 를 가보면 소스와 사용법을 볼수있다.

 

주의 할건 플래시를 넣은 table 이나 div 위에 height 값을 정해 주지 않고 그 않에 파일을 import 하면 다른 링크로 갈때나 새로고침 할때 플래시 컨텐츠가 순간 올라간다

 

우선 간단하게 정리해 본다.

 

 

사용방법

 

SWFObject.js 파일을 include 해서 간단한 코드만 몇 줄 작성하면 된다.

아래 샘플을 보자.

 

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

<div id="flashcontent">

This text is replaced by the Flash movie.

</div>

<script type="text/javascript">

var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");

so.write("flashcontent");

</script>

<div id="flashcontent">[...]</div>

위 코드는 Flash plug-in 버전이 낮거나 설치 되있지 않으면 출력된다.

 

 

var so = new SWFObject(swf, id, width, height, version, background-color);

 

기본 파라미터 :

 

  • swf - swf 파일경로와 파일명.
  • id - object나 embed tag의 ID.
  • width - Flash movie width.
  • height - Flash movie height.
  • version - Flash content에서 요구하는 player 버전. format : 'majorVersion.minorVersion.revision'. ex) "6.0.65". 또는 major 버전만 기입해도 된다("6").
  • background color - background color.

     

     

    추가 파라미터 :

     

  • useExpressInstall - 만약 ExpressInstall 기능을 사용할려면 'true'로 설정
  • quality - quality 설정. default는 "high".

  • xiRedirectUrl - 만약 ExpressInstall을 이용해 upgrade를 완료한 유저를 redirect 하길 바란다면 교체될 URL을 여기서 정할수 있다.

  • redirectUrl - 만약 최신 plug-in버전을 가지고 있는 않는 유저를 redirect 시킬려면 이 파라미터를 사용해라. 그러면 redirect 될것이다.

  • detectKey - 사용 않해봐서 모르겠다..ㅡㅡ; 해석도 맞는지 모르겠다. 원문을 참고해라.

    이것은 SWFObject script가 detection을 우회할때 찾을 url 변수 이름이다. default는 'detectflash'. Example : 너는 ?detectflash=false 를 파일명 뒤에 붙이는 걸로 Flash 탐지를 우회해서 간단하게 페이지에 플래시를 보여준다.

    This is the url variable name the SWFObject script will look for when bypassing the detection. Default is 'detectflash'. Example: To bypass the Flash detection and simply write the Flash movie to the page, you could add ?detectflash=false to the url of the document containing the Flash movie.

     

     

    so.write("flashcontent");

     

    열거된 HTML element 내부에 재배열 하는 것으로 SWFObject script가 페이지에 flash 컨텐츠를 쓰는 것이다.(만약 적합한 플러그인 버전이 인스톨 되 있다면)

    굳이 div 레이어에 넣지 않아도 된다. td 태그에도 id와 name값을 지정해 주고 so.wirte(id)를 호출해주면 된다.

     

     

    SWFObject가 작동되는 브라우져

     

    SWFObject는  PC: IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, and Opera Mac: IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, and Opera 7.5+에 작동되고 있다.

     

     

     

    plug-in 탐지에 있어서 SWFObject's built는 무시 당할수 있다. 만약 새로운 브라우저가 언젠가 런치 되거나, 유저시스템에서 plug-in 탐지 실패의 어떤 이유 때문에, SWFObject에 대한 탐지 built를 비활성화 할 우회 링크를 include 할 수 있고, 우회링크는 항상 페이지에 플래시 컨텐트를 보여줄것이다. 우회 링크를 사용하는 방법은, 간단하게 플래시 컨텐츠가 있는 페이지로 링크를 거는 것이다. url에 'detectflash=false'를 붙이는 것이다.

     

    <a href="mypage.html?detectflash=false">Bypass link</a>

     

     

     

    추가 파라미터를 추가하는 샘플

     

    <script type="text/javascript">
       var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
       so.addParam("quality", "low");
       so.addParam("wmode", "transparent");
       so.addParam("salign", "t");
       so.write("flashcontent");
    </script>

     

    사용가능은 전체 파라미터

     

     

    "Flashvars" parameter 사용법

     

    변수이름/변수값으로 추가로 추가 해주면 된다. Flash Player 6 이상에서 작동.

     

    <script type="text/javascript">
       var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
       so.addVariable("variable1", "value1");
       so.addVariable("variable2", "value2");
       so.addVariable("variable3", "value3");
       so.write("flashcontent");
    </script>

     

     

    html에 get방식으로 넘어온 값을 가져오는 방법

     

    http://www.example.com/page.html?variable1=value1&variable2=value2 이렇게 넘어 왔다면:

    아래처럼 getQueryParamValue()을 사용해 값을 가져오면 된다.

     

    <script type="text/javascript">
       var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
       so.addVariable("variable1", getQueryParamValue("variable1"));
       so.addVariable("variable2", getQueryParamValue("variable2"));
       so.write("flashcontent");
    </script>

     

    getQueryParamValue()location.hash에서 변수값을 읽어 온다.

     

     

    SWFObject에서 'Express Install' 사용하기

     

    expressinstall.as는 위 사이트 가서 소스를 받으면 들어 있다. so_tester.fla 참조

     

    #include "expressinstall.as"

    //ExpressInstall object 초기화

    var ExpressInstall = new ExpressInstall();

    // 만약 업데이트가 필요하면, 'start upgrade' 버튼을 보여준다.

    if (ExpressInstall.needsUpdate) {

    // ExpressInstall.init()을 호출하는 것으로 자동으로 업데이트를 시작할수 있다.

    // 유저에게 보여줄 메시지와 start 버튼이 있는 무비클립을 attach 시켜서 중앙으로 이동시킨다.

    var upgradeMsg = attachMovie("upgradeMsg_src", "upgradeMsg", 1);

    upgradeMsg._x = Stage.width / 2;

    upgradeMsg._y = Stage.height / 2;

    // attach 한 무비클립내의 버튼에 Expressinstall updater 시작하는 action 기입

    upgradeMsg.upgradeBtn.onRelease = function() {

    // ExpressInstall.init() method는 실제로 update를 실행 시킨다.

    ExpressInstall.init();

    }

    // expressinstall가 호출 되었으면 timeline을 멈춰라.

    stop();

    }

     

    ExpressInstall을 체크하는 프레임에는 아무것도 작성하지 않는 것이 중요하다.

     

    만약 팝업윈도우나, ExpressInstall update을 완료했을때 다른 url로 보낼려면, xiRedirectUrl 속성을 사용하여, 플래시 무비가 있는 활성화된 페이지 대신에 유저를 보낼 페이지로 redirect 시킬수 있다.

     

    <script type="text/javascript">
       var so = new SWFObject("movie.swf", "mymovie", "200", "100", "8", "#336699", true);
       so.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html'); // 반듯이 존재해야 하는 페이지
    o.write("flashcontent");
    </script>

     


     

  • Posted by 철냄비짱
    ,

    <script src="click_cal.js"></script>

    <input type="text" OnClick="Calendar(this,'down','no');">



    달력이 출현하여 단순한 클릭으로 0000-00-00 형식의 일자가 입력된다.

    물론 JS 파일 편집으로 다양한 구분자로 수정 가능.
    Posted by 철냄비짱
    ,
    function bugsOpen(url, target, w, h, s, r) {
        if(s) s = 'auto';
        else s = 'no';
        if(r) r= 'yes';
        else r = 'no'
        var newwin = window.open("about:blank",target,'width='+w+',height='+h+',top=0,left=0,status=no,scrollbars='+s+',resizable='+r);
        if (newwin == null){
            alert("팝업 차단기능 혹은 팝업차단 프로그램이 동작중입니다. 팝업 차단 기능을 해제한 후 다시 시도하세요.");
        }else{
            window.open(url,target,'width='+w+',height='+h+',top=0,left=0,scrollbars='+s+',resizable='+r);
            newwin = window.open(url,target,'width='+w+',height='+h+',top=0,left=0,scrollbars='+s+',resizable='+r);
            return newwin;
            newwin.focus();
        }
    }

    따로 문구가 생각이 안나 넣어봤다 ^^;;;

    창을 한번 띄워보고 안띄워지면 팝업 해제해달라고 alert 창을 띄운다.

    특히 결제부분이나 회원가입부분에서 주로 쓰인다...

    사용자들은 필요한 정보를 작성하고 초기화되면 상당히 짜증이 나거나, 두번씩 쓰이게 하지 않기 위해서

    사용중.
    Posted by 철냄비짱
    ,
    <script language="javascript">
    window.resizeTo(가로, 세로);
    </script>

    현재 윈도우의 사이즈를 조절한다.
    물론 팝업창 마지막 스크립트로 실행되게 순차적용을 해야하며,

    parent 창에서 팝업창의 이름을 지정해주고 현재 윈도우에서 opener 속성을 가진 모든 윈도우를 컨트롤 가능
    Posted by 철냄비짱
    ,

    function PersonalNo_Check(PersonalNo)
    {
     // 주민번호의 형태와 7번째 자리(성별) 유효성 검사
     fmt = /^\d{6}-[1234]\d{6}$/;
     if (!fmt.test(PersonalNo)) {
      return false;
     }

     // 날짜 유효성 검사
     birthYear = (PersonalNo.charAt(7) <= "2") ? "19" : "20";
     birthYear += PersonalNo.substr(0, 2);
     birthMonth = PersonalNo.substr(2, 2) - 1;
     birthDate = PersonalNo.substr(4, 2);
     birth = new Date(birthYear, birthMonth, birthDate);

     if ( birth.getYear() % 100 != PersonalNo.substr(0, 2) ||
      birth.getMonth() != birthMonth ||
      birth.getDate() != birthDate) {
      return false;
     }

     // Check Sum 코드의 유효성 검사
     buf = new Array(13);
     for (i = 0; i < 6; i++) buf[i] = parseInt(PersonalNo.charAt(i));
     for (i = 6; i < 13; i++) buf[i] = parseInt(PersonalNo.charAt(i + 1));

     multipliers = [2,3,4,5,6,7,8,9,2,3,4,5];
     for (i = 0, sum = 0; i < 12; i++) sum += (buf[i] *= multipliers[i]);

     if ((11 - (sum % 11)) % 10 != buf[12]) {
      return false;
     }
     return true;
    }//PersonalNo_Check(PersonalNo)



    호출은 "-" 하이픈 까지 모두 전송

    Posted by 철냄비짱
    ,
    var x,y;
    if (self.innerHeight) { // IE 외 모든 브라우저
      x = (screen.availWidth - self.innerWidth) / 2;
      y = (screen.availHeight - self.innerHeight) / 2;
    }else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드
      x = (screen.availWidth - document.documentElement.clientWidth) / 2;
      y = (screen.availHeight - document.documentElement.clientHeight) / 2;
    }else if (document.body) { // 다른 IE 브라우저( IE < 6)
      x = (screen.availWidth - document.body.clientWidth) / 2;
      y = (screen.availHeight - document.body.clientHeight) / 2;
    }
    window.moveTo(x,y);
    Posted by 철냄비짱
    ,