클로리셔 작은 공간

배열 배열은 여러개의 데이터를 순차적으로 저장하는 저장소이며, 사용하는 방법이 다양합니다. 1.문법 var 변수명 = [값1, 값2, 값3......] 배열 사용하는 방법 01 배열을 선언하고 데이터를 순차적으로 선언하는 방법입니다. var arr1 = new Array(); arr1[0] = 100; //첫번째 배열 저장소에 100을 저장 arr1[1] = 200; //두번째 배열 저장소에 200을 저장 배열 사용하는 방법 02 배열을 선언과 동시에 데이터를 넣는 방법입니다. var arr2 = new Array(100,200); 배열 사용하는 방법 02 배열을 선언하지 않고 바로 데이터를 넣는 방법입니다. var arr3 = [100,200]; 2. 배열 객체의 메서드 / 속성 종류 설명 join()..

변수명 자바스크립트에는 의미를 가진 단어들이 있기 때문에 사용자가 임의로 사용할 수 없는 단어들이 있습니다. 키워드 : 자바스크립트에서 사용하는 단어 식별자 : 사용자가 임의로 사용하는 단어 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. 단어를 조합할 때 규칙 언더스코어 노테이션(스네이크..

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부터..

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

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

핵심 용어 용어 설명 프레임 워크 (Framework) 프레임 제공, 사용자가 동시에 하나 이상의 프로그램 모듈을 사용 할 수 있도록 함. 필요한 기능이 이미 만들어져 있어 틀을 이용해서 컴퍼넌트를 만들어서 완성하는 것. 단점 틀에서 벗어나기 어렵다. 단 하나의 프레임 웍만 사용가능하고 다른거 / 라이브러리랑 충돌. 무겁게 느껴질 수 있다. 라이브러리 (Library) 자주 사용되는 필요한 부분을 프로그램으로 모아놓고 가져와서 사용할 수 있게 한 것. 충돌이 없다. API 미리 만들어놓은 라이브러리를 가져와서 쓰는 기능. UI (User Imterface) 사용자 위주의 인터페이스. UX (User Experience) 사용자 경험의 인터페이스. :: 자바스크립트랑 제이쿼리의 차이가 뭐냐고? 우연히 본 ..

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

.querySelectorAll() : 특정 CSS 선택자를 가진 모든 요소를 배열로 가져오는 메서드입니다. document.querySelectorAll( '.abc' ) // 는 클래스 값이 abc인 모든 요소를 가져옵니다. document.querySelectorAll( '.abc, .def' ); // 클래스 값이 abc 또는 def인 모든 요소를 가져옵니다. Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor -> 클래스 값이 abc인 요소 중 두번째 요소의 색을 빨간색으로 만듭니다. Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor .querySelector() : CSS 선택자에 해당하는 첫번째 요소만..

++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을 리턴받아 출력한다