별점주기 스크립트

사용자 삽입 이미지
사용자 삽입 이미지
스크립트

var locked = 0;

function show(imagenr)
{
    if (locked) return;
    var i;
    var image;
    var el;
  var e = document.getElementById('ratetext');
  var StateMSG;

    for (i=1; i<=imagenr; i++) {
        image = 'image' + i;
        el = document.getElementById(image);
        el.src="star1.gif";
    }

  switch (imagenr) {
   case 1:
    StateMSG = "20점";
    break
   case 2:
    StateMSG = "40점";
    break
   case 3:
    StateMSG = "60점";
    break
   case 4:
    StateMSG = "80점";
    break
   case 5:
    StateMSG = "100점";
    break
   default:
    StateMSG = "";
  }
  e.innerHTML = StateMSG;
}

function noshow(imagenr)
{
    if (locked) return;
    var i;
    var image;
    var el;
 

    for (i=1; i<=imagenr; i++) {
        image = 'image' + i;
        el = document.getElementById(image);
        el.src="star0.gif";
    }
}

function lock(imagenr)
{
    show(imagenr);
    locked = 1;
}

function mark(imagenr)
{
    //show(imagenr);
    //locked = 1;
    lock(imagenr);

    var e = document.getElementById('ratetext');
   

    /* store rating on server */
    var xmlhttp;
    try {
        xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
        // todo
    }
    //var qs = "UccPointProcess.asp?rate=" + imagenr; 
    //xmlhttp.open("GET", qs);
 
  xmlhttp.open("GET", "point_.asp?rate=" + imagenr,true);
  xmlhttp.onreadystatechange=function() {
   if (xmlhttp.readyState==4) {
    e.innerHTML = xmlhttp.responseText;
   }
  }
  xmlhttp.send(null)
}


HTML
<DIV id=rating align=center>
   <SPAN>
    <IMG id=image1 onmouseover=show(1) onclick=mark(1) onmouseout=noshow(1) src="star0.gif">
    <IMG id=image2 onmouseover=show(2) onclick=mark(2) onmouseout=noshow(2) src="star0.gif">
    <IMG id=image3 onmouseover=show(3) onclick=mark(3) onmouseout=noshow(3) src="star0.gif">
    <IMG id=image4 onmouseover=show(4) onclick=mark(4) onmouseout=noshow(4) src="star0.gif">
    <IMG id=image5 onmouseover=show(5) onclick=mark(5) onmouseout=noshow(5) src="star0.gif">
   </SPAN>
   <br/><SPAN id=ratetext>평가하기</SPAN>
 </DIV>


//var qs = "rate.asp?rate=" + imagenr;  
//xmlhttp.open("GET", qs);

이부분을

xmlhttp.open("GET", "point_.asp?rate=" + imagenr,true);
xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4) {
    e.innerHTML = xmlhttp.responseText;
  }
}

이렇게 변경한것뿐 ㅋㅋㅋ....- _-;; 암튼 좋은자료였다!!

참조 게시글
http://yesyo.com/forums/showthread.php?t=1599&highlight=%EB%B3%84%EC%A0%90
http://wiz.pe.kr/149

뭔지 눈으로 보시려면
http://startasp.net/lab/source/point/point.asp
크리에이티브 커먼즈 라이센스
Creative Commons License

Posted by web20korea

2008/08/07 09:55 2008/08/07 09:55

표준에 맞춰보겠다고 발악발악 하면서 시작한지도 몇주(몇달???)

오늘 아주 희안한 경험을....그러나 바보같고, 또 그러나 누구나 실수할수도 있다...
뭐 그런 생각에 ㅎㅎㅎ 짧은 기록을

<스크립트>
if (window.addEventListener) {
   window.addEventListener("load",setupEvents,false);
   } else if (window.attachEvent) {
       window.attachEvent("onload", setupEvents);
   } else {
       window.onload=setupEvents;
}

function setupEvents(evnt) {
   document.processForm.onsubmit=validateField;
}

function validateField(evnt) {
   with ( document.processForm ) {
       //폼체크(입력 어쩌구 등등이요)
       method = "post";
       action = "page_process_.asp";
       서브밋();
   }
}
</스크립트>
<form name="processForm">
<input type="image" />
</form>

이랬더니... IE에서는 글이 자꾸 2번씩 등록이 되는것이다!!! 아나 뭥미?

파폭 오페라 사파리 다 1번으로 등록되는데...

정말....ㅋㅋㅋ 바보같은 나다...

<input type="image"> 도 submit 인데 위에 스크립트에도 submit(); 이 있었으니...

근데 이걸 IE 만 정직하게 2번 돌리네 ㅋㅋㅋㅋㅋㅋㅋㅋ!! 암튼 패쓰!!

크리에이티브 커먼즈 라이센스
Creative Commons License

Posted by web20korea

2008/06/26 18:11 2008/06/26 18:11

javascript 코딩버릇..

<script language="javascript">
<!--
//-->
</script>
이건 버리자 과감히.. 손버릇처럼 치고있는 저것.... 버리자   ▼▼▼
<script type="text/javascript">
</script>
이렇게 바꾸자... Why?

사용자 삽입 이미지
 test/ecmascript은 자바스크립트 대신 사용도 가능하다, text/jscript는 MS의 IE에서 구현한 버전 나머지 등등이다, 현제 스크립트 블록이 어떤 MINEMIME 타입인지 나타내야한다.!
language="javascript" 요건 옛날꺼라고 한다.!
자 그럼 책의 내용을 참고해서 한번 정리해보자.!


1MIME은 "다목적 인터넷 메일 확장(Multipurpose Internet Mail Extension)" 의 약자로, 인코딩 방식(예를 들어, text)과 사용 포맷(예를 들어, javascript)을 지정해준다, MIME은 처음에 이메일을 사용하면서 제안된 개념이고, 지금은 스크립트 블록에서 스크립트 타입을 지정하는 데도 사용된다.

script 태그의 예전 버전은 language 속성을 사용했고, 여기에 언어의 종류 및 버전을 지정했다(즉, 'javascript' 또는 'javascript 1.2' 와 같이 지정했다). HTML 4.01에서는 language 속성의 사용을 권장하고 있지 않지만, 여전히 많이 쓰이고 있다. 초창기에는 브라우저별로 처리방식을 달리하는 기법이 필요했다.


자바스크립트 for 웹 2.0 (한및미디어) 참고

<script src="ns4.js" language="javascript1.2">
</script>

<script src="ie4.js" language="jscript">
</script>
등등 이런식으로... 그러니 지금은 필요없단다~!


<!--
//-->
의 사용은 참고할만한 자료는 없지만... 내기억에 예전에 여기가 스크립트블록입니다. 혹은 noscript같은 역활을 하는걸로 알고있었는데....지금은 또 뭐랑 충돌날수가 있다고... XML쪽이었던거 같은데.....음...아무튼 이부분은 나중에 다시.
초창기 브라우저(언제- _-? 10년전??;;) 에는 자바스크립트의 지원이 거의 없었다고한다, 또 자바스크립트도 버전별로 지원하는 브라우저가 달랐다고 한다, 뭐 지원안하면 그냥 브라우저에 뿌려지기도 했다고 한다 ㅡㅡ;; , 아우~~그랬구나~!- _+;

이에 방지법으로 스크립트를 HTML 주석문(<!--와-->)으로 보쌈해뒀다고 한다, 그래서 인식하면 실행하고 아님 무시하고 ㅋㅋ.....(지금도 이런거 있는거 같은데.. 자바스크립트...) 뭐그랬다고 한다.

중요한건

최신브라우저중 일부에서는 XHTML을 XML로 해석을좀 빡씨게해서 (<!--와-->)부분이 완전 무시되는경우도 있다고 한다.! ㅇㅋㅂㄹ!
크리에이티브 커먼즈 라이센스
Creative Commons License
  1. 자바스크립트 for 웹 2.0 (한및미디어) 참고 [Back]

Posted by web20korea

2008/02/19 16:49 2008/02/19 16:49

아우...크로스 브라우징이고 어쩌구고...
아무튼 대표적으로 인터넷 익스플로러파이어폭스 를 기준으로만 작업한다고 가정하에
스크립트가 둘다 잘 먹으면 좋겠지만 둘중 1가지의경우에 안먹는경우가 자주 생간다...
이럴때 사용하는 스크립트를 나름 한번 만들어봤는데...

- function.js

//사용자환경
var UserAgentState = navigator.userAgent.toLowerCase();

//판단
var browserIE = (UserAgentState.indexOf("msie") != -1) ? true : false;  
var browserFF = (UserAgentState.indexOf("firefox") != -1) ? true : false;  
var OSWindows = (UserAgentState.indexOf("windows") != -1) ? true : false;

if(browserIE && OSWindows){  document.write('<scr' + 'ipt language="javascript" type="text/javascript" src="/js/ie.js" \></scr' + 'ipt\> '); }
if(browserFF && OSWindows){ document.write('<scr' + 'ipt language="javascript" type="text/javascript" src="/js/ff.js" \></scr' + 'ipt\> '); }


이렇게 function.js파을을 넣어두고
ie.js , ff.js를 만들어서 따로 넣어두면 각각 브라우저에 맞게 해당 스크립트를 작성해 나갈 수 있다..

물론....둘다 먹게끔 표준에맞게짜는것이 더 좋은 방법이겠지만..
이죽일놈의 일정때문에....여유가없을때는 이것도 나름 좋은방법인거 같다..ㅋㅋㅋㅋ
크리에이티브 커먼즈 라이센스
Creative Commons License

Posted by web20korea

2008/01/04 18:00 2008/01/04 18:00


블로그 이미지

그늘과 양지 객관과 주관 정적과 소음을 적당히 끌어들여서 세계와 소통할 수 있는 블로거들이 많이 생겼으면 좋겠다! - 작가 박범신 -

- web20korea

Site Stats

Total hits:
25414
Today:
34
Yesterday:
292