JavaScript
-
textarea 태그 에디터인 summernote 를 사용하여 이미지 업로드를 진행하면서 커스텀 할 일이 있어 callbacks 옵션의 onImageUpload를 사용했다. 자세한 내용은 홈페이지 api를 확인해주세요 https://summernote.org/deep-dive/#callbacks Summernote - Super Simple WYSIWYG editor Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online. summernote.org onImageUpload 속성은 summernote의 이미지 업로드 시 발생하는 이벤트 핸들러라고..
[summernote] callbacks 옵션 중 onImageUpload 사용하기(FileReader)textarea 태그 에디터인 summernote 를 사용하여 이미지 업로드를 진행하면서 커스텀 할 일이 있어 callbacks 옵션의 onImageUpload를 사용했다. 자세한 내용은 홈페이지 api를 확인해주세요 https://summernote.org/deep-dive/#callbacks Summernote - Super Simple WYSIWYG editor Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online. summernote.org onImageUpload 속성은 summernote의 이미지 업로드 시 발생하는 이벤트 핸들러라고..
2023.04.04 -
동적으로 javascript 에서 Select Box option 값을 추가 및 삭제해보자 아래와 같이 Select Box 가 존재한다. 선택 전체 제목 내용 작성자 제목+내용 제목+내용+작성자 $("#server_seq option[value='전체']").remove();특정값을 삭제하는 문장이다. select box 의 option 중 value 값이 전체인 option 값을 삭제한다. $("#server_seq").append("특정값");특정값을 추가하는 문장이다. option 의 value 값은 "특정값" 이며 보여지는 값은 "특정값"이다. $("#server_seq").children('option:not(:first)').remove();첫..
[Jquery] Select Box option 추가 및 삭제동적으로 javascript 에서 Select Box option 값을 추가 및 삭제해보자 아래와 같이 Select Box 가 존재한다. 선택 전체 제목 내용 작성자 제목+내용 제목+내용+작성자 $("#server_seq option[value='전체']").remove();특정값을 삭제하는 문장이다. select box 의 option 중 value 값이 전체인 option 값을 삭제한다. $("#server_seq").append("특정값");특정값을 추가하는 문장이다. option 의 value 값은 "특정값" 이며 보여지는 값은 "특정값"이다. $("#server_seq").children('option:not(:first)').remove();첫..
2023.03.29 -
호이스팅이란? Javascript 에서 var 키워드 변수나 함수는 선언 위치와 관계 없이 다른 코드 실행전에 변수 및 함수 선언과 초기화가 이루어지는걸 의미한다. var 키워드 변수는 선언 및 초기화가 한꺼번에 이루어지며,함수 선언문의 함수는 선언 및 초기화 그리고 할당까지 모두 이루어진다. 호이스팅을 알기 전에 변수 생성단계를 먼저 알아야 한다. 변수 생성 단계 자바스크립트는 3가지 단계를 거쳐 변수를 생성한다. 1. 선언단계 변수를 실행 컨텍스트의 변수 객체에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다. 2. 초기화 단계 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다. 이 단계에서 변수는 undefined 로 초기화 된다. 3. 할당 단계 undefined 로 초기화된 변수..
호이스팅(Hoisting)호이스팅이란? Javascript 에서 var 키워드 변수나 함수는 선언 위치와 관계 없이 다른 코드 실행전에 변수 및 함수 선언과 초기화가 이루어지는걸 의미한다. var 키워드 변수는 선언 및 초기화가 한꺼번에 이루어지며,함수 선언문의 함수는 선언 및 초기화 그리고 할당까지 모두 이루어진다. 호이스팅을 알기 전에 변수 생성단계를 먼저 알아야 한다. 변수 생성 단계 자바스크립트는 3가지 단계를 거쳐 변수를 생성한다. 1. 선언단계 변수를 실행 컨텍스트의 변수 객체에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다. 2. 초기화 단계 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다. 이 단계에서 변수는 undefined 로 초기화 된다. 3. 할당 단계 undefined 로 초기화된 변수..
2023.03.14 -
아래와 같이 id가 inputDate 인 input type date 태그에 min, max 속성값을 준다. 시작날짜는 현재 날짜의 다음날이고 종료날짜는 오늘날짜의 28일 날짜로 설정하겠다. HTML JavaScript // 시작날짜(min 속성) let sDate = new Date(); // 종료날짜(max 속성) let eDate = new Date(); sDate.setDate(sDate.getDate() + 1); // 시작날짜의 날짜를 +1일 한다. eDate.setDate(eDate.getDate() + 28); // 종료날짜의 날짜를 +28일 한다. let minStr = sDate.toISOString().split('T')[0]; let maxStr = eDate.toISOString(..
Javasript input type date min, max 옵션 주기아래와 같이 id가 inputDate 인 input type date 태그에 min, max 속성값을 준다. 시작날짜는 현재 날짜의 다음날이고 종료날짜는 오늘날짜의 28일 날짜로 설정하겠다. HTML JavaScript // 시작날짜(min 속성) let sDate = new Date(); // 종료날짜(max 속성) let eDate = new Date(); sDate.setDate(sDate.getDate() + 1); // 시작날짜의 날짜를 +1일 한다. eDate.setDate(eDate.getDate() + 28); // 종료날짜의 날짜를 +28일 한다. let minStr = sDate.toISOString().split('T')[0]; let maxStr = eDate.toISOString(..
2023.02.14 -
input 태그의 type="text"는 위와 같이 maxlength 를 통해 최대길이를 설정할 수 있다. 하지만 type="number" 는 maxlength 를 설정할 수 없기 때문에 직접 함수를 통해 설정해줘야 한다. let numberMaxLengthCheck = function(obj){ if(obj.value.length > obj.maxLength){ obj.value = obj.value.slice(0, obj.maxLength); } }; // HTML obj.value = obj.value.slice(0, obj.maxLength); oninput 을 통해 값이 입력될 때마다 numberMaxLengthCheck() 함수를 호출한다. numberMaxLengthCheck 에서는 inpu..
HTML input 태그 maxlength 설정input 태그의 type="text"는 위와 같이 maxlength 를 통해 최대길이를 설정할 수 있다. 하지만 type="number" 는 maxlength 를 설정할 수 없기 때문에 직접 함수를 통해 설정해줘야 한다. let numberMaxLengthCheck = function(obj){ if(obj.value.length > obj.maxLength){ obj.value = obj.value.slice(0, obj.maxLength); } }; // HTML obj.value = obj.value.slice(0, obj.maxLength); oninput 을 통해 값이 입력될 때마다 numberMaxLengthCheck() 함수를 호출한다. numberMaxLengthCheck 에서는 inpu..
2023.02.06 -
jquery 의 form 태그 데이터 전달방법에는 2가지 방법이 있다.$("#form 태그 id").serialize() 와 $("#form 태그 id").serializeArray() 가 있다.$("#form 태그 id").serialize()$("#form 태그 id").serialize();// 결과a=123&b=456&c=789$("#form 태그 id").serializeArray()$("#form 태그 id").serializeArrary();// 결과[{name: 'a', value: '123'}, {name: 'b', value: '456'}, {name: 'c', value: '789'}]위처럼 일반 parameter 또는 배열처럼 데이터가 전달되기 때문에 Java 의 Model 로 받을..
[JQuery] Form 태그 데이터 JSON 형태로 넘기기jquery 의 form 태그 데이터 전달방법에는 2가지 방법이 있다.$("#form 태그 id").serialize() 와 $("#form 태그 id").serializeArray() 가 있다.$("#form 태그 id").serialize()$("#form 태그 id").serialize();// 결과a=123&b=456&c=789$("#form 태그 id").serializeArray()$("#form 태그 id").serializeArrary();// 결과[{name: 'a', value: '123'}, {name: 'b', value: '456'}, {name: 'c', value: '789'}]위처럼 일반 parameter 또는 배열처럼 데이터가 전달되기 때문에 Java 의 Model 로 받을..
2022.12.13