JAVASCRIPT / MAP map 이란 ? 반복문을 돌며 배열 안의 요소들을 새로운 배열로 리턴한다. (매핑한다.) 어떻게 매핑할 지 정의한 함수를 전달하면 된다. forEach와 다른점은 새로운 Array를 반환한다. 예제1 const numbers = [45, 1, 9, 100, 55, 22, -37]; const map_result = numbers.map(myMapFunction); // 변수 선언하면서 map(func) 호출 // 함수 정의 function myMapFunction(value, index, array) { return value + 10; // 현재 value + 10 을 리턴한다 // ex > [1, 2, 3] 인 배열을 전달받았다면 [11, 12, 13]인 // 새로운 배..
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...
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 요..
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값을 가져올 수 있다.
JAVASCRIPT / attribute attribute 요소의 속성에 접근하여 값을 변경, 추가할 수 있다. element.attribute = "값" 의 형태로 사용한다. 문법 const img = document.getElementById("img"); img.src = "./아무사진1.png"; 위의 코드를 사용하면 인 태그를