목록자바스크립트 (345)
투케이2K
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bX01T0/btrblP08Vuu/z0teCHXGrjC5RmBhGkJ87k/img.png)
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : javascript [스크립트 소스코드] [body 소스코드] 원본 [결과 출력] [요약 설명] /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. cloneNode : 특정 객체 요소를 복사합니다 (true 설정 시 객체에 포함된 자식까지 모두 복사) 3. document.body.appendChild : body 에 특정 태그를 추가합니다 4. setAttribute : 특정 태그 속성을 지정합니다 (초기 설정, 변경 등 ...) 5. document.getElementById.style : 특정 태그 스타일 속성값을 변경합니다 6. innerText : 특정 태그 텍스트..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ugYjS/btraHYqY9y2/2gjaYtQ0aGf4DgEhlvGej0/img.png)
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] [결과 출력] [요약 설명] /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. CryptoJS : 데이터 암호화를 지원해주는 라이브러리입니다 (ex : aes, sha ...) 3. aes 암호화 : 비밀키 방식으로 인코딩, 디코딩 시 비밀키를 사용합니다 4. aes 128 : 비밀키 값이 16 바이트 값입니다 5. aes 192 : 비밀키 값이 24 바이트 값입니다 6. aes 256 : 비밀키 값이 32 바이트 값입니다 7. 추가 설명 : 필요 시 추가 lv 설정을 할 수 있으며, lv 바이트 배열값은 16 바이트 고정입니다 8. 암호화 지원 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/40Mcv/btraGGcRbrn/bXv6HkrMGckWQTBMSGtTs1/img.png)
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] [결과 출력] [요약 설명] /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. window.getComputedStyle : 특정 객체 스타일 속성 값을 확인합니다 3. chart js : 사용해 차트를 렌더링 하며 단일 노드와 함께 페이지에 포함된 스크립트만 있으면 됩니다 4. myChart.destroy() : 생성된 차트를 삭제합니다 5. chart js 공식 사이트 : https://www.chartjs.org/docs/latest/ 6. chart js cdn 참고 사이트 : https://cdnjs.com/libraries/Chart.j..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/wJUPn/btrasT5RP4v/ZEeUTBZXOk0h7mKkf4G080/img.png)
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : javascript [사이트 정리] [nvd3] http://nvd3.org/ NVD3 Checkout our examples gallery for how to code your first chart. Our examples should provide you with enough code to start making beautiful charts. Google Chrome is our best supported browser. NVD3 also works in Firefox, Opera, Safari and Internet Explorer nvd3.org [c3 js] http://c3js.org/ C3.js | D3-base..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bqCoGY/btraFEMVcqo/T2DeleYi8gYiTzQk1RAM9k/img.png)
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] [결과 출력] [요약 설명] /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. chart js : 사용해 차트를 렌더링 하며 단일 노드와 함께 페이지에 포함된 스크립트만 있으면 됩니다 3. chart js 공식 사이트 : https://www.chartjs.org/docs/latest/ 4. chart js cdn 참고 사이트 : https://cdnjs.com/libraries/Chart.js */
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/v305X/btraEeHi2ej/59hlVkkFceZF9X4rEPZYPk/img.png)
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] [결과 출력] [요약 설명] /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. slice : 시작 인덱스부터 종료 인덱스 전까지의 데이터를 복사해 새로운 배열 객체로 반환합니다 3. slice 사용 시 원본 배열은 수정되지 않습니다 (splice 는 원본 요소 삭제, 교체 실시) 4. 인덱스 (index) : 배열에서 각 번지를 나타내는 번호입니다 (배열은 0번 번지부터 시작) 5. JSON.stringify : 대괄호 [] 포함한 배열 데이터를 출력해줍니다 6. 문법 : array.slice(시작 인덱스, 종료 인덱스); 방식으로 사용합니다 */
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bsCPq6/btraBTjjDFm/jXCYqIjLFInxOHf1UIU2k0/img.png)
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] [결과 출력] [요약 설명] /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. includes : 특정 데이터 포함 여부를 확인합니다 3. splice : 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다 */
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bvh8pX/btraEgyimle/vYWWrBNoI3r56c6sS37iQ1/img.png)
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] [결과 출력] [요약 설명] /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. new Date : date 객체를 선언합니다 3. 두 날짜 차이 계산 : 시작 날짜와 종료날짜를 포함한 값을 리턴합니다 4. toISOString() : 확장 ISO 형식(ISO 8601)의 문자열을 반환합니다 5. 참고 : new Date 데이터 삽입 시 사파리, 크롬 등 적용을 위해 2021-07-08 형식 처럼 문자열을 선언해야합니다 */
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cFz85x/btrakT4D2GV/EeknB7RJR8NuyvPqFrLA00/img.png)
[ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] [결과 출력] [요약 설명] /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. spin js : 브라우저 내에서 로딩 스핀 상태를 나타낼 수 있습니다 3. 로직 : 사용자 통신 요청 시 >> spinnerStart 호출 >> 리턴 응답 받을 시 >> spinnerStop 호출 4. 옵션 참고 공식 사이트 : https://spin.js.org/ */
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/di5sbG/btq9Eg82EJk/JI9ZB2QRHLKUbAQL2moNM1/img.png)
[ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] [결과 출력] [요약 설명] /* [JS 요약 설명] 1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다 2. addEventListener : 특정 객체에 이벤트를 등록합니다 3. evt.preventDefault() : html에서 a 태그나 submit태그 등의 고유의 동작 (링크이동)을 중단합니다 4. 참고 : a 태그에 preventDefault 설정 시 기본 동작인 href 링크이동을 하지 않습니다 */
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cq57oh/btq9DTLcRrl/mNuRNZPsKXtAKjsnUOtzyk/img.png)
[ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] [결과 출력] [요약 설명] /* [JS 요약 설명] 1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다 2. focus : 특정 객체의 포커스 이벤트를 감지합니다 3. blur : 특정 객체가 focus >> unfocus 된 상태를 감지합니다 4. addEventListener : 특정 객체에 이벤트를 등록합니다 */
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/mdfyi/btq9wgzpKDF/XeAa2Rju5nbOiPkfh6n4d1/img.png)
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ /* =========================== */ [소스 코드] /* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [JS 요약 설명] 1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다 2. toastr : 웹브라우저 내에서 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/qZcRy/btq9nCjRf74/8NKTK2pTVskdrv66bQpgIk/img.png)
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ /* =========================== */ [소스 코드] /* =========================== */ /* =========================== */ [결과 출력] [JSON 파일] [TEXT 파일] /* =========================== */ /* =========================== */ [요약 설명] /* [JS 요약 설명] 1. window.onload : 웹페이지 로드 완료 상태를 나타냅니..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Myl7s/btq9jHeN0au/RHEwmsjQR63lcba0SfQznk/img.png)
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ /* =========================== */ [소스 코드] /* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [JS 요약 설명] 1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다 2. JSON.stringify : ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/te1bi/btq9nCXbNQK/WHjr5W01GxwXMgUvWKhbK0/img.png)
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ /* =========================== */ [소스 코드] /* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [JS 요약 설명] 1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다 2. window.onresize : 웹페이..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/UPLag/btq9aFVvMP9/CHzE3MN3aokEKVEFLI7fyK/img.png)
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ /* =========================== */ [소스 코드] /* =========================== */ /* =========================== */ [요약 설명] /* [JS 요약 설명] 1. navigator.vibrate : 브라우저 내에서 모바일 디바이스 기기 진동을 발생시킬 수 있습니다 2. 참고 : IOS 모바일 기기 (사파리 등 웹브라우저) 에서는 진동 기능이 동작하지 않습니다 (지원 안함) */ /* ================..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/blMTCE/btq84v59jZe/XxION4i24x27pPNrbvYnz1/img.png)
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ /* =========================== */ [소스 코드] /* [style css 파일 수정 실시] */ .swal-wide{ width:250px !important; } /* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [JS 요약 설명]..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Tadfv/btq8ZPRlPdz/3oKcXk4SntTTFKOFIHoJk1/img.png)
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ /* =========================== */ [자바스크립트 소스 코드] [안드로이드 소스 코드] //TODO [새로운 URL이 webview에 로드되려 할 경우 컨트롤을 대신할 기회를 줌] @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { Log.d("---","---"); Log.w("//===========//","======================================..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bZTwqU/btq8Nc69EeM/bbnmISfKyBxBkJtEWJ5VjK/img.png)
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ /* =========================== */ [소스 코드] /* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [JS 요약 설명] 1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다 2. createElement : 특정 엘리..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/drfd5P/btq8HHsQic3/P0WCxgjYFZgDQ8MCQl6bbK/img.png)
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ /* =========================== */ [소스 코드] /* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [JS 요약 설명] 1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다 2. sweetalert : 브라우저에서 커..