Search Results for '프로그래밍/자바 스크립트'


100 posts related to '프로그래밍/자바 스크립트'

  1. 2019/10/30 JavaScript 스택(stack)을 이용한 사칙연산(+ - * /) 계산기
  2. 2019/10/30 JavaScript 어제날짜, 내일날짜 구하기
  3. 2019/07/18 영카트 orderformupdate.php 특정 회원 주문시 입금 처리 하기
  4. 2019/06/27 자바스크립트 멋진 소스 데모
  5. 2019/05/10 위치정보를 가져오기 위해서는 getCurrentPosition() 함수를 사용하면 됩니다.
  6. 2019/04/01 랜덤 배너 노출 스크립트
  7. 2018/08/14 네이버 톡톡 링크 주소로 채팅창 사이즈 조절 - 그누보드
  8. 2018/08/07 사진슬라이더 네비게이션&체크박스 등 다양한 효과,디자인 소스 모음
  9. 2018/08/03 한글 음소 나누기
  10. 2018/08/03 스택(stack)을 이용한 사칙연산(+ - * /) 계산기
  11. 2018/08/03 정규식으로 유투브 주소에서 아이디 값만 추출
  12. 2017/02/26 홈페이지 눈내리기
  13. 2017/02/20 "[팁]프레임 도둑 방지 스크립트"
  14. 2012/01/02 자바스크립트를 이용해서 링크 클릭시 테이블 보이기 숨기기 style display 활용
  15. 2011/12/06 레이어 공지사항(오늘 하루 그만 보기)
  16. 2011/12/06 JSON 객체를 String으로 변환하기
  17. 2011/12/06 다중 셀렉트 기본 방법
  18. 2011/12/06 모든 자바스크립트 에러 잠재우기 (에러 디버그)
  19. 2011/12/06 innerHTML 에서 script 태그 넣기
  20. 2011/12/06 문 자열 길이 체크
  21. 2011/12/06 정규 표현식(Regular Expression)
  22. 2011/12/06 자바스크립트 연습장
  23. 2011/12/06 자바스크립트로 엔터 넣기
  24. 2011/12/06 화면상의 객체 위치,크기 1
  25. 2011/12/06 모든 브라우저 버전별 확인 스크립트
  26. 2011/12/06 페이지 스크롤끝 확인 스크립트
  27. 2011/12/06 스마트폰 접속시 모바일 사이트로 이동 소스 예제
  28. 2011/12/06 구글음성 서비스 이용처리
  29. 2011/11/23 javascript - 자바스트립트 프린터( 프린트 컴포넌트 무료제공 )
  30. 2011/10/11 Scrollable HTML table
<< Previous Page 1 2 3 4

JavaScript 스택(stack)을 이용한 사칙연산(+ - * /) 계산기

프로그래밍/자바 스크립트 |  2019/10/30 15:16
<script>
// 연산자의 연산 우선순위
function getOpPrec(op) 
{ 
    switch (op)
    {
        case '*':
        case '/':
            return 5;
        case '+':
        case '-':
            return 3;    
        case '(': 
            return 1;    
    }
    return -1;
}
// 연산자의 우선순위 비교
function whoPrecOp(op1, op2) 
{
    return getOpPrec(op1) >= getOpPrec(op2);    // op1의 연산순위가 높거나 같다면 참
}
function postfixNotation(exp) 
{  
    var stack = [], convExp = [], tok, popOp; 
    exp = exp.replace(/\s/g, '').match(/[\d\.]+|[^\d\.]/g).reverse();  // 공백제거 및  배열로 분리
    while (tok = exp.pop()) {    
        // 숫자가 아니라면(연산자라면) 
        if (isNaN(tok)) {    
            switch (tok)
            {
                case '(':
                    stack.push(tok);
                    break;
                case ')':
                    while (1) {
                        popOp = stack.pop();
                        if ( popOp == '(' )
                            break;
                        convExp.push(popOp);
                    }
                    break;
                case '+': case '-':
                case '*': case '/':
                    while (stack.length && whoPrecOp(stack[stack.length-1], tok))
                        convExp.push(stack.pop());
                    stack.push(tok);
                    break;
            }
        } else     // 숫자라면(피연산자라면)
            convExp.push(tok); 
    }          
    while (stack.length)  
        convExp.push(stack.pop());    
    return convExp;  
}
function evalPostfixNotation(exp) 
{
    var i, tok, n1, n2, stack = [];
    for (i in exp) {   
        tok = exp[i];
        // 연산자라면 
        if (isNaN(tok)) {
            n2 = Number(stack.pop());
            n1 = Number(stack.pop());
            switch (tok)
            {
                case '*':
                    stack.push(n1 * n2);
                    break;
                case '/':
                    stack.push(n1 / n2);
                    break;
                case '+':
                    stack.push(n1 + n2);
                    break;
                case '-':
                    stack.push(n1 - n2);
                    break;
            }
        } else     // 숫자라면            
            stack.push(tok);
    } 
    return stack.pop();
}
document.write( evalPostfixNotation(postfixNotation( '((3.5 - 2) + 3.4) * (14 - 10)' )));
</script>
2019/10/30 15:16 2019/10/30 15:16
No trackbacks, No comments.

JavaScript 어제날짜, 내일날짜 구하기

프로그래밍/자바 스크립트 |  2019/10/30 15:11
$yesterday = date("Y-m-d", mktime(0,0,0,date("m"),date("d")-1,date("Y")));
$tomorrow = date("Y-m-d", mktime(0,0,0,date("m"),date("d")+1,date("Y")));
2019/10/30 15:11 2019/10/30 15:11
No trackbacks, No comments.

영카트 orderformupdate.php 특정 회원 주문시 입금 처리 하기

프로그래밍/자바 스크립트 |  2019/07/18 21:29
$od_status = '주문';
$od_tno    = '';
if ($od_settle_case == "무통장")
{
    $od_receipt_point   = $i_temp_point;
    $od_receipt_price   = 0;
    $od_misu            = $i_price - $od_receipt_price;
if ($member['mb_id'] == "test") {
$od_misu = 0; // 미수잔액을 0으로
$od_receipt_price = $i_price; // 입금금액  $i_price  
}
if($od_misu == 0) {
$od_status      = '입금';
$od_receipt_time = G5_TIME_YMDHIS;
}
}

대략 272 라인 
shop/orderformupdate.php
2019/07/18 21:29 2019/07/18 21:29
No trackbacks, No comments.

자바스크립트 멋진 소스 데모

프로그래밍/자바 스크립트 |  2019/06/27 21:27
https://www.developerdrive.com/11-experimental-javascript-projects-pushing-the-boundaries-of-scripting/

11 EXPERIMENTAL JAVASCRIPT PROJECTS PUSHING THE BOUNDARIES OF SCRIPTING

http://it79.egloos.com/v/1046109
2019/06/27 21:27 2019/06/27 21:27
No trackbacks, No comments.

위치정보를 가져오기 위해서는 getCurrentPosition() 함수를 사용하면 됩니다.

프로그래밍/자바 스크립트 |  2019/05/10 11:30
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>
2019/05/10 11:30 2019/05/10 11:30
No trackbacks, No comments.

랜덤 배너 노출 스크립트

프로그래밍/자바 스크립트 |  2019/04/01 11:34
<script type="text/javascript">
  var result = Math.floor(Math.random() * 8) + 1;
if(result == '1'){
document.writeln("<a href='' target='_blank'><img src='' height='600' width='160' border='0'></a>");
}
else if(result == '2'){
document.writeln("<a href='' target='_blank'><img src='' height='600' width='160' border='0'></a>");
}
else if(result == '3'){
document.writeln("<a href='' target='_blank'><img src='' height='600' width='160' border='0'></a>");
}
else if(result == '4'){
document.writeln("<a href='' target='_blank'><img src='' height='600' width='160' border='0'></a>");
}
else if(result == '5'){
document.writeln("<a href='' target='_blank'><img src='' height='600' width='160' border='0'></a>");
}
else if(result == '6'){
document.writeln("<a href='' target='_blank'><img src='' height='600' width='160' border='0'></a>");
}
else  {
document.writeln("<a href='' target='_blank'><img src='' height='600' width='160' border='0'></a>");
}
</script>
2019/04/01 11:34 2019/04/01 11:34
No trackbacks, No comments.

네이버 톡톡 링크 주소로 채팅창 사이즈 조절 - 그누보드

프로그래밍/자바 스크립트 |  2018/08/14 22:42
<a href="https://네이버톡톡 주소" target="_blank" class="n_talk"><b>네이버톡톡</b></a>

위 내용 넣는곳 .. 
-----------------------------------------------------------------------------

수정 파일 : js/common.js

/**
 * 포인트 창
 **/
var win_point = function(href) {
    var new_win = window.open(href, 'win_point', 'left=100,top=100,width=600, height=600, scrollbars=1');
    new_win.focus();
}
위 내용을 찾은 후 바로 아래에 이렇게 추가


/**네이버 톡톡 새창**/
var n_talk= function(href) {
    var new_win = window.open(href, 'n_talk', 'left=100,top=100,width=600,height=700,scrollbars=1');
    new_win.focus();
}

                                                       -----------------------------------------------------------------------------

같은 파일에서 좀 더 아랫부분에 있는
 
    $(".win_point").click(function() {
        win_point(this.href);
        return false;
    });
 
여기 바로에 이렇게 추가



추가

    $(".n_talk").click(function() {
        n_talk(this.href);
        return false;
    });



2018/08/14 22:42 2018/08/14 22:42
No trackbacks, No comments.

사진슬라이더 네비게이션&체크박스 등 다양한 효과,디자인 소스 모음

프로그래밍/자바 스크립트 |  2018/08/07 13:14
사진슬라이더 네비게이션 등 다양한 효과 소스 모음
http://idangero.us/swiper/demos/
이쁜 체크박스 소스
2018/08/07 13:14 2018/08/07 13:14
No trackbacks, No comments.

한글 음소 나누기

프로그래밍/자바 스크립트 |  2018/08/03 11:50
var divideHangulPhoneme = function(){
  return {
    "arr_1st":['ㄱ','ㄲ','ㄴ','ㄷ','ㄸ','ㄹ','ㅁ','ㅂ','ㅃ','ㅅ','ㅆ','ㅇ','ㅈ','ㅉ','ㅊ','ㅋ','ㅌ','ㅍ','ㅎ'], //초성 19개
    "arr_2nd":['ㅏ','ㅐ','ㅑ','ㅒ','ㅓ','ㅔ','ㅕ','ㅖ','ㅗ','ㅘ','ㅙ','ㅚ','ㅛ','ㅜ','ㅝ','ㅞ','ㅟ','ㅠ','ㅡ','ㅢ','ㅣ'],//중성 21개
    "arr_3th":['','ㄱ','ㄲ','ㄳ','ㄴ','ㄵ','ㄶ','ㄷ','ㄹ','ㄺ','ㄻ','ㄼ','ㄽ','ㄾ','ㄿ','ㅀ',
                'ㅁ','ㅂ','ㅄ','ㅅ','ㅆ','ㅇ','ㅈ','ㅊ','ㅋ','ㅌ','ㅍ','ㅎ'],//종성 28개
    "char_st":44032, //'가'의 유니코드 넘버(10진수)
    "char_ed":55203, //'힝'의 유니코드 넘버(10진수)
    /**
     * 문자열을 음소로 나눈 배열로 변환
     * @param  {[type]} str [description]
     * @return {[type]}        [description]
     */
    "divide":function(str){
      var r = null,char=null;
      var res = []
      for(var i=0,m=str.length;i<m;i++){
        char = str.charAt(i);
        r = this.divideCharToPhoneme(char);
        res.push(r?r:char);
      }
      return res;
    },
    /**
     * 문자에서 음소 알아내기
     * @param  {[type]} char [description]
     * @return {[type]}      [description]
     */
    "divideCharToPhoneme":function(char){
      var poses = this.divideCharToPos(char);
      if(!poses){
        return false;
      }
      return [this.arr_1st[poses[0]],this.arr_2nd[poses[1]],this.arr_3th[poses[2]]];
    },
    /**
     * 문자에서 음소 위치 알아내기
     * @param  {[type]} char [description]
     * @return {[type]}      [description]
     */
    "divideCharToPos":function(char){
      if(char.length>2){char=char.charAt(0);}
      var uniNum = char.charCodeAt(0);
      if(uniNum < this.char_st || uniNum > this.char_ed) return false;//한글이 아니다
      var uniNum2 = uniNum-this.char_st;
      var arr_1st_pos = Math.floor(uniNum2/588);
      uniNum2 = uniNum2%588;
      var arr_2nd_pos = (Math.floor(uniNum2/28));
      uniNum2 = (uniNum2%28);
      var arr_3th_pos = uniNum2;
      return [arr_1st_pos,arr_2nd_pos,arr_3th_pos];   
    }
  }
 
}();
 
try{
  module.exports = divideHangulPhoneme;
}catch(e){}
2018/08/03 11:50 2018/08/03 11:50
No trackbacks, No comments.

스택(stack)을 이용한 사칙연산(+ - * /) 계산기

프로그래밍/자바 스크립트 |  2018/08/03 11:47
<script>
// 연산자의 연산 우선순위
function getOpPrec(op) 
{ 
    switch (op)
    {
        case '*':
        case '/':
            return 5;
        case '+':
        case '-':
            return 3;    
        case '(': 
            return 1;    
    }
    return -1;
}
// 연산자의 우선순위 비교
function whoPrecOp(op1, op2) 
{
    return getOpPrec(op1) >= getOpPrec(op2);    // op1의 연산순위가 높거나 같다면 참
}
function postfixNotation(exp) 
{  
    var stack = [], convExp = [], tok, popOp; 
    exp = exp.replace(/\s/g, '').match(/[\d\.]+|[^\d\.]/g).reverse();  // 공백제거 및  배열로 분리
    while (tok = exp.pop()) {    
        // 숫자가 아니라면(연산자라면) 
        if (isNaN(tok)) {    
            switch (tok)
            {
                case '(':
                    stack.push(tok);
                    break;
                case ')':
                    while (1) {
                        popOp = stack.pop();
                        if ( popOp == '(' )
                            break;
                        convExp.push(popOp);
                    }
                    break;
                case '+': case '-':
                case '*': case '/':
                    while (stack.length && whoPrecOp(stack[stack.length-1], tok))
                        convExp.push(stack.pop());
                    stack.push(tok);
                    break;
            }
        } else     // 숫자라면(피연산자라면)
            convExp.push(tok); 
    }          
    while (stack.length)  
        convExp.push(stack.pop());    
    return convExp;  
}
function evalPostfixNotation(exp) 
{
    var i, tok, n1, n2, stack = [];
    for (i in exp) {   
        tok = exp[i];
        // 연산자라면 
        if (isNaN(tok)) {
            n2 = Number(stack.pop());
            n1 = Number(stack.pop());
            switch (tok)
            {
                case '*':
                    stack.push(n1 * n2);
                    break;
                case '/':
                    stack.push(n1 / n2);
                    break;
                case '+':
                    stack.push(n1 + n2);
                    break;
                case '-':
                    stack.push(n1 - n2);
                    break;
            }
        } else     // 숫자라면            
            stack.push(tok);
    } 
    return stack.pop();
}
document.write( evalPostfixNotation(postfixNotation( '((3.5 - 2) + 3.4) * (14 - 10)' )));
</script>
2018/08/03 11:47 2018/08/03 11:47
No trackbacks, No comments.

정규식으로 유투브 주소에서 아이디 값만 추출

프로그래밍/자바 스크립트 |  2018/08/03 11:11
<script>
function youtubeId(url) {
    var tag = "";
    if(url)  {
        var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
        var matchs = url.match(regExp);
        if (matchs) {
            tag += "유튜브 아이디 : "+matchs[7];
        }
        return tag;
    }
}
    var s1 = "https://www.youtube.com/watch?v=pAWk-yh2ysc";
    var s2 = "http://youtu.be/WUzwkGmnAaw";
    document.write(youtubeId(s1));
    document.write("<br />");
    document.write(youtubeId(s2));
</script>
2018/08/03 11:11 2018/08/03 11:11
No trackbacks, No comments.

홈페이지 눈내리기

프로그래밍/자바 스크립트 |  2017/02/26 15:36

<script src="//cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm.js"></script>

 

두가지 추가 하면 메인에 눈이 내려요  

2017/02/26 15:36 2017/02/26 15:36
No trackbacks, No comments.

"[팁]프레임 도둑 방지 스크립트"

프로그래밍/자바 스크립트 |  2017/02/20 01:51

프레임으로 도둑질? 하려고 하다..

거꾸로 방지 하는 방법만 찾았네요..^^

저도 적용해 봐야겠네요

 

"[팁]프레임 도둑 방지 스크립트"
나도 모르는 사이 내 사이트의 특정 페이지가 다른 사이트의 프레임 내에서 사용되고 있을 수 있습니다 
만약 해당 페이지가 프레임에 갇혀 있으면 프레임에서 빠져나오게 하는 스크입트 입니다

<!---- 아래의 소스코드를 <HEAD>와 </HEAD> 사이에 붙여 넣으세요 ---->

 <SCRIPT LANGUAGE="JavaScript"> 
<!-- Begin 
if (window != top) top.location.href = location.href; 
// End -->

</SCRIPT>

 

2017/02/20 01:51 2017/02/20 01:51
No trackbacks, No comments.

자바스크립트를 이용해서 링크 클릭시 테이블 보이기 숨기기 style display 활용

프로그래밍/자바 스크립트 |  2012/01/02 02:07

고객센터 질문과답변 페이지를 보여 줄때 답변 내용이 길게 나올 경우 페이지가 쭉 늘어나 정작 필요한 답변을 찾기가 쉽지가 않습니다.
이럴때 답변은 숨겨 놓고 질문 제목을 클릭하면 답변이 보이며 좀전 열었던 답변은 숨기는 기능을 자바스크립트와 style display을 이용해서 적용해 보겠습니다.

1. 자바스크립트 소스

<script language="javascript">
<!--
function QnaShow(qna) {

document.all.qna1.style.display = "none";
document.all.qna2.style.display = "none";
document.all.qna3.style.display = "none";

var obj = eval("document.all." + qna);
obj.style.display = "block";
}
//-->
</script>

2. 테이블 소스

<table>
<!-- 질문 1 -->
<tr>
<td><a href="javascript:QnaShow('qna1')">질문1</a></td>
</tr>
<tr id="qna1" style="display:none;">
<td>답변1</td>
</tr>
<!-- 질문 2 -->
<tr>
<td><a href="javascript:QnaShow('qna2')">질문2</a></td>
</tr>
<tr id="qna2" style="display:none;">
<td>답변2</td>
</tr>
<!-- 질문 3 -->
<tr>
<td><a href="javascript:QnaShow('qna3')">질문3</a></td>
</tr>
<tr id="qna3" style="display:none;">
<td>답변3</td>
</tr>
</table>

3. 소스 설명 :
제목을 클릭시 자바스크립트 QnaShow() 함수를 호출합니다.
이때 함께 전달한 qna 값으로 어떤 질문을 클릭했는지 구분합니다.
먼저 모든 질문을 숨기기 처리합니다.
1번 질문을 본뒤에 2번 질문을 클릭시 1번 질문을 숨기고 2번 질문의 답변을 보여주기 위한 처리인데 일괄적으로 모든 질문의 답변을 숨긴뒤에 원하는 답변만 보여주는 처리 입니다.
열려있는 질문만 숨기기 코딩하면 좋겠지만 오히려 소스가 복잡해줄수 있으므로 질문추가시 자바스크립트 항목중 document.all.qna3.style.display = "none"; 이부분도 함께 추가해 줍니다.
숨기기 처리가 끝나면 var obj = eval("document.all." + qna); 에서 obj로 클릭한 질문의 답변 <tr> id값을 조합합니다.
그리고, obj.style.display = "block"; 에서 지정한 <tr> style의 display 값을 block 으로 적용해서 보이도록 합니다.
이와같은 적용으로 페이지를 다시 접속하지 않고도 보이기 또는 숨기기 적용이 됩니다.

2012/01/02 02:07 2012/01/02 02:07
No trackbacks, No comments.

레이어 공지사항(오늘 하루 그만 보기)

프로그래밍/자바 스크립트 |  2011/12/06 11:42
<SCRIPT language=javascript>
var banner_count = 1;
var cur_banner = 1;
var timeout_id;

function all_banner_clear() {
var banner_id = "";
for( var i=1; i<= banner_count; i++) {
banner_id = 'all_banner_'+ i;
document.all[banner_id].style.visibility='hidden';
}
clearTimeout(timeout_id);
}

function all_banner_change() {
var next_banner = cur_banner+1;
var banner_id = "";
if( next_banner > banner_count ) {
next_banner = 1;
}
banner_id = 'all_banner_'+ cur_banner;
document.all[banner_id].style.visibility='hidden';
banner_id = 'all_banner_'+ next_banner;
document.all[banner_id].style.visibility='visible';

cur_banner = next_banner;
timeout_id = window.setTimeout("all_banner_change()",4000);
}

function all_banner_open() {
if (screen.width==800) {
var w_left = 0;
} else {
var w_left = (screen.width)?(screen.width-600)/2:100;
}
var banner_id = "";
for(var i = 1; i<= banner_count; i++ ) {
banner_id = 'all_banner_' + i;
document.all[banner_id].style.left=w_left;
}
if (getCookie("all_banner_img") == null) {
document.all['all_banner_1'].style.visibility='visible';
selectbox_hidden(all_banner_1);
//timeout_id = window.setTimeout("all_banner_change()",4000);
} else {
document.all['all_banner_1'].style.visibility='hidden';
selectbox_visible();
}
}

function all_banner_cookie() {
if (document.all.cookie_check.checked == true) {
setCookie("all_banner_img", "true", 1);
}
document.all['all_banner_1'].style.visibility = "hidden";
clearTimeout(timeout_id);
}

function getCookie(Name) {
var search = Name + "="
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
End = document.cookie.indexOf(";", offset)
if (End == -1)
End = document.cookie.length
return unescape(document.cookie.substring(offset, End))
}
}
}

function setCookie(name, value, expiredays) {
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}

function selectbox_hidden(layer_id) {
var ly = eval(layer_id);

// 레이어 좌표
var ly_left = ly.offsetLeft;
var ly_top = ly.offsetTop;
var ly_right = ly.offsetLeft + ly.offsetWidth;
var ly_bottom = ly.offsetTop + ly.offsetHeight;

// 셀렉트박스의 좌표
var el;

for (i=0; i<document.forms.length; i++) {
for (k=0; k<document.forms[i].length; k++) {
el = document.forms[i].elements[k];
if (el.type == "select-one") {
var el_left = el_top = 0;
var obj = el;
if (obj.offsetParent) {
while (obj.offsetParent) {
el_left += obj.offsetLeft;
el_top += obj.offsetTop;
obj = obj.offsetParent;
}
}
el_left += el.clientLeft;
el_top += el.clientTop;
el_right = el_left + el.clientWidth;
el_bottom = el_top + el.clientHeight;

// 좌표를 따져 레이어가 셀렉트 박스를 침범했으면 셀렉트 박스를 hidden 시킴
if ((ly_right >= el_left && ly_left <= el_right) && (ly_bottom >= el_top && ly_top <= el_bottom))
el.style.visibility = 'hidden';
}
}
}
}

// 감추어진 셀렉트 박스를 모두 보이게 함
function selectbox_visible() {
for (i=0; i<document.forms.length; i++) {
for (k=0; k<document.forms[i].length; k++) {
el = document.forms[i].elements[k];
if (el.type == "select-one" && el.style.visibility == 'hidden')
el.style.visibility = 'visible';
}
}
}
</SCRIPT>


<DIV id=all_banner_1 style="Z-INDEX: 8; LEFT: 400px; VISIBILITY: hidden; POSITION: absolute; TOP: 278px">
<IFRAME style="Z-INDEX: -1; ; LEFT: expression(this.nextSibling.offsetLeft); ;
WIDTH: expression(this.nextSibling.offsetWidth); POSITION: absolute; ;
TOP: expression(this.nextSibling.offsetTop); ; HEIGHT: expression(this.nextSibling.offsetHeight)"
src="about:blank" frameBorder=0></IFRAME>

<TABLE cellSpacing=0 cellPadding=0 width=400 bgColor=#ffffff border=0>
<TR>
<TD align=middle height=10></TD>
</TR>
<TR>
<TD height=5></TD>
</TR>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px" height=15>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#d0d0d0 border=0>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=0 width="100%" bgColor=#e7e7e7 border=0>
<TR>
<TD bgColor=#ffffff>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR>
<TD height=10></TD>
</TR>
<TR>
<TD align=middle height=10>
<TABLE cellSpacing=0 cellPadding=0 width="95%" border=0>
<TR>
<TD width=10>>></TD>
<TD style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; PADDING-TOP: 2px; LETTER-SPACING: -0.1em">알려드립니다.!!!</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD style="PADDING-RIGHT: 15px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; PADDING-TOP: 15px" height=10>
공지사항입니다.공지사항입니다.공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.
</TD>
</TR>
<TR>
<TD height=5></TD>
</TR>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR>
<TD width="3%" bgColor=#f7f7f7 height=30></TD>
<TD width="6%" bgColor=#f7f7f7><INPUT type=checkbox name=cookie_check></TD>
<TD width="36%" bgColor=#f7f7f7>오늘 하루 그만 보기 </TD>
<TD style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px" align=right width="55%" bgColor=#f7f7f7>
<A onfocus=this.blur(); href="javascript:all_banner_cookie();">:: 닫기 ::</A>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD align=middle height=10></TD>
</TR>
</TABLE>
</DIV>
<SCRIPT>
all_banner_open();
</SCRIPT>
2011/12/06 11:42 2011/12/06 11:42
No trackbacks, No comments.

JSON 객체를 String으로 변환하기

프로그래밍/자바 스크립트 |  2011/12/06 11:40
function JSONtoString(object) {
var results = [];
for (var property in object) {
var value = object[property];
if (value)
results.push(property.toString() + ': ' + value);
}
return '{' + results.join(', ') + '}';
}
var obj = { "id":"outsider", "sex":"male" };
obj = JSONtoString(obj);
alert(obj); // {id: outsider, sex: male}
alert(typeof obj); // string

만일 prototype.js 를 쓴다면
alert(Object.toJSON(obj)); // {id: outsider, sex: male}
2011/12/06 11:40 2011/12/06 11:40
No trackbacks, No comments.

다중 셀렉트 기본 방법

프로그래밍/자바 스크립트 |  2011/12/06 11:40
다중 셀렉트는 자주 사용되는 것이다.
간단히 동작 방법을 알아보자. 아래 방법을 가지고 응용하면 된다.

첫번째.
배열을 읽어와 보여 주는 방법이다. 가장 많이 사용하는 방법으로 데이타가 고정 적일때 사용한다.
배열을 따로 JS 파일을 만들어 읽어 오는 것이 좋다.
만일 배열 데이타가 수시로 바뀐다면 매번 JS 파일을 만들어 주어야 하기 때문에 여간 불편 한것이 아니다.
<form name=pubform method=post action=''>
<select name=selectName onChange="selectSecond(this.selectedIndex-1);">
	<option value=''>1차 고르시오</option>
	<option value='1'>1</option>
	<option value='2'>2</option>
</select>
<select name=secondOption>
	<option value=''>2차</option>
</select>
</form>

<script language="javascript">
function selectSecond(n) {
		fs = document.pubform.secondOption;
		if(n==-1) {
				fs.selectedIndex = 0;
				return;
		} else {
				for(j=0;j<arrSecondText[n].length;j++) {     
						fs.options[j]=new Option(arrSecondText[n][j],arrSecondValue[n][j]);
				}
				fs.length=arrSecondText[n].length;
		}
}

arrSecondText = new Array(2);
arrSecondValue = new Array(2);

arrSecondText[0] = new Array(6);
arrSecondValue[0] = new Array(6);

arrSecondText[0][0] = "선택";
arrSecondValue[0][0] = "";
arrSecondText[0][1] = "옵션11";
arrSecondValue[0][1] = "11";
arrSecondText[0][2] = "옵션12";
arrSecondValue[0][2] = "12";
arrSecondText[0][3] = "옵션13";
arrSecondValue[0][3] = "13";
arrSecondText[0][4] = "옵션14";
arrSecondValue[0][4] = "14";
arrSecondText[0][5] = "옵션15";
arrSecondValue[0][5] = "15";

arrSecondText[1] = new Array(6);
arrSecondValue[1] = new Array(6);

arrSecondText[1][0] = "선택";
arrSecondValue[1][0] = "";
arrSecondText[1][1] = "옵션21";
arrSecondValue[1][1] = "21";
arrSecondText[1][2] = "옵션22";
arrSecondValue[1][2] = "22";
arrSecondText[1][3] = "옵션23";
arrSecondValue[1][3] = "13";
arrSecondText[1][4] = "옵션24";
arrSecondValue[1][4] = "24";
arrSecondText[1][5] = "옵션25";
arrSecondValue[1][5] = "25";
</script>

두번째.

아래 방법도 유용하다. 서버 스크립트로 요청된 셀렉트 값을 즉시 만들어 주는 방법이다.

위 방법보다는 느리지만 자주 바뀌는 데이타라면 아래 방법이 유용하다.

<form name=pubform method=post action=''>
<select name=selectName onChange="selectSecond();">
	<option value=''>1차 고르시오</option>
	<option value='1'>1</option>
</select>
<select name=secondOption>
	<option value=''>2차</option>
</select>
</form>

<script id="selectOption"></script>
<script language="javascript">
function selectSecond() {            
	selectOption.src = "optionSelect.php"; 
}
</script>
2011/12/06 11:40 2011/12/06 11:40
No trackbacks, No comments.

모든 자바스크립트 에러 잠재우기 (에러 디버그)

프로그래밍/자바 스크립트 |  2011/12/06 11:40
별로 권장하지는 않지만 익스플러로에
자바스크립트 에러 표시가 걸리시는 분들은 아래 스크립트를 하단에 삽입하여 보십시오.

모든 에러메시지가 출력 되지 않습니다.

window.onerror = ErrorSetting
var e_msg="";
var e_file="";
var e_line="";
function ErrorSetting(msg, file_loc, line_no) {
e_msg=msg;
e_file=file_loc;
e_line=line_no;
return true;
}

* 자바스크립트 에러 디버그

var isDebugging = true;
function ErrorSetting(msg, file_loc, line_no) {
var e_msg=msg;
var e_file=file_loc;
var e_line=line_no;
var error_d = "Error in file: " + file_loc +
"\nline number:" + line_no +
"\nMessage:" + msg;
if(isDebugging)
alert("Error Found !!!\n--------------\n"+error_d);

return true;
}
window.onerror = ErrorSetting;

조금더 확장해서 ajax로 에러 기록 할 경우

var isDebugging = false;
var logJsErrors = true;
function ErrorSetting(msg, file_loc, line_no) {
var e_msg=msg;
var e_file=file_loc;
var e_line=line_no;
var error_d = "Error in file: " + file_loc +"\nline number:"
+ line_no +
"\nMessage:" + msg;

if(logJsErrors){
theData = "file="+file_loc+"&line="+line_no+"&err="+msg;
ajaxCtrl(
function(){
return true;
},"ajxerrorLogger.php",theData
);
}

if(isDebugging)
alert("Error Found !!!\n--------------\n"+error_d);

return true;
}
window.onerror = ErrorSetting;
2011/12/06 11:40 2011/12/06 11:40
No trackbacks, No comments.

innerHTML 에서 script 태그 넣기

프로그래밍/자바 스크립트 |  2011/12/06 11:39
innerHTML 아래와 같이 script 태그를 넣으면 에러가 생기는 것을 볼수 있습니다.
Act.innerHTML = "<scripttype='text/javascript'>document.write('yesyo.com')</script>";

nnerHTML의 문자열에 script 가 들어 가서 문제가 생깁니다.
이것을 아래와 같이 수정하면 문제가 해결됩니다.

Act.innerHTML = "<scr" + "ipt type='text/javascript'>document.write('yesyo.com')</scr" + "ipt>";
2011/12/06 11:39 2011/12/06 11:39
No trackbacks, No comments.

문 자열 길이 체크

프로그래밍/자바 스크립트 |  2011/12/06 11:39
lwGetByte 는 문자열의 바이트수를 출력해줍니다.
lwTrimByte 는 문자열을 원하는 수만큼 잘라줍니다.

사 용방법은 다음과 같습니다.
a = lwGetByte(str)
b = lwTrimByte(str, 400)

function lwGetByte(s) {

var ls_str = s;
var li_str_len = ls_str.length;

var i = 0;
var li_byte = 0;
var ls_one_char = "";
var ls_str2 = "";

for(i=0; i< li_str_len; i++) {
ls_one_char = ls_str.charAt(i);

if (escape(ls_one_char).length > 4) {
li_byte += 2;
} else {
li_byte++;
}

}

return li_byte;
}

function lwTrimByte(s, nMaxByte) {

var ls_str = s;
var li_str_len = ls_str.length;

var li_max = nMaxByte;
var i = 0;
var li_len = 0;
var li_byte = 0;
var ls_one_char = "";
var ls_str2 = "";

for(i=0; i< li_str_len; i++) {
ls_one_char = ls_str.charAt(i);

if (escape(ls_one_char).length > 4) {
li_byte += 2;
} else {
li_byte++;
}
if(li_byte <= li_max) {
li_len = i + 1;
}
if(li_byte > li_max) {
ls_str2 = ls_str.substr(0, li_len);
return ls_str2;
}
}
}

/*
' ------------------------------------------------------------------
' Function : fc_chk2()
' Description : Enter키를 못치게한다.
' Argument :
' Return :
' ------------------------------------------------------------------
*/
function fc_chk2()
{
if(event.keyCode == 13)
event.returnValue=false;
}
</script>

< textarea name="txt_aaa" rows="5" cols="60" onkeyup="fc_chk_byte(this,10);" onkeypress="fc_chk2()" >      
2011/12/06 11:39 2011/12/06 11:39
No trackbacks, No comments.

정규 표현식(Regular Expression)

프로그래밍/자바 스크립트 |  2011/12/06 11:39

1. 정규 표현식이란.

문자열의 특정한 패턴을 표시하거나 검사하기 위한 규칙을 의미하며 어떤 문자열의 집합을 표시하는 텍스트 string이나 일반적인

텍스트 형시의 문서 등에서 문자열을 찾아내거나 검사하고 치환하는데 사용된다. 이러한 정규 표현식은 정규 표현식을 표시하는

특수문자와 정규 표현식을 검사하기 위한 함수가 있다.

2. 패턴을 표현하는 특수 문자

특수 문자

내용

해당문자열

.

임의의 한 글자를 의미한다.

a.b (abc, acb, afb...)

*

* 바로 앞의 문자가 없거나 한개 이상이 있을 경우

a*b (b, ab, aab, aaab...)

+

+ 바로 앞의 문자가 최소 한 개 이상일 때

a+b (ab, aab, aaab...)

?

? 바로 앞의 문자가 없거나 한 개 존재하는 경우

a?b (b, ab, cb, zb...)

^

^ 뒤에 문자열과 같은 문자열로 시작한는 경우

[] 안에서 ^ 는 [] 안의 문자를 제외한 문자를 의미한다.

^ab (ab, abc, abdr...)

$

$ 앞의 문자열과 같은 문자열로 끝나는 경우

ab$ (ab, sab, aaab...)

[]

[] 안의 문자열 중에 하나만의 문자만을 의미한다.

[a-z], [0-9], [a-zA-Z]

{}

{} 앞의 문자열의 개수를 의미한다.

a{1-3}b (ab, aab, aaab)

()

() 안의 문자는 그룹으로 인식한다.

a(bc){2} (abcbc)

|

or 연산자이다.

a(b|c)d (abd, acd)

[[:alpha:]]

모든 알파벳의 문자 한 자를 의미한다.

[a-zA-Z]와 동일

[[:digit:]]

모든 숫자 한 자를 의미한다.

[0-9]와 동일

[[:alnum:]]

알파벳과 숫자중 한 자를 의미한다.

[a-zA-Z0-9]와 동일

[[:space:]]

공백 문자를 의미한다.

[[:punct:]]

구두점을 의미

\

. * + ? ^ $ [] {} () | \ 문자를 표시할때

(\*, \\, \[1\], \|...)

3. 정규 표현식의 특수문자 사용법

1) ^a?bc : a로 시작해서 bc로 끝나는 문자(abc로 시작하는 문자)와 bc로 시작하는 모든 문자 (예 abcd, bcd)

2) ^.a : a앞에 아무 한 문자가 있어야 하고 그 문자로 시작하고 a가 들어간 문자 (예 aa, bacd, match, para)

3) a?b$ : b로 끝나는 문자열 중에 a가 없거나 한 개 이상 존재하는 문자열 (예 b, ab, aab)

4) a?b+$ : 첫 글자는 a가 있거나 없고 b가 한 개 이상이고 b로 끝나는 문자 (예 ab, b, bb, abbb, abbbb)

5) ^ab$ : 첫 글자가 a이고 끝나는 문자가 b인 경우 (예 ab)

6) [ab]cd : a나 b중에 한 글자와 cd가 포함된 acd, bcd를 포함한 문자 (예 acd, bcd, acdse)

7) ^[a-zA-Z] : 영문자로 시작하는 모든 문자 (예 a, b, c, d, ee)

8) [^ab]cd : cd 문자열 앞에 a나 b를 제외한 문자가 있는 문자열 즉, acd와 bcd를 제외한 문자열을 의미한다. (예 scd, dcd, ffcd)

9) a{2,}b : a의 개수가 최소 2개 이상이고 다음 문자가 b인 문자 (예 aab, aaabcd, aaaab)

-------------------------------------------------------------------------------------------------------------------------------------------------

정규표현식 기초

. : 다수의 한문자

? : 0개 이상의 한문자

* : 0개 이상의 문자 또는 문자열

+ : 1개 이상의 문자 또는 문자열

(chars) : (, ) 안의 문자또는 문자열을 그룹으로 묶습니다. 이 문자그룹은 Substitution(return URL)에서 $N 의 변수로 활용할수 있습니니다.

^ : 문자열의 첫문(열)을 지정합니다.

$ : 문자열의 끝 문자(열)을 지정합니다.

\(역슬래쉬) : 정규표현식에서 특별한 의미로 사용되는 문자의 특수기능을 제거합니다.(예:(, ), [, ] . 등)

{n} : 정확히 n번 반복

{n,} : n번 이상 반복

{n,m} : n 이상 m 이하 반복

[chars] : 문자들의 범위 또는 표현할 수 있는 문자들을 설정합니다.
예) [a-z] : a 부터 z 까지의 소문자, [tT] : 소문자 t 또는 대문자 T

정규표현식 단축표현들

[:alpha:] : 알파벳. [a-zA-Z] 와 같은 표현

[:alnum:] : 알파벳과 숫자. [a-zA-Z0-9] 와 같은 표현

[:digit:] : 숫자 [0-9] 와 같은 표현

[:upper:] : 대문자. [A-Z] 와 같은 표현


-------------------------------------------------------------------------------------------------------------------------------------------------

PHP는 POSIX와 Perl이라는 두 가지 스타일의 정규 표현식을 지원한다. POSIX스타일의 정규 표현식이 PHP에서 기본이지만,

Perl 스타일도 PCRE(Perl-Compitable Regular Expression)라이브러리를 사용하여 표현할수 있다.

아래의 설명은 POSIX 스타일을 기준으로 한다.


. : 문자는 줄바꿈 문자(\n)을 제외한 모든 문자를 대신할수 있다 (하나의 문자)

ex) .at : 이런 정규식은 cat, sat, mat등이 해당된다.

[a-z]at : []의 문자들은 문자 클래스라고 하고, 일치시키는 문자는 이 클래스에 속해야 한다. []안의 것들은

모두 각각 하나의 문자이다.

ex) [aeiou] : 영어의 모음에 해당되는 단어로 []안의 하나의 문자가 된다.

또한 범위를 사용해서도 표현할수 있는데 -를 사용한다.

ex) [a-zA-Z] : 대소문자 알파벳 한 문자를 의미한다.

집합의 구성원이 아니라는 표현으로 ^를 사용한다. 이는 []안에 ^가 있을경우 not이라는 의미를 가진다.

ex) [^a-z] : 소문자 알파벳 이외의 한 문자를 의미한다.


[[:alnum:]] 알파벳 문자, 숫자

[[:alpha:]] 알파벳

[[:lower:]] 소문자

[[:upper:]] 대문자

[[:digit:]] 십진법의 숫자

[[:xdigit:]] 16진법의 숫자

[[:punct:]] 구두점

[[:blank:]] 탭, 스페이스

[[:space:]] 공백 문자들

[[:cntrl:]] 컨트롤 문자들

[[:print:]] 모든 출력 가능한 문자들

[[:graph:]] 스페이스를 제외한 모든 출력 가능한 문자들


* : 패턴이 0번 이상 반복될 수 있음을 나타내고l

+ : 한번이상 반복될 수 있음을 나타낸다.

ex) [[:alnum:]]+ : 알파벳이나 숫자 한문자가 한번이상 반복. 즉, 적어도 하나이상의 알파벳이나 숫자를 의미한다.

한 문자열 뒤에 어떤 문자열이 반복해서 나타남을 정규 표현식으로 나타낸 것은 아래와 같다.
ex) (very )*large : 이는 large, very large, very very large등과 일치한다.

{}를 통해서 반복되는 횟수를 제한할 수 있다.
{3}는 세번 반복, {2, 4}은 두번에서 네번 사이로 반복, {2, }는 적어도 2번 이상 반복의 의미이다.
ex) (very ){1, 3} : very , very very , very very very 와 일치한다.

^ : 정규 표현식의 시작부분에 사용되며, 검색하는 문자열의 맨 앞부분에 이 표현이 있어야 함을 의미한다.
$ : 정규 표현식의 뒷부분에 사용되고 이 표현으로 문자열이 끝나야 됨을 의미한다.미
^[a-z]$ : a부터 z사이의 한문자를 의미한다.

| : 선택을 표현하는 경우 사용된다.
ex) com|edu|net : com이거나 edu이거나 net인경우를 의미한다.

\ : '.', '{', '$', '-', 등의 특수문자를 정규 표현식을 위한 특수문자가 아닌 문자로 사용하고 싶을때 '\'를 붙여서 사용한다.
'\'를 표현할때는 '\\'라고 써준다.
ex) \\\$ : 이 경우 \$를 찾고자 할경우를 의미하게 된다.

POSIX 정규 표현식에서의 특수문자의 의미
1) []밖에서 사용되었을때
- / : 특수문자 이스케이프
- ^ : 문자열의 처음에서 일치되어야 함
- $ : 문자열의 끝에서 일치되어야 함
- . : 줄바꿈(\n)을 제외한 모든 문자와 한개를 의미
- | : 또는의 의미
- ( : 패턴의 시작
- ) : 패턴의 끝
- * : 0번 이상 반복됨
- + : 1번 이상 반복됨
- { : 반복 횟수 지정의 시작
- } : 반복 횟수 지정의 끝
- ? : 하위 표현식을 옵션으로 취급
2) []안에서 사용되었을때
- / : 특수문자 이스케이프
- ^ : 맨 처음 시작되었을 때만 not의 의미, 이외에는 문자로 인식
- - : 문자의 범위 지정

ex) ^[a-zA-Z0-9_\-\.]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$
대소영문자, 숫자, _, -, .중 한개의 문자인데 문자열의 처음에 나타나야 되고 +가 있어서 한번이상 반복된다.
그 이후 @ 문자 한문자가 있어야 되고 대소영문자, 숫자, -중 한개의 문자인데 +가 있어서 한번이상 반복된다.
그 이후 . 문자 한문자가 있어야 되고 대소영문자, 숫자, -, .중 한개의 문자인데 +가 있어서 한번이상 반복되며 끝난다.

2011/12/06 11:39 2011/12/06 11:39
No trackbacks, No comments.

자바스크립트 연습장

프로그래밍/자바 스크립트 |  2011/12/06 11:38
<script>
<!--
function writ() {
newwin=open('','newwin','width=500,height=500')
newwin.document.writeln("<html><body>")
newwin.document.writeln("<center><font color=green size=4><b>결과화면</b></font></center><hr& gt;")
newwin.document.writeln("<script>")
newwin.document.writeln(document.a.b.value)
newwin.document.writeln("</script>")
newwin.document.writeln("<hr></body></html>")
}
//-->
</script>

<form name=a>
<textarea name=b cols=60 rows=15>
document.write("<font color=blue>안녕하세요?</font><br>");
document.write("<font color=red>반갑습니다</font><br>");
</textarea>
<input type=button value=미리보기 onclick=writ()>
</form>
2011/12/06 11:38 2011/12/06 11:38
No trackbacks, No comments.

자바스크립트로 엔터 넣기

프로그래밍/자바 스크립트 |  2011/12/06 11:38
&#x000A;

ex)
<div id='example'>
<h2>Demo</h2>
<pre class="brush: javascript">&#x000A; // SyntaxHighlighter makes your code&#x000A; // snippets beautiful without tiring&#x000A; // your servers.&#x000A; // http://alexgorbatchev.com&#x000A; var setArray = function(elems) {&#x000A; this.length = 0;&#x000A; push.apply(this, elems);&#x000A; return this;&#x000A; }&#x000A;</pre>&#x000A;

</div>
2011/12/06 11:38 2011/12/06 11:38
No trackbacks, No comments.

화면상의 객체 위치,크기

프로그래밍/자바 스크립트 |  2011/12/06 11:38

<HTML>
<HEAD>
<TITLE> 화면상의 객체 위치,크기 </TITLE>
<SCRIPT LANGUAGE="JavaScript" >
<!--
function getBounds(tag)
{
var ret = new Object();
if(document.all) {
var rect = tag.getBoundingClientRect();
ret.left = rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft);
ret.top = rect.top + (document.documentElement.scrollTop || document.body.scrollTop);
ret.width = rect.right - rect.left;
ret.height = rect.bottom - rect.top;
} else {
var box = document.getBoxObjectFor(tag);
ret.left = box.x;
ret.top = box.y;
ret.width = box.width;
ret.height = box.height;
}
return ret;
}

//-->
</SCRIPT>
</HEAD>

<BODY>
<BR><BR><BR><BR><BR>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="youranytag" style="border:1px solid ;width:500px;">aa</span>

<SCRIPT LANGUAGE="JavaScript">
<!--
var box = getBounds(document.getElementById('youranytag'));
var str = "left:"+box.left+"/top:"+box.top+"/width:"+box.width+"/height:"+box.height;
alert(str);
//-->
</SCRIPT>
</BODY>
</HTML>
2011/12/06 11:38 2011/12/06 11:38
No trackbacks, 1 Comment

모든 브라우저 버전별 확인 스크립트

프로그래밍/자바 스크립트 |  2011/12/06 11:37

<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">

// InternetVersion
function getInternetVersion(ver) {
var rv = -1; // Return value assumes failure.
var ua = navigator.userAgent;
var re = null;
if(ver == "MSIE"){
re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
}else{
re = new RegExp(ver+"/([0-9]{1,}[\.0-9]{0,})");
}
if (re.exec(ua) != null){
rv = parseFloat(RegExp.$1);
}
return rv;
}

//브라우저 종류 및 버전확인
function browserCheck(){
var ver = 0; // 브라우저 버전정보
if(navigator.appName.charAt(0) == "N"){
if(navigator.userAgent.indexOf("Chrome") != -1){
ver = getInternetVersion("Chrome");
alert("Chrome"+ver+"입니다.");
}else if(navigator.userAgent.indexOf("Firefox") != -1){
ver = getInternetVersion("Firefox");
alert("Firefox"+ver+"입니다.");
}else if(navigator.userAgent.indexOf("Safari") != -1){
ver = getInternetVersion("Safari");
alert("Safari"+ver+"입니다.");
}
}else if(navigator.appName.charAt(0) == "M"){
ver = getInternetVersion("MSIE");
alert("MSIE"+ver+"입니다.");
}
}
</script>
</head>
<body>
<input type="button" value="브라우저판별" onclick="browserCheck();">
</body>
</html>

========================================================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script>
var Station = {
check : function (type, checkStr, checkPoint)
{
var name = "ETC";
for ( var list in checkPoint )
{
if (checkStr.indexOf(list) != -1)
{
name = checkPoint[list];
}
}
escape("this." + type + " = function () { return name }") ;
return name;
},
os : function ()
{
var checkStr = navigator.platform.toLowerCase();
var checkPoint =
{
"win" : "WINDOW", "mac" : "MAC", "unix" : "UNIX", "linux" : "LINUX"
}
return this.check("os", checkStr, checkPoint );
},
browser : function ()
{
var checkStr = navigator.userAgent.toLowerCase();
var checkPoint =
{
"msie 6" : "IE6" , "msie 7" : "IE7", "firefox" : "FF", "navigator" : "NETSCAPE", "opera" : "OPERA"
}
return this.check("browser", checkStr, checkPoint);

}
}
document.write("OS : " + Station.os() + "<br/>");
document.write("Browser : " + Station.browser() + "<br/>");
</script>
</body>
</html>

2011/12/06 11:37 2011/12/06 11:37
No trackbacks, No comments.

페이지 스크롤끝 확인 스크립트

프로그래밍/자바 스크립트 |  2011/12/06 11:37

function scrollEnd(){
var scrollheight = document.compatMode == "CSS1Compat" ? document.documentElement.scrollHeight :

document.body.scrollHeight;
var clientHeight = document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight :

document.body.clientHeight;
var ScrollTop = document.compatMode == "CSS1Compat" ? document.documentElement.scrollTop :

document.body.scrollTop;
var scrollPos = scrollheight - ScrollTop;

if (clientHeight == scrollPos) { // 스크롤 바가 맨 밑에 위치한다면
alert ("끝까지 확인함!!");
}

<BODY onscroll=scrollEnd();>

2011/12/06 11:37 2011/12/06 11:37
No trackbacks, No comments.

스마트폰 접속시 모바일 사이트로 이동 소스 예제

프로그래밍/자바 스크립트 |  2011/12/06 11:37

<script type="text/javascript">
var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson');
for (var word in mobileKeyWords){
if (navigator.userAgent.match(mobileKeyWords[word]) != null){
location.href = "http://m.naver.com";
break;
}

}
</script>

2011/12/06 11:37 2011/12/06 11:37
No trackbacks, No comments.

구글음성 서비스 이용처리

프로그래밍/자바 스크립트 |  2011/12/06 11:36

구글번역에서 소리를 제공하는 url를 이용하여 간단한 TTS 구현 예제

<HTML>
<HEAD>
<TITLE> 구글음성서비스 </TITLE>
<META name="Generator" content="EditPlus">
<META name="Author" content="">
<META name="Keywords" content="">
<META name="Description" content="">
<SCRIPT type="text/javascript">
<!--
function doVoice(){
var str = document.getElementById("txt").value;
var urlPar="http://translate.google.co.kr/translate_tts?ie=UTF-8&q="+encodeURI(str)+"&tl=ko&prev=input";
document.getElementById("bgs").src =urlPar;

document.getElementById("view").innerText=encodeURI(str);
}
//-->
</SCRIPT>
</HEAD>

<BODY>
한글을 입력해주세요<br>

<INPUT type="text" name="txt" id="txt">
<INPUT type="button" value="음성듣기" onclick="javascript:doVoice()">
<div id="view"></div>

<bgsound id="bgs">


</BODY>
</HTML>               

2011/12/06 11:36 2011/12/06 11:36
No trackbacks, No comments.

javascript - 자바스트립트 프린터( 프린트 컴포넌트 무료제공 )

프로그래밍/자바 스크립트 |  2011/11/23 18:46

// JavaScript Document
// Body에 object함수 호출
function object()
{
document.write("<object id='factory' style='display:none' classid='clsid:1663ed61-23eb-11d2-b92f-008048fdd814' codebase='http://www.meadroid.com/scriptx/smsx.cab'>");
document.write("</object>");
}

function printWindow()
{
factory.printing.header = "" // 머릿글
factory.printing.footer = "" // 바닥글
factory.printing.portrait = true // true 세로출력 , false 가로출력
factory.printing.leftMargin = 10
factory.printing.topMargin = 10
factory.printing.rightMargin = 10
factory.printing.bottomMargin = 10

factory.printing.Print( true, window ) // 대화상자 표시여부 / 출력될 프레임명
}

-----------------------------------------

예)

<HEAD>

<SCRIPT language="javascript" src="FactoryPrint.js"></SCRIPT>

</HEAD>

<BODY>

<SCRIPT language="javascript">

object(); // <BODY> 바로밑에서 호출

</SCRIPT>

</BODY>

printWindow() 함수에서 셋팅을 한후

호출하면 프린트가 됨.

2011/11/23 18:46 2011/11/23 18:46
No trackbacks, No comments.

Scrollable HTML table

프로그래밍/자바 스크립트 |  2011/10/11 12:10

Scrollable HTML table

Overview

Scrollable HTML table JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary. All you need to do is put header rows (if you need them) in THEAD section, table body rows in TBODY section, footer rows (if you need them) in TFOOT section and give your table an ID field, include the webtoolkit.scrollabletable.js file and create ScrollableTable() object after each table.

Scrollable HTML table code tested in IE5.0+, FF1.5+.

Source code for index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Scrollable HTML table</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="webtoolkit.scrollabletable.js"></script>

    <style>
        table {
            text-align: left;
            font-size: 12px;
            font-family: verdana;
            background: #c0c0c0;
        }

        table thead {
            cursor: pointer;
        }

        table thead tr,
        table tfoot tr {
            background: #c0c0c0;
        }

        table tbody tr {
            background: #f0f0f0;
        }

        td, th {
            border: 1px solid white;
        }
    </style>
</head>

<body>

<table cellspacing="1" cellpadding="2" class="" id="myScrollTable" width="400">
    <thead>
        <tr>
            <th class="c1">Name</th>
            <th class="c2">Surename</th>
            <th class="c3">Age</th>
        </tr>
    </thead>

    <tbody>
        <tr class="r1">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">30</th>
        </tr>
        <tr class="r2">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">31</th>
        </tr>
        <tr class="r1">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">32</th>
        </tr>
        <tr class="r2">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">33</th>
        </tr>
        <tr class="r1">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">34</th>
        </tr>
        <tr class="r2">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">35</th>
        </tr>
        <tr class="r1">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">36</th>
        </tr>
        <tr class="r2">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">37</th>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th class="c1">Name</th>
            <th class="c2">Surename</th>
            <th class="c3">Age</th>
        </tr>
    </tfoot>
</table>

<script type="text/javascript">
var t = new ScrollableTable(document.getElementById('myScrollTable'), 100);
</script>

</body>
</html>

Source code for webtoolkit.scrollabletable.js

/**
*
* Scrollable HTML table
* http://www.webtoolkit.info/
*
**/

function ScrollableTable (tableEl, tableHeight, tableWidth) {

    this.initIEengine = function () {

        this.containerEl.style.overflowY = 'auto';
        if (this.tableEl.parentElement.clientHeight - this.tableEl.offsetHeight < 0) {
            this.tableEl.style.width = this.newWidth - this.scrollWidth +'px';
        } else {
            this.containerEl.style.overflowY = 'hidden';
            this.tableEl.style.width = this.newWidth +'px';
        }

        if (this.thead) {
            var trs = this.thead.getElementsByTagName('tr');
            for (x=0; x<trs.length; x++) {
                trs[x].style.position ='relative';
                trs[x].style.setExpression("top", "this.parentElement.parentElement.parentElement.scrollTop + 'px'");
            }
        }

        if (this.tfoot) {
            var trs = this.tfoot.getElementsByTagName('tr');
            for (x=0; x<trs.length; x++) {
                trs[x].style.position ='relative';
                trs[x].style.setExpression("bottom", "(this.parentElement.parentElement.offsetHeight - this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop) + 'px'");
            }
        }

        ;


}
2011/10/11 12:10 2011/10/11 12:10
No trackbacks, No comments.
<< Previous Page 1 2 3 4