dev/자바스크립트 (20) 썸네일형 리스트형 자바스크립트 replaceAll 자바스크립트 문자열에 replace라는 함수가 존재하지만 replaceAll 함수는 존재하지 않습니다. 이럴 때 정규표현식을 사용하면 쉽게 해결할 수 있습니다. 위의 예시를 보게 되면 ', '를 공백으로 대체하고 있는데 ', '(콤마)를 '/'으로 감싸고, 'g'는 모든 패턴에 대한 전체 검색, 'i'는 대소문자 구분 x 조건으로 콤마를 대체하고 있습니다. 앞으로 replaceAll을 사용할 일이 있으면 replace와 정규표현식을 조합해서 사용하면 될 거 같습니다. 비밀번호 안전도 회원가입 페이지 개발하다 보면 비밀번호 안전도가 필요한 경우가 있습니다. 비밀번호에 대소문자, 숫자, 특수문자가 포함되어있는지 체크하는 기능입니다. 자바스크립트 정규표현식으로 비밀번호 안전도를 체크하겠습니다. 소스를 보게 되면 1번재 라인에 비밀번호 안전도 체크하는 checkPassword라는 함수를 만들었고 "password"라는 파라미터를 받고 있습니다. 2번째 라인에 결과값을 선언했습니다. 4번째 라인부터 11번째 라인까지 비밀번호 길이를 체크하는 구간이고 비밀번호 길이가 0이거나 9자 미만 20자 초과인 경우 함수를 종료하고 있습니다. 13번째 라인부터 17번째 라인은 비밀번호 조건(정규표현식)을 배열에 추가했습니다. (영문 대문자, 영문 소문자, 숫자, 특수문자) 19번째 라인부터 25번째 라인.. 이전 페이지 이동 자바스크립트에서 이전 페이지로 돌아가는 기능이 가끔 필요할 때가 있습니다. 예를 들면 상세 페이지 조회하다가 목록 페이지로 돌아가는 경우를 들 수 있습니다. 이럴 때 "window.history.back();"를 사용하면 쉽게 해결할 수 있습니다. 자바스크립트 객체 생성 자바스크립트를 통해서 객체 생성하는 방법을 포스팅하겠습니다. class를 통해서 할 수 있지만 여기서는 function을 사용하겠습니다. (회사에서 자주 사용하고 있는 방법... 이 방법 말고도 다양하게 객체 생성할 수 있습니다.) 위의 소스를 보면 일반적으로 자바 클래스를 정의한 것과 비슷하게 속성과 메소드가 있습니다. (속성 : 2~3라인, 메소드 : 10~17라인) 그리고 생성자 역할을 하는 메소드도 정의 및 호출되고 있습니다.(5~8라인, 19라인) 마지막으로 정의한 메소드를 리턴하고 있습니다.(21~28라인) 메소드를 리턴하지 않으면 호출할 수 없기 때문에 리턴해야 합니다. 이제 객체가 제대로 생성이 되는지 확인해보겠습니다. 객체에 속성 값으로 전달할 options를 정의하고, 객체를 생성합니다.. callback 함수 사용 프로젝트를 하다 보면 callback 함수를 알게 모르게 사용하는 경우가 많이 있습니다. 제이쿼리 onClick 함수나 자바스크립트 setInterval 함수를 예로 들 수 있습니다. 하지만 제이쿼리나 자바스크립트가 기본적으로 제공하는 callback 함수가 아닌 직접 커스터마이징 한 callback 함수를 사용해야 할 때가 있습니다. 간단한 예를 보이겠습니다. 위 함수를 설명하면 파라미터 2개를 받습니다. 첫 번째 파라미터 data는 사용자로부터 입력받는 정수 파라미터로 1을 더해 callback 함수에 파라미터(val1)로 전달합니다. 두 번째 파라미터 callback은 커스터마이징 한 callback 함수가 호출될 때 실행하는 함수를 치환한 파라미터입니다. 주석으로 1번, 2번 표시된 부분은 cal.. javaScript 객체 순회 회사 프로젝트에서 데이터를 추가하거나 수정할 때 아니면 데이터를 파싱 할 때 데이터 유무를 체크하는 기능이 필요한 경우가 항상 있었는데 if문을 여러 개 써서 사용하는 것이 비효율적이라고 생각했습니다. 그래서 다른 방법이 없나 찾아보다가 for-in, for-of를 사용하면 쉽게 해결된다는 것을 알게 되었습니다. 먼저 for-in을 사용한 예부터 보겠습니다. 위 예시를 보게 되면 obj라는 Obejct를 생성하고 아래의 for-in 문에서 Object를 순회하면서 key와 value를 각각 표출하고 있습니다. 따라서 key, value를 조회할 수 있으므로 value가 없는 경우 예를 들면 사용자 이름이 없는 경우 사용자 이름이 없음을 사용자에게 알릴 수 있습니다. (alert 함수 또는 팝업 사용) 다.. 배열 find filter 자바스크립트에서 배열을 특정 조건에 따라 처리할 때 find나 filter를 사용합니다. 예제코드를 보면 특정 조건, 3보다 큰 요소는 find와 filter를 사용해서 따로 처리하는 것을 확인할 수 있습니다. find는 특정 조건에 맞는 첫 번째 요소를 반환하지만 filter는 특정 조건에 맞는 요소들을 반환합니다. 다시 정리하면 find는 특정 조건에 맞는 요소를 1개 아님 0개를 반환하지만 filter는 특정 조건에 맞는 요소를 n개 반환합니다. 그리고 find와 filter는 람다를 사용하기 때문에 코드를 간단하게 작성할 수 있는 장점이 있습니다. jQuery clone 메소드 얼마 전에 jquery api 문서를 참고하다가 우연히 clone 메서드를 봤는데 지금까지 몰랐던 clone의 새로운 속성을 알게 되었습니다. clone 메소드를 사용할 때 파라미터로 true를 주게 되면 기존 템플릿에 이벤트가 있었다면 그대로 그 이벤트가 유지된다는 것입니다. 저 같은 경우 템플릿을 복사해서 데이터를 표출할 때 이벤트가 걸리지 않은 템플릿을 복사(clone)한 뒤 이벤트를 추가했는데 파라미터로 true를 넘기게 되면 이벤트가 걸린 기존 템플릿에 이벤트를 추가하지 않고 그대로 사용할 수 있습니다. ================================================================ ---jsp template ---javaScript function clon.. 이전 1 2 3 다음
