MayBeMayBe

MayBeMayBe

Posts Tagged ‘Javascript

JavaScript – Select a complete table…,,

leave a comment »

 

 

..

Select a complete table with javascript (to be copied to clipboard)

http://stackoverflow.com/questions/2044616/select-a-complete-table-with-javascript-to-be-copied-to-clipboard

..

<code><script type="text/javascript">
    function selectElementContents(el) {
        var body = document.body, range, sel;
        if (document.createRange && window.getSelection) {
            range = document.createRange();
            sel = window.getSelection();
            sel.removeAllRanges();
            try {
                range.selectNodeContents(el);
                sel.addRange(range);
            } catch (e) {
                range.selectNode(el);
                sel.addRange(range);
            }
        } else if (body.createTextRange) {
            range = body.createTextRange();
            range.moveToElementText(el);
            range.select();
        }
    }
</code>
function showHideTable(strId)
{
 if (document.getElementById(strId).style.display == "none" ) {
 document.getElementById(strId).style.display="";
 }
 else
 {
 document.getElementById(strId).style.display="none";
 }
}
<code>

</script></code>

..

..

..

 

 

 

 

 

 

 

 

Written by MayBeMayBe

March 21, 2014 at 23:35

Posted in Programming

Tagged with

DART – OpenAPI…..

with 4 comments

..

RecentDartCheck.html

..

RecentDartSearch.html

(*추가…  Wordpress에 유효하지 않은 pdf 파일을 올리면 다운로드가 제대로 되지 않아서 Tistory에 파일을 첨부하여 링크하는 형식으로 변경..

아래에서 *.html.pdf 파일로 다운로드 받고, 확장자에서 pdf를 지우라는 부분은 생략해야….

위에 있는 링크 두개를 마우스 오른쪽을 누르고 다른 이름으로 저장하면 됨….)

..

..

..

두개의 파일을 다운로드 받으면 확장자가 “pdf”인데 원래 내부 파일은 확장자가 “html”임. WordPress에서는 몇개의 확장자 파일에 대해서는 file upload가 허용되지 않아서 임시로 확장자를 바꾼 것 뿐임..

다운로드 받고 “~~~.html.pdf”로 된 파일 이름을 “—-.html”로 바꾸면 됨…

..

..

금감원 전자공시(DART) 사이트에 가면, 다음과 같은 곳이 있음.

http://dart.fss.or.kr/dsap001/intro.do

요 위에 있는 링크에 보면, 다시 “인증키 신청/관리“라는 곳이 있는데 그곳을 눌러서 회원 가입 및 로그인을 하고 자신에게 맞는 개인 인증키를 받아야 함.

..

DART Open API Authentication Key

..

개인 인증키 신청을 하면 위와 같은 긴 숫자와 문자열로 된 값들을 보여주는데, 보안 상 이유로 개인 키 일부는 보이지 않게 처리 하였음.

중요한 것은, 위와 같은 개인 인증키 전체를 마우스로 더블클릭한 다음, 복사를 눌러 Clip board에 임시로 저장해야 함.

위와 같은 개인 인증키가 있어야 밑에 있는 두개의 파일(RecentDartCheck.html, RecehtDartSearch.html)파일이 제대로 작동함…

..

..

우선 위에서 복사한 개인 인증키를, RecentDartCheck.html 파일과 RecentDartSearch.html 파일을 열고 특정 위치에 집어 넣어야 함…

RecentDartCheck.html 파일인 경우 Ascii 편집기, 문서 편집키(메모장 – Notepad.exe) 같은 편집키로 개인 인증키를 집어 너허야 함.

Windows 인 경우, Windows 키를 누른 다음 R을 누르면 프로그램 실행창이 열리는데, 그곳에다가 notepad라고 입력하고 엔터키를 누르면 됨.(아니면 시작 버튼 ==> 보조프로그램 ==> 메모장)

..

메모장에서 다운로드 받은 RecentDartCheck.html 파일을 열면 되는데 아래 그림과 같이 하면 됨.

Notepad Open files

메모장(Notepad)을 열과 메뉴에 있는 파일을 누르고 열기를 누르면 1번과 같이 되어 있는데 “텍스트 문서(*txt)”와 같이 되어 있는 것을 2번과 같이 “모든파일(*.*)”로 변경하면 3번과 같이 다운로드 받은 html 파일들이 보이게 되어 있음.

아니면, 그냥 다운로드 받은 파일을 마우스로 선택한 다음 메모장 위로 드래그 & 드랍(Drag & Drop)해도 무방…

..

중요한 것은 다운로드 받은 문서을 열고, 특정 위치를 수장하는 것임.(위, 위, 위에서 임시로 저장한 개인 인증 키…)

문서를 열고

ctrl + F(편집 메뉴 ==> 찾기 명령어)를 누르면 자그마한 팝업창이 뜨는데, 그곳에 “var auth“를 집어 넣고 엔터를 누르면 다음과 같이 되어 있음..

Notepad Auth

위에서 var auth = “”;

라고 되어 있는 곳이 있는데 이중 따옴표 안에다가( “”) 자신이 할당 받은 인증키를 집어 넣으면 됨.(만약에 개인 인증키가 a1b2c3d4e5f6g7 이라고 한다면

다음과 같은 형식이 될 것임.

var auth = “a1b2c3d4e5f6g7”;

..

인증키를 위와 같이 붙여넣기 한 다음 파일을 저장하면 됨.(DartRecentCheck.html, DartRecentSearch.html 파일 모두….)

..

임시로, 위에서 저장된 두개의 파일 중 DartRecentCheck.html 파일을 더블클릭하면 아래 그림과 같은 모습이 나와야 함….

(아래는 Google Chrome Web browser 에서 실행한 모습…..)

….

RecentDartCheck.html

..

RecentDart 001

..

RecentDart 002

..

다운로드 받은 “RecentDartCheck.html”파일을 더블클릭하면 위와 비슷한 창이 열릴 것임.

..

빨간 번호로 적힌 것을 설명하자면,

1번은 관심 있어 하는 종목 항목들임…

2번은 위 1번에서 등록한 관심  종목 들 중에서 최근 7일(일주일) 동안 올라온 공시 정보드를 간추려서 테이블로 보여 주는 부분이고(같은 날짜에서 회사 이름 별로 정렬되게…..), 3번과 4번을 누르면 어떤 창이 새로이 열리는데 그 새로이 열린 창을 보면 무슨 뜻인지 알 수 있을 것임.

공시 정보를 자세히 보여주는 것임.

..

5번은 자신이 선택한 관심있는 종목 들 중에서 “현대중공업” 부분인데 그것에 대한 항목들을 보여 주게 되어 있음.

6번(<)과 7번(>)을 누르면 페이지 이동을 할 수 있는데, 만약 한 회사에서 올라온 공시 보고서가 100개가 하나의 페이지를 차지하는데 100개 이상인 경우 페이지를 이동할 수 있는 것임.

가령 위에서 보면 현대중공업에 대해 871항목이 있고 페이지로는 9개 페이지라는 뜻임.( <1 / 9 >)..

..

8번과 9번을 누르면 각 해당 항목에 대한 자세한 내용을 보여주는 창이 열릴 것임.

..

..

..

..

관심 있는 회사 등록과 제거…..

Notdpad(메모장)에서 연 RecentDartCheck.html 파일에서 33행(Ctrl + F 찾기로 function initCompanyLists())를 눌러도 됨).

33행을 보면 function initCompanyLists()라는 함수가 보이고, 바로 밑에 보면… 아래 그림과 같은 부분이 있음.

RecentDart 003

..

33행에 있는 initCompanyLists() 함수 안에 보면 일정한 형식이 있는데…

다시 그림에서 1번 부분은 특정 회사에 할당된 번호 임….

이것은 HTS나 ㄴㅔㅇㅣ년이나 기타 방법으로 회사에 대해 검색하면 알 수 있는 것이고, 2번은 자신이 임의로 정하거나 변경할 수 있는 회사 이름임..

전자공시 DART에서는 위에 있는 1번과 같은 숫자로 된 회사에 대한 코드를 입력해야 제대로 된 결과가 나오는 시스템이라 어쩔 수 없음..

위에서 보면 vecCompany.push(new clsCompany(“051900”, “LG생활건강”)); 등과 같은 형식이 있는데, 이런 부분을 자신에게 맞게 등록하거나 삭제하면서 파일을 저장하고 실행하면 됨…

..

..

..

각 회사별로 검색할 때 시작날짜를 변경하는 방법…

RecentDart 004

다시, RecentDartCheck.html 파일을 보면 115행(start_dt로 검색해서 찾아가도 됨) start_dt 부분이 있는데 이 부분을 자신에게 알맞게 변경하고 파일을 저장, 실행하면 됨.

위에서는 start_dt가 20100101이라고 되어 있는데, 뜻은 2010년 01월 01일 이후에 해당하는 회사 별 공시 사항을 모두 검색하겠다는 뜻임..(YYYYMMDD 와 같은 형식…)

시작날짜는 위에서 변경할 수 있고, 시작이 있으면 종료날짜가 있는데 그것은 가장 최근에 올라온 날짜 까지라고 생각하면 됨…

page_set 부분은 한 페이지당 출력할 수 있는 값인데, 현재 DART OPEN API에서는 최대 100개이고 그 보다 작은 값으로 변경해도 가능….

..

..

..

..

..

..

..

RecentDartSearch.html

RecentDartSearch.html 파일도 RecentDartCheck.html파일에서 설명한 것 처럼 자신에게 할당된 인증키(auth)를 입력하고 저장한 다음, 실행하면 아래와 같은 그림이 나옴…

..

RecentDartSearch 001

..

1번은 회사별로 할당된 회사 Ticker키를 알기가 어려우니 회사이름 몇개를 입력하면 밑에 리스트로 뜨고, 그곳에서 특정한 것을 선택하면 2번으로 Ticker가 자동으로 할당하게 되었음.

3번은 특정회사에 대해 특정 단어로 검색하고 싶을 때 집어 넣을 수 있는 값이고 Start와 End 부분은 YYYYMMDD형식으로 입력을 해서 특정회사에 대하여 시작 검색일과 종료 검색일을 집어 넣을 수 있게 되었음.

F: 부분은 최종 보고서만 출력하게 하라는 옵션이고, 영업 : 부분을 선택하면 영업보고서와 관련된 보고서(분기보고서, 반기보고서, 사업보고서, 감사보고서, 연결감사보고서)만 출력되게 되어 있는 것임.

사용예제…

가령 “현대중공업”에 대하여 검색하고 싶다고 한다면…

RecentDartSearch 002

..

(생각과 다름게 그림이 복잡해 졌지만…..)

현대중공업에 대해 검색하고 싶다고 한다면, 그 회사에 대산 Ticker Code 숫자 값을 알아야 하는데,

위 1번 처럼 “현대“를 입력하면 2번과 같은 테이블이 나오게 되어 있고, 그 중에서 2번 ==> 현대중공업을 선택(클릭)하면 3번에 자동으로 현대중공업에 대한 Ticker Code 숫자값이 입력되게 되어 있음..(만약 자신이 찾는 회사명과 그에 대한 Ticker 값이 없다면 3번 Ticker : 부분에 수동으로 알맞는 값을 집어 넣으면 됨….)

그 다음, Start, End Date를 자신에게 맞게 조정한 다음, 4번 Submit 버튼을 누르면 됨…

아래 그림은 submit 버튼을 눌렀을 때 결과…

RecentDartSearch 003

..

Submit 버튼을 누르면 약 2038개의 공시 보고서 항목들이 보이는데, 위는 그 중에서 일부(2001년 01월 01일 ~ 2013년 08월 16일) 결과….

..

..

다시, 위에서 1번 Search : 라는 부분이 있는데…..

그곳에서 다시 세부 조정을 할 수 있음.

..

RecentDartSearch 004

..

위에서 보면 1번 부분을 보면 “    배당 +    분기보고 +   반기보고 + 사업보고   + 연금“이라고 되어 있는데…

이는 “배당”, “분기보고”, “반기보고”, “사업보고”, “연금”이 들어간 모든 항목에 대해 간추려서 보여주는 것임…

위에서 “+” 키를 누르면 검색할 때 OR 기능임…..

만약 Search : 부분에 아무것도 없다면 모든 항목에 대해 리스트를 보여주게 되어 있음….

..

..

..

..

=============================================================

소스에 대하여…

금감원 전자공시(DART)에 보면 오픈 API 개발가이드 설명문서가 있고…..

http://dart.fss.or.kr/dsap001/guide.do

..

소스를 짤 때 UltraEdit 에디터를 이용하였는데, 좋아 하는 편집기는 아님….

그렇다고, Notepad로 소스를 살펴 보고 싶은 생각은 전혀 없고….

..

소스를 보면, 지역변수와 전역변수가 이리저리 섞여있고, 소스 흐름이 자연스럽지는 않음….

Javascript에 대해 자세히 모르고, Google 과 W3Schools 사이트 보면서 참조를 많이 하였고 HTML 에 대해 전반적으로 이해가 많이 떨어져서 소스가 많이 엉켜 있는 것 또한 많음…

..

감안해 주시길…

..

..

..

..

Written by MayBeMayBe

August 17, 2013 at 00:12

Posted in Programming

Tagged with ,

Javascript – pass parameters to the event function.

leave a comment »

 

 

..

..


...

strResult += "<td>" + "<a id = " + strSearchNameId + " >" + strName + "</a></td>";
strResult += "<td>" + "<a id = " + strSearchTickerId + " >" + strTicker + "</a></td>";

...

document.getElementById('CandidateDiv').innerHTML = strResult;

...

$.each(vecSearchResult, function(i, item)
{
   var nameLink = document.getElementById(item.strSearchNameId);
   var tickerLink = document.getElementById(item.strSearchTickerId);


   nameLink.onclick = function(){ determineTickerId(item.strName, item.strTicker);}
   tickerLink.onclick = function(){ determineTickerId(item.strName, item.strTicker);}
});

...
...
function determineTickerId(strName, strTicker)
{
   ...
}
...
...
...

..

..

Event Function에 매개변수 전달…

determineTickerId(String strArg1, String strArg2) 함수는

<a id=”some1″>Test1</a>

<a id=”some2″>Test2</a>

<A> tag와 연결…..해서 매개변수 strArg1, strArg2를 넘기는 형태…..

..

getElementById()로 TAG ID 정보와 onclick() 함수를 연결한 형태…

..

..

자료는 밑에서..

Google  Search – Javascript event function parameters

..

..

..

 

 

 

 

 

 

 

 

 

 

 

 

 

Written by MayBeMayBe

August 12, 2013 at 21:50

Posted in Programming

Tagged with

javaScript – Array sorting…..,,

leave a comment »

..

..


...

var SummaryTable = [];

var strSortTemp = "<td align=center class=sortDate>";

...

// sorting, using DATE YYYY/MM/DD field.
SummaryTable.sort(function(a, b)
{
   var aPosSub = a.indexOf(strSortTemp);
   var bPosSub = b.indexOf(strSortTemp);

   if((aPosSub != -1) && (bPosSub != -1))
   {
      // 10 ==> YYYY/MM/DD length.
      var strFirst = a.substring(aPosSub + strSortLen, aPosSub + strSortLen + 10);
      var strSecond = b.substring(bPosSub + strSortLen, bPosSub + strSortLen + 10);

      var result = 0;
      if(strFirst > strSecond)
      {
         result = -1;
      }
      else
      if( strFirst == strSecond)
      {
         result = 0;
      }
      else
      {
         result = 1;
      }
      return result;
   }
});

..

들쭉날쭉한 String이 저장되어 있는 배열에서 특정 포맷(strSortTemp string)을 찾고 그것을 기준으로 Sorting…..

각 배열원소 마다, 문자열 중간에 특정 포맷을 집어 넣고 그 특정 포맷 다음에 YYYY/MM/DD 형태로 날짜(Date)정보가 있다면 그 날짜 정보를 기준으로 정렬.. 위에 있는 함수는 Descending(내림차순) 정렬……

..

정렬을 할 것을 생각했다면 처음 부터 구조를 잡을 때 고민을 더 했으면 좋았겠지만, 늦게……!! 필요한 것을 느껴서….

 

..

특별한 것은 없지만, 기록은 해 두면 좋을 것 같아서…

Javascript에 hashtable, multiset, MAP 등이 기본으로 지원되면 좋을 것 같은데…..

..

..

..

..

..

..

Written by MayBeMayBe

August 6, 2013 at 20:38

Posted in Programming

Tagged with

JavaScript…..

leave a comment »

 

 

 

..

..


// Entry Point... Start here....
$(document).ready(function()
{
   // Build Company List table
   writeCompanyList();

   gloopCount = 0;

   // Timer setting part.
   // for periodicaly calling multiple JSONP query
   TimerVar = setInterval(function() {callbackTimer()}, 50);
});

// Timer event.
function callbackTimer()
{
   if(gloopCount >= vecCompany.length)
   {
      clearInterval(TimerVar);
   }
   else
   {
      // for JSONP calling.
      changeCompany(gloopCount);
      gloopCount++;
   }
}
...

function changeCompany(loop)
{
   var crp_cd = vecCompany[loop].crp_cd; // Company ID
   var crp_nm = vecCompany[loop].crp_nm; // Company Name

   var dartUrlAddr = "http://dart.fss.or.kr/api/search.json?callback=?&auth=" + auth
                                                           + "&series=" + series
                                                           + "&sort=" + sortMethod
                                                           + "&crp_cd=" + crp_cd
                                                           + "&start_dt=" + start_dt
                                                           + "&page_set=" + page_set;

   $.getJSON( dartUrlAddr, function(data)
   {
      //console.log( "dkdkkd" );
   })
   .done(function( data )
   {
      writeCompanyContents(loop, data);
   })
   .fail(function()
   {
      var test;
      test = 1;
   })
   .always(function()
   {
      var test;
      test = "dldldl";
   });
}

..

..

http://www.w3schools.com/

..

..

jQuery.ready(handler)

http://api.jquery.com/ready/

.ready( handler )

Description: Specify a function to execute when the DOM is fully loaded.

jQuery.getJSON()

http://api.jquery.com/jQuery.getJSON/

..

Load JSON-encoded data from the server using a GET HTTP request.

..

Cross-Origin Resource Sharing(CORS)

https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

..

Wikipedia – Ajax

..

=============================================================

서버사이드에서 XML 포팻으로 값들을 넘기는 것을 보고, 처음에는 XMLHttpRequest 형태로 접근할려고 했었는데 CORS문제에 걸려 거의 포기상태까지 갔었다.

우연히, JSONP라는게 있는데 그것을 사용하면 CORS 문제를 피할 수 있다는 글도 있었고….

찾아 보니 쉽지는 않았지만, 그래도 어떻게 결과까지 오는데 성공은 한 듯..

Javascript로 Cross Domain간 통신에 제한을 가한게 보안 문제 때문인 것을 잠깐 본것 같은데, 이것 때문에….

..

Windows Program과 같은 형태로 프로그램을 만들면 되겠지만, 문제는 이런 프로그램을 따로 지니고 있어야 한다는 것이고 일반적으로 많은 사람들이 편하게 사용할 수 있는 환경 또한 아니다.

Web Browser야 대부분 가지고 있으니 그 플랫폼 상에서 돌아가는 HTML 형태가 가장 좋지 않겠는가였는데, 꼭 그런것만은 아닌가 보다…

..

Javascript로 엉성한 코드를 짜는데 만난 또 이상한 에러는..

document.write(“”);

Javascript로 document.write을 실행하자 마자 javascript debugger가 맛이 가던데..

재미있던 것은 Google Chrome에서는 정상적으로 작동하고 debugger breakpoint도 잘 잡히는데 MS Internet explorer와 Firefox에서는 항상 문제가 생겼다.

처음에 기저에 깔린 코드 문제인가 싶었는데 알고 봤더니 document.write()…

검색하다 보니 이것에 대한 이유도 어느 사이트에서 설명을 했었는데, 그냥 보안 문제로 인해 그렇게 된 것으로 이해만 하고 넘어가기로….

..

덕분에 getElementById(“id”).innerHTML과 같은 것이 있다는 것을 알게 되었다.

<Div id=”Test1″></Div>

형태로 구조를 전환하니 쉽게 풀렸던 것 같다.

..

..

Javascript 예제들이나 소스를 보면서 당황했던 것은 이상한 소스 형태….

Function call을 Chain형태로 버젓이 쓰는 것 하며, 이상한 약자들과 함수 선언 형태들….

익숙한가 아닌가 그런 문제이겠지만, 좋아하는 코드 형태는 아니다.

..

Google Chrome이나, Firefox, MS Internet explorer에 내장되어 있는, 또는 Extension Plug-in형태로 있는 Debugger도 짜증나는 형태였고..

..

JSONP callback을 도대체 어떻게 선언하고 사용하는가를 찾아 보는데도 시간이 조금 걸렸다.

함수 선언이나 사용하는 형태에 익숙하지 않아서 그런것이 많을 것이다.

..

..

위에 있는 소스 형태는,

Collection(Array?)에 들어 있는 각 원소들에 대해 getJSON() 함수로 서버에 호출해서 결과 값을 서버에서 가져오는 함수.

처음에는 for loop로 무식하게 JSON query를 서버에 보내고 응답을 바꿀까 싶었는데, 문제가 있을 것 같아서 50ms Timer를 설치해서, 50ms 마다 JSON query를 서버에 날리고 서버에서 값들 응답을 바꾸는 소스…

나머지 소스는 서버에서 받은 값들을 Display만 하는 형태이니… 큰 것은 없고..

관건은 아무래도 JSON 형태..

참.

$(document).ready() 진입점(Entry point) 함수 찾는데도 시간이 많이 걸렸다.

내부 이해가 없는 상태에서 기술하는 것이라 기술적으로 상당히 많이 틀렸을 것 같다.

..

..

..

..

..

..

 

 

Written by MayBeMayBe

August 5, 2013 at 23:44

Posted in Programming

Tagged with