UX·UI - FrontEnd Dev. Story

자바스크립트 34

[Javascript] 자바스크립트 변수 / 변수명 활용하기

변수명 자바스크립트에는 의미를 가진 단어들이 있기 때문에 사용자가 임의로 사용할 수 없는 단어들이 있습니다. 키워드 : 자바스크립트에서 사용하는 단어 식별자 : 사용자가 임의로 사용하는 단어 1. 키워드 break, case, catch, class, const, continue, debugger, default, delete, do, else, export, extends, false, finally, for, function, if, import, in, instanceof, new, null, return, super, switch, this, throw, true, try, typeof, var, void, while, with, yield 2. 단어를 조합할 때 규칙 언더스코어 노테이션(스네이크..

[Javascript] 반복문 for() / for in() / forEach()로 구문/문법 표현하기

1. for() 반복문 let array = ['포도', '사과', '바나나', '망고']; for(let i = 0; i < array.length; i++) { console.log(array[i]);// 포도, 사과, 바나나, 망고 } 2. for in() 자바스크립트는 배열이나 객체를 더욱 쉽게 다룰 수 있도록 for in 반복문을 제공한다. 위 for 문의 예제는 아래와 같이 바꿔 사용할 수도 있다. let array = ['포도', '사과', '바나나', '망고']; for( let i in array ) { console.log(array[i]);// 포도, 사과, 바나나, 망고 } 3. forEach() foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다. (ES6부터..

[Javascript] 이벤트 버블링(bubbling)과 캡처링(capturing) 차이점

아래에 코드펜 예제를 보면, 중첩된 요소에 있어 이벤트를 발생시킨다면 어떻게 될까? See the Pen bubbling capturing by leejunghyun (@mygumi) on CodePen. target 을 클릭하게 되면 [ target -> child -> parent -> root -> body ] 순으로 알림창을 뜨는 것을 확인할 수 있다. 보다시피 이벤트 핸들이 등록 된 중첩된 요소들이 하위에서 상위순으로 이벤트가 전파되었다. 위와 같이 중첩된 요소에서 이벤트가 발생할 때, HTML DOM API 의 이벤트 전파(Event Propagation) 는 두 가지 방식으로 구분된다. 이 두 가지 방식이 바로 버블링과 캡처링이다. ⊙ 버블링과 캡쳐링 캡처링 - window 로부터 이벤트가 ..

[Javascript] strict mode를 사용해야 하는 이유

자바스크립트에서 'use strict';는 뭘 하는 것이고, 왜 그걸 써야 하나요? Strict Mode는 ECMAScript 5 버전에 있는 새로운 기능으로 함수를 엄격한 운용 context 안에서 실행시킬 수 있게 합니다. 이 엄격한 context는 몇가지 액션들을 실행할 수 없도록 하며, 좀 더 많은 예외를 발생시킵니다. 1. 흔히 발생하는 코딩 실수를 잡아내서 예외를 발생시킵니다. 2. 상대적으로 안전하지 않은 액션이 발생하는 것을 방지하거나 예외를 발생시킵니다. 예를 들자면 전역객체들에 접근하려 한다거나 하는 것들이겠지요. 3. 혼란스럽거나 제대로 고려되지 않은 기능들을 비활성화시킵니다. strict mode는 파일 전체에 적용시킬 수도 있고, 특정한 함수 안에서만 적용시킬 수도 있습니다. //..

자바스크립트 Event :: addEventListener/ removeEventListener 메서드

addEventListener : 특정 이벤트가 발생했을 시, 특정 함수를 실행할 수 있게 해주는 기능. addEventListener으로 등록할 수 있는 이벤트 중 자주 쓰이는 이벤트 목록 이벤트 명 설명 change 변동이 있을 때 발생 click 클릭 시 발생 focus 포커스를 얻었을 때 발생 keydown 키를 눌렀을 때 발생 keyup 키에서 손을 땟을 때 발생 load 로드가 완료 되었을 때 발생 mousedown 마우스를 클릭 했을 때 발생 mouseout 마우스가 특정 객체 밖으로 나갔을 때 발생 mouseover 마우스가 특정 객체 위로 올려졌을 때 발생 mousemove 마우스가 움직였을 때 발생 mouseup 마우스에서 손을 땟을 때 발생 select option 태그 등에서 선택을..

[자바스크립트] Javascript 개념잡기 i++과 ++i의 차이점

++i (전위증가) : i의 값이 1 증가된 후 증가된 값을 리턴한다 i++ (후위증가) : 먼저 해당 연산을 수행하고 나서, i 의 값을 1 증가시킴. 1. 전위증가​ int main() { int i = 1; int j = ++i; printf("i:%d, j:%d", i, j); } // i:2, j:2 2. 후위증가 int main() { int i = 1; int j = i++; printf("i:%d, j:%d", i, j); } // i:2, j:1 => 전위증가에서는 i가 1 증가한 뒤, 증가한 값을 j가 리턴받아 2를 출력한다 후위증가에서는 i가 1 증가 하지만, j는 증가하기 전 값인 1을 리턴받아 출력한다

[Javascript]함수 선언 var / let / const 차이점 공부하기

[ 자바스크립트 var ] 가장 많이 사용하는 선언은 " var " 입니다. var는 변수를 선언 할 수 있습니다. ex) var a = 0; var b; car c = []; car d = {}; 이렇게 선언하면서 값을 할당할 수도 있고 빈 변수로 선언해 둘 수도 있습니다. 변수를 덮어쓰기(재선언)도 가능합니다. ex) var a = 1; var a = 2; // a = 2 [ 자바스크립트 let ] let은 var의 문제점을 해결하기 위해 es2015부터 추가 되었습니다. let으로 선언 된 변수는 재선언 할 수 없습니다. ex) let a = 1; let a = 2; // Uncaught SyntaxError a = 3; //a = 3 [ 자바스크립트 const ] contst 역시 es2015부터..

반응형