본문 바로가기

Dev.FrontEnd/Javascript17

(Event) 이벤트 버블링, 캡쳐 (2019/11/5) 이벤트 버블링(Bubbling) 특정 영역에서 이벤트가 발생했을 때 이벤트가 해당 영역 상위로 전파되는 경우를 말한다. 1. html 구조 와 js에서 이벤트 만들기(버블링 예제) first second third const first = document.querySelector('#first'); const second = document.querySelector('#second'); const third = document.querySelector('#third'); first.addEventListener('click', function(){ console.log('first'); }) second.addEventListener('click', function(){ console.log('secon.. 2019. 11. 5.
(JS) map() (2019/10/23)(보충필요!!) 개념 배열 내의 모든 요소 각각에 대해서 map()의 return값을 적용시켜 새로운 함수로 만든다. foreach()처럼 배열의 length만큼 반복시켜 배열 값들에게 return값을 적용. Array.map(callbackFunction(elementValue, index, array) 1. elementValue 배열 내에서 현재 값 2. index 배열 내에서 현재 인덱스 번호 3. array 배열 length만큼 배열을 출력한다. 사용방법 let mapping = [1, 2, 3, 4, 5]; let remap = mapping.map(function(element){ return element * 10; }) console.log(remap); // [10, 20, 30, 40, 50] 출력 .. 2019. 10. 23.
(JS) Closure 클로저 (2019/10/21)(보충필요!) 개념 내부함수가 외부함수에 접근 할 수 있는 것을 클로저 라고 한다. 원래는 외부 함수의 실행이 끝나면 외부 함수가 소멸되어 내부 함수가 외부 함수의 변수에 접근할 수 없습니다. 하지만 외부 함수의 실행이 끝나고 외부 함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있는 구조 사용방법 const btn = document.getElementById('btn'); function increa(){ let count = 0; return function(){ count++; console.log(count) } } let add = increa(); btn.addEventListener('click',add); let add = increa() btn.addEventListener('cli.. 2019. 10. 21.
[JS] Boolean 데이터 타입 개념 Boolean은 데이터 타입중에서 한 종류 이다. 데이터 타입에는 Number, String, Boolean, Function, Object, Null, undefined, Array가 있다. Boolean의 값으로는 true(참), false(거짓) 2개가 있다. 사용방법 비교 하기 console.log(1===1) // true 출력 console.log(1===2) // false 출력 👉 console.log(1==1) , console.log(1==2) 비교연산자를 써서 숫자 1 과 1이 맞으니깐 true를 출력하고 1 과 2가 다르니깐 false를 출력한다. 이렇게 데이터 타입을 비교하여 true 인지 false인지 알 수 있다. 조건문 사용하기 let booleanValue = true.. 2019. 10. 15.
(JS) filter() (2019/10/14)(보충필요!) -개념 배열의 한 바퀴 돌면서 걸러내는 메서드이다. array.filter(callbackFunction(element, index, array){}) 1. element 배열을 순회하면서 배열의 값을 출력한다. 2. index 배열을 순회하면서 인덱스 번호를 출력한다. 3. array 배열의 length만큼 배열 전체 값을 출력한다. -사용방법 1. 짝수 걸러내기 let numberArry = [1,2,3,4,5,6,7,8,9,10]; let filterArry = numberArry.filter(function(element){ return element % 2 === 0; }) console.log(filterArry); // [2, 4, 6, 8, 10] 출력 let filterArry = num.. 2019. 10. 14.
(JS) 객체(Object) (2019/10/10) -개념 다루고 싶은 모든 데이터의 집합소 -프로퍼티(property) 객체 내부에서 어떤 값을 나타내는 제목 (key)과 값(value)이 한 세트로 이루어진 것을 프로퍼티라고 한다. 즉, 객체는 프로퍼티들로 이루어 져있다. let cafe = { americano : 2800, caffeLatte : 3400, smoothie : 4000 } 객체 cafe 에서 값을 나타내는 제목(key)은 americano, caffeLatte, smoothie이고 값(value)은 2800, 3400, 4000 이 된다. 프로퍼티(property)는 americano : 2800, caffeLatte : 3400, smoothie : 4000이 각각의 개별적 프로퍼티이고 개별적 프로퍼티가 모여서 cafe객체를 이루.. 2019. 10. 10.
(JS) 함수형 프로그래밍 (2019/10/9) -함수형 프로그래밍 함수형 프로그래밍은 소프트웨어를 구성하는 패러다임 중 하나이다. 패러다임 종류에는 객체지향 프로그래밍, 절차 프로그래밍 그리고 함수형 프로그래밍이 있다. 패러다임 중에서 함수형 프로그래밍은 오류를 줄이고, 모듈화를 강조한다. 또한, 언제 평가해도 같은 값을 출력하는 순수 함수들을 만들고 순수 함수들을 값으로 들고 다니면서필요한 시점마다 평가하면서 만드는 로직을 만든다. 함수형 프로그래밍에서 핵심은 1. 순수 함수(pure functions) 동일한 인자가 들어올 경우 항상 동일한 값을 출력한다. 또한, 리턴 값 이외에는 외부와 소통하지 않는다. 따라서 외부의 변수를 수정하지 못한다. 이를 부수효과가 없다 라고 한다. 부수효과란, 외부의 상태에 영향을 미치는 것을 부수효과라고 한다. 이.. 2019. 10. 9.
(JS) forEach() (2019/10/3) -개념 반복문처럼 배열의 length 만큼 한 바퀴 순회한다. array.forEach(callbackFunction(현재 값, 인덱스 번호, 배열 전체){ }) 1. 현재 값 한 바퀴 돌면서 배열의 값을 하나하나 출력한다. 2. 인덱스 번호 한 바퀴 돌면서 배열의 인덱스 번호 하나하나 출력한다. 3. 배열 전체 배열의 length만큼 배열 전체 값을 출력한다. -사용방법 1. 한 바퀴 돌면서 현재 값 가져오기 et array_foreach = ['foreach1', 'foreach2', 'foreach3']; array_foreach.forEach(function(value){ console.log(value); }) // foreach1 // foreach2 // foreach3 출력 array_fo.. 2019. 10. 3.
(JS) push() (2019/10/2) -개념 배열의 끝에 원하는 값을 추가 시킨다. array.push(추가싶은 값) -사용방법 1. 배열 끝에 값 추가하기 let push_array = [1,2,3]; push_array.push(4); console.log(push_array); // [1, 2, 3, 4] 출력 push_array.push(4) push_array배열 마지막에 숫자 4가 들어간다. push()로 값을 추가하면 항상 배열 마지막에 값이 추가 된다. 또한, 문자도 추가할수있다. 2. 값 추가 후 배열 길이 가져오기 let push_array = [1,2,3,4]; let push_length = push_array.push(5); console.log(push_length); // 5 출력 let push_length = .. 2019. 10. 2.
(JS) charAt() (2019/10/1) -개념 문자열에서 특정 인덱스 값에 있는 문자를 반환한다. string에서만 사용 가능하다. String.charAt() -사용방법 1. 해당 인덱스 번호에 있는 값 출력하기 const charAt_string = 'charat'; console.log(charAt_string.charAt(1)); // h 출력 charAt_string.charAt(1) charAt() 함수에 1을 넣어서 인덱스 번호 1번에 해당하는 문자를 출력한다. charAt()와 비슷한 indecOf()는 찾고 싶은 문자 또는 숫자를 넣어서 해당 인덱스 번호를 출력한다. 2. charAt()에 찾고 싶은 문자를 넣었을 경우 const charAt_string = 'charat'; console.log(charAt_string.ch.. 2019. 10. 1.
(JS) fill() (2019/9/29) -개념 배열의 값을 원하는 지점부터 원하는 값으로 채워 넣을수있다. (배열의 값을 수정하고 싶을때도 가능하다) array.fill(value,start,end) 1.value 채우고 싶은 값의 자리 2.start 시작 지점의 인덱스 번호 3.end 끝 나는 지점의 인덱스 번호. 끝나는 지점의 이전까지만 값이 적용 된다. -사용방법 1. empty 배열에 값 넣기 let empty_array = Array(5); console.log(empty_array); // [empty × 5] 출력 empty_array.fill(1,0,5); console.log(empty_array); // [1, 1, 1, 1, 1] 출력 let empty_array = Array(5) Array()를 사용하여 빈공간이 5개가.. 2019. 9. 29.
(JS) split() (2019/9/28) -개념 하나의 문자열을 구분자를 이용하여 여러 개의 문자열로 나눈다. string.split(cut, count) 1.cut 원본 문자열을 어떤 기준으로 끊어야 할지 설정한다. 즉, 문자열을 나누는 기준 2.count 끊을 문자열의 개수 -사용방법 1. 문자열 한 개씩 나누기 1 2 3 4 let split_string = 'super Pil'; let split_array = split_string.split(''); console.log(split_array); // ["s", "u", "p", "e", "r", " ", "P", "i", "l"] 출력 let split_arry = split_string.split('') split(나누는 기준) 이기 때문에 '' 할 경우 문자열 하나하나를 나눠서 .. 2019. 9. 28.
(JS) join() (2019/9/26) -개념 배열의 모든 값들을 연결하여 문자열로 출력한다. array.join() -사용방법 1. join()으로 합치기 1 2 3 let arry_join = ['Americano', 'Latte', 'Espresso', 'smoothie']; console.log(arry_join.join()); // Americano,Latte,Espresso,smoothie 출력 arry_join.join() . join()을 하게 되면 ', ' 문자열을 넣지 않아도 ', '를 넣어서 출력된다. 2. 배열 값 전부 연결해서 합치기 1 2 3 let arry_join = ['Americano', 'Latte', 'Espresso', 'smoothie']; console.log(arry_join.join('')); //.. 2019. 9. 26.
(JS) splice() (2019/9/26) -개념 기존 배열의 값을 삭제, 추가, 변경 등을 할 수 있다. array.splice(start, deleteCount, add) 1.start 배열의 값을 삭제, 추가, 변경하고 싶은 시작점이다. 인덱스 번호로 선택한다. 2.deleteCount 배열의 값을 삭제하고 싶은 개수. 3.add 배열에 추가하고 싶은 값 -사용방법 1. 기존 배열에 바로 값 추가하기 1 2 3 4 let cafe = ['Americano', 'Latte', 'Espresso', 'smoothie']; cafe.splice(0, 0, 'soldout'); console.log(cafe); //["soldout", "Americano", "Latte", "Espresso", "smoothie"] 출력 cafe.splice(0,.. 2019. 9. 26.
(JS) indexOf() (2019/9/26) -개념 문자열에서 찾고자 하는 문자열이 어디에 있는지 찾을 수 있다. 배열에서 찾고자 하는 배열값이 어디에 있는지 찾을 수 있다. **원하는 값이 있는곳의 인덱스 번호로 출력된다. -사용방법 1.문자열 1 2 3 4 let string_indexof = 'indexof'; console.log(string_indexof.indexOf('i')); //0 출력 string_indexof.indexOf('i') string_indexof변수 안에 i 문자열을 찾는다. i가 맨 앞쪽에 있기 때문에 0(인덱스 번호)을 출력한다. 1 2 3 4 let string_indexof = 'iddexof'; console.log(string_indexof.indexOf('d')); //1 출력 string_indexof.. 2019. 9. 26.

티스토리툴바