프로그래밍언어/자바스크립트

[Javascript] 파일 첨부 이미지 미리보기 기능 구현 - 코드, 예시, 설명

jsp, js, jquery 환경에서 파일 이미지 미리보기 기능 구현하기 첨부파일 기능을 개발할 때 확장자 제한, 파일명 길이 제한, 파일 사이즈 제한과 같은 기능들을 주로 구현하는데 만약 이미지 파일 업로드가 목적이라면 미리보기(Preview) 기능이 필요할 때도 있다 📌 기능 0. 파일 첨부 1. 확장자 제한 2. 파일 사이즈 제한 3. 파일명 길이 제한 4. 이미지 미리보기 5. 미리보기 이미지 클릭시 원본크기 팝업 📌 예시 이미지 첨부 위의 코드는 기능 구현 테스트를 위한 샘플 html 코드이다 가독성을 위해 css가 복잡하게 적혀있지만 기능 구현과는 관련 없고 body 영역이 중요하다 filebox 안의 label은 파일 첨부를 위한 버튼의 개념이고 실제 파일이 첨부되는 곳은 input type..

[Javascript] String 메소드 총 정리 (종류, 문법, 예시, 활용) - 2편

자바스크립트 String 메소드 총 정리 자바스크립트에서 가장 자주 쓰는 객체인 String의 prototype method에 대해 전부 살펴볼건데 분량이 많아 1, 2편에 나누어 포스팅해보려한다 사실 정의나 문법같은 부분들을 알고있어도 어떻게 활용해야할지 어렵게 느껴질 수 있다 그래서 간단한 코딩테스트 문제를 만들어서 각각 어떻게 활용하면 좋을지 학습할 수 있도록 정리했다 💌 1편은 아래 참조! 2022.05.09 - [프로그래밍언어/자바스크립트] - [JS] String 메소드 총 정리 (종류, 문법, 예시, 활용) - 1편 [JS] String 메소드 총 정리 (종류, 문법, 예시, 활용) - 1편 자바스크립트 String 메소드 총 정리 자바스크립트에서 가장 자주 쓰는 객체인 String의 pro..

[Javascript] String 메소드 총 정리 (종류, 문법, 예시, 활용) - 1편

자바스크립트 String 메소드 총 정리 자바스크립트에서 가장 자주 쓰는 객체인 String의 prototype method에 대해 전부 살펴볼건데 분량이 많아 1, 2편에 나누어 포스팅해보려한다 사실 정의나 문법같은 부분들을 알고있어도 어떻게 활용해야할지 어렵게 느껴질 수 있다 그래서 간단한 코딩테스트 문제를 만들어서 각각 어떻게 활용하면 좋을지 학습할 수 있도록 정리했다 ✔ 메소드는 사전순이 아닌 비슷한 기능들 끼리 묶어 정리했다 ✔ 코드블록의 변수 str는 "hello"이다 ✔ 활용에 해당하는 문제를 풀때 반복문을 사용해야한다면 for을 사용했다 ⚾ charAt(), charCodeAt(), codePointAt() 문법 String string.charAt(Number index) 문자열의 ind..

[Javascript] 정규식 관련 유용한 사이트 모음

🍋 정규식 테스트를 해볼 수 있는 사이트 https://regex101.com/ 🍋 정규표현식 예시 검색 사이트 https://regexlib.com/(X(1)A(b1WEVBO6oKmJdKIaGBILD1u1khI9nSe_hvODhfYomF4crwPG5r-mbSHXlsXVEZPVYeyE9JcClmZaMeQuvkYdLraWxUqR2rfESR5mJ9KSBfsmRcpFPlIVmkOi40qXu6cKq5O9V4tU-gRjbuB9v0BQZVSsgbs-lN7OQtVrA5q7xg-W-uXTIImiqyMCMpuS8-250))/Default.aspx Regular Expression Library Welcome to RegExLib.com, the Internet's first Regular Expression Librar..

[Javascript] input 유효성 검사, null 체크 alert

유효성 검사할 때 공통으로 사용하려고 만든 함수이다 CmmnValid.js 라고 공통 js 파일을 만들어두고 함수명 앞에 CV_라고 표시해둔것이니 함수명은 개인적으로 수정하여 사용해도 된다 input을 name 값으로 식별하는 버전이지만 이것도 id로 수정해서 사용해도 된다 🍋 기능 필수로 입력되어야하는 다수의 input들의 null체크를 한다 만약 null일 경우 넘겼던 이름 배열에서 항목 이름을 찾아 "이름 을(를) 입력해주세요" 라는 alert이 뜨면서 해당 input에 커서를 focus 한다 🍋 함수 /****************************************************************************** * Function명 : CV_checkNullInput..