자바스크립트에서 return false해줘야 할때

Posted by HULIA(휴리아)
2020. 11. 12. 14:15 프론트엔드/자바스크립트

a태그에 이벤트 걸때 href="#"을 사용할때가 있는데 이때 클릭이벤트나 다른 이벤트를 걸면 자동으로 상단으로 스크롤이 되게 되는데
클릭이벤트에 alert이나 실행후에 스크롤이 되지 않기 위해서는 return false라고 주면 스크롤이 실행되지 않는다

부모창 닫을때 지금 보고 있는 웹 페이지 창을 닫으려고 합니다 confirm 없이 닫는 방법

Posted by HULIA(휴리아)
2019. 12. 31. 14:17 프론트엔드/자바스크립트

자바스크립트

브라우저 창 강제로 닫기
부모창 묻지 않고 닫기
묻지 않고 창 닫기

 

top.window.close();

parent.close();
부모창을 닫을때 위의 두 함수를 이용하는데
그때마다 지금 보고 있는 웹페이지 창을 닫으려고 합니다. 이 창을 닫으시겠습니까?
라는 confirm창을 뜨게 되는데요

이 confirm이 안뜨면서 부모창을 닫을려면 다음과 같이 하시면 됩니다
parent.window.open('about:blank','_self').close();
부모창을 닫아야 하는데 open을 써야 하는게 이상할수 있지만 이게 됩니다^^

앱)checkbox 모두 선택/선택된 count 세기

Posted by HULIA(휴리아)
2018. 11. 14. 20:57 프론트엔드/자바스크립트
//모두 선택
$('#check_all').click(function(){
        $('.input-check').prop('checked', $(this).prop('checked'));
});

//선택된 체크박스 카운트 세기
$('.input-check').each(function(){
  if($(this).prop('checked')){
    count++;
}
});

앱)check box to string

Posted by HULIA(휴리아)
2018. 11. 14. 20:53 프론트엔드/자바스크립트
selectedCheckbox to String
case1)
$(":checkbox[name='chbox1']:checked").each(function(idx, obj){
resultString += "|"+obj.value;
});

if(resultString != ""){
resultString = resultString.subString(1);
}
return resultString;

case2)
if($("input[name='checkboxname']").length <= 0){
    return;
}

var ids = "";
$("input[name='checkboxname']").each(function(){
        if($(this).prop("checked")) {
                ids += $(this).val() + "|";
        }
});

앱)autocomplete jquery sample

Posted by HULIA(휴리아)
2018. 11. 14. 20:33 프론트엔드/자바스크립트
$("#id").autocomplete({
   source : function(request, response){
$.ajax({
    url :
    type:
    data : {
              searchCondition : request.term,
              searchCondition2 : $('#kkk').val()
     },
   contentType:
   success :
});
},
open : function(){
     $(' .ui-autocomplete').css('z-index', 99999999999);
},
minLength: 1,
select : function(event, ui){
}
});

앱)javascript에서 java spring과 연동처리

Posted by HULIA(휴리아)
2018. 11. 14. 20:24 프론트엔드/자바스크립트
$.ajax({
url:"<c:url value='xxx.do' />",
type:'post',
beforeSend:function(xhr){
xhr.setRequestHeader("AJAX", "true");
},
data:자세히 다룬다
contentType:"application/x-www-form-urlencoded; charset=UTF-8",
error : function(xhr,status, error) {
if(xhr.status=403){
location.href="<c:url value='/login/intro.do' />";
},
successs:function(data){
${'#xxx').html(data);
}
});



data를 넘기는 여러가지 방법
case1)
var queryString = $("form[name=searchForm]").serialize();
data : queryString


case2)
var data = $("addForm").serialize();
data : data;

case3)
data : { searchId : $('#searchId').val(),
},

case4)
data:{ flag : syncFlag,
            registered : "${변수명}"
}

case5)
data : {'idlist' : getcheckedIds()},

앱)자바스크립트와 node.js를 이용한 웹 크롤링 테크닉

Posted by HULIA(휴리아)
2018. 11. 13. 21:01 프론트엔드/자바스크립트
ECMAScript는 Ecma international에 의해 표준화된 스크립트 언어의 명세서다
이 명세서는 웹 브라우저별로 달랐던 클라이언트 기반 스크립트의 구현을 표준화시키기 위해 만들어 졌음

html5덕에 스마트폰 애플리케이션마저도 자바스크립트로 개발할 수 있게 되었음

node.js라는 실행엔진
node.js는 웹서버처럼 네트워크 프로그래밍을 위해 개발된 자바스크립트 실행 환경이다.
그 심장부에는 구글 크롬에 탑재된 자바스크립트 엔진 V8이 있다
V8의 가장 큰 특징은 고속 수행능력이다
웹브라우저의 자바스크립트가 보안 때문에 파일처리 등이 불가능한 것에 반해 node.js를 사용하면 파일처리부터 네크워크 처리까지 다양한 작업을 소화가능
패키지 매니저인 npm을 사용하면 다양한 확장기능을 쉽게 도입 가능

Rhino와 Nashon
이들 자바스크립 엔진은 자바로 구현되어 있다.
그래서 자바의 가상머신위에서 자바스크립트를 실행가능
이들 자바스크립트 엔진의 최대 장점은 자바스크립트로 자바의 기능에 접근할 수 있는 것
즉 자바스크립트로 자바의 방대한 api나 라이브러리를 이용가능

이 책에서도 자바의 라이브러리를 이용한 프로그래밍을 소개하는데 이것이 가능한 것은 자바스크립트 엔진이 자바의 가상머신 위에서 수행되기 때문

Rhino는 자바 1.4이후에
그리고 Nashon은 자바 8이후에 이용할 수 있는 자바스크립트 엔진이다

기본적인 기능은 같으나 Nashon은 최신 자바버젼에 맞게 다시 작성되어서 jvm의 새로운 기능을 이용한 고속 수행이 가능하다 그리고 에러메시지가 친절하게 나와 디버깅이 쉽다는 특징이 있다

===
자바스크립트가 데이터 수집에 적합한 이유
코드 작성이 쉬운점을 들 수 있다
자바 스크립트를 위한 풍부한 라이브러리가 준비되어 있다

===
데이터 활용법에 관하여
크롤링하여 얻은 데이터를 활용하는 방법으로는 예측과 분류 그리고 연관 규칙 추출 등을 생각해 볼 수 있다

데이터마이닝
대량의 데이터를 분석하여 그안에서 가치 있는 정보를 발굴하는 것을 말한다
특히 지금까지 알려지지 않은 정보를 대량의 데이터에서 추출하는 기술체계를 가리킨다.
데이터를 조사할때는 통계학, 패턴 인식, 인공지능 등의 데이터 분석 기법을 사용한다.

원래 마이닝이란 채광이라는 뜻이다. 넓은 광산에서 숨겨진 금맥을 채굴하는 것처럼 대량의 데이터를 분석하여 가치 있는 정보를 찾아내는 것이 데이터 마이닝이다

데이터 마이닝에서 텍스트를 대상으로 하는 것을 텍스트 마이닝, 웹 페이지를 대상으로 하는 것을 웹마이닝이라고 한다

데이터마이닝의 기본은 예측, 분류, 연관 규칙 추출
데이터 마이닝의 어려운 점은 단순히 데이터를 넣으면 결과가 나오는 것이 아니라는 점에 있다.
대량의 데이터에서 지식을 찾아내기 위해서는 가설을 세우는 것이 좋다.
마케팅 분야에서는 가설을 세우고 검증하기 위해 예측, 분류, 연관 규칙 추출 기법을 검토한다.

예측:
장래 발생할 일이나 상태의 변화를 어떠한 근거에 기반을 두고 헤아려 보는 것을 말한다
비슷한 의미를 가지는 예상이라는 단어도 있지만, 예측이 예상과 다른 점은 보다 논리적인 근거에 기초하고 있다는 점
일반적으로 예측을 할때는 어떤 일이 발생활 확률을 계산하게 된다

분류:
많은 물건이나 현상들을 어떤 기준에 따라 체계적으로 구분하여 정리하는 것을 말한다.
분류를 하면 정보가 정리되어 사람이 파악하기 쉽게 된다.
방대한 장서를 분류함으로써 독자가 책을 찾기 쉬워진다.

연관 규칙 추출:
연관 규칙이란 어떤 일과 다른 일사이에 연결고리가 있음을 말한다
데이터베이스에 쌓인 데이터를 조사해보면 빈번하게 동시에 일어나는 경우를 발견할 수 있다.
이러한 정보는 전략에 활용될 수 있을 것이다

데이터 마이닝(특히 텍스트를 분석하는 텍스트 마이닝)의 순서
1)대상 데이터 수집
2)형태소 분석등으로 데이터 분할
3)데이터 클린징(이상치, 결손치, 노이즈 제거)
4)데이터 요약(차원 축소, 특징 선택 등)
5)데이터 마이닝(통계나 다른 데이터와 조합)
6)평가와 검증

대상 데이터를 수집하면
형태소 분석으로 텍스트를 이용하기 쉬운 최소단위(형태소)로 분할한다
그런 다음 클린징을 통해 이상치 및 결손치, 노이즈 등을 제거한다.
그리고 어떻게 활용할지를 고려하여 데이터를 요약한다. 예를들면 수치화하거나 의미있는 집합으로 모은다.
마지막으로 평가와 검증을 실시한다

대표적인 데이터 마이닝 기법
1)연관성 분석:X가 발생하면 Y도 발생할 가능성이 높다
2)회귀 분석:X의 속성으로부터 수치 변수 Y를 예측
3)클래스 분류:X의 속성으로부터 속하는 클래스 C를 예측
4)클러스터링:비슷한 것들 서로 묶는다

1)의 연관성 분석은 연관성 규칙 추출이라고 한다
대표적인 활용 예는 소매업의 POS시스템이다
예를 들어 편의점에서 빵과 야채 주스를 사는 사람은 요쿠르트도 같이 산다와 같은 분석을 하는 것을 말한다
이는 쇼핑 바구니속의 조합을 빠짐없이 조사하여 그중에서 흥미로운 결과를 찾아내는 분석이다

2)의 회귀분석은 상관 관계나 인과 관계가 있다고 생각되는 두 개의 변수 중 하나의 변수를 통해 미래의 값을 예측하기 위한 예측식을 구하는 방법이다
데이터 추세를 분석함으로써 예측을 할 수 있다

3)의 클래스 분류는 보다 정확하게 분류하는 모델을 만드는 것을 목적으로 한다
방정식이나 규칙, 확률, 매칭 등 다양한 기법이 있다

4)의 클러스터링은 데이터 집합을 공통의 특징을 갖는 부분 집합(클러스터)으로 나눈다
거리가 근접한 유사성을 기준으로 클러스터링을 한다


조사확인
phantomjs를 pdf를 다운받아보기
자바환경에서 pdf를 다운로드 받도록 하는 방법

d3.js에서 파생된 라이브러리(javascript graph comparison-www.jsgraphs.com)
NVD3.js. c3.js가 대표적 특히 c3가 예제가 많아 서 좋다

차트 관련 js 정리

Posted by HULIA(휴리아)
2018. 11. 11. 00:39 프론트엔드/자바스크립트

Canvasjs

Chartjs

Startbootstrap

Charts google

Bootstrap select, datepicker, growl

Jquery barfiller, easy-pie-chart, datatables, ui

Momentjs

Wavejs



Sweetalert2

Fullcalendar

Aufosizejs

Summernote 에디터

Es6 promise 콜백지옥 해결


Barfiller



앱)자바스크립트 툴팁 말줄임

Posted by HULIA(휴리아)
2018. 6. 4. 14:54 프론트엔드/자바스크립트
var showLength = 20; //표시할 글자수

function abbrProcess(){
    $('div[data-toggle="tooltip"]').each(function(){
        $(this).each(function(){
            if($(this).text().length >= showLength){
                   $(this).text($(this).text().substr(0. showLength)+'...');
             }
         });
    });
}

$(document).ready(function(){
    //줄임 툴팁 적용
    abbrProcess();

});





<div class="table_box">
       <table class="table_tp">
              <caption></caption>
              <colgroup>
                        <col width="5%" />
                        <col width="15%" />
                        <col width="*" />
              </colgroup>
              <thead>
                    <tr>
                         <th class="col"><span></span></th>
                          <th class="col"><span></span></th>
                     </tr>
              </thead>
              <tbody>
                    <tr>
                         <td class="al_c"><input ></td>
                         <td class="al_c"><div data-toggle="tooltip" title="내용">내용</div></td>
                    </tr>
              </tbody>
       </table>
</div>

앱)자바스크립트 자릿수 체크하는 로직

Posted by HULIA(휴리아)
2018. 6. 4. 14:18 프론트엔드/자바스크립트
$(document).ready(function() {
    $("#description").bind("change keyup  input", function(){
    var ls_str = $("#description").val();
    var li_str_len = ls_str.length;
    var li_max = 250;//250자까지 제한
    var i = li_byte = li_len =0;
    var ls_one_char = ls_str2 = "";
    for( var i = 0; i < li_str_len; i++){
            ls_on_char = ls_str.charAt(i);
            li_byte++;

           if( li_byte <= li_max){
                li_len = i+1;
           }
       
    }
    if( li_byte > li_max) {
      ls_str2 = ls_str.substr(0, li_len);
      $("#description").val(ls_str2);
    }

   });

});



<tr>
    <th scope="col"><label>Description(max.250byte)</labe></th>
    <td>
           <textarea id="description" style="width: 95%;"></textarea>
    </td>
</tr>

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

차트 관련 js 정리  (0) 2018.11.11
앱)자바스크립트 툴팁 말줄임  (0) 2018.06.04
Do it Vue.js 입문 정리5  (0) 2018.04.15
Do it Vue.js 입문 정리4  (1) 2018.04.12
Do it Vue.js 입문 정리3  (0) 2018.04.04