JS 검색 결과
19 개의 검색 결과가 있습니다.
JavaScript

JSP <script></script> 스크립트 영역에서 백틱 (템플릿 리터럴) `${변수}` 사용

JSP 문서상 스크립트 영역 내부에서 문자열을 만들고 변수에 담을 때 `내용` (백틱) 사용하고 내부에 변수를 사용하고 싶은데, JSP의 EL(Expression Language) 표현식 ${}와 JavaScript의 템플릿 리터럴 ${}가 동일한 구문을 사용해서 충돌이 나서 문제가 될 수 있는데 이럴 때는 아래처럼 JSP EL 표현식이 템플릿 리터럴을 감싸는 형식으로 작성해주면 된다

2023. 11. 4. 11:51
JavaScript

자바스크립트 태그 text 변경 감지 (div, span, ...) (input X) with MutationObserver

html input 태그가 아닌 div 나 span 등 태그의 text 가 변경될 때 감지하고 싶은 경우에는 MutationObserver 라는 DOM(Document Object Model)의 변경 사항을 감지하고 이벤트 처리를 위한 웹 브라우저의 DOM API를 활용하여 구현할 수 있다. 기존 텍스트 텍스트 변경 버튼 ↓ '텍스트 변경 버튼' 클릭 후

2023. 10. 28. 11:48
JavaScript

JS 호이스팅 / JavaScript Hoisting 자바스크립트 호이스팅

호이스팅(Hoisting)이란? 자바스크립트(JavaScript)에서 변수와 함수 선언이 스코프 내에서 코드의 맨 위로 끌어올려지는 동작 *아래 예시들은 위에서 부터 순서대로 코드가 작성 되었다고 가정. Temporal Dead Zone (TDZ) : ECMAScript 6(ES6)에 도입된 개념으로 let 또는 const 키워드를 사용하여 호이스팅 시 선언 이후 초기화 되기전 머무르는 일시적인 죽음의 지대(?)로 초기화 이전에 접근하려고 하면 참조 에러를 발생 시킴 // 변수 console.log(examVar); // undefined 가 출력 /* var 는 변수 선언이 호이스팅되고 변수 초기화 전에 우선 undefined 로 초기화 되어 undefined 출력시킴 */ var examVar = 1..

2023. 9. 3. 10:30
Thymeleaf

thymeleaf 타임리프 /*[[${변수명}]]*/ null; | 서버단에서 넘긴 변수 클라이언트 단 스크립트 영역에서 받아 js 변수에 할당 하기

서버 사이드 템플릿 엔진 타임리프(thymeleaf)를 사용하는 환경에서 서버단에서 넘긴 변수를 영역 안에서 받아서 js 변수에 할당하려고 할 때 (var '변수명' = /*[[${'변수명'}]]*/ null;) * script 영역 선언 여는 태그에 th:inline="javascript" 명시하지 않는 경우

2023. 8. 19. 10:49
JavaScript

jQuery 제이쿼리 .eq() 메서드 => 순수 JavaScript (바닐라JS) 방식으로 대체

jQuery(제이쿼리)를 이용하여 요소들을 선택($(''))하고 해당 요소들을 반복하여 접근(.eq(i))하는 방법을 jQuery(제이쿼리) 없이 순수 자바스크립트 (바닐라JS)로 구현 해보도록 하자. 버튼

2023. 8. 12. 07:29
JavaScript

JS .map() / JavaScript .map() / 자바스크립트 배열 메서드 / 자바스크립트 .map() 메서드

.map() 메서드는 JavaScript의 내장 함수 중 하나이며, ECMAScript 5 (ES5) 스펙에서 추가 (ES5는 2009년에 표준화된 버전) 배열(Array)의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 생성 - 빈 배열을 반환하거나 기존 배열의 길이와 같은 새로운 배열을 반환 - 배열에만 사용할 수 있고, 배열의 요소를 변형할 때 주로 사용 /* 활용 예시 1. 문자열형 숫자 배열을 정수형 배열로 */ const strNumArr = ['1', '2', '3', '4', '5']; // 숫자형식의 문자열 배열 // 각 요소를 숫자로 변환하여 새로운 정수형 배열을 생성 const intNumArr = strNumArr.map(str => parseInt(str,..

2023. 7. 23. 13:01
JavaScript

JS / JavaScript function / 자바스크립트 함수 매개변수 기본값 설정

매개변수가 없는 함수를 만들고 여러 곳에서 호출하여 사용하다가 함수 내부 로직을 수정하는데 함수 호출 시 매개변수를 빋아 그 값을 기준으로 분기하여 로직을 처리해야 한다면, 이미 작성한 함수 호출 구문들에 인자값을 넣어줘야 한다. 혹은 특정 상황 에서 호출 시 구분하기 위해 매개변수가 필요한 경우라면 나머지 함수 호출 시에 굳이 인자값을 넣어줄 필요가 없는 경우도 있을 것 이다. 이럴 때 특정 상황에서만 함수 호출 시 인자값을 주고 싶다면 함수 정의 시 매개변수의 기본값을 지정하여 상황에 맞게 활용 할 수 있다. /* 예시 : 매개변수의 기본 값을 설정하여 함수를 정의 */ function testFunc(type = 'default') { if(type === 'default'){ // 매개변수 없이 ..

2023. 7. 16. 11:51
JavaScript

JavaScript 자바스크립트 객체의 key 존재여부 확인하기

JS에서 객체 (object) 가 특정 key 를 갖고 있는지 확인해야 할 경우가 있으면 다음과 같은 방법들을 사용할 수 있다. /* in 연산자 => 자바스크립의 내장 연산자로, 특정 객체가 특정 속성(키)을 가지고 있는지를 확인 */ let obj = { key1: 'value1', key2: 'value2', key3 : 'value3'}; if ('key2' in obj) { console.log('key2 키값이 존재함'); }else{ console.log('key2 키값이 존재하지 않음'); } /* hasOwnProperty() 메서드 => 모든 자바스크립트 객체에서 상속되는 메서드로, 해당 객체가 특정 속성(키)을 직접 소유하고 있는지 확인 */ let obj = { key1: 'valu..

2023. 6. 25. 23:25
JavaScript

JavaScript 자바스크립트 객체명.key로 value에 접근시 key에 '.' (점)이 포함되어 있는 경우

자바스크립트에서 객체의 키 값으로 밸류에 접근할 때 객체명.key 방식으로 밸류에 접근할 때 키 값에 '.' (점) 이 포함되어 있는 경우 에러가 발생할 수 있다. (Uncaught SyntaxError: Unexpected token '.') 그래서 보통 키 값으로 '.' (점) 같은 특수기호나 예약어 등 을 사용하지 않는데 키 값으로 '.' (점) 사용 자체가 제한되는 것은 아니며 서버단에서 받아온 객체 형태의 데이터의 키 값에 '.' (점) 이 포함되어 있을 수 도 있어서 이럴 경우 객체명.key 로 value에 접근하려고 하면 에러가 나기 때문에 다른 방법으로 접근해야 한다. /* 대괄호를 사용 */ let obj = { 'this.is.key': 'this is value' }; console...

2023. 6. 17. 16:49
JavaScript

JavaScript select 자바스크립트 셀렉트박스 제어 (옵션 값 변경 감지, 선택된 옵션 value & text 값 얻기, change 이벤트 강제 발생)

클라이언트 단에서 셀렉트 박스의 옵션 값이 변경될 때 마다 특정 작업을 수행하도록 만들려는 경우가 있다. 셀렉트박스 옵션 변경 감지 ('change') 이벤트 핸들러 (정적 & 동적 셀렉트박스 모두 적용) /* jQuery 제이쿼리 */ $(document).on('change', '션택자', function(e) { $(this).val(); // 변경된 옵션의 value 값 $(this).text(); // 변경된 옵션의 text 값 // 이벤트 발생 시 수행할 코드... }); /* 바닐라 JS (순수 자바스크립트) */ document.addEventListener('change', function(e) { var target = e.target; if (target.matches('선택자')) ..

2023. 6. 10. 15:32