참조:

http://archmond.net/?p=8281



'Language > Java Script' 카테고리의 다른 글

OTP 생성하기  (0) 2018.07.09
부모창에서 자식창 onload 시 자식창 함수 호출  (0) 2018.03.04
URL 인코딩(한글, 특수문자)  (0) 2017.12.05
JS – 브라우저 체크(ie 11 포함)  (0) 2017.09.03
JSON to CSV or EXCEL  (0) 2017.09.03


참조

http://java.ihoney.pe.kr/449


http://enterkey.tistory.com/221



'Language > Java Script' 카테고리의 다른 글

struts 로그인 소스  (0) 2018.07.09
부모창에서 자식창 onload 시 자식창 함수 호출  (0) 2018.03.04
URL 인코딩(한글, 특수문자)  (0) 2017.12.05
JS – 브라우저 체크(ie 11 포함)  (0) 2017.09.03
JSON to CSV or EXCEL  (0) 2017.09.03

 
자식창의 로딩이 완료되기 전에(mapSize함수를 읽어오기 전에) mapSize함수를 호출하여서 발생하는 오류입니다.
 
1. 해결을 위해서는 자식창의 onload에서 호출을 하거나,
부모창에서는 다음 문장을 없애고
  winOp.mapSize(0);
자식창에서는 body에 다음과 같이 처리하면 됩니다.
<BODY onload="mapSize(0)">
 
2. 부모창에서 제어해야 한다면 loop를 돌면서 자식창의 상태가 complete가 되었을때 호출하는 방법이 있습니다.
var winOp;
var tid;
function fullmap(){
  var OpenUrl="자식.html";
  winOp=window.open(OpenUrl, "mapBrowser", "top=0, left=0, width=300, height=500");
//  winOp.mapSize(0);
  tid=setInterval(chkChild,10);
}
function chkChild() {
  if (winOp.document.readyState=="complete") {
    winOp.mapSize(0);
    clearInterval(tid);
  }
}


출처:  

https://m.blog.naver.com/PostView.nhn?blogId=tyboss&logNo=70039279402&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F


'Language > Java Script' 카테고리의 다른 글

struts 로그인 소스  (0) 2018.07.09
OTP 생성하기  (0) 2018.07.09
URL 인코딩(한글, 특수문자)  (0) 2017.12.05
JS – 브라우저 체크(ie 11 포함)  (0) 2017.09.03
JSON to CSV or EXCEL  (0) 2017.09.03

다음과 같은 3가지 함수 중 하나로 한글 주소를 인코딩할 수 있습니다.

* encodeURI() : decodeURI()
* encodeURIComponent() : decodeURIComponent()
* escape() : unescape()

encodeURI() 가 적당합니다. 다만, 주소 전체를 http://부터 모두 인코딩하기 위해서는 encodeURIComponent 를 사용합니다.

인 코딩된 한글 주소를 다시 복원하기 위해서는 각각의 함수에 대응되는 디코딩 함수를 사용합니다.



▶▶ encodeURI, encodeURIComponent, escape 함수 차이점; 자바스크립트

▶▶ JavaScript Tools: Decode/Encode URI Strings


============================================================================================
바스크립트(JavaScript)에서는 다음의 함수들로, HTML 페이지 주소를 인코딩/디코딩합니다.

encodeURI() / decodeURI()
최소한의 문자만 인코딩합니다.
; / ? : @ & = + $ , - _ . ! ~ * ' ( ) #
이런 문자는 인코딩하지 않습니다.
http:// ... 등은 그대로 나옵니다.


encodeURIComponent() / decodeURIComponent()
알파벳과 숫자 Alphanumeric Characters 외의, 대부분의 문자를 모두 인코딩합니다.
http:// ... 가 http%3A%2F%2F 로 됩니다.



escape() / unescape()
예 전부터 있던 오래된 함수입니다. encodeURI() 와 encodeURIComponent() 의 중간 정도의 범위로 문자를 인코딩합니다.



encodeURI, encodeURIComponent, escape 함수 사용 예제


<html>

<body>

<script type="text/javascript">
  var s;

  s = encodeURI('http://www.google.co.kr/소 설.html');
  document.write('<p>' + s + '<p>');
  // 출력 결과: http://www.google.co.kr/%EC%86%8C%20%EC%84%A4.html


  s = encodeURIComponent('http://www.google.co.kr/소 설.html');
  document.write('<p>' + s + '<p>');
  // 출력 결과: http%3A%2F%2Fwww.google.co.kr%2F%EC%86%8C%20%EC%84%A4.html


  s = escape('http://www.google.co.kr/소 설.html');
  document.write('<p>' + s + '<p>');
  // 출력 결과: http%3A//www.google.co.kr/%uC18C%20%uC124.html
</script>

</body>
</html>





어 떤 함수든 "공백 문자" 즉 스페이스는 %20 으로 치환합니다. 그러나 주소의 공백은 없어야 합니다.


인터넷 주소창 등에서, 많은 퍼센트(%) 기호들을 볼 수 있습니다. 알파벳과 숫자가 아닌, 특수 문자나 한글이 인코딩되어 있는 것입니다. 이것을 해독하기 위해서는 디코딩(decoding) 과정을 거쳐야 합니다. 위의 입력 양식은 이 과정을 자바스크립트로 구현한 것입니다.

예를 들어, %EC%86%8C%EC%84%A4를 decodeURI() 함수로 디코딩하면 소설이라는 문자열이 나타납니다. 그러나 만약 escape() 함수로 인코딩한다면, 소설이라는 문자열이 %uC18C%uC124 이렇게 표현됩니다. 이것은 unescape() 함수로 풀어야 합니다. encodeURIComponent() 함수는 encodeURI() 함수보다, 더 넓은 범위의 문자들을 인코딩하는 함수입니다.

'Language > Java Script' 카테고리의 다른 글

OTP 생성하기  (0) 2018.07.09
부모창에서 자식창 onload 시 자식창 함수 호출  (0) 2018.03.04
JS – 브라우저 체크(ie 11 포함)  (0) 2017.09.03
JSON to CSV or EXCEL  (0) 2017.09.03
자바스크립트 값 꺼내기  (0) 2017.05.29


windows 10에 있는 ie 11은 navigator.userAgent 로 체크할 경우 msie로 더이상 체크할 수 없게 되었다.

자세한 이유는 ‘User Agent 파헤치기 (navigator.userAgent)‘ 여기에 자세한 설명이 있다.

어찌되었던 아래는 모든 ie일 경우 체크하게 하는 조건문이다.

1
2
3
4
5
6
var agent = navigator.userAgent.toLowerCase();
if ( (navigator.appName == 'Netscape' && agent.indexOf('trident') != -1) || (agent.indexOf("msie") != -1)) {
     // ie일 경우
}else{
     // ie가 아닐 경우
}

 아래는 마이크로소프트 개발자 네트워크에 올라온 문서이다.
참고하면 좋을 듯.. 


'Language > Java Script' 카테고리의 다른 글

부모창에서 자식창 onload 시 자식창 함수 호출  (0) 2018.03.04
URL 인코딩(한글, 특수문자)  (0) 2017.12.05
JSON to CSV or EXCEL  (0) 2017.09.03
자바스크립트 값 꺼내기  (0) 2017.05.29
네이버 스마트에디터  (0) 2017.02.09

http://jsfiddle.net/sturtevant/vUnF9/



function JSONToExcelConvertor(JSONData, ReportTitle, ShowLabel) {

    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

    var excelObj = '';    


    if (ShowLabel) {

        var row = "";

        for (var index in arrData[0]) {

            row += index + ',';

        }

        row = row.slice(0, -1);

        excelObj += row + '\r\n';

    }

  

    for (var i = 0; i < arrData.length; i++) {

        var row = "";

        

        for (var index in arrData[i]) {

            row +=  arrData[i][index] + ',';

        }

        var final_row = (row.substring(0, row.length - 1)).replace(/\r/g, "");;

        excelObj += final_row + '\r\n';

    }


    if (excelObj == '') {        

        alert("Invalid data");

        return;

    }   

    

    var fileName = "update_";

    fileName += ReportTitle.replace(/ /g,"_");   

    

    //var uri = 'data:text/csv;charset=utf-8,\uFEFF' + encodeURI(excelObj);

    var uri = 'data:application/vnd.ms-excel;charset=utf-8,\uFEFF' + encodeURI(excelObj);

    

    var agent = navigator.userAgent.toLowerCase(); //브라우저 버전 

   if(agent.indexOf("chrome") != -1){ //크롬일 경우  

 

 var link = document.createElement("a");    

       link.href = uri;

       link.style = "visibility:hidden";

       //link.download = fileName + ".csv";

       link.download = fileName + ".xls";

   

       document.body.appendChild(link);

       link.click();

       document.body.removeChild(link);

    }

    if ( (navigator.appName == 'Netscape' && agent.indexOf('trident') != -1) || (agent.indexOf("msie") != -1)) {    

    // ie일 경우    

        var oWin = window.open();

        oWin.document.write('sep=,\r\n' + excelObj);

        oWin.document.close();

        //oWin.document.execCommand('SaveAs', true, fileName + ".csv");

        oWin.document.execCommand('SaveAs', true, fileName + ".xls");

        oWin.close();

    }

   

}

'Language > Java Script' 카테고리의 다른 글

URL 인코딩(한글, 특수문자)  (0) 2017.12.05
JS – 브라우저 체크(ie 11 포함)  (0) 2017.09.03
자바스크립트 값 꺼내기  (0) 2017.05.29
네이버 스마트에디터  (0) 2017.02.09
String 형을 json 형태로 형변환  (0) 2017.02.09

var bbb= {items:[{THUMBNAIL_DOCNUM:1121, VIEWCOUNT:8, TITLE:111}], code:200}



1) bbb.items[0].THUMBNAIL_DOCNUM;


or


2) bbb.items[0].['THUMBNAIL_DOCNUM'];



2번에 경우 


특수한 단어로 키를 잡았을 경우 사용 


ex) var , delete 

'Language > Java Script' 카테고리의 다른 글

JS – 브라우저 체크(ie 11 포함)  (0) 2017.09.03
JSON to CSV or EXCEL  (0) 2017.09.03
네이버 스마트에디터  (0) 2017.02.09
String 형을 json 형태로 형변환  (0) 2017.02.09
웹 차트 라이브러리 - Chart.js  (0) 2017.02.03

https://github.com/naver/smarteditor2


http://hellogk.tistory.com/62



이번 포스팅은 대표적으로 자주 이용하는 무료 웹에디터 툴중에 하나인 

네이버 스마트에디터에 대한 기본 연동법에 대하여 포스팅 하고자 합니다.


제일먼저 에디터파일을 받도록 합니다.


http://dev.naver.com/projects/smarteditor/download


사이트 접속시 다음과 같이 버전별 에디터 목록이 나옵니다






저같은 경우는 제일 최신으로 등록된 버전을 기준으로 진행을 하겠습니다.


목록을 클릭하여 들어가시면 상단에 다운로드버튼이 존재하는데 

클릭하여 파일을 다운로드 받도록 합니다.







저는 포스팅 날짜기준 "SE2.3.10.O11329.zip" 파일을 다운받았습니다.

압축해제 후 다음 파일들을 모두 본인의 프로젝트에 맞추어 include해줍니다.

저는 개인적으로 별도의 "smarteditor" 디렉토리 생성하여 해당 폴더에 통째로 붙여넣기 하였습니다.







스마트 에디터를 적용하기 위해서는 HTML의 textarea 태그가 필요합니다.

index.html 파일에 하단 코드 작성하였습니다.



INCLUDE 파일

?
1
2
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/smarteditor/js/HuskyEZCreator.js" charset="utf-8"></script>

에디터 샘플 html 코드

?
1
2
3
4
<form action="/send.jsp" method="post" id="frm">
    <textarea name="smarteditor" id="smarteditor" rows="10" cols="100" style="width:766px; height:412px;"></textarea>
    <input type="button" id="savebutton" value="서버전송" />
</form>


에디터 관련 스크립트 코드

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$(function(){
    //전역변수선언
    var editor_object = [];
     
    nhn.husky.EZCreator.createInIFrame({
        oAppRef: editor_object,
        elPlaceHolder: "smarteditor",
        sSkinURI: "/smarteditor/SmartEditor2Skin.html",
        htParams : {
            // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
            bUseToolbar : true,            
            // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
            bUseVerticalResizer : true,    
            // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
            bUseModeChanger : true,
        }
    });
     
    //전송버튼 클릭이벤트
    $("#savebutton").click(function(){
        //id가 smarteditor인 textarea에 에디터에서 대입
        editor_object.getById["smarteditor"].exec("UPDATE_CONTENTS_FIELD", []);
         
        // 이부분에 에디터 validation 검증
         
        //폼 submit
        $("#frm").submit();
    })
})


위 코드를 차례대로 보시겠습니다.


smarteditor 연동 제공해주는 HuskyEZCreator.js 파일과 jQuery CDN을 이용한 예제입니다.


1. nhn.husky.EZCreator.createInIFrame 명령어를 이용하여 에디터를 iframe을 이용하여 화면에 띄워줍니다.

2. textarea와 패키지개념이긴 하나 실질적으로 별개의 프레임입니다.

    elPlaceHolder 속성값에는 연결지을 textarea의 id명을 정해줍니다.

    sSkinURI 속성값에는 에디터스킨 html파일 경로를 지정해줍니다

3. 마지막으로 전송버튼시 editor_object라는 배열변수를 이용하여 smarteditor id값을 가진 textarea폼에 에디터스킨에서 입력한 html내용들을 대입시킵니다.

    editor_objet 변수를 전역변수로 선언한 이유는 이와같이 클립이벤트 공통으로 에디터객체 핸들링을 위하여 선언하였습니다.


위 3가지에 대한 부분이 주요 설명입니다.


그리고 form submit을 할때 정해준 action url페이지인 send.jsp 페이지내에 코드는 다음과 같습니다.



send.jsp 코드

?
1
2
3
4
//한글 인코딩을 위한 UTF-8 설정
request.setCharacterEncoding("utf-8");
out.println("에디터 결과"); 
out.println(request.getParameter("smarteditor"));



에디터 로딩 페이지와 전송된 갑이 올바르게 넘어가는지 해당 소스를 실행해보도록 하겠습니다.




최초 로드 화면






send.jsp 전송값 확인






화면상 내용만 출력되었지만 소스보기 결과 정상적으로 에디터에 작성된 태그가 적용된것을 확인 할 수 있었습니다.



출처: http://hellogk.tistory.com/62 [IT Code Storage]

출처: http://hellogk.tistory.com/62 [IT Code Storage]

출처: http://hellogk.tistory.com/62 [IT Code Storage]

'Language > Java Script' 카테고리의 다른 글

JSON to CSV or EXCEL  (0) 2017.09.03
자바스크립트 값 꺼내기  (0) 2017.05.29
String 형을 json 형태로 형변환  (0) 2017.02.09
웹 차트 라이브러리 - Chart.js  (0) 2017.02.03
JavaScript문자열 startsWith () 메서드  (0) 2016.12.28

http://rayaspnet.blogspot.kr/2014/01/how-to-convert-string-to-json-array-in.html?m=1



Wednesday, January 8, 2014

How to convert a string to json array in Javascript?

By JQuery:
var initQuestions = '[{ "Title": "1112", "QuestionType": { "ID": 2, "Value": "1", "Text": "Text", "Selected": true}}]';
var json = $.parseJSON( initQuestions );

Reference:
http://api.jquery.com/jquery.parsejson/


'Language > Java Script' 카테고리의 다른 글

JSON to CSV or EXCEL  (0) 2017.09.03
자바스크립트 값 꺼내기  (0) 2017.05.29
네이버 스마트에디터  (0) 2017.02.09
웹 차트 라이브러리 - Chart.js  (0) 2017.02.03
JavaScript문자열 startsWith () 메서드  (0) 2016.12.28

1. 설명


자바스크립트로 차트기능을 구현할려면 코드 족히 몇백줄 이상은 채워야 합니다 ㅜ


하지만 손쉽게 차트기능을 사용할 수 있도록 많은 자바스크립트 라이브러리가 있습니다.


기본적으로 자바스크립트 차트 라이브러리는 Svg와 Canvas의 그리는방식으로 나뉩니다.


 

 Svg

Canvas 

 장점

 많은 데이터를 표현할 시 성능상 유리

어플리케이션에 적합 

 단점

 안드로이드 지원 X

 안드로이드 지원 O


여기서 사용할 Chart.js은 Canvas입니다.


홈페이지 : http://www.chartjs.org/

github : https://github.com/nnnick/Chart.js

라이선스 : MIT License(오픈 소스)

레퍼런스 : http://www.chartjs.org/docs/#getting-started


2. 사용법




1. http://www.chartjs.org/에 접속해서 Download 버튼을 클릭




2. Download ZIP 버튼을 클릭



3. chartjs.zip으로 이름을 바꾸고 웹 기본 디렉토리에 저장(웹서버 폴더 경로는 사용자마다 다 다릅니다)



4. 여기서 js파일이 중요하고 나머지는 신경 안쓰셔도 무방합니다.

(chart.min.js는 chart.js의 코드 여백을 없앤것으로 파일용량을 압축한것으로 기능상으로는 똑같이 동작됩니다)



5. samples 폴더에 있는 예제들의 파일경로를 확인하고 테스트 해보겠습니다.


6. 보다시피 localhost/chartjs/samples/bar.html 예제가 실행됨을 알 수 있습니다.


 


한번 소스를 분석해보겠습니다.


1. 상위 폴더에 있는 Chart.js를 포함

2. 웹페이지 가로 길이의 50%를 div태그로 잡음

3. 높이 450, 가로 600으로 차트 생성

4. 차트 하단에 명칭 기입

5. 색을 채움

6. 차트 테두리색

7. 커서를 차트에 갖다 댔을때 색을 채움

8. 커서를 차트에 갖다 댔을때 차트 테두리색

9. RGB(Red, Green, Blue) 계열로 색을 주고 a는 투명도(0에 가까울 수록 투명도가 낮아짐)


원래 소스의 기능같은 경우 오픈소스의 메뉴얼이나 레퍼런스를 봐야하지만 단어등으로 추측하여 적어봤습니다.

(실제로 코드를 많이 보다 보면 대략 어떠한 코드인지 감이 옵니다)


3.참고자료


1. http://uashadow.tistory.com/9


2. http://touchsoul.tistory.com/86


3. [Charts] Javascript Chart & Visualization Frameworks, UI Builder

http://mobicon.tistory.com/311


4. chart.js

http://changpd.blogspot.kr/2014/03/chartjs.html

'Language > Java Script' 카테고리의 다른 글

JSON to CSV or EXCEL  (0) 2017.09.03
자바스크립트 값 꺼내기  (0) 2017.05.29
네이버 스마트에디터  (0) 2017.02.09
String 형을 json 형태로 형변환  (0) 2017.02.09
JavaScript문자열 startsWith () 메서드  (0) 2016.12.28

+ Recent posts

티스토리툴바