JAVASCRIPT / FILTER filter 란 ? 조건을 주고 해당 조건이 참인 요소만을 새로운 배열로 반환하는 메서드이다. 배열에서 원하는 조건의 데이터만 추출 하고 싶을 때 사용하는 메서드이다. forEach와는 다르고 map과는 같은 새로운 배열을 반환해준다. 예제 const numbers = [45, 1, 9, 100, 55, 22, -37]; const filter_result = numbers.filter((value)=> {return value > 40}); console.log(filter_result) // [45, 100, 55] numbers배열중에 40이 넘는 값만 새로운 배열로 생성하여 전달한다. 위의 코드는 아래처럼 간략하게 줄일 수 있다. const filter_resu..
JAVASCRIPT / FOREACH forEach() 란 ? Array 객체에서만 사용가능한 메서드로 배열의 요소들로 반복하여 작업을 수행한다. 배열의 값을 하나씩 순차적으로 해당 함수에 전달한다. 배열이 가진 모든 값으로 순차적으로 리턴값이 없는 함수를 처리한다. forEach의 파라미터 첫 번째 파라미터는 값이 도착한다. 두 번재 파라미터로는 인덱스가 도착 세 번째 파라미터로는 forEach중인 배열이 도착 예제1 1. numbers 배열 생성 2. forEach()에 함수를 전달하여 사용 3. 배열이 가진 값을 순차적으로 처리 const numbers = [45, 1, 9, 100, 55, 22, -37] //배열 생성 numbers.forEach(myFunction); // forEach()에 ..
JAVASCRIPT / BROWSER OBJECT MODEL BOM 웹 브라우저와 소통하기 위한 웹 브라우저 모델 자바 스크립트의 모든 객체, 함수, 변수들은 window객체의 멤버가 된다. window는 생략이 가능하다. ( window.alert() -> alert() ) BOM의 여러 객체들 window : 웹 브라우저의 최상위 객체 (생략가능) window.screen: 웹 브라우저가 알고 있는 모니터에 관한 정보 window.history: 웹 브라우저의 페이지 이동 내역을 담고 있는 객체 window.location: 현재 웹 브라우저가 보고 있는 위치(페이지)에 관한 객체 window.document: DOM. html 코드 전체의 내용을 담고 있는 객체 window size console...
CSS / DISPLAY Display 란? 해당 요소가 어떻게 보여야 할 지를 결정하는 속성 이 속성의 기본값으로는 inline과 block이 잇다. 기본적으로 태그에는 인라인, 블록요소들이 정해져있지만 바꾸지 못하는 것은 아니다 (ex div의 block속성을 inline으로 변경 가능) style태그 내에서 작성해도되고 인라인으로 작성해도 된다. Inline 요소의 특징 문단 내부에서 영역을 지정할 때 사용. 새 줄에서 시작하지 않고, 필요한 내용만큼의 영역을 차지한다. padding과 margin을 고려하지 않고 배치한다. Block 요소의 특징 항상 새로운 줄에서 시작 기본 너비는 100%여서 화면 끝까지 뻗어나감 padding과 margin이 제대로 작동한다. 박스 취급 예제 Inline In..
JAVASCRIPT / ARRAY JavaScript에서 배열 사용 배열은 기본적으로 Object Type이다. 자바스크립트에서 배열을 생성하는 방법은 두 가지가 있다. 1. [] 를 사용 2. Array() 생성자를 사용 배열 선언하기 예제 1. [] 로 생성하는 방법 // 1 배열 생성후 값 할당 var arr = []; arr[0] = '0'; arr[1] = '1'; arr[2] = '2'; // 2 초기값 할당 var arr = ['0','1','2']; // 3 배열 크기 지정(쉼표 갯수만큼) var arr =[,,,] 2. Array() 생성자로 생성하는 방법 // 1 배열 생성후 값 할당 var arr2 = new Array(); arr[0] = '0'; arr[1] = '1'; arr[2..
숫자 타입들을 다룰 수 있는 메소드 종류 메소드 기능 text.toString() 숫자를 문자열로 변환 Number() 다양한 자바스크립트 값들을 숫자타입으로 변환해주는 메소드 parseInt() 문자열을 정수 타입으로 변환 parseFloat() 문자열을 실수 타입으로 변환 예제 function print(text) { console.log(text); } 콘솔 출력 메소드를 미리 만들어 놓고 실행 toString() const num1 = 123; // 숫자를 문자열로 변환 print(num1.toString()); print(typeof num1.toString()); 숫자를 문자타입으로 변환 하고 typeof로 확인해보면 String이 된다. Number() print(Number(true)); ..
자바스크립트에서 문자열을 다루는 메소드 종류 자바스크립트에서는 문자열을 편하게 다루게 해주기 위한 메소드들이 있다. 메소드 기능 length 문자열의 길이 반환 slice, substring, substr 문자열을 원하는 길이만큼 자르기 trim 공백제거 toUpperCase, toLowerCase 대/소문자 치환 padStart().padEnd() 문자열을 원하는 길이만큼 다른 문자로 채우기 'strtext'.charAt(n), 'strtext'[n] 문자열의 원하는 인덱스의 문자를 찾기 'strtext'.charCodeAt(n) 문자열의 원하는 인덱스의 문자를 유니코드로 변환 'strtext'.indexOf(ch) 문자열의 원하는 문자의 인덱스를 찾기 strtext'.includes('str') 문자..
JAVASCRIPT / NODE Node DOM객체의 모든 것은 Node에 속한다. 요소를 더욱 세분화 하면 element node와 text node로 나눌 수 있다. (주석은 comment node) 각각의 노드에 접근하고 변경할 수 있다. element node, text node element node HTML의 태그들이라고 생각하면 된다. (, 등 ) ex > 이거는 text node 입니다. text node 각각의 태그 사이에 들어가는 정보 ex > 이게 text node 입니다. 문법 // element node에 text node를 삽입한다. element_node.appendChild(text_node) // text node가 삽입된 (안돼도 됨) element node를 html 요..
CSS / PSEUDO-CLASS Pseudo-Class 선택자에 가상 클래스를 사용하여 해당 요소의 특정 상황만을 선택할 수 있다. 선택자 뒤에 : 을 붙혀 원하는 상황을 선택한다. 가상 클래스의 종류 first-child, nth-child(n/even/odd), last-child -> 요소가 부모의 특정 번째 요소일 때를 선택 first-of-type, nth-of-type(n/even/odd),last-of-type -> 요소가 같은 타입들 중에서 특정 번째 요소일 때를 선택 ※ 둘다 동일한 방법으로 사용 예제 1 2 3 /* span 하위의 첫번째 div */ span > div:first-child{ border: solid 1px; } /* div중 짝수만 (우선순위 낮음) */ div:n..
JAVASCRIPT / 비교연산 JavaScript의 비교연산 (자바와의 차이점) 자바스크립트의 비교연산은 자바와 거의 비슷하지만 다른것들이 몇가지 있다. ==, != : 값이 일치(불일치) 하면 true ===, !== : 값과 타입이 모두 일치(불일치)해야 true 예제 console.log('1 == 1 ? ', 1 == 1); // true console.log('1 == \'1\' ?', 1 == '1' ); // true console.log('1 == 2 ? ' , 1 == 2); // false console.log('--------------------') console.log('1 === 1 ? ', 1 === 1 ); // true console.log('1 === \'1\' ?', ..
element.style.property 요소의 스타일 속성에 접근해서 값을 변경할 수 있다. 문법 const yellow = document.getElementById("yellow"); yellow.style.backgroundColor = "yellow"; id가 yellow인 요소에 배경색을 노란색으로 변경한다. 예제 여러개의 요소를 선택하고 반복문을 사용하여 선택된 요소 전체의 값을 변경하는 방법 여러개의 요소를 선택하고 각각의 요소에 접근하고 싶을땐 배열처럼 사용할 수 있다. class가 "yellow"인 모든 것들의 style을 변경 노란색 안 노란색 노란색 노란색 노란색아님 위의 반복문을 아래처럼 변경 가능하다. ( for -> forEach ) Array.from(yellow).forEa..
javascript / getAttribute() getAttribute() 선택한 요소의 선택한 속성 값을 가져온다. 문법 element.getAttribute('attribute'); document.getElementById('div1').getAttribute("class") id가 div1인 요소의 class값을 가져온다 . 예제 출력된 이미지의 경로를 가져오기 id가 img-1인 것의 src값을 가져올 수 있다.