2008. 5. 15. 10:54
카테고리 없음
- 일시: 2008년 5월 30일(금) 오후 1시 30분 ~ 오후 6시
- 장소: 삼성동 섬유센터 17층
- 인원: 250명
- http://dna.daum.net/uidevday/
다음에서 UI관련 세미나를 연다고 합니다.
26일까지 참가신청을 받고 선착순으로 참가 우선권을 준다고 하니 서둘러 신청하세요~
'분류 전체보기'에 해당되는 글 207건
- 2008.05.15 2008 Daum UI DevDay
- 2008.04.24 2008 Google Night
- 2008.04.15 오페라,사파리의 DOM Inspector6
- 2008.04.08 Javascript OOP - method
- 2008.04.07 Javascript OOP - 객체 생성과 property1
- 2008.03.24 브라우저에 검색엔진 추가하기
- 2008.02.22 URL, 도메인 추출 정규식 (2)5
- 2008.02.20 URL, 도메인 추출 정규식
- 2008.02.11 숭례문 화재...
- 2008.02.05 제9회 한국 자바 개발자 컨퍼런스1
다음에서 UI관련 세미나를 연다고 합니다.
26일까지 참가신청을 받고 선착순으로 참가 우선권을 준다고 하니 서둘러 신청하세요~
2008. 4. 24. 00:49
카테고리 없음
작년 가을 구글 나이트 행사에 다녀왔었습니다.
멀리 미국에서 날아온 구글 본사 직원들(인터넷의 아버지 빈 서프 박사와 구글 맵의 개발자도~@.@)도 만나보고 유익한 시간이었습니다.
몇일전 구글로부터 한 통의 메일을 받았습니다.
2008 구글 나이트에 관한 메일이었습니다.
메일을 받고 나서 '2008 구글 나이트'를 검색해봤는데 관련 문서가 검색이 안되더군요.
메일 내용 처럼 이 번 행사는 구글 코리아 본사에서 하는 만큼 장소 문제가 있어 비공개로 참석자를 모집하는 것 같았습니다.
그런데 이것 저것 요구하는 사항이 많기도 합니다.
학력이나 인터뷰 경험 같은건 왜 물어보는건지 -_-;;
바로 답장을 발송하고 하루가 지나서 아쉬운 메일 한 통을 받았습니다.
저보다 먼저 참석 희망 메일을 보낸 사람이 많아서 인지 아쉽게도 이번 구글 나이트 행사는 그저 다녀오신 분들의 스케치를 기다려야 겠습니다.
멀리 미국에서 날아온 구글 본사 직원들(인터넷의 아버지 빈 서프 박사와 구글 맵의 개발자도~@.@)도 만나보고 유익한 시간이었습니다.
몇일전 구글로부터 한 통의 메일을 받았습니다.
2008 구글 나이트에 관한 메일이었습니다.
메일을 받고 나서 '2008 구글 나이트'를 검색해봤는데 관련 문서가 검색이 안되더군요.
메일 내용 처럼 이 번 행사는 구글 코리아 본사에서 하는 만큼 장소 문제가 있어 비공개로 참석자를 모집하는 것 같았습니다.
그런데 이것 저것 요구하는 사항이 많기도 합니다.
학력이나 인터뷰 경험 같은건 왜 물어보는건지 -_-;;
바로 답장을 발송하고 하루가 지나서 아쉬운 메일 한 통을 받았습니다.
2008. 4. 15. 15:43
Programing/HTML_JavaScript_CSS
FireFox 확장 기능 중 웹 개발자들이 가장 많이 사용하는 확장 기능은 아마 Firebug와 Web Developer가 아닐까 합니다.
두 확장기능은 웹개발시 없어서는 안될 정말 유용한 툴들이죠.
IE에도 IE Developer 이라는 툴이 있어서 어느정도 유용하게 쓸 수 있습니다만 위의 것들에 비해 좀 부실한 면이 없지 않습니다.
반면 Opera와 Safari에는 저러한 툴이 없어 아쉬웠는데요, 그런 아쉬움은 이제 추억으로 묻어버려도 좋을 것 같습니다.
Opera Inspector
오페라 9.0 이후 버전 부터는 간단한 조작만으로 브라우저에 Inspector를 설치 할 수 있습니다.
설치를 위해서는 오페라 9.0 이후 버전으로 다음 URL의 페이지를 엽니다.
http://dev.opera.com/tools/
그럼 위와 같은 버튼 두 개가 보이는데요, 저 버튼들을 드래그 하여 오페라 브라우저의 툴바에 드롭하는 것으로 Inspector의 추가는 끝납니다.
이제 Opera의 DOM Inspector의 위용을 한 번 볼까요?
DOM Tree,CSS inspect, HTTP network 정보까지 Firebug와 비교해도 전혀 손색이 없죠? ^^
이번엔 사파리쪽을 살펴볼까요?
Safari Inspector
Safari 3.1 부터는 브라우저에 Inspector를 내장하고 있습니다.
하지만 메뉴속에 꼭꼭 숨어있어서 있는지조차 모르고 있었습니다;;;
메뉴의 편집>기본설정 또는 Ctrl + ,(콤마)를 누르면 아래와 같은 패널이 뜹니다.
고급 탭의 하단을 보시면 "메뉴 막대에서 개발자용 메뉴 보기" 라는 항목이 있습니다.
이걸 체크해서 활성화를 시켜주면 메뉴바가 다음과 같이 바뀝니다.
단, Mac용 Safari에서 Inspector를 활성화 하려면 콘솔에서 아래와 같이 해주시면 됩니다.
개발자용 메뉴가 새로 생겼습니다~ 캬~
메뉴를 클릭해보면 다양한 세부 항목들이 보입니다.
Inspector의 활용방법은 간단합니다.
웹페이지의 요소에서 마우스의 우측버튼을 클릭하면 컨텍스트 메뉴 하단에 "구성 요소 점검" 이란 항목이 보입니다. 클릭하면 아래와 같은 감개무량한 Safari의 Inspector이 모습을 드러냅니다...
이제 Inspector를 쓰기위해 특정 브라우저를 고집할 이유는 없어진듯 합니다.(물론 지극히 주관적인 의견일테지만요~^^)
Opera,Safari도 많이 사랑해주세요~~^^
두 확장기능은 웹개발시 없어서는 안될 정말 유용한 툴들이죠.
IE에도 IE Developer 이라는 툴이 있어서 어느정도 유용하게 쓸 수 있습니다만 위의 것들에 비해 좀 부실한 면이 없지 않습니다.
반면 Opera와 Safari에는 저러한 툴이 없어 아쉬웠는데요, 그런 아쉬움은 이제 추억으로 묻어버려도 좋을 것 같습니다.
Opera Inspector
오페라 9.0 이후 버전 부터는 간단한 조작만으로 브라우저에 Inspector를 설치 할 수 있습니다.
설치를 위해서는 오페라 9.0 이후 버전으로 다음 URL의 페이지를 엽니다.
http://dev.opera.com/tools/
그럼 위와 같은 버튼 두 개가 보이는데요, 저 버튼들을 드래그 하여 오페라 브라우저의 툴바에 드롭하는 것으로 Inspector의 추가는 끝납니다.
이제 Opera의 DOM Inspector의 위용을 한 번 볼까요?
DOM Tree,CSS inspect, HTTP network 정보까지 Firebug와 비교해도 전혀 손색이 없죠? ^^
이번엔 사파리쪽을 살펴볼까요?
Safari Inspector
Safari 3.1 부터는 브라우저에 Inspector를 내장하고 있습니다.
하지만 메뉴속에 꼭꼭 숨어있어서 있는지조차 모르고 있었습니다;;;
메뉴의 편집>기본설정 또는 Ctrl + ,(콤마)를 누르면 아래와 같은 패널이 뜹니다.
고급 탭의 하단을 보시면 "메뉴 막대에서 개발자용 메뉴 보기" 라는 항목이 있습니다.
이걸 체크해서 활성화를 시켜주면 메뉴바가 다음과 같이 바뀝니다.
단, Mac용 Safari에서 Inspector를 활성화 하려면 콘솔에서 아래와 같이 해주시면 됩니다.
defaults write com.apple.Safari \
WebKitDeveloperExtras -bool true
WebKitDeveloperExtras -bool true
개발자용 메뉴가 새로 생겼습니다~ 캬~
메뉴를 클릭해보면 다양한 세부 항목들이 보입니다.
Inspector의 활용방법은 간단합니다.
웹페이지의 요소에서 마우스의 우측버튼을 클릭하면 컨텍스트 메뉴 하단에 "구성 요소 점검" 이란 항목이 보입니다. 클릭하면 아래와 같은 감개무량한 Safari의 Inspector이 모습을 드러냅니다...
이제 Inspector를 쓰기위해 특정 브라우저를 고집할 이유는 없어진듯 합니다.(물론 지극히 주관적인 의견일테지만요~^^)
Opera,Safari도 많이 사랑해주세요~~^^
'Programing > HTML_JavaScript_CSS' 카테고리의 다른 글
| 놓치기 쉬운 자바스크립트 크로스브라우징 (0) | 2008.05.23 |
|---|---|
| 객체 초기화의 중요성 (1) | 2008.05.23 |
| Javascript OOP - 객체 생성과 property (1) | 2008.04.07 |
| URL, 도메인 추출 정규식 (2) (5) | 2008.02.22 |
| URL, 도메인 추출 정규식 (0) | 2008.02.20 |
2008. 4. 8. 18:07
카테고리 없음
Method
지난 포스트에서 Car객체를 만들어봤습니다.
name 프로퍼티 하나만 가지고 있는 간단한 객체죠?
우리가 만든 이 Car라는 객체는 아직까지는 아무것도 할 수 없습니다.
이름만 갖고 있을 뿐 시동을 켜는것도 안되고, 문을 열 수도 없습니다.
이제 우리가 만든 이 Car에 하나하나 능력을 부여해 보도록 하겠습니다.
우선은 문을 여는 것 부터 해볼까요? (그래야 문을 열고 들어가서 시동을 걸 수 있겠죠? ^^)
먼저 문이 열린것을 확인 할 수 있는 상태변수를 하나 추가해야겠습니다.
이제 Car의 문을 열 수 있습니다~
그런데 생소한 키워드 [prototype]이 등장했습니다.
프로토타입...시제품? prototype.js?
자바스크립트는
지난 포스트에서 Car객체를 만들어봤습니다.
function Car(name){
this.name = name;
}
this.name = name;
}
name 프로퍼티 하나만 가지고 있는 간단한 객체죠?
우리가 만든 이 Car라는 객체는 아직까지는 아무것도 할 수 없습니다.
이름만 갖고 있을 뿐 시동을 켜는것도 안되고, 문을 열 수도 없습니다.
이제 우리가 만든 이 Car에 하나하나 능력을 부여해 보도록 하겠습니다.
우선은 문을 여는 것 부터 해볼까요? (그래야 문을 열고 들어가서 시동을 걸 수 있겠죠? ^^)
먼저 문이 열린것을 확인 할 수 있는 상태변수를 하나 추가해야겠습니다.
function Car(name){
this.name = name;
this.isOpen = false;
}
Car.prototype.opendoor = function(){
this.isOpen = true;
alert('문이 열렸습니다.');
}
this.name = name;
this.isOpen = false;
}
Car.prototype.opendoor = function(){
this.isOpen = true;
alert('문이 열렸습니다.');
}
이제 Car의 문을 열 수 있습니다~
그런데 생소한 키워드 [prototype]이 등장했습니다.
프로토타입...시제품? prototype.js?
자바스크립트는
2008. 4. 7. 15:01
Programing/HTML_JavaScript_CSS
Javascript OOP
최근 javascript로 OOP를 구현 하는 사례가 증가하고 있습니다.
AJAX와 함께 JSON이라는 효율적인 표기법과, prototype.js 이나 ExtJS같은 걸출한 javascript 프레임웍, 라이브러리 등이 출현하면서 javascript OOP는 점점 더 대중화가 되어가고 있습니다.
다시 말하면 javascript로 OOP를 구현하는 기술은 더이상 스페셜리스트들만 알고 있는 고급기술이 아니란거죠. 이를 다시 바꿔말하면 이제는 javascript OOP를 모르면 안된다는 말이기도 합니다~^^;;
가끔 웹서핑을 하다 페이지 소스를 보면 여기저기 많은 js 소스들에서 심심치 않게 'new' 연산자(operator)나 '{}' 같은 리터럴(object literal)을 볼 수가 있습니다.
'new'와 '{}' 은 javascript에서 객체를 생성할때 쓰는 연산자와 리터럴 입니다.
객체 생성하기
객체를 한 번 만들어 볼까요?
car라는 변수에 Car객체를 생성하여 대입하는 코드입니다.
실행하면 Car를 찾을 수 없다는 오류가 발생합니다.
클래스가 있어야겠죠?
클래스를 만들어보겠습니다.
javascript에서는 'function' 키워드를 써서 클래스 정의를 합니다. 함수 하나 만든다고 생각하시면 됩니다~
이제 Car객체가 만들어집니다.
Property
그런데 Car객체는 아무것도 가진게 없네요~^^ 껍데기만 있는 빈클래스는 의미가 없죠?
이제 Car에게 책임을 좀 지어줄까요?
먼저 이름을 주어야겠습니다. '애마1호기','달려라번개호' 같은 이름을 붙여준다면 더욱 애착이 가는 객체가 되겠죠?
이름은 객체의 속성(property)으로 볼 수 있습니다. javascript에서 객체의 속성은 '객체.속성이름 = 속성 값' 이렇게 할당 할 수 있습니다.
'달려라번개호'가 메세지 박스에 출력되네요~
그런데 저 this는 뭘까요?
여기서 this라는 키워드는 'new' 연산자를 통해 만들어진 Car객체의 인스턴스(instance)를 뜻합니다.
new 연산자가 실행될때마다, 붕어빵 기계에서 붕어빵이 나오듯 Car객체가 하나씩 만들어져서 나오게 됩니다. 이렇게 만들어진 하나하나의 객체를 인스턴스라고 하며 this란 그 인스턴스를 가리키는 것이지요~
this가 붙은 변수, 즉 객체의 property는 객체가 살아있는 동안 객체의 어느 곳에서든 사용 할 수 있습니다. 객체의 전역변수라고 생각하시면 되겠죠?
this 대신에 'var'를 붙여주면 지역 변수로 사용할 수 있습니다.
'달려라번개호5000cc'라는 이름은 출력이 되는데, engineSize은 'undefined' 라고 나오네요~
engineSize는 객체를 만들때 name 속성을 위해 희생하고는 지역변수의 비참한 최후를 맞이한듯 합니다.
var와 this의 차이랍니다~^^
그런데 Car를 세대(car1,car2,car3) 만들었는데 이름이 모두 똑같습니다.
달려라번개호
달려라번개호
달려라번개호
이제 그만 달리고 싶네요 ㅡ.ㅡ;;
Car 객체를 생성할때 이름을 따로따로 지어주고 싶습니다.
생성자인 function Car() 를 조금 손봐줘야겠군요.
이렇게 해주면 Car를 생성할때 원하는 이름을 지어줄 수 있습니다.
이제 만들어진 Car객체들이 저마다 다른 이름을 가질 수 있게 되었습니다.^^
javascript로 객체 만들기~ 참 쉽죠? ^^
다음엔 Car를 움직여보도록 하겠습니다. 이름만 있는 차 보다는 타고 다닐 수 있는 차가 더 좋겠죠?
javascript object's method를 기대해 주세요~!!
최근 javascript로 OOP를 구현 하는 사례가 증가하고 있습니다.
AJAX와 함께 JSON이라는 효율적인 표기법과, prototype.js 이나 ExtJS같은 걸출한 javascript 프레임웍, 라이브러리 등이 출현하면서 javascript OOP는 점점 더 대중화가 되어가고 있습니다.
ExtJS 샘플
prototype.js
다시 말하면 javascript로 OOP를 구현하는 기술은 더이상 스페셜리스트들만 알고 있는 고급기술이 아니란거죠. 이를 다시 바꿔말하면 이제는 javascript OOP를 모르면 안된다는 말이기도 합니다~^^;;
가끔 웹서핑을 하다 페이지 소스를 보면 여기저기 많은 js 소스들에서 심심치 않게 'new' 연산자(operator)나 '{}' 같은 리터럴(object literal)을 볼 수가 있습니다.
'new'와 '{}' 은 javascript에서 객체를 생성할때 쓰는 연산자와 리터럴 입니다.
객체 생성하기
객체를 한 번 만들어 볼까요?
var car = new Car();
car라는 변수에 Car객체를 생성하여 대입하는 코드입니다.
실행하면 Car를 찾을 수 없다는 오류가 발생합니다.
클래스가 있어야겠죠?
클래스를 만들어보겠습니다.
javascript에서는 'function' 키워드를 써서 클래스 정의를 합니다. 함수 하나 만든다고 생각하시면 됩니다~
function Car(){
}
}
이제 Car객체가 만들어집니다.
Property
그런데 Car객체는 아무것도 가진게 없네요~^^ 껍데기만 있는 빈클래스는 의미가 없죠?
이제 Car에게 책임을 좀 지어줄까요?
먼저 이름을 주어야겠습니다. '애마1호기','달려라번개호' 같은 이름을 붙여준다면 더욱 애착이 가는 객체가 되겠죠?
이름은 객체의 속성(property)으로 볼 수 있습니다. javascript에서 객체의 속성은 '객체.속성이름 = 속성 값' 이렇게 할당 할 수 있습니다.
function Car(){
this.name = '달려라번개호';
}
var car = new Car();
alert(car.name);
this.name = '달려라번개호';
}
var car = new Car();
alert(car.name);
'달려라번개호'가 메세지 박스에 출력되네요~
그런데 저 this는 뭘까요?
이것의 이름은 달려라 번개호다?네, 맞습니다~^^
여기서 this라는 키워드는 'new' 연산자를 통해 만들어진 Car객체의 인스턴스(instance)를 뜻합니다.
var car1 = new Car();
var car2 = new Car();
var car3 = new Car();
var car2 = new Car();
var car3 = new Car();
new 연산자가 실행될때마다, 붕어빵 기계에서 붕어빵이 나오듯 Car객체가 하나씩 만들어져서 나오게 됩니다. 이렇게 만들어진 하나하나의 객체를 인스턴스라고 하며 this란 그 인스턴스를 가리키는 것이지요~
this가 붙은 변수, 즉 객체의 property는 객체가 살아있는 동안 객체의 어느 곳에서든 사용 할 수 있습니다. 객체의 전역변수라고 생각하시면 되겠죠?
this 대신에 'var'를 붙여주면 지역 변수로 사용할 수 있습니다.
function Car(){
var engineSize = '5000cc';
this.name = '달려라번개호' + engineSize;
}
var car = new Car();
alert(car.name);
alert(car.engineSize);
var engineSize = '5000cc';
this.name = '달려라번개호' + engineSize;
}
var car = new Car();
alert(car.name);
alert(car.engineSize);
'달려라번개호5000cc'라는 이름은 출력이 되는데, engineSize은 'undefined' 라고 나오네요~
engineSize는 객체를 만들때 name 속성을 위해 희생하고는 지역변수의 비참한 최후를 맞이한듯 합니다.
var와 this의 차이랍니다~^^
그런데 Car를 세대(car1,car2,car3) 만들었는데 이름이 모두 똑같습니다.
달려라번개호
달려라번개호
달려라번개호
이제 그만 달리고 싶네요 ㅡ.ㅡ;;
Car 객체를 생성할때 이름을 따로따로 지어주고 싶습니다.
생성자인 function Car() 를 조금 손봐줘야겠군요.
function Car(name){
this.name = name;
}
this.name = name;
}
이렇게 해주면 Car를 생성할때 원하는 이름을 지어줄 수 있습니다.
var car1 = new Car('번개호');
var car2 = new Car('천둥이');
var car3 = new Car('폭풍3호');
alert(car1.name);
alert(car2.name);
alert(car3.name);
var car2 = new Car('천둥이');
var car3 = new Car('폭풍3호');
alert(car1.name);
alert(car2.name);
alert(car3.name);
이제 만들어진 Car객체들이 저마다 다른 이름을 가질 수 있게 되었습니다.^^
javascript로 객체 만들기~ 참 쉽죠? ^^
다음엔 Car를 움직여보도록 하겠습니다. 이름만 있는 차 보다는 타고 다닐 수 있는 차가 더 좋겠죠?
javascript object's method를 기대해 주세요~!!
'Programing > HTML_JavaScript_CSS' 카테고리의 다른 글
| 객체 초기화의 중요성 (1) | 2008.05.23 |
|---|---|
| 오페라,사파리의 DOM Inspector (6) | 2008.04.15 |
| URL, 도메인 추출 정규식 (2) (5) | 2008.02.22 |
| URL, 도메인 추출 정규식 (0) | 2008.02.20 |
| javascript의 클로저(closure) (2) | 2007.09.21 |
2008. 3. 24. 16:27
카테고리 없음
external.AddSearchProvider
http://msdn2.microsoft.com/en-us/library/ms535931(VS.85).aspx
http://developer.mozilla.org/en/docs/Adding_search_engines_from_web_pages
http://msdn2.microsoft.com/en-us/library/ms535931(VS.85).aspx
http://developer.mozilla.org/en/docs/Adding_search_engines_from_web_pages
2008. 2. 22. 17:30
Programing/HTML_JavaScript_CSS
어제 정규식 수정하고 포스팅 하는걸 깜빡했네요^^;;
첫 정규식에서는 도메인에 하이픈이나 한글 도메인 추출이 안됐었죠.
또다시 머리를 이리굴리고 저리굴리고 하다가 해결했습니다.
정규식을 이렇게 바꿔봤습니다.
이전 것은 이랬죠.
\S는 공백을 제외한 문자입니다.
\S를 씀으로써 추가적인 문제가 발생할 수도 있습니다만, 그 문제는 생각하지 않기로 했습니다.
정 거슬리면 [a-zA-Z0-9가-힣] 이런 식으로 쓸 수도 있습니다만,
아직은 원하는 결과를 보여주니 도메인추출 정규식은 여기서 마무리를 지어야 겠습니다.^^;
혹시 더 좋은 방법 알고 계신분은 지도 부탁드립니다~~
첫 정규식에서는 도메인에 하이픈이나 한글 도메인 추출이 안됐었죠.
또다시 머리를 이리굴리고 저리굴리고 하다가 해결했습니다.
정규식을 이렇게 바꿔봤습니다.
/(http(s)?:\/\/)?\S+(\.[^(\n|\t|\s|\/))]+)+/gi
이전 것은 이랬죠.
/(http(s)?:\/\/)?\w+\.\w+(\.\w+)+/gi
\S는 공백을 제외한 문자입니다.
\S를 씀으로써 추가적인 문제가 발생할 수도 있습니다만, 그 문제는 생각하지 않기로 했습니다.
정 거슬리면 [a-zA-Z0-9가-힣] 이런 식으로 쓸 수도 있습니다만,
아직은 원하는 결과를 보여주니 도메인추출 정규식은 여기서 마무리를 지어야 겠습니다.^^;
혹시 더 좋은 방법 알고 계신분은 지도 부탁드립니다~~
'Programing > HTML_JavaScript_CSS' 카테고리의 다른 글
| 오페라,사파리의 DOM Inspector (6) | 2008.04.15 |
|---|---|
| Javascript OOP - 객체 생성과 property (1) | 2008.04.07 |
| URL, 도메인 추출 정규식 (0) | 2008.02.20 |
| javascript의 클로저(closure) (2) | 2007.09.21 |
| 객체의 메서드로 setInterval 활용시 this 사용에 관한 문제점 (3) | 2007.08.07 |
2008. 2. 20. 19:18
Programing/HTML_JavaScript_CSS
문자열중에서 URL(그중 프로토콜과 도메인 부분까지만...) 추출해야 하는 작업이 있었습니다.
정규식을 잘 못다뤄서 상당한 시간을 소비했네요;;;
그렇다고 결과가 썩 맘에 들지는 않습니다.
문제점이 많아서....-_-;;
코드는 간단합니다. 몇 시간 쥐어짜낸것 치고는 형편없죠....-_-;;
정말 간단하죠???
풀이를 하자면
(http(s)?:\/\/)? - http 또는 https 프로토콜명이 있어도 그만 없어도 그만. '?' 는 0번 또는 1번 매칭이죠~
\w+ - 알파벳과 숫자로 된 문자열이 1개 이상 매칭~
(\.\w+)+ - .daum 처럼 닷(.) 다음에 문자열로 이루어진 패턴이 1회 이상 매칭
언뜻 보면 잘 되는 것 같습니다만 저 코드는 치명적인 버그를 갖고 있습니다...(그러니 저 코드는 쓰지마시길~^^)
문제점이 보이시나요?
아래와 같은 문제점이 저 코드안에 도사리고 있답니다...
저 문제들은 오늘 퇴근하고 머리를 좀 굴려봐야겠습니다.
정규식만 제대로 이해하면 될텐데 말이죠~
내일 다시 제대로된 코드를 포스팅 하도록 하겠습니다.
정규식을 잘 못다뤄서 상당한 시간을 소비했네요;;;
그렇다고 결과가 썩 맘에 들지는 않습니다.
문제점이 많아서....-_-;;
코드는 간단합니다. 몇 시간 쥐어짜낸것 치고는 형편없죠....-_-;;
<script>
function aa(){
var aa = document.getElementById('aa');
var patt = /(http(s)?:\/\/)?\w+(\.\w+)+/gi;
var result = (aa.value.match(patt));
aa.value = result.join('\n');
}
</script>
</head>
<body>
<textarea id="aa" cols="100" rows="10">
* 컴퓨터 싸게 잘 사는 방법 - 가격비교 PC분야 우수업체 아싸컴! 인텔 콘로탑재 PC 최저가 178,500원.
http://www.assacom.com
* 컴퓨터전문 쇼핑몰 싸다컴 - 무이자할부, 전국출장A/S, 경품이벤트 무료배송, 특가HP노트북 - 싸다컴
http://www.ssadacom.com
* 컴퓨터전문몰 아이프로컴 - 컴퓨터22만원할인, 쿼드 40만원, 전국출장A/S, 본체10만원, USB증정.
http://www.iprocom.co.kr
* 인터넷 익스플로러 7 - 지금 업그레이드 하세요. 최신 Google에 최적화된 IE7
http://www.google.com/toolbar/ie7/
* 조립컴퓨터 강자 팝콘피씨 - 인텔최신 코어2쿼드 컴퓨터 할인판매 전국 출장A/S 저가 컴퓨터143,500원
http://www.popcornpc.co.kr/user_pag
</textarea>
<input type="button" onclick="aa()">
function aa(){
var aa = document.getElementById('aa');
var patt = /(http(s)?:\/\/)?\w+(\.\w+)+/gi;
var result = (aa.value.match(patt));
aa.value = result.join('\n');
}
</script>
</head>
<body>
<textarea id="aa" cols="100" rows="10">
* 컴퓨터 싸게 잘 사는 방법 - 가격비교 PC분야 우수업체 아싸컴! 인텔 콘로탑재 PC 최저가 178,500원.
http://www.assacom.com
* 컴퓨터전문 쇼핑몰 싸다컴 - 무이자할부, 전국출장A/S, 경품이벤트 무료배송, 특가HP노트북 - 싸다컴
http://www.ssadacom.com
* 컴퓨터전문몰 아이프로컴 - 컴퓨터22만원할인, 쿼드 40만원, 전국출장A/S, 본체10만원, USB증정.
http://www.iprocom.co.kr
* 인터넷 익스플로러 7 - 지금 업그레이드 하세요. 최신 Google에 최적화된 IE7
http://www.google.com/toolbar/ie7/
* 조립컴퓨터 강자 팝콘피씨 - 인텔최신 코어2쿼드 컴퓨터 할인판매 전국 출장A/S 저가 컴퓨터143,500원
http://www.popcornpc.co.kr/user_pag
</textarea>
<input type="button" onclick="aa()">
정말 간단하죠???
풀이를 하자면
(http(s)?:\/\/)? - http 또는 https 프로토콜명이 있어도 그만 없어도 그만. '?' 는 0번 또는 1번 매칭이죠~
\w+ - 알파벳과 숫자로 된 문자열이 1개 이상 매칭~
(\.\w+)+ - .daum 처럼 닷(.) 다음에 문자열로 이루어진 패턴이 1회 이상 매칭
언뜻 보면 잘 되는 것 같습니다만 저 코드는 치명적인 버그를 갖고 있습니다...(그러니 저 코드는 쓰지마시길~^^)
문제점이 보이시나요?
아래와 같은 문제점이 저 코드안에 도사리고 있답니다...
- www.img-daum.net 같은 하이픈(-)이 들어간 도메인은 추출을 못합니다.
- 언더바(_)가 들어가도 마찬가지죠...
- 한글도메인도 같은 신세입니다~
저 문제들은 오늘 퇴근하고 머리를 좀 굴려봐야겠습니다.
정규식만 제대로 이해하면 될텐데 말이죠~
내일 다시 제대로된 코드를 포스팅 하도록 하겠습니다.
'Programing > HTML_JavaScript_CSS' 카테고리의 다른 글
| Javascript OOP - 객체 생성과 property (1) | 2008.04.07 |
|---|---|
| URL, 도메인 추출 정규식 (2) (5) | 2008.02.22 |
| javascript의 클로저(closure) (2) | 2007.09.21 |
| 객체의 메서드로 setInterval 활용시 this 사용에 관한 문제점 (3) | 2007.08.07 |
| cloneNode 의 활용 (0) | 2007.06.14 |
2008. 2. 11. 12:05
카테고리 없음
폐허가 되 버린 숭례문
대한민국 국보1호 숭례문이 잿더미로 변해버렸습니다.
사람이 죽은 것도 아니고 태어나서 한 번 만져 본 적도 없는 숭례문인데 새벽에 TV를 통해 보던 화마에 삼켜버린 숭례문의 모습에 왜 제 가슴이 그렇게 타들어 갔는지 모르겠습니다.
이 모습은 이제 볼 수 없습니다..
수 많은 전란에도 꿋꿋하게 6백년을 지켜왔던 대한민국 국보 1호이자 서울의 랜드마크인 숭례문은 단 5시간만에 까만 재로 변해버렸습니다.
초기 진압만 제대로 됐다면...
분명 초기진압만 제대로 됐더라도 이런 일은 없었을 것입니다.
연기만 나던 그 때, 좀더 적극적으로 화재 진압을 했더라면 이런 참담한 일은 벌어지자 않았을 것입니다.
이정도면 초기에 진압할 수 있었을텐데...
소방청과 문화재청이 서로 책임을 떠안지 않으려 안일하게 대처하다 소중한 우리의 문화유산이 사라져 버렸습니다.
수 백년 문화유산보다는 개인의 안위가 우선이었겠죠?
이렇게 되면 안되는거였다
미적지근한 초기 대응으로 겉잡을 수 없이 커져버린 불길은 보란듯이 1,2층 누각을 모조리 삼켜버렸습니다.
'보아라... 이것이 너희들이 치루어야 할 댓가다' 라며....
국보 1호 숭례문이 저런 처참한 상황을 겪게 만든 우리는 죄인이다
아직 화재의 원인은 밝혀지지 않았습니다.
하지만 그것이 방화이건 전기 누전이건 우리는 역사앞에 떳떳할 수 없을 것입니다.
제발...저 위 높으신 분들...이제는 좀 정신차렸으면 좋겠습니다...
또 한번 화마의 쓴 소리를 듣기 전에.....
2008. 2. 5. 00:44
카테고리 없음
올해도 어김없이 자바 개발자 컨퍼런스가 열리네요~
쉬고 싶은 토요일이지만 늦잠을 자는 것 보다는 컨퍼런스에 참석하는편이 좋겠죠? ^^
작년 컨퍼런스때 정말 유익한 정보를 많이 얻었었는데 올해도 기대가 되는데 특히 '아키텍트로 가는길','애자일에 대한 7가지 교훈','글로벌/한국 인터넷 비즈니스 현황과 SW개발자를 위한 창업 프로세스' 등이 구미가 당기는군요~
그런데 이번 컨퍼런스에는 오픈 소스에 대한 트랙이 많은것 같습니다.
올해 오픈소스 컨퍼런스는 없는 것인지;;;
작년 오픈소스 컨퍼런스도 정말 재밌었는데 말이죠~ 설마 올해는 건너 뛰는것은 아니겠죠??
연말연시, 바쁜 업무들로 심신이 고단하던 차에 때마추어 좋은 행사가 열린다니 기분 좋네요~^^
쉬고 싶은 토요일이지만 늦잠을 자는 것 보다는 컨퍼런스에 참석하는편이 좋겠죠? ^^
작년 컨퍼런스때 정말 유익한 정보를 많이 얻었었는데 올해도 기대가 되는데 특히 '아키텍트로 가는길','애자일에 대한 7가지 교훈','글로벌/한국 인터넷 비즈니스 현황과 SW개발자를 위한 창업 프로세스' 등이 구미가 당기는군요~
그런데 이번 컨퍼런스에는 오픈 소스에 대한 트랙이 많은것 같습니다.
올해 오픈소스 컨퍼런스는 없는 것인지;;;
작년 오픈소스 컨퍼런스도 정말 재밌었는데 말이죠~ 설마 올해는 건너 뛰는것은 아니겠죠??
연말연시, 바쁜 업무들로 심신이 고단하던 차에 때마추어 좋은 행사가 열린다니 기분 좋네요~^^
