js 64

[JavaScript] file drag and drop

드래그 앤 드롭 API를 사용하면 HTML 임의의 요소에 드래그한 파일 처리가 가능하다. dragenter 박스 안에 Drag 들어왔을 때 dragover 박스 안에 Drag를 하고 있을 때 dragleave 박스 밖으로 Drag가 나갈 때 drop 박스 안에서 Drag를 Drop했을 때 $(function(){ // drag and drop test를 위함. var uploadBox = document.querySelector('#divID'); // 파일 담아줄 input 객체 필요없음 // event.dataTransfer.files 여기에 drop한 파일의 정보가 담김 /* 박스 안에 Drag 들어왔을 때 */ uploadBox.addEventListener('dragenter', function..

js 2023.12.11

for in 문 사용 시 주의할 점

for in : 객체의 프로퍼티명을 열거하는 반복문 1. 프로퍼티를 열거하는 순서 위의 예제 코드 중 객체 리터럴 식에 쓴 것에 대한 결과값이 순서대로 나오기는 하였지만 객체 리터럴에 쓴 순서대로 열거되지 않습니다. 다시말해서 순서가 보장되는 것이 아닙니다. 원래 프로퍼티 간에는 순서가 없는 것으로 순서를 의식하는 것 자체가 잘못된 것입니다. 한편, 배열의 경우는 순서를 의식하는 데이터타입입니다. 위의 배열 코드에서도 마찬가지로 기대한 순서를 보이고는 있지만 for in 문은 순서를 보장하지 않기 때문에 이 같은 동작 방식에 지나치게 의존해서는 안됩니다. 2. 열거할 수 없는 프로퍼티의 존재 두번째로 주의할 점은 for in 문에 나열할 수 없는 프로퍼티의 경우입니다. 예를 들어, 배열 객체에는 leng..

js 2023.12.08

트리구조 jsTree 사용해보기

jstree : jQuery 기반으로 트리형식의 구조를 지원해 웹에 출력을 도와주는 라이브러리 jstree, jquery 스크립트 및 css 1. node가 loaded 되었을때 실행 - $('#jstree').on('loaded.jstree', function (e, data) { }); 2. node가 change 되었을때 실행 - $('#jstree').on('changed.jstree', function (e, data) { }); 3. node가 select 되었을때 실행 - $('#jstree').on('select_node.jstree', function (e, data) { }); 모든 node 열기 : $('#jstree').jstree('open_all'); select_node : 특..

js 2023.12.07

[JavaScript] encodeURI()

문자 코드를 기준으로 문자를 코드로 변환하는 것을 문자 인코딩(encoding) 코드를 문자로 변환하는 것을 문자 디코딩(decoding) encodeURI() : 주소에서 사용하는 :, ;, /, =, ?, & 등을 제외하고 인코딩하는 함수 encodeURIComponent() : 모든 문자를 인코딩하는 함수 decodeURI() : encodeURI로 인코딩한 문자열을 디코딩하는 함수 decodeURIComponent() : encodeURIComponent()로 인코딩한 문자열을 디코딩하는 함수 URI https://truecode-95.tistory.com?true=코딩 encodeURI https://truecode-95.tistory.com?true=%EC%BD%94%EB%94%A9 decod..

js 2022.04.05