jsTree - 페이지에서 트리(디렉토리) 구조를 만들어주는 라이브러리 사용 방법

jsTree란? 대화형 트리를 제공하는 jQuery 플러그인 쉽게 확장, 테마 설정 및 구성이 가능 HTML 및 JSON 데이터 소스와 AJAX 로딩 지원 jQuery의 이벤트 시스템을 사용하여 트리의 다양한 이벤트에 콜백을 바인딩 jsTree 사용 설정 jsTree 테마 (CSS) 호출 (CDNJS) jsTree 사용을 위한 jQuery 호출 (CDNJS) jsTree 호출 html 전체 소스 코드 jsTree 구조 설계 해당 코드는 태그 내에 작성 jsTree 컨테이너 생성 jsTree 구조 설계 아래와 같이 총 루트 노드 2개와 각각 2개의 자식노드를 갖도록 가정 루트 노드1 1-자식노드1 1-자식노드2 루트 노드2 2-자식노드1 2-자식노드2 jsTree 생성 및 노드 선택 이벤트 자바스크립트의 ..

• format_list_bulleted Web/Javascript
• · 2023. 6. 26.
• textsms

JS Variable Error) 인터넷 익스플로러에서의 const와 let

서론 회사의 업무 절차는 현재 개발된 프로그램에 의해 IE로 작업을 진행한다. 때문에 우리 회사는 디버깅을 할 때 IE의 호환성의 여부를 가장 중요시 여긴다. 어느 순간, 내가 새로 추가한 코드로 인해 익스플로러에서 작동을 하지 않는다는 접수가 들어왔다. 문제가 무엇일까...? IE에서의 const와 let 결론부터 말하면, 인터넷 익스플로러에서는 const와 let 타입의 변수 명시는 허용하지 않는다. 정확히 말하면 인터넷 익스플로러 10 이하에서 지원하지 않는다. 때문에 자바스크립트의 코드가 작동하지 않으며 오류가 발생하는 것이다. 인터넷 익스플로러까지 고려한 코드 설계를 하려면 IE 핵을 사용하거나, 아니면 마음편하게 var 로 변수를 명시하는 것이 마음 편하다. IE Hack 포스팅 자세히 보러 ..

• format_list_bulleted Web/Javascript
• · 2023. 5. 30.
• textsms

jQuery - contains() - 특정 문자열 요소 모두 선택하기

contains() 지정한 텍스트를 포함하는 모든 요소 선택 구문 jQuery(":contains( text )") text : 찾을 텍스트 문자열, 대소문자 구분 괄호 안의 문자열은 간단한 단어로 쓰거나 따옴표로 묶을 수 있음 사용 예시 특정 문자열 'eunbyeol' 이 포함된 모든 div를 찾아 글씨색을 빨간색으로 변경하고 밑 줄 긋기 tester admin eunbyeol soohyun 실행 화면 참고 jQuery - contains() Selector

• format_list_bulleted Web/Javascript
• · 2023. 4. 28.
• textsms

JS - JSDoc 사용하기 (자바스크립트 문서화 주석 만들기, 설명 툴팁 달기)

Overview 자바스크립트에서 사용자가 정의함 함수들에 대해 자세한 설명을 툴팁으로 표시할 수 있음 문서화 주석의 장점 함수의 아키텍처를 설명할 수 있음 함수의 사용 용도와 매개변수 정보를 쉽게 전달할 수 있음 JSDoc 이란? 자바스크립트용 API 문서 생성기 기본적으로 내장되어 있기 때문에 따로 설치할 필요가 없음 목적은 자바스크립트 응용 프로그램 또는 라이브러리의 API를 문서화하기 위함 일반적으로 문서화하는 코드 바로 앞에 배치 시작은 /** 로 시작하며 종료는 */ 로 끝냄 단, /* 혹은 /***, 그 이후의 별(3개 이상)은 무시되고 블록 주석으로 해석됨 작성한 코드 바로 옆에 툴팁으로 설명을 추가하여 보여주는 것 구문 /** * 설명 * @param {데이터타입} 파라미터명 파라미터설명 ..

• format_list_bulleted Web/Javascript
• · 2023. 4. 25.
• textsms

JS - Math.random() - 유형별 랜덤 숫자 생성하기 (난수, 임의의 수 만들기)

이번 포스팅에서는 여러가지 형태의 난수를 생성하는 방법을 다룹니다. Math.random() 0이상 1 미만의 구간에서 랜덤한 부동소숫점의 난수를 반환해주는 함수 let rnd = Math.random(); console.log(rnd); // 0.38711670788580577 (출력되는 숫자는 각자의 환경에 따라 다름) 랜덤한 정수 생성하기 Math.pow : 제곱을 해주는 함수, 첫번째 인자 : 제곱할 값, 두번째 인자 : 제곱 /* 정수 */ // 0 ~ 10의 n승-1 까지의 정수 // Math.floor( Math.random() * Math.pow(10, n) ) let n = 1; Math.floor( Math.random() * Math.pow(10, n) ) // 0 ~ 9 까지의 정수..

• format_list_bulleted Web/Javascript
• · 2023. 4. 21.
• textsms

JS - 올림(Ceil), 반올림(Round), 내림(Floor), 버림(Trunc) 사용 예시

Math.ceil() - 올림 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 정수로 반환 Math.ceil(n); // n : 숫자 Math.ceil(.95); // 1 Math.ceil(4); // 4 Math.ceil(7.004); // 8 Math.ceil(-0.95); // -0 Math.ceil(-4); // -4 Math.ceil(-7.004); // -7 Math.round() - 반올림 입력값을 반올림한 수와 가장 가까운 정수 값을 반환 Math.round(n); // n : 숫자 Math.round(0.9); // 1 Math.round(5.95); // 6 Math.round(5.5); // 6 Math.round(5.05); // 5 Math.round(-5.05); // -..

• format_list_bulleted Web/Javascript
• · 2023. 4. 21.
• textsms