일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- spring3
- nodejs
- config
- yona
- security
- rocky9
- SpringBoot
- git
- jquery
- javascript
- FCM
- mysql
- Next.js
- popup
- submit
- PM2
- ajax
- node.js
- jenkins
- Maven
- Push
- mybatis
- MariaDB
- Eclipse
- pwa
- Java
- centos7
- docker
- NextJS
- MSsql
- Today
- Total
목록javascript (51)
ふたりで
# +,- 버튼에 의한 jquery progressbar 예제. 예를 들어 특정 숫자까지 합을 구하는 데 있어 버튼 클릭 시 합의 기준값까지의 계산 상태를 가시화 할 때 사용. - + # 결과 화면:
업무 공백 중 머리를 놀리기 싫어서 간단하게 실무에서 종종 사용하는 기능을 정리도 할 겸 연습해 보았다... 상단의 라디오 버튼에 의해 다중 리스트의 체크박스를 컨트롤 하는 방법이다. -결과 화면: https://graykang.w3spaces.com/chkbox-select-by-radio-button.html JS Bin graykang.w3spaces.com - html 소스 parent와 children 체크박스 소스에 data 속성 값으로 parent 와 children 간의 연간 관계 값이 세팅되어있고 children 체크 박스는 2종류로 구분 되는 값을 data 속성 값으로 추가로 가지고 있다. parent와 children 간의 연관 관계 및 상단의 라디오 버튼 클릭에 해당되는 parent..
1. submit 하는 경우 아래와 같이 처리. 기본적으로 로딩 중이 표시되도록 하고 화면이 ready 가되면. hide() 시켜준다. 추가로 검색을 submit으로 처리 할경우 아래와 같이 form태그에 onsubmit="return inpValidateFn();" 속성을 주어 해당 속성에 걸린 기능이 true를 반환 할 때만 로딩 중 ui를. show() 해주면 된다.
예전에 스크립트 부분만 간략하게 게시한적이 있는데 좀더 보강한 내용으로 다시 정리 해봤다. #구혀된 기능... - 자동완성: 번호만 입력해도 자동으로 "-"를 넣어준다. - 휴효성검사: >헨드폰, 일반전화 각각 형식에 맞는지 확인. >일반전화인지 확인.(080,070번호는 제외처리) >숫자만 입력 가능 숫자이외의 문자가 입력 되면 지워버림. 휴대폰 휴대폰번호가 입력되지 않았거나, 잘못된 형식입니다. 일반전화 일반번호가 입력되지 않았거나, 잘못된 형식입니다. Fax FAX번호가 입력되지 않았거나, 잘못된 형식입니다. #결과:
선택 요소의 data값 가져오기, 수정하기 의 moden javascript 방법. 주) addEventListener 의 경우 복수 선택자 queryselectorAll과 getElementsByClassName 을 선택자로 사용할 경우 선택 요소가 1개여도 데이터 형식이 collction 타입이기 때문에 for문을 활용하여 설정해야 한다... 아래 소스 코드에서 for()문이 사용된 부분 참고... 체크박스의 data값 찍어보기 체크박스의 변경된 data값 찍어보기 결과1: 결과2:
화면이 로딩될때 체크 박스에 Data 값을 여러게 설정 하고 이후 체크박스에 이벤트가 발생 할 경우 설정된 Data 값을 가져와 조작 하고 업데이트를 할때 참고... 첫번째 체크박스 class="js_checked"를 클릭하면 attribute로 정의된 data 값들을 console에 출력 하며 data값중 pdtstock 의 값을 N으로 업데이트 한다. 이후 두번째 체크박스 class="js_checked1"를 클릭하면 첫번째 체크박스 class="js_checked"를 참조하여 이전에 클릭 하여 변경된 pdtstock 값을 console에 출력 한다. 개발자도구를 사용해 document 요소를 확인 해보면 data-pdtstock에 보여지는 값은 변하지 않지만 실재로는 값이 변경되는걸로 확인 된다. ..