본문 바로가기

웹 프로그래밍/JavaScript7

정규표현식 1. 정규표현식 문자열의 특정 패턴을 찾을 수 있는 문법입니다. 예를들면 회원가입 화면에서 사용자로부터 입력받은 아이디, 이름, 이메일형식이 유효한지 체크할 필요가 있습니다. 이때 정규표현식을 사용하면 간단히 처리할 수 있습니다. 1 2 3 4 5 6 const tel = '0101234567팔'; // 정규 표현식 리터럴 const myRegExp = /^[0-9]+$/; 반복문과 조건문을 사용한 복잡한 코드도 정규표현식을 이용하면 매우 간단하게 표현할 수 있습니다. 하지만 가독성이 좋지 않다는 단점이 존재합니다. 정규표현식은 아래와 같이 표현합니다. 1.2 플래그 플래그는 아래와 같은 종류가 있습니다. Flag Meaning Description i Ignore Case 대소문자를 구별하지 않고 검색.. 2019. 9. 13.
handlebars 템플릿 Handlebars는 시맨틱한 템플릿을 효과적으로 구축하는데 필요한 기능을 제공합니다. 또한 템플릿을 JavaScript함수로 컴파일하기 때문에 대부분의 다른 템플릿 엔진보다 템플릿을 더 빠르게 실행할 수 있습니다. 실습 01(기본 예제) 실습을 위해 다음과 같이 html문서 안에 template코드를 만듭니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 template using handlebar 게시자 : {{name}} {{content}} 좋아요 갯수 {{like}} {{comment}} Handlebars를 설치합니다. https://cdnjs.com/libraries/handlebars.js/ 로 접속 목록에 적당한 CDN 경로를 복사. html.. 2019. 8. 20.
객체 리터럴과 this 함수 호출 방식과 this 바인딩 자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정됩니다. 즉, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됩니다. 함수의 호출 방식은 아래와 같이 다양합니다. 함수 호출 메소드 호출 생성자 함수 호출 apply/call/bind 호출 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var foo = function () { console.dir(this); }; // 1. 함수 호출 foo(); // window // window.foo(); // 2. 메소드 호출 .. 2019. 8. 19.
자바스크립트 객체 객체 생성 자바스크립트에서 객체를 생성하는 방법은 Object() 생성자 함수를 이용하는 방법, 객체 리터럴 방식으로 생성하는 방법, 생성자 함수를 이용하는 방법 이렇게 3가지가 있습니다. 객체 리터럴 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var emptyObject = {}; console.log(typeof emptyObject); // object var person = { name: "Lee", gender: "male", sayHello: function() { console.log("Hi! My name is " + this.name); } }; console.log(typeof person); // object console.log(person); // {na.. 2019. 8. 3.