'Javascript'에 해당되는 글 32건

  1. 2010/05/15 초록별사랑 스크린리더 사용자를 위한 폼 검증 예제
  2. 2009/06/30 초록별사랑 자바스크립트로 Zooin, Zoomout하기
  3. 2009/05/19 초록별사랑 정규표현식 예제 정리 및 사용예
  4. 2009/05/16 초록별사랑 정규표현식에 대해 알아보자
  5. 2009/03/28 초록별사랑 FCKEditor초기 세팅방법
  6. 2009/03/26 초록별사랑 자바스크립트에서 현재페이지 reload하는 방법
  7. 2008/11/30 초록별사랑 prototype.js 한글문제
  8. 2008/07/29 초록별사랑 jQuery와 Prototype을 함께 사용하기
  9. 2008/07/28 초록별사랑 SW Quality Insight 정기세미나 참가 (1)
  10. 2008/07/09 초록별사랑 Ajax, 탈출구는 없다?!
스크린리더를 사용하는 사람은 이미 폼을 읽어서 오류메시지 자체를 읽을수 없다.

<form id="stateOfForm">
if( !validForm) {
alert( "Error" );
location.href = "#startOfForm";
}
</form>

따라서. 위의 굵게쓴내용과 같이 폼의 시작부분으로 다시 돌아가는 것이 시각장애우와 보통 사용자 모두에게 유용하다.

크리에이티브 커먼즈 라이센스
Creative Commons License
2010/05/15 08:04 2010/05/15 08:04
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://haroc.haroc.net/tc/rss/response/473

자바스크립트로 Zooin, Zoomout하기

Javascript 2009/06/30 16:31 초록별사랑
자바스크립트로 Zoomin, Zoomout하는 방법은 다음과 같다.

화면확대
javascript:zoomIn();
원래대로
javascript:zoomOr(0)
화면축소
javascript:zoomOut();

단지 IE에서만 된다는것.. ^^
크리에이티브 커먼즈 라이센스
Creative Commons License
2009/06/30 16:31 2009/06/30 16:31
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://haroc.haroc.net/tc/rss/response/395

정규표현식 예제 정리 및 사용예

Javascript 2009/05/19 00:43 초록별사랑
문자열을 변경하거나 검색시 유용하게 사용하는게 정규표현식이라고 했다.
그럼. 어떠한 정규표현식이 있는지 알아보자

IP 주소 검색
스팸을 보내는 스패머의 IP 주소를 차단하기 위해 .htaccess 파일에 적어 줄 때 많이 사용하는 정규식이다.

/([0-9]{1,3}).([0-9]{1,3}).([0-9]{1,3}).([0-9]{1,3})/

IP 주소의 숫자 부분을 그룹화 한 이유는, 이를 이용해서 다른 문자로 치환할 때 사용하기 위해서이다.

이메일 주소 검색

방법 1. /[a-z|A-Z|0-9]+@(naver|daum|hanmail|nate|hotmail|yahoo|gmail|hitel|paran|dreamwiz|lycos).(com|net|co.kr)/
방법 2.
Not : /(@.*@)|(\.\.)|(@\.)|(\.@)|(^\.)/
/^[a-zA-Z0-9\-\.\_]+@[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,3})$/

전화번호

방법 1. /^0\d{1,2}-\d{3,4}-\d{4}$/
방법 2. /[0-9]{2,4}-[0-9]{3,4}-[0-9]{4}/

하이퍼링크 태그 검색

HTML 문서를 텍스트 에디터로 열어 편집할 때 하이퍼링크만 검색하기 위한 정규식이다.

/(<a href=['"]*[^'"]+['"]*[^>]*>)([^>]*)(</a>)/

a 대신 span, div 등을 넣어서 다른 태그를 검색할 수도 있다.

URL 주소 검색
URL을 검색하기 위한 정규식이다.

/(mms|http|HTTP|ftp|FTP|telnet|TELNET)://(.[^<"')]+)/

숫자만 입력
/^\d+$/

공백지우기(trim, strip)
this.replace(/^\s+/, '').replace(/\s+$/, '');

html 태그 지우기
this.replace(/<\/?[^>]+>/gi, '');

영문, 숫자, 언더라인 문자
/^\w+$/

영문, 숫자, 언더라인 제외문자
/^\W+$/


참고 : http://heuristing.net/index.php?pl=1132
         prototype.js

위 사이트와 prototype.js 그래고 내가 만든거 몇개 해서 정리, 아직도 정리해야할 많은 부분이 있겠으나 오늘은 여기까지만 정리하고자 한다.^^
크리에이티브 커먼즈 라이센스
Creative Commons License
2009/05/19 00:43 2009/05/19 00:43
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://haroc.haroc.net/tc/rss/response/329

정규표현식에 대해 알아보자

Javascript 2009/05/16 15:37 초록별사랑
정규표현식 :
  1. 문자열을 검색하기 위한 기준을 설정하고 이를 검색하는 일련의 과정
  2. 문자들의 패턴을 기술하는 객체

정규 표현식(正規表現式, Regular expression, 줄여서 Regexp 또는 Regex)은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다. 정규 표현식은 많은 텍스트 편집기프로그래밍 언어에서 문자열의 검색과 치환을 위해 지원하고 있으며, 특히 Tcl은 언어 자체에 강력한 정규 표현식 구현을 내장하고 있다.

정규 표현식은 컴퓨터 과학의 정규 언어로부터 유래하였으나 구현체에 따라서 정규 언어보다 더 넓은 언어를 표현할 수 있는 경우도 있으며, 심지어 정규 표현식 자체의 문법도 여러 가지 존재하고 있다. 이 중 표준화된 것으로는 POSIX의 확장 정규 표현식이 있으며, 표준화되지는 않았지만 펄의 정규 표현식과 그 대체 구현인 PCRE도 널리 사용된다.

------------- 위키피디어

정규표현 작성방법
  1. 패턴을 메서드의 아규먼트에 지정하는 방법
  2. 패턴을 변수에 할당하고 이를 오브젝트로 하여 메서드를 실행하는 방법
  3. RegExp오브젝트 생성자를 사용하여 오브젝트를 생성하고 메서드를 실행하는 방법
변경자
  1. i (ignoreCase) : 대소문자를 구분하지 않고 검색, 매치되면 더 이상 검색하지 않고 매치된 문자열을 반환
  2. g(global) : 문자열에서 패턴과 매치되는 모든 문자열을 배열로 변황
  3. m(multiline) : 문자열이 복수 라인으로 구성된 경우 전체 라인을 검색
정규 표현 메서드 리스트
오브젝트 / 클래스 메서드 메서드 기능
String 클래스 match 문자열을 매치 검색, 매치가 되면 배열을 반환, 매치되지 않으면 null을 반환
replace 문자열을 매치 검색, 매치된 문자열을 치환
search 문자열을 매치 검색, 매치되면 매치된 인덱스를 반환, 매치되지 않으면 1을 반환
split 정규 표현 또는 문자열을 사용하여 검색 대상 문자열을 분할하고 배열화
RegExp 오브젝트 exec 문자열을 매치 검색, 매치가 되면 배열을 반황하고 매치되지 않으면 null을 반환
test 문자열을 매치 테스트, 매치되면 true를 반환하고 매치되지 않으면 false를 반환

매치 위치
특수 문자 기능개요
^ ^(캐럿)은 문자열의 첫 문자와 패턴을 매치한다. 매치하면 문자열을 반환하고 매치하지 않으면 null을 반환한다.
$ 문자열의 마지막 문자와 패턴을 매치한다. 매치하면 문자열을 반환하고 매치하지 않으면 null을 반환한다.
수량자
특수문자 기능개요
+ +좌측에 지정한 문자와 같으면서 +직전의 문자가 +우측에 연속하여 있으면 숫자에 관계없이 전부 추출하여 변환한다. 즉 +직전의 문자를 포함하여 매치 검색을 실행하고 +직전의 문자로 우측 매치를 실행한다.
* *직전의 문자를 제외하고 좌측에 있는 문자가 매치되어야 하고 *직전의 문자가 있어도 되고 없어도 되지만, 있으면 이름 반환.
? ?직전의 문자를 제외하고 왼쪽에 있는 문자가 매치되어야 하고, ?오른쪽의 문자는 검색하지 않는다. 즉?직전의 문자를 포함하지 않고 왼쪽만 매치
{}

사용법 : {p}

p는 양의 정수, {}안에 지정된 수만큼 같은 문자에 매치하면 매치한 것을 반환한다. 나머지가 있을 때에는 매치된 수만큼만 제외하고 다시 매치 검색을 행한다.

{.}

사용법 : {p.}

p는 양의 정수. {.}안에 지정한 수만큼 같은 문자에 매치하면 매치한 문자가 포함된 단어 전체를 반환한다. 그리고 스페이스 다음의 문자부터 다시 검색을 행한다.

{p,m}

사용법 : A{p,m}

p와 m은 양의 정수, p는 최소값이고 m은 최대값이다. 최소부터 최대사이에 매치되면 매치된 것을 반환한다. 나머지가 있을 때에는 매치한 수만큼을 제외하고 다시 매치 검색을 행한다.

옵션, 캡처, 백슬래시, 점, 클래스
a|b a또는 b를 매치, a가 매치되면 b는 매치하지 않는다.
\ 백슬래이에는 두가지 형태가 있다. 특수기능을 해제하고 텍스트 문자로 변환하는 것과 반대로 \로 시작하는 특수문자
() 괄호 안에 지정한 값을 매치하고 매치되면 괄호 안의 값을 $에 캡처, 배열로 기억되므로 인덱스를 사용하여 접근 가능
(?:A) A를 매치하며, 매치되지않더라도 이를 기억(캡처)하지 않는다.
A(?=B) A에 연속하여 B가 올때만 A에 매치
A(?!B) A에 연속하여 B가 오지 않을 때만 A에 매치
[A]

[A]에 포함된 문자를 매치, [시작-끝]형태로 범위를 지정할 수 있다.

[12345]->[1-5]로 표현 가능

[^A]

[A]에 포함되지 않는 문자ㅡㄹ 매치. [시작-끝]형태로 범위를 지정할 수 있다.

[^12345] -> [^1-5]로 표현 가능

\ 특수문자
\0 null 문자
\b 공백 또는 줄 바꿈을 기준으로 매치
\B 공백 또는 줄 바꿈 이외를 기준으로 매치
[\b] 백스페이스(특수한 경우)
\cK K는 제어문자, 문자열에서 제어문자를 매치
\d 숫자를 매치한다.[0-9]와 같다
\D 숫자 이외의 문자에 매치한다.[^0-9]와 같다
\f 폼 피드에 매치
\n 라인 피드에 매치
\r 캐리지 리턴에 매치
\t 수평 탭에 매치
\v 수직 탭에 매치
\s

화이트 스페이스(스페이스, 탭, 폼피드, 라인피드)문자에 매치

[\f\n\r\t\v]

\S

화이트 스페이스 이외의 문자에 매치

[^\f\n\r\t\v\u00A0\u2028\u2029]

\w

영문, 숫자, 언더라인 문자에 매치

\W 영문, 숫자 언더라인 이외의 문자에 매치
\ohh 8진수 hh문자에 매치
\xhh hh(16진수 2자리)문자에 매치
\uhhhh hhhh(16진수 4자리)문자에 매치

정규표현식은 문자열을 얼마나 효율적으로 사용하는가에 대한 모든것을 보여준다.
아직도 배울게 많고 이해안가는 부분이 많아서 이렇게 정리하고 차근차근 이해해 나가야 할것이다. 미천하지만 정리하면서 많이 이해를 할수 있던거 같다. 좀더 자유자재로 정규표현식을 사용하기 위해 갈고 닦아야 할 것이다.
크리에이티브 커먼즈 라이센스
Creative Commons License
2009/05/16 15:37 2009/05/16 15:37
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://haroc.haroc.net/tc/rss/response/327

FCKEditor초기 세팅방법

Javascript 2009/03/28 12:33 초록별사랑


최근 FCKEditor를 2.4X버전에서 플래시로 업로드 하는 문제 땜시 2.64로 업데이트를 했다.

업데이트를 하면서 초기설정을 어떻게 변경해야하는지 기억이 안나서 한참을 해맸다. ㅠㅠ

이제 문서로 작성해두면 다음업그레이드에서는 별 문제없이 할수 있으리라고 생각한다.


1. fckconfig.js수정사항

FCKConfig.DefaultLanguage        = 'en' ;
-> FCKConfig.DefaultLanguage        = 'ko' ;

FCKConfig.ToolbarSets
-> 기존설정을 만들어 놓은것 복사

asp프로그램을 사용한다고 체크
var _FileBrowserLanguage    = 'php' ;    // asp | aspx | cfm | lasso | perl | php | py
-> var _FileBrowserLanguage    = 'asp' ;    // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage    = 'php' ;    // asp | aspx | cfm | lasso | perl | php | py
-> var _QuickUploadLanguage    = 'asp' ;    // asp | aspx | cfm | lasso | perl | php | py
이부분 설정하는 방법을 잊어버려서 프로그램이 안되서 한참을 해맸다. 반드시 사용하는 프로그램으로 변경해야한다. 이부분만 변경하면 일반적으로 사용하는데는 문제가 없다.

링크브라우저 삭제
FCKConfig.LinkBrowser = true ;
-> FCKConfig.LinkBrowser = false ;

이미지 브라우저 삭제
FCKConfig.ImageBrowser = true ;
-> FCKConfig.ImageBrowser = false;

플래시 브라우저 삭제
FCKConfig.FlashBrowser = true ;
-> FCKConfig.FlashBrowser = false;

링크 업로드 삭제
FCKConfig.LinkUpload = true ;
-> FCKConfig.LinkUpload = false;

이미지 설정 자세히 탭 삭제
FCKConfig.ImageDlgHideAdvanced    = false ;
-> FCKConfig.ImageDlgHideAdvanced    = true ;

플래시 설정 자세히 탭 삭제
FCKConfig.FlashDlgHideAdvanced    = false ;
-> FCKConfig.FlashDlgHideAdvanced    = true ;

2. config.asp수정사항
ConfigUserFilesPath = "/userfiles/"
-> ConfigUserFilesPath = 해당업로드 root로 설정

// 한글파일업로그에 문제갈 발생해서 항상 새로운 파일명으로 저장하도록 수정한다.
sFileName = SanitizeFileName( sFileName )
-> sFilename = 새로운 파일이름


위의 내용을 수정하고 에디터를 업그레이드하면 문제없이 사용할 수 있다.

참고 : http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide


크리에이티브 커먼즈 라이센스
Creative Commons License
2009/03/28 12:33 2009/03/28 12:33
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://haroc.haroc.net/tc/rss/response/319

현재 웹페이지를 다시 읽어오는 것이다.

일반적인 다시 읽기
window.location.reload();
이렇게 하면 컴퓨터의 캐쉬에서 우선 파일을 찾아봅니다. 없으면 서버에서 받아옵니다.


적극적인 다시 읽기
window.location.reload(true);
true 라는 파라미터를 입력하면, 무조건 서버에서 직접 파일을 가져 오게 됩니다. 캐쉬는 완전히 무시됩니다.


소극적인 다시 읽기
history.go(0);
이렇게 하면, 캐쉬에서 현재 페이지의 파일들을 항상 우선적으로 찾습니다.


출처 : http://neouser.tistory.com/tag/reload

크리에이티브 커먼즈 라이센스
Creative Commons License
2009/03/26 10:21 2009/03/26 10:21
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://haroc.haroc.net/tc/rss/response/318

prototype.js 한글문제

Javascript 2008/11/30 20:59 초록별사랑
Scriptaculous를 사용하기 위해 prototype.js v 1.6.0.1을 사용하게 되었다.

그런데 한글로 QueryString을 보내면 한글문제가 발생하는 것이다.

다양한 삽질끝에.. 발견한것..


return key + '=' + encodeURIComponent(String.interpret(value));
를 아래로 대체
return key + '=' + String.interpret(value);

var key = encodeURIComponent(pair.key), values = pair.value;
를 아래로 대체
var key = pair.key, values = pair.value;

위의 두개에서 encodeURIComponent()를 빼고 하였더니 문제없이 한글이 보내졌다..

다른 분들에게 도움이 될지는 모르겠으나. 로그를 남긴다.
크리에이티브 커먼즈 라이센스
Creative Commons License
2008/11/30 20:59 2008/11/30 20:59
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://haroc.haroc.net/tc/rss/response/304

jQuery와 Prototype을 함께 사용하기

Javascript 2008/07/29 09:49 초록별사랑
jQuery와 Prototype을 함께 사용하기

Prototype은 널리 사용하는 라이브러리이며 jQuery는 빠르게 성장하고 있다. 페이지 제작자들이 이 두 라이브러리의 장점을 살려 동일한 페이지에서 두 라이브러리를 모두 사용하고 싶을 수도 있다.

일반적으로 jQuery는 모범벅으로 가이드 라인을 지키고 있으며 전역 네임스페이스를 함부로 사용하지 않고 있다. 하지만 충돌하는 곳이 한 군데 있는데, 앞에서 언급한 적이 있는 $전역 이름이다.

하지만 jQuery는 잘 작성된 좋은 라이브러리로, 이점을 이미 예상하고 있다. 같은 페이지에서 Prototype과 jQuery를 함께 사용하려면, 라이브러리가 로드된 이후 아무때나 jQuery의 유틸리티 함수인 jQuery.noConflict()를 호출해 주면 된다. 이렇게 하면 $이름의 기능을 Prototype정의로 되돌린다.

jQuery 기능은 jQuery네임스페이스를 통해 접근할 수 있다. 혹은 여러분만의 별맃ㅇ을 쓸 수도 있다. jQuery문서는 Prototype과 함께 사용할 때 다음과 같은 별칭을 선언하여 사용하도록 권고하고 있다.

jQuery.noConflict();
var $j = jQuery;

Or

j$ = jQuery.noConflict();
j$("div").addClass("a");


출처 : Ajax인 프랙티스

좀더 많은걸 보려면 여기를 방문하면 된다.
크리에이티브 커먼즈 라이센스
Creative Commons License
2008/07/29 09:49 2008/07/29 09:49
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://haroc.haroc.net/tc/rss/response/279

SW Quality Insight 정기세미나 참가

Javascript 2008/07/28 16:34 초록별사랑
사용자 삽입 이미지

위와같이 SW Quality Insight 정기세미나 참가 메일이 와서. 어떤가 한번 보려고 신청하기 버튼을 클릭하였더니. 한국소프트웨어진흥원으로 링크가 이동한다.
내가본 브라우저는 파이어폭스였는데 아이핀을 하려고 하는데 안되어서 황급히 인터넷 익스플로어로 갈아타게 되었다. 어차피 항상 2개의 브라우저를 띄워놓고 사용하는 나로서는 별반 문제가 없었다.

하지만 .. 참석하기 버튼을 클릭하니 회원정보가 필요하단다.. 내참.. 그냥 받으면 안되나? 하는 생각이 있었지만 그래도 회원정보가 필요하다잖아.. 그래서. 화면에 보니 공인인증서로긴도 있어 공인인증서로 로긴을 하려고 시도.. 몇가지 프로그램을 설치하고 공인인증서 비밀번호를 넣었더니. 은행에서 쓰는건 안된단다.. 내참.. ^^;

그래서  회원가입을 하려고 회워가입버튼을 클릭 회원가입여부 확인이 뜬다. 거기에 보니 가상 주민등록번호가 있어서 클릭했더니 팝업창이 뜨면서 아이핀이 나온다. 그래서 예전에 아이핀을 발급받은 기억이 있어서 아이핀을 하려고 아이디 비밀번호 찾기를 했다. 아이디 찾기를 했더니 내 아이디가 나온다. 그래서 비밀번호 찾기를 클릭했던 이메일을 입력하란다 그래서 이메일을 입력하고 클릭하니 이멜로 비밀번호를 전송했단다..

그래서.. 메일로 적은 이멜을 계속확인하는데도.. 비밀번호는 내게 올줄 모른다.
어쩌겠는가. 힘없는 유저는 다시 일반 주민등록번호로 가입을 하고 로긴을 했다.

그리고 첫화면에서 교육신청으로 가는 게시물로 가야하는데. 쩝. 이번에는 자바스크립트 에러가 나서 계속 경고창만 뜨는것 아닌가?

이게 우리나라 소프트웨어의 현실이구나.. 하는 생각을 하니 안타까운 현실에 웹 개발자인 내가 화가 난다.

우씨. 좀 제대로 해봐라.. ^^; 가뜩이나 날도 더운데.. 도대체 아이핀은 정상적으로 작동하는게 맞는지. 자바스크립트는 제대로 만들어 놓은게 맞는지 게시물 하나 읽으러 가는데 자바스크립트 에러때문에 게시물을 못읽는다는게 말이 되나고.. ^^

하여간 신청했으니 가서 들어봐야 겠다. 아 어렵다..

문제점.
1. 파이어폭스에서 안된다. (오페라나 사파리는 안써서 모르겠다. 하지만 당근 안될것 같다)
2. 은행공인인증서로는 로긴할수 없다.
3. 아이핀은 사용하고 싶어도 비밀번호를 모르면 사용할 수 없다.(비밀번호 찾기를 해도 메일이 안온다.)
4. 정작 로긴을 하면 자바스크립트 에러때문에 신청게시물로 들어가기도 어렵다
크리에이티브 커먼즈 라이센스
Creative Commons License
2008/07/28 16:34 2008/07/28 16:34
받은 트랙백이 없고, 댓글 하나가 달렸습니다.

댓글+트랙백 RSS :: http://haroc.haroc.net/tc/rss/response/277

Ajax, 탈출구는 없다?!

Javascript 2008/07/09 18:04 초록별사랑

많이 웄었네요...

출처 : Enzine
크리에이티브 커먼즈 라이센스
Creative Commons License
2008/07/09 18:04 2008/07/09 18:04
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://haroc.haroc.net/tc/rss/response/258