js

문서 객체 모델 DOM은 무엇인가? - DOM의 개념, 종류, 구조 등 문서 객체 모델 (DOM)이란? 문서 객체 모델(DOM, Document Object Model)은 웹 페이지에 대한 인터페이스 입니다. DOM은 문서 내의 모든 요소를 정의하고, 페이지의 콘텐츠 및 구조, 스타일 등 각각의 요소에 접근하여 읽고 조작할 수 있는 API를 제공합니다. 즉, 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다. 이러한 DOM은 HTML, ECMAScript에서 정의한 표준이 아닌 W3C의 표준 객체 모델이며, 아래와 같이 계층..

JavaScript == 와 === 의 차이점 자바스크립트에서 값을 비교할 때에 == 또는 === 을 사용해 값을 비교합니다. 이때 비교연산자 == 과 ===의 차이점에 대해 알아보겠습니다. == 와 === 차이점 먼저 자바스크립트를 사용하면서 === 연산자를 사용하는 경우가 더욱 많습니다. 이유는 == 에는 형변환 기능이 암묵적으로 발생합니다. (숫자와 문자열 비교 시 양쪽 모두 문자열로 변환해서 비교) == 와 === 예제 console.log(1004 == "1004");// true ("1004"를 1004으로 변환) console.log(1004 === "1004");// false (변환 X) console.log(1000 == "1e3"); // true ("1e3"을 1000으로 변환) c..

DataTables 사용법 및 예제 ✔️ DataTables는 을 그리드 형식으로 사용하고 표시 건수 제어, 페이징, 정렬, 검색, 필터, 스크롤 기능 등을 제공하는 라이브러리다. DataTables는 서버에서 데이터를 JSON으로 받아 표시할 수 있으며, 아래와 같은 기능이 제공되어 추가할 수 있다. - 표시 건수 제어 기능 - 검색 기능 - 정렬 기능 - 필터 기능 - 스크롤 기능 DataTables - JSON 데이터 테이블에 출력하기 DataTables를 사용하기 위해서는 DataTables의 JS파일, CSS파일, jQuery를 필요로 합니다. [ {"id" : "JSON01", "name" : "제이슨01", "location" : "서울"}, {"id" : "JSON02", "name" : ..

JavaScript 클릭 이벤트(click event) 사용법 클릭 시 어떠한 이벤트가 발생하기 위해서는 onclick / click 함수를 사용합니다. 자바스크립트의 클릭 이벤트를 활용하는 방법을 알아보겠습니다. 사용법 1 먼저 HTML 앨리먼트 태그에 onclick="" 을 붙여 사용하는 방법입니다. 클릭하세요. 사용법 2 다음은 자바스크립트로 앨리먼트를 직접잡아 핸들링하는 이벤트 활용 방법입니다. 클릭하세요.

JavaScript - change 이벤트 처리하는 방법 자바스크립트의 onchange() 이벤트는 셀렉트 박스의 값이 변경될 때 자주 사용합니다. selectbox의 옵션을 클릭할 때! 즉, 값이 변경될 때 onchange() 이벤트에서 사용자가 지정한 함수를 호출하여 사용할 수 있습니다. 문법 1 우선 HTML 태그에 직접 onchange를 명시하여 호출하는 방법을 알아보도록 하겠습니다. select 태그에 onchage를 아래와 같이 붙이게 되면 option값이 선택될 때 해당 함수 f_changeFunc(this) 가 호출됩니다. 직무를 선택하세요. 개발 인사 마케팅 직접입력 f_changeFunc 함수를 호출할 때 this로 자기자신을 파라미터로 전달하였기 때문에 해당 스크립트 함수에서는 $(변..

선택한 앨리먼트의 내부 요소를 지우는 메서드 - empty() empty() 란? .empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다. 태그를 포함한 요소 전체를 제거할 때는remove()를 사용합니다. 문법 .empty() 예를 들어 empty() empty() 메서드에 대해 알아봅시다. 일 때 $('#content').empty(); 를 하게 되면 아래와 같이 바뀐다.

자바스크립트로 날짜 포맷형식 변경 함수 구현하기 날짜 데이터를 핸들링하면서 문자열로 받은 날짜와 시간 등을 요구 포맷형식에 맞게 변경해야 할 때가 종종 있다. 그래서 함수로 따로 구현하여 요구마다 쉽게 대응하여 return 받을 수 있는 함수를 따로 만들어 놓기로 했다. dateFomatter 함수 구현 활용 참고로 아래 f_dataFormatter(str) 함수의 str 값은 "20210421183524" 형식의 파라미터입니다. // 원하는 날짜 형식으로 포맷하여 return하는 함수 function f_dateFormatter(str){ if( str == "" || str == null || str == undefined){ // parameter 값이 빈 값일 때 원하는 문자열로 return re..

JavaScript로 빈 값 체크 함수 구현 JavaScript를 사용하여 데이터 값의 null 체크를 할 때마다 유효성 체크를 한다면 코드도 길어질 뿐만 아니라 같은 코드의 중복이 많기 마련이다. 그래서 값이 없는 데이터를 체크하는 함수를 만들어 필요할 때마다 가져다 쓰기로 했다. 빈 값일 시 "" 로 return 하는 함수 // 빈 값일 시 문자열 "" return function f_strNullCheck(str){ var newStr = str; if(newStr == null || newStr == "" || newStr == undefined || newStr == "undefined") { newStr = ""; } return newStr; } 빈 값일 시 0으로 return 하는 함수 /..