Highlight this text
</textarea>
별다른 코딩없이 코드를 복사하기 위해서 하이라이트 기능주기.
input box등에도 사용가능.
예제:
원글:Click to Hightlight all text: It’s Easier than you think.
Highlight this text
</textarea>
드디어 정식으로 prototype 1.5가 나왔습니당.
1.4를 잘 안써봐서 1.5와 정확히 어떤기능이 추가 되었느지는 모르지만
굉장히 많은 기능들이 있습니다.:) String,Templete...등
Ajax부분을 제외하고 모든 부분을 보았는데 재미있고 유용한 기능들이 많습니다.
기존의 정리하던 1.5rc2를 마무리해야 된다는 압박이..ㅡ,.ㅡ;
홈페이지도 이쁘게 바뀌었어습니다
그리고 중요한건 prototype의 큰단점으로 있었던 드디어 document api를 만들었습니다.
설명도 잘되있고 아주 좋습니다.^^
begin
loop
l_n:= instr(l_str ,',');
exit when (nvl(l_n,0)=0);
l_data.extend;
l_data(l_data.count) := ltrim(rtrim(substr(l_str,1,l_n-1)));
l_str := substr(l_str,l_n+1);
end loop;
return l_data;
end;
/
3.바인딩변수를 선언한다.
variable bind_variable varchar2(30)
exec :bind_variable := '1,3,5,7,99'
4.테스트를 해본다.
select *
from table (cast(parameterChangeIn(:bind_variable) as bindTable));
5.적용하기
select *
from all_users
where user_id in(select *
from table (cast(parameterChangeIn(:bind_variable) as bindTable)));
6.실질적으로 자바의적용할땐
StringBuffer strSQL = new StringBuffer();
strSQL.append(" select * ") ;
strSQL.append(" from all_users ") ;
strSQL.append(" where user_id in(select * ") ;
strSQL.append(" from table (cast(parameterChangeIn(?) as bindTable)) ") ;
psmt = con.prepareStatement(strSQL.toString());
psmt.setString(1,'1,2,3,4,5');
원문)expert one-on-one Oracle
Roles, Responsibilities,Object,Collaborations,and Contract
Structurer maintains relationships between objects and information about
those relationships.
Service provider performs work and, in general, offers computing services.
Coordinator reacts to events by delegating tasks to others.
Controller takes decisions and closely directs others' actions.
Interfacer transforms information and requests between distinct parts of
our system.
role stereotype |
요즘 prototype을 뜯어 보구 있는데 생각보다 벽이 높다..ㅡㅡ; 1
내가 제일 헤갈린것이 this의 scope였다.
모든 this가 같은 this인줄만 알았는데..완전 잘못알았다.
그래서 구글링을 하던중 아주 좋은 아티클을 본 덕분에 어느정도 감을 잡았다.
그래도 나는 나의 기억력을 알고 있기때문에 위의 아티클을 중심으로
일단 정리를 하도록 한다..ㅡㅡ;
이 아티클에서는 4개의 정도의 this를 설명하고 몇개는 this의 scope의 대한 얘기를 한다.
1.Calling an Object’s Method
<script type="text/javascript">
var deep_thought = {
the_answer: 42,
ask_question: function () {
return this.the_answer;
}
};
var the_meaning = deep_thought.ask_question();
</script>
즉,Object에서 method를 호출할때의 this는 호출한 본인을 뜻한다.
간단히 말하면 호출한 함수의 "."앞에의 Object를 의미한다.
위에서 the_meaning은 42가 나타난다.
2.Constructor
function BigComputer(answer) {
this.the_answer = answer;
this.ask_question = function () {
return this.the_answer;
}
}
var deep_thought = new BigComputer(42);
var the_meaning = deep_thought.ask_question();
new 키워드를 가지고 생성자를 사용하는 함수인경우의 this의 의미는 새로 생긴
object를 말한다.
위의 예를 들면 BigComputer의 바로 밑에 있는 this는 this.the_answer,this.ask_question들은 deep_thought을 지칭한다. 2
하지만 this.ask_question안의 this.the_answer는 좀 다른 의미를 가지고 있다. 3
2차 this는 다른 변수와 달리 scope chain에서 읽어 오는것이 아니라 단순히 deep_thought에서 읽어온다. 4
즉,2차 this는 현재 기본 context를 참고한다.
위의 같은경우는 하나의 context이기 때문에 상관없지만 아래의 예인 Complications의 경우는 context가 여러개여서 틀려진다.
3.Function Call
function test_this() {
return this;
}
var i_wonder_what_this_is = test_this();
이번경우는 아무것도 없이 this를 리턴하게 되면 window object가 반환된다.
4.Event Handler
이벤트 핸들러에서의 this는 종류가 두가지 이다.
첫번째로는 아래와 같이 이벤트 핸들러를 인라인으로 사용했을경우
function click_handler() {
alert(this); // alerts the window object
}
...
<button id='thebutton' onclick='click_handler()'>Click me!</button>
이렇게 한다면 click_handler의 this는 생각했던 dom이 아니라 window object가 된다.
2번째 방법은 javascript에서 이벤트 핸들러를 정의한경우.
function click_handler() {
alert(this); // alerts the button DOM node
}
function addhandler() {
document.getElementById('thebutton').onclick = click_handler;
}
window.onload = addhandler;
...
<button id='thebutton'>Click me!</button>
위와 같이 정의 한다면 click_handler의 this는 button의 dom객체가 된다.
5.Complications
function BigComputer(answer) {
this.the_answer = answer;
this.ask_question = function () {
alert(this.the_answer);
}
}
function addhandler() {
var deep_thought = new BigComputer(42),
the_button = document.getElementById('thebutton');
the_button.onclick = deep_thought.ask_question;
}
window.onload = addhandler;
위는 좀 복잡하지만 자주쓰는 부분이므로 알아보자.
위의 예는 thebutton의 엘리먼트의 onclick이벤트에 addhandler를 추가하는 내용이다.
언뜻보기에는 큰문제가 없다.
예상대로라면 당연히 thebutton을 클릭할경우 '42'가 호출할것을 예상한다.
하지만 undefined가 나온다.위의 내용을 이해했다면 쉽게 알수 있을것이다. 5
이유는 현재 이벤트 핸들러의 context안에 BigComputer의 context가 있다.
그렇기 때문에 1차this는 scope chain에 의해서 deep_thought을 나타내고 2차this는 현재 기본context인 이벤트핸들러를 지칭한다.그래서
이벤트 핸들러의 the_answer를 찾게된다.하지만 없기 때문에 undefined가 나오는것이다.
(setTimeout의 함수롤 비슷한 행동을 가지고 있다.)
6.Manipulating Context With .apply() and .call()
그럼 위와 같이 event 나 setTimeout을 동작할때 native context 6
일단은 해결할수있는 메소드가 2개있다 7
이메소드는 this를 명확히 지칭해주므로 context을 고정할수 있다.
일단 간단한 예로 call,apply의 사용법을 알아보자.
var first_object = {
num: 42
};
var second_object = {
num: 24
};
function multiply(mult) {
return this.num * mult;
}
multiply.call(first_object, 5); // returns 42 * 5
multiply.call(second_object, 5); // returns 24 * 5
......
multiply.apply(first_object, [5]); // returns 42 * 5
multiply.apply(second_object, [5]); // returns 24 * 5
먼저 call을 보면 의미는 multiply를 호출하는데 this의 대상은 first_object이고 파라메터는 5이다. 8
그렇기 때문에 그냥 multiply(5)를 하면 this.num 이 없어서 오류가 나지만 this를 first_object로 정했기 때문에 에러가 나지 않는다.
두분째의 apply는 call과 모드 같은 말이지만 파라메터에 차이가 있다.apply의 두번째인자는 해당함수의 파라메터를 뜻하는데 배열형태를 이룬다.
즉,파라메터가 유동적으로 변하거나 할때에 유용히 사용된다.
그럼 call을 가지고 아까의 문제를 해결해보자.
function addhandler() {
var deep_thought = new BigComputer(42),
the_button = document.getElementById('thebutton');
the_button.onclick = deep_thought.ask_question.call(deep_thought);
}
위와 같이 call을 할때 this를 대신할 object를 넘겨주므로서 2차 this는 deep_thought을 참조하게 되고 정상적으로 출력이 된다.
7.The Beauty of .bind()
이와 같은 문제점을 해소하기 위해서 Prototype JavaScript framework 에서는
편리한 방법으로 아래와 같은 멋진 메소드를 제공한다. 9
Function.prototype.bind = function(obj) {
var method = this,
temp = function() {
return method.apply(obj, arguments);
};
return temp;
}
multiply.call(first_object, 5); 이렇게 표현했던 방식이 multiply.bind(first_object); 으로 바뀐다.
원문:Scope in JavaScript
요즘 prototype.js을 공부하고 있는데 생각보다 어렵다.
할건 너무 많은데..생각만큼 속도가 안나네..
javascript를 사용하다보면 exception을 handing하고 싶은경우가 있다.
에러가 나면 ie에서 노랗게 경고메세지를 알리는경우가 있는데 그렇게하면 알기가 힘들다.
물론 각종 툴을 사용하면 알수가 있으나 그렇게 하는것보다 exception을 handing하면
좀더 효율적으로 작업을 할수가 있을것 같았는데 전혀 방법도 몰라 할수없었다.
이번기회에 exception을 공부할기회가 있어서 정리 하도록한다. ㅡㅡ;
javascript 역시 다른 언어 같이 exception이 있다.
그리고 try,catch,finally,thorw 역시 존재한다.
그래서 간단히 exception의 사용법을 알아 보도록하자.
기본적은 구문은 다른 언어와 같이..
try{
.........
}catch(e){
.........(throw expression;)
}finally{
.........
}
이런식으로 사용된다.
물론 알겠지만 간단히 설명하면
try구문에서 exception이 일어나면 catch문으로 exeption을 처리할수도 있고
throw을 던져 처리할수도 있다.
마지막으로 finally을 실행한다.
(finally는 자원의리소스 반납등을 할때 사용된다.
이부분은 잘사용하게 되면 메모리 릭현상을 방지할수 있다.)
일반적은 언어와 크게 차이 없음.
그리고 exception에는 javascript 1.5기준으로 하여 아래 6가지가 있다.
EvalError - 잘못된 방법으로 eval()을 사용했을때.
RangeError - 허락되는 숫자범위를 넘쳤을때.
ReferenceError - 허용되지 않는 참조를 사용했을때.
SyntaxError - 자바스크립트 파싱중 syntax에러 났을때.
TypeError - 사용할수 없는 변수를 썼을때.
URIError - encodeURI() 나 decodeURI()을 잘못된 방법으로 썻을때.
이 exception들은 name,message라는 2가지 프로퍼티를 갖고 있는데.
당연히도 name은 exception의 이름,message는 exception의 message를 말한다.
그리고 instanceof을 사용하여 exception을 구별해 사용하기도 한다.
만약에 사용자정의 exception을 가지고 만들고 싶다면.
function UserException (message) {
this.message=message;
this.name="UserException";
}
myUserException=new UserException("Value too high");
throw myUserException;
이런식으로 자신의 exception을 만들어서 사용할수도 있다.
(물론 이름은 맘대로 정해도 상관없음.)
요즘 갈수록 javascript의 사용이 늘고 거대화지면서 서버코드를 할때와 같이
exeption과 logging전략이 필요한것 같다.