모질라 파이어폭스에서 Ajax 한글 키 이벤트를 처리하는 Jquery,커피스크립트 코드입니다.

모질라 파이어폭스 Ajax. 한글 키 이벤트 처리.(Jquery Mozilla Force Keyup CoffeeScript module)

저는 주 브라우저로 모질라 파이어폭스를 사용합니다.
Ajax 모듈을 만드는데, 한글을 입력하면 못 알아듣더군요.
http://javascript.info/tutorial/keyboard-events에서 키 이벤트 체크를 해 봤습니다.
한글 키가 눌리면 Keydown(Keycode=229) 이벤트가 한 번만 발생하고,
Keyup 이벤트는 발생하지 않습니다.
중국어,일본어를 테스트 해보니 이 역시 같은 현상이군요.
한글과 다름없이 229키 코드가 딱 한번 발생합니다.
아마도 다른 블록형 문자 또한 같은 이벤트를 발생 시킬 거라 예상됩니다.
모질라에서 한글 키 이벤트를 부드럽게 처리하는 커피 스크립트 모듈을 만들었어요.
모질라 파이어폭스 이용자도 한글을 편하게 쓸 권리가 있으니까요.
필요하신 분은 마음껏 가져다 쓰세요.

커피스크립트 버전(Jquery Mozilla Force Keyup module  - Coffeescript version)



  
# Mozilla Force Keyup CoffeeScript module
# by 月風(http:://dorajistyle.pe.kr)
# How to use
# mozillaForceKeyup(”inputid”)
# in HTML.
# <input id=”input
id”>
mozillaForceKeyup = (targetId) ->
  if jQuery.browser.mozilla
    isIntervalRunning = null
    target = '#'+targetId
    $(target).bind 'keydown',(e) ->
      if e.which == 229
        forceKeyup = () ->
          $(target).trigger('keyup')
        if not isIntervalRunning
          isIntervalRunning = setInterval forceKeyup, 100

    $(target).bind 'blur',(e) ->
      if isIntervalRunning
        clearInterval isIntervalRunning
        isIntervalRunning = null



자바스크립트 버전(Jquery Mozilla Force Keyup module - Javascript version)



// Mozilla Force Keyup Javascript module
// by 月風(http:://dorajistyle.pe.kr)
// How to use
// mozillaForceKeyup(”inputid”)
// in HTML.
// <input id=”input
id”>

mozillaForceKeyup = function(targetId) {
var isIntervalRunning, target;
if (jQuery.browser.mozilla) {
isIntervalRunning = null;
target = '#' + targetId;
$(target).bind('keydown', function(e) {
var forceKeyup;
if (e.which === 229) {
forceKeyup = function() {
return $(target).trigger('keyup');
};
if (!isIntervalRunning) {
return isIntervalRunning = setInterval(forceKeyup, 100);
}
}
});
return $(target).bind('blur', function(e) {
if (isIntervalRunning) {
clearInterval(isIntervalRunning);
return isIntervalRunning = null;
}
});
}
};







by


Tags : , , , , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

Perl에서 Jquery를 이용해 email 중복을 검사하는 방법입니다.

Perl에서 Jquery를 이용해 email 중복 검사 하기

-'Perl에서  Jquery를 이용한 email 중복체크 하기'

저는 이번에 Perl을 처음 건드려 봅니다.
'펄 세계엔, 한줄의 코드로 컴퓨터를 주므르는 고수들이 살고 있다!'
한참 전에 이런 소리를 들어 봤던거 같군요.
그때 든 생각은.
'한줄? 아! 디버깅하기 힘들겠구나.' 였어요.
인간 친화적이라기보다 기계 친화적인 언어라고 생각했었죠.
펄로 만들어진 PHP는 친숙하지만 Perl이라면 왠지 거리감이 느껴지는 언어였어요.
그런데 Perl에서도 요즘 흔히 쓰는 Jquery를 이용한 Ajax 구현이 가능합니다.
덕분에 조금 가까워 졌네요.:D


duplicate_test.html
<html><head/><body>
<INPUT maxLength=12 name="email" id="email" size="20"><br/>

<div id="duplicateResult"></div>
<script type="text/javascript" src="/rfo/jquery.js"></script>

<script type="text/javascript" src="/rfo/duplicate.js"></script>
</body></html>


duplicate.js
$(document).ready(function(){
  $("#email").keyup(function() {
    var email = $('#email').attr('value'); // get email
        if (email) { // values are not empty   
      $.ajax({
        type: "GET",
        url: "/cgi-bin/duplicate.pl", // URL of the Perl script
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: "email=" + email,       
        // script call was not successful
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          $('div#duplicateResult').text("responseText: " + XMLHttpRequest.responseText
            + ", textStatus: " + textStatus
            + ", errorThrown: " + errorThrown);
          $('div#duplicateResult').addClass("error");
        }, // error
        // script call was successful
        // data contains the JSON values returned by the Perl script
        success: function(data){
          if (data.vacancy) { // script returned error
            $('div#duplicateResult').html("<span style='color:blue;font-size:14px;font-weight:bold;'>" + data.vacancy+"</span>");
            $('div#duplicateResult').addClass("vacancy");
          } // if
          else { // login was successful
            $('div#duplicateResult').html("<span style='color:red;font-size:14px;font-weight:bold;'>" + data.occupied+"</span>");
            $('div#duplicateResult').addClass("occupied");
          } //else
        } // success
      }); // ajax
    } // if
    else {
      $('div#duplicateResult').text("아이디를 입력해 주세요.");
      $('div#duplicateResult').addClass("error");
    } // else
    $('div#duplicateResult').fadeIn();
    return false;
  });
});


duplicate.pl

!/usr/bin/perl

use CGI;
use DBI;
use strict;
use warnings;
use rfoconfig;


read the CGI params

my $cgi = CGI->new;
my $email = $cgi->param("email");


connect to the database

my $dbh = DBI->connect("DBI:mysql:testDB:localhost","user","password");


check the username and password in the database

my $statement = qq{SELECT COUNT(*) FROM user WHERE email=?};
my $sth = $dbh->prepare($statement)  or die $dbh->errstr;
$sth->execute($email)  or die $sth->errstr;
my ($duplicatekey) = $sth->fetchrowarray;

my $json = ($duplicate_key) ?
  qq{{"occupied" : " $email는 이미 있는 아이디 입니다."}} :
  qq{{"vacancy" : "$email을 사용하실 수 있습니다."}};


return JSON string


"DBI:mysql:testDB:localhost","user","password"
우선 위 코드에서 testDB:localhost , user, password는 테스트 환경에 맞게 설정해 주세요.

print $cgi->header(-type => "application/json", -charset => "utf-8");
print $json;
아래 파일은 Document root/ 에 넣으세요.

  • Jquery.js (http://jquery.com 에서 다운로드 받으세요.)
  • duplicate.js
  • duplicate_test.html

아래 파일은 Document root/cgi-bin 에 넣으세요.

  • duplicate.pl


 

참고자료
Very simple login using Perl, jQuery, Ajax, JSON and MySQL

by 月風



by


Tags : , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

 

구글,키워드,검색,google,keyword,search,test,검색,실험


포스트
태그로 검색하여 연관글을 보여주는 Google AJAX Search 적용을 위해, 최상의 검색옵션이 필요 했습니다.

저에게 필요한 검색 옵션은 이것입니다.

태그 ∩ 포스트 > 0

포스트에 적어도 한개의 태그가 포함되어야 하는것이죠.

태그를 키워드로 하여 아래의 방법으로 실험을 했습니다.

Open english content




1. 공백으로 키워드 구분 (Space delimited Keyword) [검색결과(Search result) = 0]

 family hollywood LA Los Angeles manhatan beach north america travel United States universal studio 가족 로스엔젤레스 맨하튼비치 미국 북미 여행 유니버설스튜디오 헐리우드site:dorajistyle.pe.kr

    아무것도 나오지 않습니다. (Result not found)


2. OR로 키워드 구분 (OR delimited Keyword) [검색결과(Search result) ≒ 3]

family OR hollywood OR LA OR Los Angeles OR manhatan beach OR north america OR travel OR United States OR universal studio OR 가족 OR 로스엔젤레스 OR 맨하튼비치 OR 미국 OR 북미 OR 여행 OR 유니버설스튜디오 OR 헐리우드 site:dorajistyle.pe.kr

    고급 검색에서 '다음 단어 적어도 하나 포함'을 이용하여 검색을 하면 같은 결과가 나옵니다.


3. 작은 따옴표와 쉼표로 키워드 구분 (Single quotation marks and comma
delimited Keyword) [검색결과(Search result)  = 0]

'family','hollywood','LA','Los Angeles','manhatan beach','north america','travel','United States','universal studio','가족','로스엔젤레스','맨하튼비치','미국','북미','여행','유니버설스튜디오','헐리우드' site:dorajistyle.pe.kr

    아무것도 나오지 않습니다. (Result not found)


4. 큰 따옴표와 쉼표로 키워드 구분 (Double quotation marks and comma delimited Keyword) [검색결과(Search result) ≒ 1]

"family","hollywood","LA","Los Angeles","manhatan beach","north america","travel","United States","universal studio","가족","로스엔젤레스","맨하튼비치","미국","북미","여행","유니버설스튜디오","헐리우드" site:dorajistyle.pe.kr

    태그가 모두 포함되어있는 글이 검색되었습니다. (One result that have )


5. 작은 따옴표와 OR로 키워드 구분 (Single quotation mark and OR delimited Keyword) [검색결과(Search result) ≒ 3]

'family' OR 'hollywood' OR 'LA' OR 'Los Angeles' OR 'manhatan beach' OR 'north america' OR 'travel' OR 'United States' OR 'universal studio' OR '가족' OR '로스엔젤레스' OR '맨하튼비치' OR '미국' OR '북미' OR '여행' OR '유니버설스튜디오' OR '헐리우드' site:dorajistyle.pe.kr

    고급 검색에서 '다음 단어 적어도 하나 포함'을 이용하여 검색을 하면 같은 결과가 나옵니다.


6. 큰 따옴표와 OR로 키워드 구분 (Double quotation mark and OR delimited Keyword) [검색결과(Search result) ≒ 30+]

"family" OR "hollywood" OR "LA" OR "Los Angeles" OR "manhatan beach" OR "north america" OR "travel" OR "United States" OR "universal studio" OR "가족" OR "로스엔젤레스" OR "맨하튼비치" OR "미국" OR "북미" OR "여행" OR "유니버설스튜디오" OR "헐리우드" site:dorajistyle.pe.kr

    드디어 원하는 결과를 얻었습니다. 사실 한국어 구글이 아닌 영문 구글 사이트에서는 '다음 단어 적어도 하나 포함' 사이에 친절하게 OR 이 들어있고, 자동으로 큰 따옴표를 추가해 줍니다.
   (You can get same result at Advanced Search's one or more of these words option)




결론은 큰 따옴표로 "키워드" 를 묶어서 검색을 하는 것이 답입니다.

(Wrap "Keywords" with double quotation is best way to search.)




by


Tags : , , , , , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.