====== Javascript ======
<WRAP left notice 80%>
  * description : Javascript 관련 내용 기술
  * author      : 천호동밤안개
  * email       : jhgong@repia.com
  * lastupdate  : 2020-04-01
</WRAP>
<WRAP clean/>
===== 주요 예시 =====
  * [[wiki:javascript:jstl:메뉴 클릭시 이벤트 발생|메뉴 클릭시 하이라이팅 효과 주기]]
  * [[wiki:javascript:regular expression:정규표현식으로 이메일 유효성 체크하기]]
\\
----
연관 WIKI: [[wiki:html|HTML]] [[wiki:css|CSS]]
----
===== Plugin =====
==== Jquery ====
2006년 존 레식(John Resig) 최초 개발 \\
클라이언트 측 솔루션 제작을 손쉽게 만들어주는 크로스 플랫폼 자바크스크립트 라이브러리 \\
HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션, Ajax, ... \\
[[https://jquery.com|공식 사이트]] \\
[[https://code.tutsplus.com/ko/tutorials/what-is-jquery--cms-26232|jQuery란 무엇인가?]] \\
\\
==== Jquery ui ====
jQuery기반으로 만들어진 사용자 인터페이스 상호작용, 효과, 위젯, 테마 제공 \\
달력, 대화상자, 진행 표시줄, 풍선 도움말, 자동 완성, ... \\
[[https://jqueryui.com|공식사이트]] \\
\\
==== c3.js ====
    <link href="/plugins/charts-c3/plugin.css" rel="stylesheet" />
    <script src="/plugins/charts-c3/plugin.js"></script>
==== Maps-google.js ====
    <link href="/plugins/maps-google/plugin.css" rel="stylesheet" />
    <script src="/plugins/maps-google/plugin.js"></script>
==== input-mask ====
    <script src="/plugins/input-mask/plugin.js"></script>
==== Datatables ====
    <script src="/plugins/datatables/plugin.js"></script>
==== require.js ====
    <script src="/js/require.min.js"></script>  
==== bootstrap ====
    <script src="/components/bootstrap/dist/js/bootstrap.min.js"></script>

==== iCheck.js ====
jQuery 기반 플러그인으로 check box, radio button 커스터마이징 \\
서로 다은 브라우저 및 장치에서 동일한 입력, 터치 장치 지원, 키보드 접근 입력
커스텀의 자유, 가벼운 크기 \\
사용예시
<code javascript>
...
</code>
[[http://icheck.fronteed.com/|홈페이지]], [[https://github.com/fronteed/iCheck|GitHub]] \\
[[https://baessi.tistory.com/96|[jquery] iCheck plugin 사용하기]]
\\
==== html5shiv.js ====
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
==== respond.js ====
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
==== jqvmap.js ====
    <link th:href="${#httpServletRequest.getContextPath()}+'/plugins/jqvmap/jqvmap.min.css'" rel="stylesheet" /> \\
JQVMap은 Interactive, Clickable Vector Maps를 렌더링하는 jQuery 플러그인입니다. \\
Firefox, Safari, Chrome, Opera 및 Internet Explorer 9와 같은 최신 브라우저에서 크기 조정이 가능한 SVG (Scalable Vector Graphics)를 사용합니다.\\
[[https://github.com/10bestdesign/jqvmap]]\\
[[https://www.10bestdesign.com/jqvmap/]]  \\
\\
==== chart.js ====
  <script th:src="${#httpServletRequest.getContextPath()}+'/plugins/chart.js/Chart.min.js'"></script>
\\
==== sparklines ====
  <script th:src="${#httpServletRequest.getContextPath()}+'/plugins/sparklines/sparkline.js'"></script>
\\
==== jquery-knob ====
  <script th:src="${#httpServletRequest.getContextPath()}+'/plugins/jquery-knob/jquery.knob.min.js'"></script>
\\
==== moment ====
[[wiki:javascript:momentjs|momentjs]]
<code html5>
  <script th:src="${#httpServletRequest.getContextPath()}+'/plugins/moment/moment.min.js'"></script>
</code>
\\
==== daterangepicker ====
  <script th:src="${#httpServletRequest.getContextPath()}+'/plugins/daterangepicker/daterangepicker.js'"></script>
\\
==== tempusdominus ====
  <script th:src="${#httpServletRequest.getContextPath()}+'/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js'"></script>
\\
==== summernote ====
  <script th:src="${#httpServletRequest.getContextPath()}+'/plugins/summernote/summernote-bs4.min.js'"></script>
\\
==== overlayScrollbars ====
  <script th:src="${#httpServletRequest.getContextPath()}+'/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js'"></script>
\\
==== CryptoJS ====
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>\\
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/sha256.js"></script>

\\
\\


====== 프로그래밍 ======
==== 리로딩 ====
  * [[https://im-designloper.tistory.com/34|[ JS ] window.location VS reload 페이지 이동시키기]]

==== 배열 ====
  * [[https://blog.ggaman.com/1012|자바스크립트 배열에서 forEach, filter, map, reduce 활용법]]

==== forEach() =====
  * [[wiki:javascript:foreach|forEach]]
  
==== 창 이용 ====
  * [[wiki:javascript:window.open()|window.open 사용법]]
  * [[https://doctorson0309.tistory.com/126|[jQuery] 팝업창에서 부모창 호출, Opener]]

==== Math 함수 ====
  * [[wiki:javascript:js_math-ceil,round,floor|Math - ceil, round, floor 사용법]]
  * [[wiki:javascript:javascript_note:js_math_-_random_method | Math-random 사용법]]
\\
====== Logging ======
Console.log
\\
====== Library ======
[[wiki:javascript:webpack|Webpack]]\\
[[wiki:javascript:react|React]] \\
[[wiki:javascript:nodejs|Node.js]] \\
[[wiki:javascript:angular|Angular]] \\
\\

====== Tip ======
  * [[javascript:var, let, const 선언의 차이]]
  * [[wiki:javascript:csp|CSP로 웹사이트의 콘텐츠 보안 정책 설정하기]]
\\


====== Ref ======
  * [[https://webisfree.com/2015-06-22/[%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8]-%EB%B0%B0%EC%97%B4-%EB%98%90%EB%8A%94-%EB%AC%B8%EC%9E%90%EC%97%B4%EC%97%90-indexof()-%EC%82%AC%EC%9A%A9%ED%95%9C-%ED%8A%B9%EC%A0%95-%EB%AC%B8%EC%9E%90-%EA%B2%80%EC%83%89|[자바스크립트] 배열 또는 문자열에 IndexOf() 사용한 특정 문자 검색]]
  * [[https://cofs.tistory.com/270|javascr
ipt 중복 submit 방지 /
 다중 클릭 방지 / 중복 클릭 방지]]
  * [[https://standardjs.com/readme-kokr.html|JavaScript Standard Style]]

===== JavaScript Note =====
  * [[wiki:javascript:JavaScript Note]]




{{tag>천호동밤안개 주레피 eleven 와프 javascript heon}}