Frontend/javaScript 27

Iframe 깜빡임 방지 및 로딩창(load이벤트 이용)

iframe을 display: none으로 추가하고 load완료 후 show해주면서 화면이 깜빡이는 것을 방지할 수 있음. form생성 전에 로딩창을 띄우고 load완료 후 숨겨줌. function functionOpen(functionName){ var functionInfo = functionModel.getFunction(functionName);//화면 정보 가져옴 $("#maincontents").remove(); var iframeHtml = "" $("#frameDiv").append(iframeHtml);//ifram 추가 commonUtil.showLoadingPage();//화면 로딩 표시 보여주는 함수 var form = document.createElement("form"); // ..

Frontend/javaScript 2023.01.08

setTimeout(), clearTimeout()

1. setTimeout() 시간지연함수. 함수를 의도적으로 지연한 뒤 실행하고 싶을 때 사용한다. setTimeout(function() { // Code }, delay); 지연시간은 밀리세컨드 단위로 설정해야한다. (1000은 1초) *delay는 실행전 대기 시간이지만 호출 시점이 정확히 몇초 후라는 것을 보장하지 않는다. 2. 작동원리 (delay 0) 그런데 지연시간에 0을 넣거나 아무것도 넣지않아도 setTimeout함수는 다른코드가 실행된 후 마지막에 실행된다. 브라우저가 자바스크립트를 실행할 때 Call Stack(LIFO)에 넣는데 setTimeOut은 Task Queue(FIFO)에 넣음. Stack이 비워야 Queue에 있는걸 꺼내기 때문에 (아래 3번에서 설명) 지연시간으로 0초를..

Frontend/javaScript 2022.07.11

[javascript] sort() (정렬/객체배열정렬)

1. sort() arr.sort([compareFunction]) compare함수 파라미터 가 생력되면, 배열의 element들은 문자열로 취급되어, 유니코드 값 순서대로 정렬됨. 1. 오름차순 (숫자) 일반적인 문자열 배열은 arr.sort()하면 오름차순으로 정렬됨!But, 숫자일 경우 [10, 2, 1].sort()하면 [1, 10, 2]가 됨!!-> int로 parse하는 함수 작성 let brr = arr.sort(function(a, b) { return parseInt(a) - parseInt(b); }); 2. 내림차순 리턴이 b - a let brr = arr.sort(function(a, b) { return b - a; }); 3. 객체 배열 객체로 이루어진 배열일때는 객체의 ke..

Frontend/javaScript 2022.06.11

깊은 복사(deep copy), 얕은 복사(shallow copy)

자바 스크립트의 데이터 타입 기본 데이터 타입 (원시 타입) string, number, null, undefined, symbol 참조형 데이터 타입 Array, Object 참조형 데이터는 변수가 객체의 주소를 가리키는 값 -> 복사된 값(주소)이 같은 값을 가리킴. var obj2 = obj1; 그래서 위와같이 일반적인 복사를 하면 복사한 데이터(obj2)를 수정하면 원본 데이터(obj1)도 같이 변경됨. -> 얕은 복사가 일어남!! 얕은 복사 Shllow Copy 이처럼 객체를 복사할 때 원본과 복사본이 같은 참조주소를 갖는 것을 얕은 복사라고 한다. 깊은 복사 Deep Copy 깊은 복사는 복사본의 원본과의 참조가 완전히 끊어진 객체를 말한다. 참조 공간도 같이 복사된다. 1. 배열 복사 sli..

Frontend/javaScript 2022.04.30

callback 함수

1. callback 함수란? 다른 함수의 인자로 넘겨져 함수 실행 후에 실행되는 함수. 자바스크립트는 동기식 처리를 하기 때문에 2개 함수를 연이어 작성할 경우 앞의 함수가 끝나기 전에 뒤의 함수가 먼저 실행되는 경우가 있는데, 앞의 함수가 실행된 다음 뒤의 함수가 실행되게 하고싶은 경우 사용하는 방법 중 하나이다. 또는 먼저 실행된 함수의 결과값을 받아 사용해야하는 함수일 경우에 사용한다. 2. 작성 방법 Func1을 호출할때 파라미터로 Func2의 name을 넘김. function Func1(param, callback) { $.ajax({ url: url, type: "POST", contentType: "application/json", dataType: "json", data: param, a..

Frontend/javaScript 2022.03.08