JavaScript/javascript
-
e.preventDefault() 와 e.stopPropagation() 는 이벤트 관련 동작에서 많이 사용되는 코드이다. e.preventDefault() e.preventDefault() 는 a 태그나 submit 처럼 페이지를 이동시키거나 form 태그의 submit 하는 동작을 중지시킨다. // javascript $("a").click(function(e){ e.preventDefault(); alert('prevnetDefault 로 인해 이벤트 중지'); }); // html 네이버 페이지 이동 위처럼 "네이버 페이지 이동" 이라는 a 태그의 링크를 클릭하면 click 이벤트 함수가 발생하고 e.preventDefault() 로 인해 이벤트가 중지된다. e.stopPropagation() e..
e.preventDefault() 와 e.stopPropagation() 의 차이e.preventDefault() 와 e.stopPropagation() 는 이벤트 관련 동작에서 많이 사용되는 코드이다. e.preventDefault() e.preventDefault() 는 a 태그나 submit 처럼 페이지를 이동시키거나 form 태그의 submit 하는 동작을 중지시킨다. // javascript $("a").click(function(e){ e.preventDefault(); alert('prevnetDefault 로 인해 이벤트 중지'); }); // html 네이버 페이지 이동 위처럼 "네이버 페이지 이동" 이라는 a 태그의 링크를 클릭하면 click 이벤트 함수가 발생하고 e.preventDefault() 로 인해 이벤트가 중지된다. e.stopPropagation() e..
2024.03.20 -
화살표 함수란? 보통 함수를 선언할 때 function 키워드를 사용하지만 ES6 에서 함수를 선언하는 새로운 문법이 등장했다. 바로 화살표 함수이다. 사용하는 방법은 단어 뜻과 같이 " => " 표시를 사용해서 함수를 선언하는 방법이다. // 기존 함수 const obo = function() { console.log('function 을 사용한 기존 함수'); }; // 화살표 함수 const obo = () => { console.log('function 이 제거된 화살표 함수'); }; 위와 같이 function 이라는 키워드를 사용하지 않고 " () => {} " 형식으로 심플한 형태로 사용된다. 하지만 이러한 심플함뿐만 아니라 사용하는 이유와 제약사항도 존재한다. 화살표 함수 제약 사항 무조건..
Javascript 화살표 함수와 this화살표 함수란? 보통 함수를 선언할 때 function 키워드를 사용하지만 ES6 에서 함수를 선언하는 새로운 문법이 등장했다. 바로 화살표 함수이다. 사용하는 방법은 단어 뜻과 같이 " => " 표시를 사용해서 함수를 선언하는 방법이다. // 기존 함수 const obo = function() { console.log('function 을 사용한 기존 함수'); }; // 화살표 함수 const obo = () => { console.log('function 이 제거된 화살표 함수'); }; 위와 같이 function 이라는 키워드를 사용하지 않고 " () => {} " 형식으로 심플한 형태로 사용된다. 하지만 이러한 심플함뿐만 아니라 사용하는 이유와 제약사항도 존재한다. 화살표 함수 제약 사항 무조건..
2023.11.29 -
input type="text" 형식으로 된 input 태그에 전화번호 입력 시 앞자리 숫자에 따른 자동 하이픈 삽입이 필요하여 구현하였다. Javascript const cellNumHyphen = (target) => { let value = target.value; if (!target.value) { return ""; } value = value.replace(/[^0-9]/g, ""); const result = []; let restNumber = ""; // 시작번호 02 if (value.startsWith("02")) { result.push(value.substr(0, 2)); restNumber = value.substring(2); target.maxLength = 12; // 시..
Javascript 전화번호 하이픈 자동 삽입input type="text" 형식으로 된 input 태그에 전화번호 입력 시 앞자리 숫자에 따른 자동 하이픈 삽입이 필요하여 구현하였다. Javascript const cellNumHyphen = (target) => { let value = target.value; if (!target.value) { return ""; } value = value.replace(/[^0-9]/g, ""); const result = []; let restNumber = ""; // 시작번호 02 if (value.startsWith("02")) { result.push(value.substr(0, 2)); restNumber = value.substring(2); target.maxLength = 12; // 시..
2023.11.28 -
실행 컨텍스트란? Javascript 실행 컨텍스트란 우리가 작성한 자바스크립트 코드가 실행되는 환경을 의미한다. 여기서 실행 컨텍스트를 보기전에 자바스크립트 동작 원리에 대해 간단하게 봐보자. 자바스크립트는 한번에 한 코드밖에 실행시키지 못한다. 그래서 싱글 쓰레드라고 부른다. 아래의 예시를 보자. 결과를 보기전 우리가 예상할 수 있는 결과는 2, 4, 6 이지만 실제 결과 값은 2, 6, 4 이다. 이유는 setTimeout, 비동기통신 등 바로 실행시킬수 없는 코드는 대기실로 보내어 실행될 수 있는 코드가 될 때까지 대기하고 바로 실행될 수 있는 코드는 "스택" 이라는 공간에서 코드를 실행 시킨다. 바로 실행될 수 없는 코드들이 실행될 수 있는 코드가 되면 큐라는 공간으로 들어와 스택 공간이 완전히..
Javascript 실행 컨텍스트와 렉시컬 스코프, 스코프 체인실행 컨텍스트란? Javascript 실행 컨텍스트란 우리가 작성한 자바스크립트 코드가 실행되는 환경을 의미한다. 여기서 실행 컨텍스트를 보기전에 자바스크립트 동작 원리에 대해 간단하게 봐보자. 자바스크립트는 한번에 한 코드밖에 실행시키지 못한다. 그래서 싱글 쓰레드라고 부른다. 아래의 예시를 보자. 결과를 보기전 우리가 예상할 수 있는 결과는 2, 4, 6 이지만 실제 결과 값은 2, 6, 4 이다. 이유는 setTimeout, 비동기통신 등 바로 실행시킬수 없는 코드는 대기실로 보내어 실행될 수 있는 코드가 될 때까지 대기하고 바로 실행될 수 있는 코드는 "스택" 이라는 공간에서 코드를 실행 시킨다. 바로 실행될 수 없는 코드들이 실행될 수 있는 코드가 되면 큐라는 공간으로 들어와 스택 공간이 완전히..
2023.08.08 -
javascript 를 사용해 DOM Element 요소를 불러와 style 및 css 를 처리가 필요할때가 있다. 보통 한개의 css style 을 처리해야할 땐 아래와 같이 한다. document.getElementById('styleId').style.display = 'none'; document.getElementById('styleId').style.color = 'red'; 하지만 DOM Element 의 style 데이터가 여러개일 경우와 여러개를 변경 해야할 때가 있는데 이때 문자열을 사용하는 cssText() 를 사용한다. cssText() 는 문자열을 사용해 불러온 Element 의 전체 스타일을 변경하기 때문에 주의해야 한다. document.getElementById('id값')...
javascript style, css 여러개 처리javascript 를 사용해 DOM Element 요소를 불러와 style 및 css 를 처리가 필요할때가 있다. 보통 한개의 css style 을 처리해야할 땐 아래와 같이 한다. document.getElementById('styleId').style.display = 'none'; document.getElementById('styleId').style.color = 'red'; 하지만 DOM Element 의 style 데이터가 여러개일 경우와 여러개를 변경 해야할 때가 있는데 이때 문자열을 사용하는 cssText() 를 사용한다. cssText() 는 문자열을 사용해 불러온 Element 의 전체 스타일을 변경하기 때문에 주의해야 한다. document.getElementById('id값')...
2023.08.03 -
클로저(Closure)란? 클로저란 자바스크립트 고유의 개념이 아니라 ECMAScript 에는 정의되어 있지 않다. MDN 에는 아래와 같이 정의하고 있다. “A closure is the combination of a function and the lexical environment within which that function was declared.” 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. 위 정의를 보면 도무지 이해할 수가 없다. 아래의 예시를 보며 확인해보자. function parentF(){ var x = 10; var childF = function(){ console.log(x); } childF(); } parentF(..
Javascript 클로저클로저(Closure)란? 클로저란 자바스크립트 고유의 개념이 아니라 ECMAScript 에는 정의되어 있지 않다. MDN 에는 아래와 같이 정의하고 있다. “A closure is the combination of a function and the lexical environment within which that function was declared.” 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. 위 정의를 보면 도무지 이해할 수가 없다. 아래의 예시를 보며 확인해보자. function parentF(){ var x = 10; var childF = function(){ console.log(x); } childF(); } parentF(..
2023.08.02