Life goes slowly...

HTML의 input text의 Value값의 maxlength 속성을 이용하여 입력받을 데이터의 최대 크기 및 최소 크기를 설정이 가능합니다. 하지만 maxlength 속성은 한글과 영문, 숫자, 특수문자 등을 고려하지 않고 있습니다. 단순하게 문자열의 Length으로 입력을 제한하고 있는 경우가 많습니다. 따라서 이때에는 입력받는 데이터의 length 보다는 Byte를 체크하고 있습니다. 특히 input Text가 아닌 textarea 경우에는 maxlength를 체크하기 어렵습니다. 인코딩에 따라서 한글, 영문, 숫자, 특수문자 등 모두가 Byte가 다르게 설정됩니다. 보통 한글은 2~3 Btye이기 때문입니다. 웹사이트를 서핑하는 도중에 Byte 길이를 체크하는 여러 방법을 찾았습니다. //FOR..

웹페이지에서 Popup창을 열고 input Text 창에 웹페이지 URL을 작성한 뒤에 복사하기 쉽도록 URL 전체를 선택하도록 하는 경우가 있습니다. 이는 제일 먼저 Popup창을 열게 하고 나서 input 창에 focus를 이동하도록 한 뒤에 선택하도록 하면 됩니다. Ctrl + C로 아래의 URL을 복사. //Foucs 이동후에 onfocus="this.select()" input창 text 선택 닫기 제이쿼리(Jquery)의 포커스 강제이동 함수는 focus()입니다.

자바스크립트(Javascript)에서 formdata의 데이터를 조작할 때가 있습니다. FormData 객체란 단순한 객체가 아니며 XMLHttpRequest 전송을 위하여 설계된 특수한 객체 형태입니다. 그러기에 문자열 화할 수 없는 객체이며 Console.log를 사용하여 확인이 불가능합니다. FormData를 Console.log로 확인하기 자바스크립트(Javascript)에서 FormData를 Console.log로 확인하기 위해서는 FormData의 메소드를 사용하여야 합니다. FormData의 Key 값과 Value 값을 각각 확인하는 방법입니다. //FormData의 메소드 확인하기 var formData = new FormData(); formData.append('key1', 'value..

자바스크립트(Javascript)로 배열 합치기 자바스크립트(Javascript)의 Join() 함수는 배열의 항목을 하나의 문자로 합치는 역할을 하는 함수입니다. 배열과 배열 사이에 추가적인 문자열을 삽입하여 하나의 문자열로 생성도 가능합니다. 만약에 구분자(separator)가 없는 경우에는 기본적으로 ", "가 삽입하게 됩니다. //join() 함수 사용법 [배열명].join([추가문자열]); //join() 함수 예제 const testArr = ['철수', '영희', '영수', '원빈']; const sumArr1 = testArr.join(); const sumArr2 = testArr.join('@'); const sumArr3 = testArr.join('-'); console.log(su..

자바스크립트(Javascript)의 Image 파일 용량 체크하기 자바스크립트(Javascript)로 Image 파일의 용량을 체크하는 방법입니다. 제일 먼저 input 태그로 Image 파일을 첨부하고 Image 파일의 용량을 확인해보도록 하겠습니다. Image 파일의 용량의 유효성 체크시 사용할수 있는 코드입니다. 유효성 체크시 원하는 용량를 정하고 Image 파일 용량 체크를 할수 있습니다. // Image 업로드후 이미지 용량 체크하기

Uncaught TypeError: Illegal invocation 에러 해결방법 자바스크립트(Javascript)의 콘솔(Console) 창에 Uncaught TypeError: Illegal invocation 에러가 나타나는 경우가 있습니다. 이는 자바스크립트(JAvascript)의 Ajax를 통하여 데이터를 넘겨줄 때 발생하는 Error입니다. 이는 datatype을 Json으로 설정하고 나서 Json 형태가 아닌 일반 배열로 datatype을 넘기려고 할 때 발생하는 Error입니다. Uncaught TypeError: Illegal invocation의 에러가 발생할 때에는 제일 먼저 datatype을 확인하여 보고 만약 datatype이 Json 형태가 아니라면 JSON.stringify(..

자바스크립트(Javascript) Button으로 파일 업로드 파일 업로드 시 대부분 input으로 type을 file로 처리하여 코드를 작성합니다. 하지만 이는 너무 단조로워 Button 형식으로 처리하게 되면 보기 좋은 웹 페이지를 생성할 수 있습니다.input type=file을 Button 형식으로 변경하는 방법을 알아보겠습니다. 제일 간단한 방법은 Button에 onclick 이벤트를 연결하는 방법입니다. Image 조금 더 자세한 방법은 input에 onchang() 함수를 연결하는 방법입니다. Image

자바스크립트(Javascript) CSS 파일 변경하기 웹페이지 생성 시 각각 QA서버와 운영서버마다 CSS 파일을 변경해야 할 때가 있습니다. 그럴 때 자바스크립트(Javascript)에서 동적으로 CSS 파일을 변경하는 방법이 있습니다. 방법으로는 link 태그에 ID 값을 할당한 뒤에 해당 ID에 CSS 파일을 변경하는 방법입니다. 타이틀 change1.css로 변경 change2.css로 변경

자바스크립트(Javascript) 배열 중복 제거하기 자바스크립트(Javascript)에서 배열 형식의 데이터를 가지고 있을 때 배열 데이터의 중복 값을 제거하여 표현하는 방법입니다. 배열 데이터의 중복값을 제거하는 방법의 3가지가 있습니다. 첫 번째로는 indexOf() 함수와 filter() 함수를 함께 사용하는 방법입니다. 자바스크립트(Javascript)의 indexOf() 함수는 배열 형식의 데이터중에 처음으로 나오는 index를 반환하는 함수이며, 자바스크립트(Javascript)의 filter() 함수는 조건에 맞는 배열의 모든 값을 반환하는 함수입니다. const dataArr = [6, 4, 2, 1, 2, 4, 3, 2]; const filterArr = dataArr.filter((e..

자바스크립트(Javascript) 세계 Local 시간 구하기 자바스크립트(Javascript)로 외국 현재시간 즉 각 나라의 Local 시간을 구하는 방법을 알아보겠습니다. 먼저 각 나라의 GMT 타임존을 알아야 하는데 GMT란, Greenwich Mean Time의 약자로, 경도 0도의 위치한 영국 그리니치 전문대를 기준으로 하는 태양 시간을 말합니다. KST (한국 표준시) +09:00 EST (뉴욕 시간) -05:00 CET (파리 시간) +01:00 CST (중국 표준시) +08:00

자바스크립트(Javascript) 부모 창 데이터 넘기기 웹페이지를 제작할때에 popup창을 여는 경우가 있는데 popup창을 자식 창이라 하고 popup창을 열게 하는 웹페이지를 부모 창이라고 합니다. 자바스크립트(Javascript)로 자식창의 Action으로 부모 창에 영향을 주거나 데이터를 넘길 때가 있습니다. 그럴 때 사용하는 opener() 함수입니다. //부모창에서 popup창 열기 window.open([URL], [타켓], [option]); //자식창에서 부모창 함수 호출 window.opener.[부모창 함수]; //자식창에서 부모창 ID값 가져오기 opener.document.getElementById([부모창 ID값]).value(); //자식창에서 부모창 ID에 value 설정하..

자바스크립트(Javascript) 복사, 붙여넣기 막기 자바스크립트(Javascript)로 복사(Ctrl+C) 및 붙여 넣기(Ctrl+V)를 막는 방법입니다. 블로그 포스팅을 복사해서 붙여 넣기를 하는 키를 막아보도록 하겠습니다. 그러한 방법으로는 KeyCode를 사용하여 쉽게 막을 수 있습니다. //Ctrl+C Keycode로 막기 function ctrlCKeycode(){ if(evet.ctrlKey && event.keycode === 67){ evebt.returnValue = false; } } //Ctrl+V Keycode로 막기 function ctrlCKeycode(){ if(evet.ctrlKey && event.keycode === 86){ evebt.returnValue = fals..

자바스크립트(Javascript) 객체(Object)에 프로퍼티 추가하기 자바스크립트(Javascript)에서 배열(Array)에 추가할 때에는 Push() 함수를 사용하여 추가를 할 수가 있었습니다. 객체(Object)에는 어떻게 추가를 하는지 알아보겠습니다. 일단은 프로퍼티를 추가할 때에는 Key 값이 있어야 하고 Key에 따른 Value 값이 있어야 합니다. 프로퍼티 추가할 때에 여러 방법이 있으니 하나씩 알아보도록 하겠습니다. //객체에 프로퍼티 추가방법 //1.객체 생성후 프로퍼티 추가하는 첫번째 방법 let TestData = new Object(); TestData.age = 32; TestData.name = "빨강소"; //2.객체 생성후 프로퍼티 추가하는 두번째 방법 let TestOb..

자바스크립트(Javascript)의 파일 확장자 체크 자바스크립트(Javascript)로 업로드하는 파일의 확장자를 체크하여 파일 업로드 시 일부의 파일 확장자를 제한이 가능합니다. 특히, 이미지 파일의 확장자를 체크하여 파일 업로드 시 확장자를 제한이 가능합니다. 방법으로는 업로드되는 파일명의 뒷자리에서부터 '.'을 찾아서 체크를 할 수 있습니다. 뒷자리에서부터 '.'을 찾을때에는 lastIndexOf() 함수를 사용하여 찾을 수 있습니다. //파일 확장자 체크하기

자바스크립트(Javascript)의 Image 사이즈 구하기 자바스크립트(Javascript)로 Image 사이즈를 확인하는 방법입니다. 제일 먼저 input 태그로 Image 파일을 첨부하고 Image 파일의 값의 사이즈를 알아보도록 하겠습니다. // Image 업로드후 이미지 크기 확인하기 참고로 clientWidth와 clientHeigt는 border와 스크롤바의 크기는 제외되는 값으로 실제 보이는 대상이 차지하는 공간의 값을 확인하게 됩니다.