[Javascript] 글자 지정 길이로 자르기

function cutStr(str,limit) {
var tmpStr = str;
var byte_count = 0;
var len = str.length;
var dot = “”;
for(i=0; i<len; i++){
byte_count += chr_byte(str.charAt(i));
if(byte_count == limit-1){
if(chr_byte(str.charAt(i+1)) == 2){
tmpStr = str.substring(0,i+1);
dot = “…”;
} else {
if(i+2 != len) dot = “…”;
tmpStr = str.substring(0,i+2);
}
break;
} else if(byte_count == limit){
if(i+1 != len) dot = “…”;
tmpStr = str.substring(0,i+1);
break;
}
}
document.writeln(tmpStr+dot);
return true;
}
function chr_byte(chr){
if(escape(chr).length > 4) return 2;
else return 1;
}

IE용 자바스크립트 디버거 CompanionJS

IE8에는 자바스크립트 디버거가 포함되어 있지만 그전 버전에는 디버거가 없어서 자바스크립트 디버깅하기가 여간 짜증나는 일이 아니다. ‘FirefoxFirebug같은 도구가 왜 없는거야 !!’ MS에 불평만 하고 있었는데 정말 괜찮은 도구를 발견했다. CompanionJS. 웹개발하시는 분들은 꼭 다운받으세요.

다운로드

Companion.JS (pronounced Companion dot JS or CJS) is a Javascript debugger for IE.
The current version is 0.5.
Companion.JS adds the following features to IE :

  • Detailled javascript error reporting (call stack and real file name where the error occured).
  • “Firebug”-like Console API feature.
  • Javascript console feature useful to inspect javascript objects at runtime.
  • A toolbar icon to open the Companion.JS panel.

Download the installer, guaranteed spyware/malware free and packaged with a straightforward and complete un-installer.

(Download zipped intaller for people unable to download .exe files due to proxy limitations)


To be able to use Companion.JS you’ll need to have a Microsoft script
debugger installed. There are many cases where you already have this
component install. To check if you need it see Installing Companion.JS for details.

Here are some screenshots :


Detailled Error reporting

In the top-left corner the notifying panel which pops-up when an
error occurs in the current page if the Companion.JS panel is not open.
At the bottom of the page…



Console API feature

Firefox에서 input 태그를 다이나믹하게 추가했을 경우 form의 element로 인식 못하는 경우 발견

회사에서 아주 예전에 작성된 HTML을 수정하다가 하루종일 고생한 경험담을 얘기하고자 한다. 결론을 얘기하면 원인은 XHTML 표준을 지키지 않아서 였는데, 이게 원인일 줄이야!!!

다음과 같은 스타일의 HTML 태그가 있다고 하자. 과거에 CSS를 잘 사용하지 않을 때는 form 태그의 기본 패딩값에 의해 테이블 레이아웃이 깨지는 것을 방지하기 위해서 내가 자주 사용하던 스타일이다.

[code html]
<table>
<tr><td>테이블 헤더</td><tr>
<form>
<tr><td>폼 요소들</td></tr>
</form>
</table>
[/code]

여기에다 자바스크립트로 폼에 input 태그를 하나 추가하고, input 박스에 값을 치고 submit 버튼을 누르면 IE에서는 input 박스에 입력된 값이 전송이 되지만, 왠일인지 Firefox에서는 새로 추가된 input 박스의 내용은 전송이 되지 않는거다.

정말 하루 종일 삽질하다가 발견한 원인, 그리고 해결방안은 다음과 같이 XHTML을 준수하는 스타일로 HTML을 코딩하는 거였다.

[code html]
<form>
<table>
<tr><td>테이블 헤더</td><tr>
<tr><td>폼 요소들</td></tr>
</table>
</form>
[/code]

표준을 지키는게 중요함을 다시 한번 느낀 하루였다.