javascript
-
[JavaScript] 생성자개발/JavaScript 2022. 9. 11. 16:02
객체를 생성하는 함수를 생성자 함수라고 부릅니다. 다른 언어에서는 class가 있즈민 자바스크립트에서는 없기 때문에 생성자 함수를 이용하여 그 역할을 대신 합니다. 생성자 함수의 필요성 여러개의 동일한 프로퍼티를 가지는 객체를 생성하기 위해서 필요. Prototype을 이용하여 메모리 절감을 위해서 필요. 생성자 함수의 형태 생성자명 : 대문자로 시작 (일반 함수와 구별을 하기 위한 암묵적인 규칙? 관례) 내부의 식별자 선언(var 식별자) 없음 내부의 메소스 선언(var 식별자 = function (){}) 없음 "this.프로퍼티"를 통해서 프로퍼티 명시만 가능 생성자 함수의 사용법 new 키워드를 통하여 생성자 함수를 호출한다. ex) var 생성자 = new 생성자명(); 생성자 함수 생성 과정 ..
-
[JavaScript] addEventListener개발/JavaScript 2022. 8. 26. 15:57
이벤트 처리기를 등록하는 방법중 addEventListener가 사용하도록 가장 권장 된다고 합니다. 사용법 target.addEventListener(type, listener, useCapture); target: 이벤트 리스너를 등록할 DOM 노드 type: 이벤트 유형을 뜻하는 문자열 ex) "click", "mouseup" etc. useCapture: 이벤트 단계, 캡처링/버블링(default) 단계 설정 가능 listener: 이벤트가 발생했을 때 처리를 담당하는 콜백 함수의 참조 사용예 (등록) window.onload = function() { var el = document.getElementById('box'); el.addEventListener('click', function(e)..
-
[Thymeleaf] JavaScript에서 Thymeleaf 변수 사용하기카테고리 없음 2022. 8. 19. 16:37
타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있도록 자바스크립트 인라인 기능을 제공합니다. 사용법 인라인 사용 전 렌더링 결과를 보면 userA라는 변수 이름이 그대로 남아 있다. 타임리프 입장에서는 정확하게 렌더링 한 것이지만 기대한 값은 "userA"라는 문자이다. 결과적으로 userA가 변수명으로 사용되어서 자바스크립트 오류가 발생한다. 숫자 age의 경우에는 "가 필요 없기 때문에 정상 렌더링 된다. 인라인 사용 후 렌더링 결과를 보면 문자 타입인 경우 "를 포함해준다. 자바스크립트에서 문제가 될 수 있는 문자가 포함되어 있으면 이스케이프 처리를 해준다. " => \" 2. 내추럴 템플릿 타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공한다. 주석을 활용해서 ..
-
[JavaScript] 정규표현식 모음개발/JavaScript 2022. 8. 5. 17:57
정규식 플래그 Flag Meaning Description i Ignore Case 대소문자를 구별하지 않고 검색한다. g Global 문자열 내의 모든 패턴을 검색한다. m Multi Line 문자열의 행이 바뀌더라도 검색을 계속한다. s .(모든 문자 정규식)이 개행 문자 \n도 포함하도록 u unicode 유니코드 전체를 지원 y sticky 문자 내 특정 위치에서 검색을 진행하는 ‘sticky’ 모드를 활성화 정규표현식 매칭 패턴 패턴 의미 a-zA-Z 영어알파벳(-으로 범위 지정) ㄱ-ㅎ가-힣 한글 문자(-으로 범위 지정) 0-9 숫자(-으로 범위 지정) . 모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두! 단, 줄바꿈X) \d 숫자 \D 숫자가 아닌 것 \w 밑줄 문자를 포함한 영..