본문 바로가기

Study Note/Javascript32

728x90
javascript #디자인패턴 - 객체 기반 데커레이터 패턴(decorator pattern) 하나의 객체에 여러 가지 기능들을 추가함으로써 기존의 객체에 추가로 꾸며진 객체를 만들어낼 수 있습니다. 데커레이터 패턴을 이용해 각기 다른 부품으로 이루어진 컴퓨터의 가격을 알아봅니다. 구현 결과 참고도서 : 속깊은 자바스크립트 5.4. 데커레이터 패턴 이전글 2021/02/10 - [Study Note/Javascript] - javascript #폼 검증을 위한 데커레이터 패턴 적용 javascript #폼 검증을 위한 데커레이터 패턴 적용 데커레이터 패턴 프락시 패턴은 호출되는 객체가 아닌 별도의 중간자 역할을 수행하는 프락시 객체가 추가 기능을 수행하는 패턴이라고 한다면, 데커레이터(decorator) 패턴은 호출 대상이 되는 simuing.tistory.com 2021. 2. 10.
javascript #디자인패턴 - 폼 검증을 위한 데커레이터 패턴(decorator pattern) 데커레이터 패턴 프락시 패턴은 호출되는 객체가 아닌 별도의 중간자 역할을 수행하는 프락시 객체가 추가 기능을 수행하는 패턴이라고 한다면, 데커레이터(decorator) 패턴은 호출 대상이 되는 객체에 추가 기능들을 자유롭게 추가하는 패턴입니다. 데커레이터 패턴을 유용하게 이용할 수 있는 곳은 바로 검증 도구입니다. 구현 (폼 검증을 위한 데커레이터 패턴 실용 예) First name: Last name: Age: Gender: Male Female 결과 필수 항목을 모두 기입하지 않은 경우 유효성체크를 통과하지 못한 경우 필수 항목을 모두 기입한 경우 # 참고도서 : 속깊은 자바스크립트 5.4. 데커레이터 패턴 참고할만한 문서 : ui.toast.com/weekly-pick/ko_20200102 2021. 2. 10.
javascript #함수 호출 시 call(), apply() 로 this 설정 함수 호출 방법에 따른 this의 변화를 확인합니다. function whatsThis() { return this.toString(); } let unikys = { what: whatsThis, toString: function () { return "[object unikys]"; } } #1 whatsThis(); //"[object Window]" 일반함수: this = window #2 unikys.what(); //"[object unikys]" 멤버함수: this = unikys #3 whatsThis.call(); //"[object Window]" call 이용, 인자 없음: this = window #4 whatsThis.apply(unikys); //"[object unikys]" .. 2021. 1. 19.
javascript #성능 최적화하기 1. 변수 초기화 위치 통일 let a = 'h'; function abc () { let b = 'i'; console.log(a + b); } let a='h', b='i'; function abc () { console.log(a + b); } 2. 불필요하게 상위 스코프에 존재하는 변수를 가까운 로컬 변수로 이동 let outer = 0; (function () { for(let i=0; i 2021. 1. 18.
jQuery #jqXHR 란? / ajax async true false 차이 jQuery.ajax() async async : true = 비동기 (Asynchronous, 요청을 보낸 후 응답결과와는 상관없이 다음방식이 동작하는 방식) async : false = 동기 (Synchronous, 요청을 보낸 후 응답결과를 받아야지만 다음 동작이 이루어지는 방식) async (default : true) type : boolean 기본적으로 모든 요청은 비동기적으로 전송됩니다 (즉, 기본적으로 true로 설정 됨). 동기 요청이 필요한 경우이 옵션을 false로 설정하십시오. 도메인 간 요청 및 dataType : "jsonp"요청은 동기 작업을 지원하지 않습니다. 동기 요청은 브라우저를 일시적으로 잠글 수 있으며 요청이 활성화 된 동안 모든 작업을 비활성화 할 수 있습니다. jQ.. 2019. 9. 11.
■ JSON 기본개념 JSON#1_ JSON 은 오브젝트이다.① 생성된 JSON 을 alert() 로 확인해보면 [object Object] 라고 뜬다.② 생성된 JSON 을 typeof 로 확인해보면 object 라고 뜬다.이를 통해 JSON 는 객체(object)임을 확인할 수 있다. JSON#2_ key값 변경, value값 호출① JSON 의 key값으로 호출하면 value값이 나온다.② JSON 의 key값으로 호출된 값은 변경이 가능하다. JSON#3_ 함수로 구성된 경우의 value값 함수호출① JSON 의 value 가 함수로 구성된 경우 키값 호출로 인한 함수호출은 이루어지지 않는다.② 함수로 구성된 value값을 alert()로 확인해보면 문자열로 출력된다.③ 함수로 구성된 value값에 ()괄호를 붙여 a.. 2018. 7. 11.
■ JSON(JavaScript Object Notation) 개요 JSON(JavaScript Object Notation)※ JSON(JavaScript Object Notation) 이란? - JavaScript Object Notation, RFC 4627 - JavaScript 구문 형식을 따르며, 언어나 플랫폼에 독립적 - 미디어 타입 : 'application/json' - 표현 가능한 자료형 : object, array, string, number, boolean, null ○ 개요 JSON(JavaScript Object Notation)은 인터넷에서 데이터를 주고 받을 때 그 데이터를 표현하는 방법이다. 자료의 종류에 큰 제한은 없으며, 특히 프로그램의 변수값을 표현하는 데 적합하다. 경량 데이터 교환 방식으로 사람이 읽고 쓰기에 용이하며, 기계가 분석.. 2018. 7. 11.
JS note#13_ 같은 배열인지 비교하기 1. 같은 배열인지 비교하기: function과 for문을 이용한 같은 배열 비교식 var 이거 = ["1", "2", "3"];var 저거 = ["4", "5", "6"];var 그거 = ["1", "2", "3"]; var 에휴 = ["1", "2", "3", "4"]; function 같은배열일까 (원, 투){for (i=0; i 2018. 1. 25.
JS note#12_ return을 활용한 반복문 1. return을 활용한 반복문 (console.log 결합): console.log를 결합하여 return으로 구성된 반복문 만들기 function 점수(숫자){if (숫자 < 30){console.log("C");return;} if (숫자 < 70){console.log("B");return;}console.log("A");};점수(20);C 2. return만을 활용한 반복문: return으로 구성된 반복문 만들기 function 점수(숫자){ if (숫자 < 30){return "C"; } if (숫자 < 70){return "B";}return "A";};점수 (80);"A" 3. else if 를 활용한 반복문 (유사식): return으로 구성된 반복문과 유사한 식을 else if 로 표현.. 2018. 1. 25.
JS note#11_ 반복문을 이용한 문자열 변환 반복문을 이용한 문자열 변환: for 를 이용해 일부 문자열 변환하기 var 입력 = "Happy new year!";var 출력 = ""; for (i = 0; i < 입력.length; i++){if(입력[i] == "a"){출력 += "4"; } else {출력 += 입력[i]; }}출력;"H4ppy new ye4r!" 2018. 1. 18.

티스토리툴바