팁스토리, Tips

■ Javascript textarea 영역에서 tab key 적용하기 탭키 적용 onkeyup textarea 에서 탭키 사용 시 들여쓰기 적용되게 설정하기 위함 ■ 사용법

■ Javascript sweetAlert (알림팝업창) 사용하기 (사용법, 사용예제) ■ 플러그인 추가 ■ 사용법 swal('제목', '내용', '아이콘'); ■ 아이콘 ■ 예제 swal('로그인 실패!', "아이디와 비밀번호를 확인해 주세요", 'warning');

■ Javascript Toast 창 토스트 메시지 띄우기 (사라지는 모달창) Toast(토스트) 메시지 창 짧은 메시지를 사용자(유저)에게 일정 시간 노출시킨 후 자동으로 사라지는 팝업으로 버튼 클릭 또는 어떠한 액션을 취한 이후 변경시점 또는 정보 전달 시 직관적으로 알려주기 좋음 ■ 예제 CSS #toast { position: fixed; bottom: 30px; left: 50%; padding: 15px 20px; transform: translate(-50%, 10px); border-radius: 30px; overflow: hidden; font-size: .8rem; opacity: 0; visibility: hidden; transition: opacity .5s, visibility..

■ Javascript checkbox 체크여부로 form submit, name 접근 ■ 예제 1. input type="checkbox" 클릭마다 실행 함수 지정 (onchange) 2. 체크박스 클릭 시 (선택 시) 1) name="tmpInput" 값을 "checked"로 설정 2) name="tmpFrm" submit

■ Javascript bootstrap TreeView 트리구조 구현, bstreeview js ■ JS 공식 사이트 Dynamic Tree List Plugin For Bootstrap - BSTreeView A tiny (less than 2kb minified) tree view plugin that dynamically renders a collapsible/expandable tree list using Bootstrap 4 list group component. www.jqueryscript.net ■ 압축파일 ■ 파일실행 (index.html) ■ 응용 # 기존 div 클릭 시 li가 펼쳐짐 ▷ 수정 1. >버튼 클릭 시 만 li 컨트롤, 수정 2. li가 미리 다 펼쳐져 보이게 조정 # ..

■ Javascript 문자열 내 초성 검색 하이라이트 효과주기 문자열 또는 문장 내 검색한 초성과 일치하는 단어에 하이라이터 효과 처리 ■ 예제 순서 1. 검색어와 비교문자열 모두 초성으로 변환시킨다. 2. 비교할 문자열에서 검색한 문자열이 포함될 수 있는 위치의 인덱스를 모두 구해온다. 3. 구한 인덱스들을 반복 시키면서 비교문자열에서 해당 인덱스 위치 부터 검색어의 길이만큼 가져온다 -> 초성으로 바꾼 검색어와 같은 문자열이 나옴 4. 검색어가 초성이 아닌 글자의 인덱스를 찾고 5. 초성으로 변환한 비교 문자열의 위에서 나온 인덱스의 문자를 원본 비교문자로 치환 6. 5번 결과의 문자열과 원본 검색어를 비교해 일치 시 반환 ■ 예제 // 문자열 초성으로 변환 function cho(str){ var..

■ Javascript 배열 내 특정값 포함여부 체크 indexOf(), includes() ■ 설명 indexOf() 배열 내 특정값과 정확하게 일치(===) 하는 첫번째 요소(element)의 인덱스(index)를 리턴함 특정값이 배열 내 없을 경우 "-1"을 리턴함 includes() 배열 내 특정값을 포함하고 있는지 boolean 값을 리턴함 (간단히 값의 유무 확인 시 사용) ■ 예제 var newArr = [0, 1, 2, 3, 4, 5]; // 1. indexOf() console.log(newArr.indexOf(2));// 2 console.log(newArr.indexOf(6));// -1 // 2. includes() console.log(newArr.includes(2));// tr..

■ Javascript input text 핸드폰번호 자동으로 하이픈 입력 ■ 코드

■ Javascript 배열을 문자열로 변환, 한줄로 합치기 join(),toString() ■ 사용법 join() * 배열의 각 값들 사이 원하는 구분값으로 변환할 수 있고, 아무것도 전달하지 않으면 콤마(,)로 구분됨 구분값 없이 하나의 문자열로 리턴받고 싶다면 비어있는 문자열 ("") 값을 전달하면 됨 toString() * 배열의 각 값들 사이 콤마(,)로 구분된 하나의 문자열을 리턴

■ Javascript form action 값 변경 ■ 사용법 document.formId.action = "new_action.php";