알듯 모를듯.. 자주 헛갈리는 2가지..잘 정리해두었네요..
https://developers.google.com/chrome-developer-tools/docs/remote-debugging#debugging-webviews
| Ajax로 text 파일 읽기 (0) | 2013.12.27 |
|---|---|
| 터치 이벤트 처리.. (0) | 2013.12.24 |
| IE에서 유용한 Javascript 디버거 Companion.JS (0) | 2013.12.23 |
| javascript에서 array 복사 (0) | 2013.12.13 |
| window, frames, window.top 이해하기.. (0) | 2013.11.20 |
ajax로 서버에 요청하기, 서버에서 파일읽어오기, 로컬의 파일읽어오기가 가능하다.
url을 어떤걸 주느냐에 따라 responseText에 원하는 값이 넘어오는것이다.
서버파일은 읽어오기를 안해봤지만 특정 xml이나 text 파일 경로를 그냥 주면 될듯...
아래는 http request를 rapping해놓은 함수.. 굳이.. 이렇게 만들 필요는 없을듯 한데..
하여간 나중에 참고하기 위해 남겨둔다..
function loadStateDate(number) {
var filePath = "data/stage-" + number + ".txt";
reqHttpData(filePath, onLoadHttpData);
}
function reqHttpData(url, callback) {
if( httpRequest == null ) {
httpRequest = getHttpRequest();
if( httpRequest == null )
return;
}
httpRequest.open("GET", url, true);
httpRequest.onreadystatechange = callback;
httpRequest.send(null);
}
function getHttpRequest() {
var httpReq = null;
try {
var httpReq = new XMLHttpRequest();
} catch(err) {
httpReq = null;
}
return httpReq;
}
function onLoadHttpData() {
if( httpRequest.readyState != 4 ) {
return;
}
var fileData = httpRequest.responseText;
readStateData(fileData);
drawCanvas();
}
| nulll과 undefined의 차이점 (0) | 2014.01.02 |
|---|---|
| 터치 이벤트 처리.. (0) | 2013.12.24 |
| IE에서 유용한 Javascript 디버거 Companion.JS (0) | 2013.12.23 |
| javascript에서 array 복사 (0) | 2013.12.13 |
| window, frames, window.top 이해하기.. (0) | 2013.11.20 |
JQuery mobile을 사용하면 아래 이벤트들을 등록해서 처리할 수 있다.
사용이 간편하고 필요한 정도는 잘 만들어진것 같은데, 더블클릭, 드래그등은 식별할수 없다.
http://www.w3schools.com/jquerymobile/jquerymobile_ref_events.asp
그럴때 사용하는것이 hammer.js
이름 정말 끝내준다.. you can touch this... hammer time 되시겠다..
http://eightmedia.github.io/hammer.js/
http://web.bogdanteodoru.com/javascript/javascript-touch-event-controller/
적당히 따라하면 좀더 세부적인 이벤트 처리까지 가능하다..
| nulll과 undefined의 차이점 (0) | 2014.01.02 |
|---|---|
| Ajax로 text 파일 읽기 (0) | 2013.12.27 |
| IE에서 유용한 Javascript 디버거 Companion.JS (0) | 2013.12.23 |
| javascript에서 array 복사 (0) | 2013.12.13 |
| window, frames, window.top 이해하기.. (0) | 2013.11.20 |
| Ajax로 text 파일 읽기 (0) | 2013.12.27 |
|---|---|
| 터치 이벤트 처리.. (0) | 2013.12.24 |
| javascript에서 array 복사 (0) | 2013.12.13 |
| window, frames, window.top 이해하기.. (0) | 2013.11.20 |
| 같은 이름을 갖는...element들을 배열로 얻어와서 다루기.. (0) | 2013.11.20 |
//1.같은 메모리 참조
var arr1 = [1,2,3];
var arr2 = arr1;
console.log(arr1==arr2); //결과:true
arr1[0] = 11;
console.log(arr1); //결과:[11, 2, 3]
console.log(arr2); //결과:[11, 2, 3]
//2.다른메모리참조
//2-1. ArrayObj.slice(begin[,end])
// :원래는 array의 일부를 발췌하여 새로운 array를 만드는 함수지만
// 파라미터를 넣지 않으면 새로운 array만 리턴된다.
var arr1 = [1,2,3];
var arr2 = arr1.slice();
console.log(arr1==arr2); //결과:false
arr1[0] = 11;
console.log(arr1); //결과:[11, 2, 3]
console.log(arr2); //결과:[1, 2, 3]
| 터치 이벤트 처리.. (0) | 2013.12.24 |
|---|---|
| IE에서 유용한 Javascript 디버거 Companion.JS (0) | 2013.12.23 |
| window, frames, window.top 이해하기.. (0) | 2013.11.20 |
| 같은 이름을 갖는...element들을 배열로 얻어와서 다루기.. (0) | 2013.11.20 |
| JSON 데이타 다루기.. (0) | 2013.11.20 |
window란?
지금 수행중인 javascript 가 포함된 <html> </html> 사이의 html문서가 바로 window이다.
그래서 본인 자신의 window 객체의 하위 요소를 다룰때는 window생략이 가능하다.
예를 들어서 window.document 는 document와 동일하다.
window.self란?
없어도 될것 같은데.. 왜 있는지 모르겠다.. test code를 만들어서 시험을 해보면... window.self.self.self == window 이다.
또 window.self.self == self 이다.
즉 자기 자신을 가리키는 객체인데. 없어도 무방할것 같은데.. 왜 있는건지.. -_-;;
window.frames[]
web 화면은 여러개의 frame들로 구성될수 있다.
개별 각각의 frame들은 하나의 window라고 할수 있다.
아래 화면과 같은 frame이 있다고 하면..
header , left, up, down 각각의 frame(==html문서)은 window 이다.
Down 부분에서도 불수 있듯이.. frames[idx]는 window 객체와 동일하다.
(참조 : window.parent.parent.frames[1].frames[2] == window )
그래서 header frame(==html문서)에 있는 javascript 및 변수를 참조하고 싶다면..
해당 frame경로를 잘 찾아가면 아래와 같이 호출 할 수 있다.
아래는 header html문서의 showMe()라는 javascript function을 down html 에서 호출하는 예제이다.
( window.parent.parent.frames[0].name == header 임을 down frame에서 볼수 있다. )
window.parent.parent.frames[0].showMe();
window.parent 이해
web화면은 위의 예제처럼 아주 계층적으로 복잡하게 구성되어 있어도 window.parent,window.top, 및 frames등의 객체를 통해서 접근하여 다양한 operation을 할수 있다.
window.parent란 window의 부모 window이다. window.parent.parent는 부모의 보모를 말한다.
down frame에서 header frame의 window 객체를 얻으려면 아래와 같이 접근해야 한다.
window.parent.parent.frames[0]
복잡하긴 하지만.. 가능은 하다..
억지스런 테스트를 해보면.. down frame에서 자기자신 window (== self)를 아래와 같이 접근도 가능하다.
window.parent.parent.frames[1].frames[2].name
잡자기 떠오르는 의문하나..
getElementById 처럼 이름으로 frame을 찾을수는 없나? 그렇다면.. 부모의 부모의 몇번째 자식의 몇번째 자식과 같이 탐색하지 말고.. frame 이름만 줘서 frame을 얻을수 있으면 실수도 줄이고 정말 좋을텐데.. 사실.. parent.parent.frames[0].frames[3] 이 먼지 눈으로 보고는 알수가 없다.
그래서 찾아봤더니 방법이 있다 이름을 주면 된다..
window.top.frames['mainframe'].frames['down'].name == down 이다. 훨씬 눈으로 보고 이해하기에 좋다.
좀더 자세한 내용은 아래 블로그글을 참조하고..
http://mungchung.com/xe/lecture/8217?PHPSESSID=94613544664b277fd64408f8420357ca
window.top
이름에서 유추할수 있듯이.. window의 가장 상위 window를 한번에 얻어올수 있다.
window.parent.parent.parent.parent.parent. 으로 접근할것을... window.top으로 바로 접근가능한것이다.
down frame에서 header frame의 이름을 얻기위해서 아래 2가지 방법으로 접근가능하다.
window.top.frames[0].name window.parent.parent.frames[0].name document.write( "window.top.frames['header'].name
top window로 접근한다는 것 이외에.. window.top은 좀더 특별한 용도로 사용가능하다.
여러 frame간에 간단히 java script 변수를 공유할때 아주 유용하다.
down frame에서 아래와 같이 변수에 값을 할당하고 header frame의 showMe( )함수를 호출하면..
window.top.my_variable 을 참조하여 alert을 띄운다.
// ex_down.html 에서 변수 값 설정..
window.top.my_variable = "test text";
// 함수호출..
window.parent.parent.frames[0].showMe();
// ex_header.html 의 showMe 함수 부분
function showMe()
{
alert( "header : " + window.top.my_variable);
}
그럼 window.top 에 저장된 변수는 언제까지 유효할까??
브라우져의 다른 tab이나 다른 창에서는 window.top.my_variable를 참조하면 undefined로 값이 나온다..
현재 top window가 갱신되지 않으면 계속 해당 변수는 유효하다.
Left 메뉴에서 새로운 파일이 실행된 이후에.. window.top.my_variable 를 참조할수 있는지 확인해 볼수 있다.
target에 따라서 결과는 다르다..
_top or _blank : undefined
_self or _parent : 접근가능
브라우져에서 F5로 창을 갱신하면 어떻게 될까???
그러면 window.top이 갱신되므로 해당 변수도 없어져 버린다.
그래서 하나의 단일 창을 띄워놓고.. window.top 객체를 계속 유지하면서 동작하는 화면을 구현하려면..
mainframe이나 header의 내용은 변경되더라도...top이 갱신되지 않으면.. top개체에 다양한 변수를 저장했다가 사용할 수 있으므로 아주 유용하다.
C사에서 다루었던 A 시스템의 경우에도 동일한 형태로 구현이 되어 있었다.
window.top.dialogHandle 을 저장해두고.. main 화면이 계속 변경되지만.. 변경된 main 화면에서 dialogHandle 변수를 가지고. .. 필요할때 dialog를 close하거나, 닫기도 하고.. 유연하게 사용을 하였다.
첨부된 파일을 시험해보면.. 간단히 동작을 이해할수 있을듯..
IE,Firefox등에서는 탐색기에 압축풀고 ex_top.html 파일을 열면 정상동작한다.
하지만 Chrome에서는 보안오류가 발생하는데, 다른 frame에 있는 javascript 경로 접근시에 오류가 발생하는것이다.
Web Server 경로에 파일들을 두고.. localhost:8080/../ex_top.html 로 열면 정상적으로 동작하는것을 볼수 있다.
| IE에서 유용한 Javascript 디버거 Companion.JS (0) | 2013.12.23 |
|---|---|
| javascript에서 array 복사 (0) | 2013.12.13 |
| 같은 이름을 갖는...element들을 배열로 얻어와서 다루기.. (0) | 2013.11.20 |
| JSON 데이타 다루기.. (0) | 2013.11.20 |
| AJAX Call 기본 형태.. (0) | 2013.11.20 |
같은 id을 갖는 object들을 배열로 가져오려면.. getElementsByName()를 사용하면 된다.
아래예는 버튼들인데.. 각 상황에 맞게 enable / disable처리 및 className을 변경한다.
ex_src.zip var buttons = document.getElementsByName('btnCountSMS');
for( i=0; i < buttons.length; i++ )
{
buttons[i].disabled = false;
buttons[i].name = "UNCOUNT_BTN";
buttons[i].className = "clsButton";
}
| javascript에서 array 복사 (0) | 2013.12.13 |
|---|---|
| window, frames, window.top 이해하기.. (0) | 2013.11.20 |
| JSON 데이타 다루기.. (0) | 2013.11.20 |
| AJAX Call 기본 형태.. (0) | 2013.11.20 |
| Javascript study.. (0) | 2013.11.12 |
JSON 데이타를 Object로 변환하기..
데이타 교환을 위해서 사용되는것이 json이다.
서버로 부터 반환된 결과는 rtn.responseText와 같이 String으로 전달된다.
전달된 데이타가 json format이라면 rtn.responseText 출력시에 { id:'Outsider', sex:'male' } 형태의 string이 출력된다.
이를 JS에서 다루기 쉬운 object로 변환하기 위해서는 그냥 eval( rtn.responseText ) 만 하면 된다.
기본 개념잡기 및 보다 상세한 설명은 아래에서..
http://opentutorials.org/course/49/3473
http://blog.outsider.ne.kr/257
| window, frames, window.top 이해하기.. (0) | 2013.11.20 |
|---|---|
| 같은 이름을 갖는...element들을 배열로 얻어와서 다루기.. (0) | 2013.11.20 |
| AJAX Call 기본 형태.. (0) | 2013.11.20 |
| Javascript study.. (0) | 2013.11.12 |
| object 선언 (0) | 2013.10.31 |
순수.. XMLHttpRequest 객체를 사용하여 ajax call 할때..
jQuery 나 prototype 사용하면.. 인터페이스가 다르다..
하지만... 그 내부를 까보면.. 아래와 같은 코드가 있다는거..
function ajaxUpdateServerVariable()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// success 일때 호출되는 call back
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//update success
//alert( xmlhttp.responseText );
}
}
xmlhttp.open("GET","target_url.jsp?param=xxxx",true);
xmlhttp.send();
}
| window, frames, window.top 이해하기.. (0) | 2013.11.20 |
|---|---|
| 같은 이름을 갖는...element들을 배열로 얻어와서 다루기.. (0) | 2013.11.20 |
| JSON 데이타 다루기.. (0) | 2013.11.20 |
| Javascript study.. (0) | 2013.11.12 |
| object 선언 (0) | 2013.10.31 |
일단.. http://www.w3schools.com 공부한번 쭉하고...
기초개념은 잘 잡힌것 같다. DOM에 대해서 좀더 깊이있게 공부를 할 필요가 있다.
javascript object hierarchy에 대해서 더 탐구가 필요하다.
다른 자료도 한번 찾아봤음요..
http://xguru.net/503 에 나름 잘 정리되어 있는데.. 링크가 많이 깨져있다.
정말 환상적인 정리사이트를 발견하여 동영상으로 주요 부분 한번 훌터봄.
특히나 ... 개발도구 부분에서 정말 많은 도움이 되었음... 안그래도 크롬 개발자 도구가 좋다는데.. 어떻게 사용하는지 몰라서..
궁금했던차에.. 정갈한 목소리로 정리된 내용들을 들으니... 귀에 쏙쏙들어옮..
그리고 볼만한 고급 강좌는 있는데.. 짬내서 꼭 한번 살펴볼것..
http://www.okjsp.net/seq/207057
그리고 유용한 나머지 사이트들.. 일부 강좌가 있고.. 가입을 안해서..잘 살펴보진 못했지만..
site url이 일단 먹어준다.
꼭 시간내서 한번 훌터 보도록.. 해야 겠다.. 약간 봤는데..정리 잘 되있는듯..
일부 내용만 좀 보완을 하면.. 나름 개념이 잡힐것 같다..
직접코딩하면서... 습득한 내용 + 개념잡기까지 병행했으니..곧 JQuery나 Prototype으로 넘어갈만한 상태가 될것 같다...
| window, frames, window.top 이해하기.. (0) | 2013.11.20 |
|---|---|
| 같은 이름을 갖는...element들을 배열로 얻어와서 다루기.. (0) | 2013.11.20 |
| JSON 데이타 다루기.. (0) | 2013.11.20 |
| AJAX Call 기본 형태.. (0) | 2013.11.20 |
| object 선언 (0) | 2013.10.31 |
