Front-end study/Javascript
-
Javascript blur 이벤트로 이메일 입력 후 형식 체크 (jquery 활용)Front-end study/Javascript 2023. 11. 10. 15:47
#1 HTML 코드 원하는 대로 작성한다. 기본적으로 input 태그만 사용해도 된다. /50 #2 javascript 코드 입력한 텍스트가 총 몇 자인지 실시간으로 보여주고 싶다면 textMaxLengthCheck 함수를 함께 사용하고 이런 기능이 필요없다면 메일 체크 코드만 사용하면 된다. ================================================================ ================================================================ ================================================================ //email validation check function emai..
-
Javascript keyup 이벤트 시 전화번호에 실시간 하이픈 입력 (jquery 활용)Front-end study/Javascript 2023. 11. 10. 15:05
#1 HTML 코드 원하는 대로 작성한다. 기본적으로 input 태그만 사용해도 된다. /13 #2 javascript 코드 자신이 입력한 텍스트가 총 몇 자인지 실시간으로 보여주고 싶다면 textMaxLengthCheck 함수를 함께 사용하고 이런 기능이 필요없다면 전화번호 세팅 코드만 사용하면 된다. /** * 최대 글자수 실시간 체크 후 dispalyId 에 글자수 표시 * @param str targetId(체크 대상) * @param int maxLength(최대 글자수) * @param str dispalyId(표시 대상) * 사용 안해도 됨 */ function textMaxLengthCheck (targetId, maxLength, dispalyId) { let thisTxt = $(tar..
-
Javascript 에 Module 알아요?Front-end study/Javascript 2023. 3. 13. 19:16
# Do you know module in javascript? Javascript 와 Typescript 에서 사용할 수 있는 module은 파일 안의 코드를 모듈화 하는 것이다. Module 을 알면 React, Typescript 코드를 볼 때 어색하지 않다. 한 모듈은 한 파일 안에 작성된 코드를 말한다. 따로 모듈화하지 않으면 작성된 코드는 모두 global scope에 들어간다. 만약 2 ~ 3개의 파일에서 같은 이름의 함수를 구현한다면 test_script_01.js getName() { ... } test_script_02.js getName() { ... } test_script_03.js getName() { ... } getName 은 이름 충돌이 일어날 확률이 높고 앞으로 가져올 라..
-
Javascript Prototype : 상속을 위해Front-end study/Javascript 2023. 3. 9. 18:48
# 모든 객체들의 조상 object Javascript 에서 protype 은 모든 객체들의 조상 object 다. Java 의 Object 객체와 같은 개념이다 Javascript 에서 interface나 generic 같은 개념은 없지만 Protype 이란 개념이 있어서 Javascript 에서 객체지향프로그래밍을 가능하게 한다. 결국 상속을 하기 위해 쓰이고 코드를 재사용하기 위해 쓰인다. //Object 객체에서 상속을 위한 javascript 코드 DelonghiEspCoffeeMachine.prototype = Object.create(CoffeeMachine.prototype); Typescript 에서 class 를 작성하고 상속하는 코드를 작성한 후 ES5 버전의 Javascript 에서..
-
Javascript {...} [...] destructuring assignment : 구조 분해 할당Front-end study/Javascript 2023. 3. 7. 16:55
# 'Destructuring assignment' 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 expression 입니다. 1. Try //간단한 예제 let a, b, rest; [a, b] = [10, 20]; console.log(a); // Expected output: 10 console.log(b); // Expected output: 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(rest); // Expected output: Array [30, 40, 50] //더 많은 예제 var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console..
-
Arrow function expressionsFront-end study/Javascript 2023. 1. 26. 18:20
개요 arrow function 표현식은 전통적인 함수 표현식에 대한 간단한 대안으로, 몇 가지 의미적 차이와 의도적인 사용 제한이 있어요. this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다. new.target키워드가 없습니다. 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다. 생성자(Constructor)로 사용할 수 없습니다. yield를 화살표 함수 내부에서 사용할 수 없습니다. 문법 기본 문법 param => expression (param) => expression (param1, paramN) => expression param => { statements } (param1, paramN) => { s..