Programming/JavaScript

자바스크립트 - 페이지 로딩시 함수 호출 1. body 태그에 onload 2. window onload window.onload = 함수; 💡 onload 와 ready의 차이점 window.onload 같은 경우는 전체 페이지에 모든 외부 리소스나 이미지가 전부 불러와진 이후에 작동을 하게 된다. 해당 외부 리소스나 이미지의 양이 커 딜레이가 생길 때에는 그만큼의 시간을 기다렸다가 작동을 하게 되는 문제가 있다. 또한 외부 링크나 파일을 include했을 때 그 안에 window.onload가 중복되어 존재하게 된다면 둘 중 하나만 적용되는 큰 문제와 위 예제와 같이 body에서 사용하는 onload를 사용하게 된다면 모든 window.onload가 작동하지 않는 현상이 일어난다. 📌 이러한 문제를 ..

JavaScript 반복문(for 문) forEach, for...of 유형 사용법 및 예제 자바스크립트에서 기본 for문 이외에 forEach 방식과 for...of 방식에 대해서 설명하겠습니다. 지금까지 사용해왔던 for문은 아래 예제처럼 사용했습니다. var arr = [1, 2, 3, 4, 5]; for(var i=0; i { console.log(val); }); for...of 사용법 ✔️이번엔 새로운 반복문 처리 방법인 for...of 사용 방법입니다. var arr = [1, 2, 3, 4 ,5]; for(var val of arr) { console.log(val); } 생각보다 간단하죠? 👉 이터레이터(Iterator) 방식으로 요소를 하나씩 꺼내서 처리하는 방식입니다. 감사합니다.

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

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로 자기자신을 파라미터로 전달하였기 때문에 해당 스크립트 함수에서는 $(변..

Ajax에서 beforeSend란? Ajax beforeSend beforeSend는 Ajax를 요청하기 직전의 콜백함수이다. 특정기능을 구현할 때 Ajax를 이용하여 해당 API에 직접 접근하여 데이터를 가져오는 상황에서 보안관련 이슈가 생길 수 있다. 해당 API에 접근하려면 header의 token을 전달하여 호출해야 하는 상황일 때, Ajax의 경우 beforeSend 부분을 추가하여 쉽게 처리가 가능하다. Ajax beforSend 문법 beforeSend를 활용하여 jqXHR 객체를 추가/수정 할 수 있으며, 아래의 경우에도 통신 직전에 jqXHR에 헤더값을 추가하여 전송한 것이다. function f_goAjax(config){ // 전달할 token, header 값 var token = ..

선택한 앨리먼트의 내부 요소를 지우는 메서드 - 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..