'javascript'에 해당되는 글 29건

  1. 2016.06.27 [Javascript] English to Korean (영문 한글 전환)
  2. 2013.05.15 [JavaScript] undefined check.
  3. 2011.11.30 JavaScript Cookie 맛보기.
  4. 2011.11.22 Javascript queryString 맛보기
  5. 2011.11.17 javascript apply 와 call 맛보기. (2)
  6. 2011.11.17 javascript substring 과 substr 맛보기.
  7. 2011.11.10 javascript event 맛보기.
  8. 2010.05.11 XML Parser javascript class v1.0.0
  9. 2009.01.07 [펌]웹페이지 성능 향상
  10. 2008.02.20 JavaScript 강좌 references. (2)

[Javascript] English to Korean (영문 한글 전환)

ITWeb/검색일반 2016.06.27 23:51

필요해서 구글링으로 퍼왔습니다.

기본적으로는 한글 자모 분리 기능 구현을 사용한다고 보시면 됩니다.


아래 코드 중 구글링으로 퍼온 코드에서 읽기 쉽도록 약간의 변수명등 수정을 했습니다.

자바스크립트에서 function 선언에 대한 기본 이해를 하시면 코드 보기가 더 쉽습니다.


<html>

<head></head>

<script>

var convertEngToKor = function(args) {

var engChosung = "rRseEfaqQtTdwWczxvg"

var engChosungReg = "[" + engChosung + "]";

var engJungsung = {k:0,o:1,i:2,O:3,j:4,p:5,u:6,P:7,h:8,hk:9,ho:10,hl:11,y:12,n:13,nj:14,np:15,nl:16,b:17,m:18,ml:19,l:20};

var engJungsungReg = "hk|ho|hl|nj|np|nl|ml|k|o|i|O|j|p|u|P|h|y|n|b|m|l";

var engJongsung = {"":0,r:1,R:2,rt:3,s:4,sw:5,sg:6,e:7,f:8,fr:9,fa:10,fq:11,ft:12,fx:13,fv:14,fg:15,a:16,q:17,qt:18,t:19,T:20,d:21,w:22,c:23,z:24,x:25,v:26,g:27};

var engJongsungReg = "rt|sw|sg|fr|fa|fq|ft|fx|fv|fg|qt|r|R|s|e|f|a|q|t|T|d|w|c|z|x|v|g|";

var regExp = new RegExp("("+engChosungReg+")("+engJungsungReg+")(("+engJongsungReg+")(?=("+engChosungReg+")("+engJungsungReg+"))|("+engJongsungReg+"))","g");


var converter = function (args, cho, jung, jong) {

return String.fromCharCode(engChosung.indexOf(cho) * 588 + engJungsung[jung] * 28 + engJongsung[jong] + 44032);

};

var result = args.replace(regExp, converter);

console.log(result);

return result;

}


function run(engStr) {

convertEngToKor(engStr);

}


var convertEngToKor2 = (function () {

var engChosung = "rRseEfaqQtTdwWczxvg"

var engChosungReg = "[" + engChosung + "]";

var engJungsung = {k:0,o:1,i:2,O:3,j:4,p:5,u:6,P:7,h:8,hk:9,ho:10,hl:11,y:12,n:13,nj:14,np:15,nl:16,b:17,m:18,ml:19,l:20};

var engJungsungReg = "hk|ho|hl|nj|np|nl|ml|k|o|i|O|j|p|u|P|h|y|n|b|m|l";

var engJongsung = {"":0,r:1,R:2,rt:3,s:4,sw:5,sg:6,e:7,f:8,fr:9,fa:10,fq:11,ft:12,fx:13,fv:14,fg:15,a:16,q:17,qt:18,t:19,T:20,d:21,w:22,c:23,z:24,x:25,v:26,g:27};

var engJongsungReg = "rt|sw|sg|fr|fa|fq|ft|fx|fv|fg|qt|r|R|s|e|f|a|q|t|T|d|w|c|z|x|v|g|";

var regExp = new RegExp("("+engChosungReg+")("+engJungsungReg+")(("+engJongsungReg+")(?=("+engChosungReg+")("+engJungsungReg+"))|("+engJongsungReg+"))","g");


var converter = function (args, cho, jung, jong) {

return String.fromCharCode(engChosung.indexOf(cho) * 588 + engJungsung[jung] * 28 + engJongsung[jong] + 44032);

};


return (function (args) {

var result = args.replace(regExp, converter); 

console.log(result);

return result; 

});

})();


function run2(engStr) {

convertEngToKor2(engStr);

}

</script>

<body>

<input id="eng" value="skdlzl">

<button onclick="run(document.getElementById('eng').value)">run</button>

<button onclick="run2(document.getElementById('eng').value)">run2</button>

</body>

</html>


코드를 보시면 아시겠지만, 영문으로 작성한 skdlrl(나이키) 를 한글 나이키로 변환해서 리턴해 주도록 해줍니다.

보통 검색에서 자동완성 기능 구현 시 client side 에서 한영변환에 대한 기능으로 활용하기 위해 사용 합니다.


저작자 표시 비영리 변경 금지
신고
Trackback 0 : Comment 0

[JavaScript] undefined check.

ITWeb/개발일반 2013.05.15 18:55


if ( typeof obj === "undefined" ) {

}


if ( obj === undefined ) {

}


요렇게 하셔야 합니다.

신고
Trackback 0 : Comment 0

JavaScript Cookie 맛보기.

ITWeb/개발일반 2011.11.30 14:40
Browser 에서 Cookie 를 다루는 것은 매우 오래된 기술이죠.
그래서 맛보기 작성해 봅니다.
기억을 새록 새록 ㅎㅎ

[제약사항]
- 단일 Domain 에대한 쿠키 count 와 length 제한이 있습니다. 이전 글 참고하세요.
http://jjeong.tistory.com/278

[참고사이트]
http://www.quirksmode.org/js/cookies.html
http://www.w3schools.com/js/js_cookies.asp

[Session vs Persistent Cookie]

- Session Cookie
Temporary Cookie 라고도 합니다.
말 그대로 임시쿠키 입니다.
브라우저가 살아 있는 동안만 유지되는 쿠키로 expire date 이 없기 때문에 브라우저를 닫으면 바로 쿠키는 사라집니다.

- Persistent Cookie 
세션쿠키와 다르게 브라우저가 닫혀도 쿠키가 유지 되는 쿠키 입니다.
즉, expire date 을 설정해 주기 때문에 그 기간 동안 쿠키는 유지 되며, 임의 삭제를 하지 않는 이상 유지됩니다.
이 쿠키는 expire 되기 전까지 쿠키 file 에 쓰여져서 저장됩니다.



[소스코드]

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Cookie</title>

<script type="text/javascript">

//<![CDATA[

var COOKIE = {

set:function (n,v,e,t) {

var expireDate = new Date();

var cookieValue;

switch ( t ) {

case 'day' :

expireDate.setDate(expireDate.getDate() + e);

break;

case 'hour' :

expireDate.setTime(expireDate.getTime() + (e*60*60*1000));

break;

default :

expireDate.setDate(expireDate.getDate() + e);

}

if ( e ) {

cookieValue = escape(v)  + '; expires='+expireDate.toGMTString();

} else {

cookieValue = escape(v) ;

}

document.cookie = n + '=' + cookieValue + '; path=/';

},

get:function(n) {

var cookies = document.cookie.split(';');

var i, key, val, size, idx;

size = cookies.length;

for ( i=0; i<size; i++ ) {

idx =  cookies[i].indexOf('=');

key = cookies[i].substr(0, idx);

val = cookies[i].substr(idx+1);

key = key.replace(/^\s+|\s+$/g,"");

if ( key == n ) {

return unescape(val);

}

}

},

del:function(n) {

this.set(n,'',-1);

}

}


function testGet() {

var val = COOKIE.get('DUID');

alert(val);

}


function testDel() {

COOKIE.del('DUID');

alert(document.cookie);

}

//]]>

</script>

</head>

<body style='margin:0px; padding:0px;' topmargin='0px'  leftmargin='0px' marginheight='0px' marginwidth='0px'>

<button onclick="COOKIE.set('DUID', '123456789', 365);">set cookie</button>

<button onclick="testGet();">get cookie</button>

<button onclick="testDel();">del cookie</button>

</body>

</html>


※ 기본 code base 는 위 두 사이트를 바탕으로 작성한 것입니다.
신고
tags : Cookie, javascript
Trackback 0 : Comment 0

Javascript queryString 맛보기

ITWeb/개발일반 2011.11.22 11:15
가끔 Server Side 말고 Client 만 가지고 queryString 처리를 해야 할 때가 있습니다.
그래서 그냥 하드코딩 올려 봅니다.

[참고URL]
http://www.w3schools.com/jsref/jsref_split.asp
http://www.w3schools.com/jsref/obj_location.asp
http://www.w3schools.com/jsref/prop_loc_href.asp

// 예) http://www.my.com/index.html?width=320&height=48&allow=my.com

<script type="text/javascript">

var href = window.location.href;

var queryString = href.split('?');

var params = queryString[1].split('&');

var size = params.length;


for ( var i=0; i<size; i++ ) {

var param = params[i].split('=');
        alert('KEY : ' + param[0] + "\n" + 'VALUE : ' + param[1]);

}

</script>



[추가정보]
- document.URL : 읽기 전용으로 동일한 정보를 가져 옵니다.
- document.location : 읽기/쓰기 가능 하며 동일한 정보를 가져 옵니다.
- location.search : ?width=320&height=48&allow=my.com 이 부분만 가져 옵니다.


 
신고
Trackback 0 : Comment 0

javascript apply 와 call 맛보기.

ITWeb/개발일반 2011.11.17 10:50
이전에 작성한 글중에 일부 내용이 있습니다.
http://jjeong.tistory.com/161 

javascript 에서 클래스와 상속 관련에 대한 내용으로 다뤘던 내용이구요.
여기서도 가볍게 상기시키는 관점에서 올려 봅니다.

[Function.apply]

Syntax :
  Function.apply(thisArg[, argArray])

thisArg 는 상속 받을 클래스를 지시합니다.

java 를 예로 들면
  public class OneClass extends InheritClass {
  }

여기서 OneClass 가 thisArg 가 됩니다. (OneClass 에서 InheritClass 의 member 들을 상속 받죠.)
JavaScript 에서 apply 를 사용하게 되면 thisArg 의 클래스로 상속을 해주게 됩니다.
아래 예를 보시면 이해가 쉬우실 겁니다. 

Example :

  function Car(make, model, year) {

    this.make = make;

    this.model = model;

    this.year = year;

  }

 

  function RentalCar(carNo, make, model, year) {

    this.carNo = carNo;

    Car.apply(this, new Array(make, model, year));

  }
보시면 RentalCar 클래스는 Car 클래스를 상속 받게 됩니다.
Javs 로 표현해 보면
  public class RentalCar extends Car {
  }

가 되겠죠. 



[Function.call]

Syntax :
  Function.call(thisArg[, arg1[, arg2[, ...]]])

apply 와 동일 합니다.
다만, argument 전달 방식이 array 냐 list 냐의 차이이고 동일하게 동작을 합니다. 

Example :

  function car(make, model, year) {

    this.make = make;

    this.model = model;

    this.year = year;

  }

 

  function hireCar(carNo, make, model, year) {

    this.carNo = carNo;

    car.call(this, make, model, year);

  } 


[참고사이트]
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/Apply
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/Call



신고
Trackback 0 : Comments 2

javascript substring 과 substr 맛보기.

ITWeb/개발일반 2011.11.17 09:03
흔히 많이 사용하는 함수 인데 워낙에 다양한 개발언어를 쓰다보면.. 가끔 문법이 헷갈릴때도 있죠..!!
그래서 정리 하는 습관을 저는 그냥.. 블로그에 정리 하는 걸로 한답니다.. 그래서 맛보기 들어가보죠.. ㅎㅎ

[참고사이트]
http://www.w3schools.com/jsref/jsref_substring.asp
http://www.w3schools.com/jsref/jsref_substr.asp

string.substr(start, length)
- length 부분은 옵션 이구요.
- 의미는 start index 부터 length 길이 만큼.. return 합니다.
- length 가 없으면 그냥 start index 부터.. 끝까지.. 쭈욱...


string.substring(from, to)
- from index 부터 to index 까지 잘라서 return 합니다.
- 역시 to 도 옵션이기 때문에 없으면 끝까지.. 쭈욱...


샘플 코드는 참고사이트 보시면 됩니다. :)
신고
Trackback 0 : Comment 0

javascript event 맛보기.

ITWeb/개발일반 2011.11.10 17:12

그냥 맛보기로 ㅎㅎ

[참고URL]
http://www.quirksmode.org/js/introevents.html
http://www.quirksmode.org/js/events_early.html


javascript 에서 event 를 다루는 것은 매우 중요 합니다.
뭐 이런건 이야기 하지 않아도 잘 아실것 같고요.. ^^

event preventing 관련해서 뭐 좀 보다가.. 걍.. 맛보기로만 정리해 보아요..

[맛보기코드]

<!DOCTYPE html>

<html lang="ko">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">

//<![CDATA[

function doSomething(url) {

var d = new Date();

location.href =  url + '?dummy=' + d.getTime();

}

//]]>

</script>

</head>

<body>

<a href="http://192.168.1.1/index.html" onclick="doSomething(this.href); return false;">doSomething!!</a>

</div>

</body>

</html>

- 이 맛보기 코드의 동작은 click 이벤트 발생 시 doSomething(..) 함수가 동작하게 되고 page 가 전환 됩니다.
- 결과적으로 <a href=""> 의 href 기본 동작은 작동하지 않게 되는 것입니다.
- 이유는 onclick="....; return false;" 때문입니다.
- 만약 onclick 시 doSomething() 동작 후 기본 동작이 실행 되게 하고 싶다면 return true; 로 변경을 하시면 됩니다.


※ Event bubbling 이나 preventing 관련해서는 위의 URL 들을 참고하세요.
※ 간혹 어떤 분들은 href 와 onclick 중 어떤게 먼저 동작하냐고 물으시는 분들이 있는데요.. ^^;; 당연히 event(onclick) 가 먼저 발생 합니다.




 
신고
Trackback 0 : Comment 0

XML Parser javascript class v1.0.0

ITWeb/개발일반 2010.05.11 12:34
XMLHttpRequest 와 더불어 유용할 것 같아서 만들었습니다.
역시 다른데 코드는 제 스타일도 아니고 읽기도 힘들고 그래서.. 후다닥 만들었다는..
recursive call 을 하기는 하지만 나름 쉽게 작성했습니다.
코드 가지고 태클은 금지.. ㅎㅎ



/*
 * XMLParser Control Module
 *
 * @package
 * @path
 * @filename    xmlparser.js
 * @author      
 * @date        2010/05/03
 *
 * Change History
 * Date         Engineer                Type        Description
 * ----------   ------------------      ---------   --------------------
 * 2010/05/03 Henry Jeong  create  initialize
 */
/*
 *
 * XMLParser module object
 *
 */
var JXmlParser = function() {
};
/*
 *
 * xml parser variables
 */
JXmlParser.prototype.vars = {
 parser : null,
 doc : null,
 xmldata : null,
 root : null,
 xml : null
}
JXmlParser.prototype.init = function() {
 if (window.DOMParser) {
  JXmlParser.vars.parser = new DOMParser();
  JXmlParser.vars.doc = JXmlParser.vars.parser.parseFromString(
    JXmlParser.vars.xmldata, "text/xml");
  JXmlParser.vars.root = JXmlParser.vars.doc.childNodes.item(0);
 } else {
  JXmlParser.vars.doc = new ActiveXObject("Microsoft.XMLDOM");
  JXmlParser.vars.doc.async = "false";
  JXmlParser.vars.doc.loadXML(JXmlParser.vars.xmldata);
  JXmlParser.vars.root = JXmlParser.vars.doc.documentElement;
 }
 JXmlParser.vars.xml = new Object();
 JXmlParser.vars.xml["length"] = JXmlParser.vars.root.childNodes.length;
}
JXmlParser.prototype.setXml2Array = function(pobj, node) {
 var len = node.length;
 if (window.DOMParser) {
  for ( var i = 0; i < len; i++) {
   if (node[i].nodeName.charAt(0) == "#") {
    continue;
   }
   pobj[i] = new Object();
   pobj[i][node[i].nodeName] = new Object();
   pobj[i][node[i].nodeName]["value"] = node[i].textContent;
   pobj[i][node[i].nodeName]["length"] = node[i].childNodes.length;
   pobj[i][node[i].nodeName]["attributes"] = new Object();
   if (node[i].attributes && node[i].attributes.length > 0) {
    var loop = node[i].attributes.length;
    for ( var j = 0; j < loop; j++) {
     pobj[i][node[i].nodeName]["attributes"][node[i].attributes[j].nodeName] = node[i].attributes[j].nodeValue;
    }
   }
   if (node[i].childNodes.length > 0) {
    JXmlParser.setXml2Array(pobj[i][node[i].nodeName],
      node[i].childNodes, node[i].childNodes.length);
   }
  }
 } else {
  for ( var i = 0; i < len; i++) {
   if (node[i].nodeName.charAt(0) == "#") {
    continue;
   }
   pobj[i] = new Object();
   pobj[i][node[i].nodeName] = new Object();
   pobj[i][node[i].nodeName]["value"] = node[i].text;
   pobj[i][node[i].nodeName]["length"] = node[i].childNodes.length;
   pobj[i][node[i].nodeName]["attributes"] = new Object();
   if (node[i].attributes && node[i].attributes.length > 0) {
    var loop = node[i].attributes.length;
    for ( var j = 0; j < loop; j++) {
     pobj[i][node[i].nodeName]["attributes"][node[i].attributes[j].nodeName] = node[i].attributes[j].text;
    }
   }
   if (node[i].childNodes.length > 0) {
    JXmlParser.setXml2Array(pobj[i][node[i].nodeName],
      node[i].childNodes, node[i].childNodes.length);
   }
  }
 }
}
JXmlParser = new JXmlParser();
/*
 * <script type="text/javascript"> <!-- var objDivDebug =
 * document.getElementById("divDebug");
 *
function run() {
 JXmlParser.vars.xmldata = "<?xml version='1.0' encoding='UTF-8'?><parser><totalcount type='number'><total>A</total><total>B</total></totalcount><items name='user' type='image'><item><seq>1</seq><id><![CDATA[jjeong****]]></id><originalImage><![CDATA[http://www.naver.com]]></originalImage><viewImage><![CDATA[http://www.naver.com]]></viewImage><thumbImage><![CDATA[http://www.naver.com]]></thumbImage><cheerMessage><![CDATA[한국어 테스트.]]></cheerMessage><register><![CDATA[20100503175621]]></register></item><item><seq>2</seq><id><![CDATA[layd****]]></id><originalImage><![CDATA[http://www.naver.com]]></originalImage><viewImage><![CDATA[http://www.naver.com]]></viewImage><thumbImage><![CDATA[http://www.naver.com]]></thumbImage><cheerMessage><![CDATA[CHEER MESSAGE]]></cheerMessage><register><![CDATA[20100503175621]]></register></item></items></parser>";
 
 JXmlParser.init();
 JXmlParser.setXml2Array(JXmlParser.vars.xml, JXmlParser.vars.root.childNodes); 
 
 objDivDebug.innerHTML += JXmlParser.vars.xml.length +  "<br>";
 objDivDebug.innerHTML += JXmlParser.vars.xml[0]["totalcount"].value +  "<br>";
 objDivDebug.innerHTML += JXmlParser.vars.xml[0]["totalcount"].attributes.type +  "<br>";
 objDivDebug.innerHTML += JXmlParser.vars.xml[0]["totalcount"].length +  "<br>";
 objDivDebug.innerHTML += JXmlParser.vars.xml[0]["totalcount"][0]["total"].value +  "<br>";
 objDivDebug.innerHTML += JXmlParser.vars.xml[0]["totalcount"][0]["total"].length +  "<br>";
 objDivDebug.innerHTML += JXmlParser.vars.xml[0]["totalcount"][1]["total"].value +  "<br>";
 objDivDebug.innerHTML += JXmlParser.vars.xml[0]["totalcount"][1]["total"].length +  "<br>";
 objDivDebug.innerHTML += JXmlParser.vars.xml[1]["items"].value +  "<br>";
 objDivDebug.innerHTML += JXmlParser.vars.xml[1]["items"].attributes.name +  "<br>";
 objDivDebug.innerHTML += JXmlParser.vars.xml[1]["items"].length +  "<br>"; 
 objDivDebug.innerHTML += JXmlParser.vars.xml[1]["items"][0]["item"] .length+  "<br>";
 objDivDebug.innerHTML += JXmlParser.vars.xml[1]["items"][0]["item"][0]["seq"] .value+  "<br>";
 objDivDebug.innerHTML += JXmlParser.vars.xml[1]["items"][0]["item"][1]["id"] .value+  "<br>";
}
 * //--> </script>
 */
*/

신고
Trackback 0 : Comment 0

[펌]웹페이지 성능 향상

스크랩일반 2009.01.07 13:30

http://msdn.microsoft.com/ko-kr/magazine/dd188562.aspx

 

한번 가볍게 읽어 보세요. ^^*

 

1.      충분한 포트 열기

2.      다운로드하는 작은 파일 수를 제한

3.      JavaScript 파일을 JavaScript 엔진 외부에서 로드

4.      연결 유지 사용

5.      네트워크 정체 현상 식별

6.      네트워크 MTU(최대 전송 단위) TCP 크기 늘리기

7.      서버 정체 현상 식별

8.      불필요한 왕복 확인

9.      만료 날짜 설정

10.  리디렉션에 대한 재고

11.  압축 사용

12.  CSS 편집

 

더불어 비교해서 야후 닷컴에 근무하는 친구(제 친구는 아니구요.. )가 쓴 책인데요.

http://stevesouders.com/examples/rules.php

http://video.yahoo.com/video/play?vid=1040890

저작자 표시 비영리 변경 금지
신고
Trackback 0 : Comment 0

JavaScript 강좌 references.

ITWeb/개발일반 2008.02.20 17:52
 
W3C
YUI
    yahoo.com YUI JavaScript ENG
ECMA
신고
Trackback 0 : Comments 2