javascript 팁이 있는 곳입니다.
  • 웹미니 한줄 전광판 영역 입니다.
글 수 109

0

조회 수 : 7169 신고 : 0

작성자 : 이병준
포인트 : 0 | 레벨 : 0
미리보기 :  
오늘은 골때리는 자바스크립트란 제목으로 자바스크립트에 대한 재미있는 부분을 배워볼까 합니다.
아시는 분은 한번씩 되새기는 계기로, 몰랐던 분은 좋은 양식이 되었음 하는군요.

1. (function(){alert('a');})();

처음부터 괄호를 보고 이게 멍미? 자. 이건 분명 함수입니다. 예. 함수죠.
음.. 그런데 맨 오른쪽에 왠 빈 괄호일까요?
궁금하면 한번 테스트를 해봐야겠죠? 결과는 경고창이 뜹니다. a라고요.
그렇다면 이렇게 한번 써볼까요?

(function(v){alert(v);})('메롱');

이번엔 메롱이란 경고창이 뜰겁니다. 대체 넌 정체가 뭐냐?
네. 즉석 함수 스크립트입니다. 함수명도 정의조차 안하고.. 뭐 이거 그냥 딸랑 실행만
한번 하고 마는 이 불쌍한 함수는 그냥 즉석 함수죠. 한번 부르면 땡,.
정의된 변수가 없기에 한번 실행 후엔 영영 볼수 없는 일회용 함수죠.
그렇다고 해서 이게 일회용 역할만 할까요? 그렇지 않습니다.

element.onclick=function(){(function(ele){ele.innerHTML+='메롱';})(this);};

element란 변수가 담긴 엘리먼트를 클릭하면 메롱이란 글자가 들어갈겁니다.
클릭할때마다 계속 메롱메롱메롱... 뜨죠. 이로써 일회용 함수가 어떻게 쓰느냐에 따라
얘가 이렇게 쓰일 수도 있구나 함을 알겠죠?
그래도 얘는 함수라서 다행이죠. 함수와 관련된 메소드를 실행할 수 있으니까요.
element.onclick=function(){(function(){alert(this.innerHTML);}).call(this);}
이렇게 하면 경고창에 엘리먼트의 내용이 뜨죠. 물론 뻘짓이지만요;;

심지어는 이렇게까지 작성할 수 있습니다.
element.onclick=(function(){return function(){alert(this.innerHTML);};})();
오매..심오해져 가지만 신경안써도 됩니다. 그냥 이렇게도 할수 있구나만 알아두세요. 뻘짓이니까요.

어때요. 쉽죠? 좋아요. 그럼 다음으로 넘어가죠.

2. "This is a Apple".replace(/a/gi,'e');

이건 또 뭐지? 문자열에 왠 메소드 실행? 허 이것 참.
이걸 실행하면 다음과 같이 뜨겠죠? -> This is e epple
일단 따옴표 안에 들어간 건 분명 String이죠.
var str='This is a apple';
window.status=str.replace(replace(/a/gi,'e'));
이렇게 하면 상태바에 위와 똑같은 글씨를 띄우겠죠?
음.. 결과는 똑같군요. 이게 대체 뭡니까 이거?
네.. 아무리 상수라도 정의되면 그순간 멤버로 결속됩니다. 예를 들어 문자열을 작성했으면 바로 String 인스턴스 멤버로 들어가고, 숫자를 입력하면 Number 인스턴스 멤버로 들어가는거죠. 에이..설마? 정말입니다.
하지만 주의사항이 있습니다. 일단 아래 예제를 보실까요?

Number.prototype.toUnsigned=function(){return this<0?this*-1:this;}
음.. 일단 숫자에 대한 것들에게 음수를 양수로 바꿔버리는 메소드를 하나 만들었습니다.
자, 이제 실행해보죠.

-1326542.toUnsigned();

실행되나 보세요. 엉.. 멍미? 에러뜨자나???
네.. 숫자는 .도 쓰죠. 소수점으로 쓰죠. 뒤에 변수같은 것들이 들어가면 숫자는 혼란스럽겠죠? 이럴 때 해결 방안이 있다면 바로 괄호입니다.
(-135243).toUnsigned();
자. 이제 오류 없이 잘 뜨죠? 숫자뿐만이 아니죠. 함수도 마찬가지로 주의해야 합니다.
function(){alert('a')}.call();
실행이 되나요? 안되죠? 구문 오류라고 뜰겁니다.
이쇼키가 JSON인지 함수인지 분간을 못하죠.
1번에서 봤듯이 이것도 괄호로 둘러싸야 실행이됩니다.
(function(){alert('a')}).call();
그렇다면 JSON은 되겠지 하겠다 싶은분들. 한번 테스트해보세요.
var a=eval("{a:'b',c:'d'}");
어때요. 실행이 되나요? 안되면 어떻게 하면 될까요? 이것은 숙제로 남겨두겠습니다.

음.. 이팁을 쓰다 보니 어느새 광랜의 밤에 찾아왔군요.
내일도 출근하기 위해 일단 잠을 청해야겠습니다.
자바스크립트의 골때리는 세계는 다음에도 계속될까 모르겠습니다.
그럼 다음에 봐주셈???
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

첫번째 댓글을 남겨주세요!

List of Articles
번호 제목 글쓴이 날짜 추천 수sort 조회 수
109 best of best 레이어를 이용한 움직이는 공지 title: [ani]깜빡이는 표정빽짱구 2004-03-08 34 6650
108 best of best 클릭하면 메뉴가 나타나고, 다시 클릭하면 닫히는 소스 [1] title: [ani]깜빡이는 표정빽짱구 2004-10-31 33 5887
107 hit best of best 이미지가 서서히 변하는 롤오버 효과 title: [ani]깜빡이는 표정빽짱구 2006-08-30 32 14362
106 best of best 제자리에서 페이딩되면서 바뀌며보여주는 뉴스티커 title: [ani]깜빡이는 표정빽짱구 2006-01-07 32 8458
105 best of best 원클릭으로 클립보드에 저장하기 title: [ani]깜빡이는 표정빽짱구 2004-10-27 30 7497
104 hit best of best 따라다니는 톱버튼 (파이어폭스,익스지원) title: [ani]깜빡이는 표정빽짱구 2006-03-30 29 12901
103 best of best 타이틀을 랜덤으로 바꾸기 title: [ani]깜빡이는 표정빽짱구 2006-03-28 29 9810
102 hit best of best 아이프레임 크기 자동조절 [1] title: [ani]깜빡이는 표정빽짱구 2006-05-02 28 12024
101 best of best 통통 티는 탑버튼 만들기 title: [ani]깜빡이는 표정빽짱구 2005-03-19 23 6047
100 hit best of best 자동으로 년도,월,일,요일,시간 나오게 하기 title: [ani]깜빡이는 표정빽짱구 2006-03-28 22 10948
99 best of best 텍스트 타이핑효과 title: [ani]깜빡이는 표정빽짱구 2004-04-22 22 5989
98 best of best 메트릭스 효과 문자 title: [ani]깜빡이는 표정빽짱구 2004-04-21 22 4921
97 best of best 스크롤되는 배너 title: [ani]깜빡이는 표정빽짱구 2005-03-26 21 9659
96 best of best 따라다니는 탑버튼 title: [ani]깜빡이는 표정빽짱구 2004-02-28 21 6185
95 best of best 위에서 아래로 떨어지는 메뉴 title: [ani]깜빡이는 표정빽짱구 2004-10-31 20 6103
94 best of best 출렁거리며 내려오는 공지창 title: [ani]깜빡이는 표정빽짱구 2004-04-19 20 5014
93 best of best 상태표시줄 바꿔보자2 title: [ani]깜빡이는 표정빽짱구 2004-02-07 20 4778
92 손님이 원하는색을 입력받아 배경화면으로 적용하기! title: [ani]깜빡이는 표정빽짱구 2004-02-29 19 4744
91 링크주소 가리기소스 title: [ani]깜빡이는 표정빽짱구 2004-07-21 18 7150
90 떨어지는 낙역또는 눈 title: [ani]깜빡이는 표정빽짱구 2005-11-28 17 5453