본문 바로가기

Frontend13

[JS] input value에 숫자, 마침표, 하이픈만 입력 가능하게 하기 input value에 숫자만 입력 가능하게 onKeyup="this.value=this.value.replace(/[^0-9]/g,'');" 숫자, 마침표만 입력 가능하게 onKeyup="this.value=this.value.replace(/[^-\.0-9]/g,'');" 숫자, 마침표, 하이픈만 입력 가능하게 onKeyup="this.value=this.value.replace(/[^-\.0-9-]/g,'');" 출처 : https://soraji.github.io/js/2020/11/16/%EC%88%AB%EC%9E%90%EB%9E%91%EB%A7%88%EC%B9%A8%ED%91%9C%EB%A7%8C%EB%82%98%EC%98%A4%EB%8A%94js/ 2022. 4. 25.
[JS] $.each(), Array.forEach(), Array.some() $.each() //방법 //선언된 Array의 개수만큼 반복 실행 $.each(Array, callback function(index, value) { //반복되는 내용 } //예제 const arr = ["item1", "item2", "item3"]; $.each(arr, function(index, value) { console.log("index= " + index + ", value= " + value); //return true; ➡ for문의 continue 역할 //return false; ➡ for문의 break 역할 } Array.forEach() //방법 Array.forEach(callback function(value, index, array) { //반복 내용 }); //예제 .. 2022. 4. 25.
[jQuery] $(document).ready()와 $() .ready() DOM (Document Object Model)이 완전히 불러와지면 실행되는 이벤트 브라우저가 HTML을 보여주기 위한 순서 문서 구조 생성 문서 구조가 만들어진 시점에서 .ready() 이벤트 실행 - 계속 발생 DOMContentLoaded 이벤트 실행 - 한 번만 발생 문서 구조 위에 디자인 입히기 문법 .ready(handler) 사용법 //기본 표현 방법 $(document).ready(function() { //실행할 기능 정의 }); //다른 표현 방법 //1. $() - jQuery 3.0 ver. 이후부터 권장되는 구문 $(handler) //2. .ready() 이벤트 - jQuery 1.8 ver.에서 deprecated됨 + 3.0 ver. 지원 X $(docume.. 2022. 4. 7.
[JS/jQuery] 버튼 활성화/비활성화 (+ fieldset) input 태그의 disabled 속성 버튼 클릭 ➡ 활성화/비활성화 1. JS function btnActive() { const target = document.getElementById("btnId"); target.disabled = false; ] function btnDisabled() { const target = document.getElementById("btnId"); target.disabled = true; } 2. jQuery $(function() { //버튼 비활성화 //방법1 $("#btnId").prop("disabled", true); $("#btnId").attr("disabled", "disabled"); //방법2 //메서드 체인 방식 $("#btnId").click.. 2022. 3. 28.
[JS] 팝업창에서 부모창으로 form submit 팝업창에서 바로 submit 하면 팝업창 자체에서 target = "_self" 로 인식되어 submit 되어버림 팝업창에서 부모창으로 submit 하려면 target = "부모창" 으로 지정해줘야 함 JS function fnSubmit() { const form = document.popForm; window.opener.name = "parentPage"; //부모창 이름 임의 설정 form.target = "parentPage"; //타겟 = 부모창 form.action = "/sample/parent.do"; //부모창으로 이동 form.submit(); self.close(); //팝업창 닫기 } HTML 2022. 3. 22.
[JS/jQuery] document.getElementById vs jQuery$() document.getElementById('content'); //returns a HTML DOM Object var content = $('#content'); //returns a jQuery Object jQuery에서 document.getElementById()와 동일한 결과를 얻으려면? jQuery 객체에 접근 그 객체의 첫 번째 요소(element)를 가져와야 함 (JS 객체는 associative arrays처럼 act한다는 점을 기억해야 함) var content = $('#content')[0]; //returns a HTML DOM Object 출처 : https://theemeraldtablet.tistory.com/entry/httpstackoverflowcomquestions.. 2022. 2. 17.
[CSS] 테이블(table, td) 여백 제거 table { border-spacing: 0px; border-style: none; padding: 0px; } td { border-spacing: 0px; border-style: none; padding: 0px; } 2022. 2. 10.
[JS] 문자열 ➡ 배열로 변환(split) split() 함수 //문법 String.split(separator, limit) 1. 정의 문자열(String)을 구분자(separator)로 잘라서 제한된 크기(limit) 이하의 배열에 잘라진 문자열을 저장 후 반환 2. 역할 2.1. separator 필수 X 문자열 자를 구분자(문자열 or 정규식) 값이 입력되지 않으면 문자열 전체를 배열에 담아 반환 2.2. limit 필수 X 최대 분할 개수 [예제1] 매개변수 입력 X 매개변수 전달값이 없을 시, length = 1 인 배열에 문자열 전체를 통째 저장 const str = "apple banana orange"; const arr = str.split(); document.writeln(arr); // apple banana orange .. 2022. 2. 9.
[JS] 문자열 자르기(substr, substring, slice) 문자열 자르는 함수 //substr() str.substr(start[, length]) //substring() str.substring(indexStart[, indexEnd]) //slice() str.slice(beginIndex[, endIndex]) 위 세 가지 함수의 인수 중 대괄호([]) 부분은 생략 가능 생략 시 시작 위치부터 문자열 끝까지 자름 substr() * 문법 substr("시작 위치", "길이") substr("시작 위치") * 정의 시작 위치부터 해당 길이만큼 문자열을 자르는 함수 "길이" 부분을 생략하면 시작 위치부터 문자열 끝까지 자름 * 예제 var str = '자바스크립트'; var result1 = str.substr(0, 2); // 자바 var result2 =.. 2022. 2. 9.
[JS] 왼쪽에 붙은 0 제거하기 정규식 활용하기 replace(/(^0+)/, "") 정규식 활용 예제 JS var id = "0000000123"; id = id.replace(/(^0+)/, ""); //결과값 //var id = "123" ➡ 해당 정규식은 자바(Java)에서도 사용 가능 Java String str = "0000000123"; str = str.replace(/(^0+)/, ""); //결과값 //String str = "123"; 출처: https://nine01223.tistory.com/323 2022. 1. 6.
[JS] 공백 제거 - replace(), trim() 자바스크립트로 문자열의 공백 제거하기 replace() 공백을 빈 값으로 교체 가능 var str = "A B C D E"; str.replace(" ", ""); //AB C D E var str = "A B C D E"; str.replace(/ /g, ""); //ABCDE //문자열의 모든 공백을 제거하기 위해 정규식(/ /g) 활용 //정규식: / / 사이의 값을 replace의 2번째 인자값으로 교체 가능 //정규식의 g: 문자열의 모든 / / 사이의 값을 바꿔줌 문자를 교체하는 것이기에 공백이 아니더라도 사용 가능 var str = "A가a나A다a"; str.replace(/a/g, ""); //A가나A다 str.replace(/a/gi, ""); //가나다 //정규식의 gi: i 옵션을 주.. 2022. 1. 5.
[JS/jQuery] action, submit HTML Submit JavaScript function fnSubmit() { var form = document.formName; form.submit(); } jQuery function fnSubmit() { $('#formId').attr('action', 'action.do').submit(); } 2021. 11. 3.

티스토리툴바