지구정복
[JavaScript] 정리 본문
-자바스크립트 : 웹의 동작 및 기능을 구현시킨다.
-V8 엔진 : 자바스크립트 코드를 마이크로프로세서가 이해할 수 있는 더 낮은 수준의 언어 혹은
기계어로 번환해주는 역할
-ECMAScript : ECMA 인터내셔널에서 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어이다.
ECMA 262에는 스크립트 언어에 대한 명세를 담고있다.
즉, 자바스크립트는 ECMAScript 사양을 준수하는 범용 스크립트 언어이다.
-변수 차이 (var / let / const)
var : 전역변수
let : 재할당가능한 지역변수
const : 재할당 불가능한 지역변수
-콜백함수 : 함수가 다른 함수 또는 자기자신 함수를 호출하는 것
-타이머 메소드 (
setTimeout(함수, 초*1000) : 지정된 시간 이후에 함수 한 번만 실행
setInterval(함수, 초*1000) : 지정된 시간마다 함수 실행
)
-배열
다차원배열 만들기 및 출력
함수의 매개변수 값 모를 때 arguments 매개변수값 받기
비구조화 할당 : 여러 개의 변수를 배열화해서 할당하는 것
전개연산자 ... 사용 : 비구조화할당시 남는 값들을 남은 변수에 다 할당시키는 것
두 개의 배열 합치기 : let obj = [...one, ...two];
함수와 같이 사용 : func1(...one);
rest 파라미터 사용 : let func1 = function(...rest) { }
func1(...[1, 2, 3]);
-객체 : 자바스크립트에서 객체란 프로퍼티와 값으로 구성되어 있고 값이 함수인 프로퍼티는 메서드라고 한다.
1. JSON 형태로 만들기
2. 함수를 이용해서 객체 만들기
3. 생성자를 이용해서 객체 만들기
4. 클래스를 이용해서 객체생성
-프로토타입 : 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다.
자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받고
이때 상속되는 정보를 제공하는 객체를 프로토타입이라고 한다.
보통 같은 기능을 하는 메소드를 각 객체마다 만들면 메모리낭비가 일어나므로 해당 객체 프로토타입에 공통 메소드를 정의한다
-String 객체
str.charAt(0) / str.substr(6, 5) / str.substring(6, 11) / str.slice(6, 11) /
str.indexOf('a') / str.lastIndexOf('a') / str.includes('a) / str.startsWith('a') / str.endsWith('a') /
str.replace('a', 'b') / str.toLowerCase() / str.toUpperCase() / str.concat('bbb') /
str.split('-') /
-bom : browser 조작용 객체
dom : html 조작용 객체
JSON : 자바스크립트에서 객체를 만들 때 사용하는 데이터형식
-내장객체의 내장생성자
-Number : Number생성자로 숫자를 저장하면 객체타입이다.
-메소드: 객체.toFixed(1) : 소수점 첫 째자리에서 반올림
-Date
-메소드 : 객체.getFullYear(); / 객체.getMonth(); 등등
-Math
-메소드: 올림 - Math.ceil(값) / 내임 - Math.floor(값) / 반올림 - Math.round(값) / Math.max / Math.min
Math.random()
-Array
-메소드: 배열합치기 - 배열명1.concat(배열명2) / 배열요소 반복 - forEach()
-map() 맵은 키에 다양한 자료형을 허용한다. 배열의 각 요소를 순회하면서 callback함수를 실행하고
return되는 값을 배열로 만든다.
-map 형식
-만들기 : [] 안에 프로퍼티와 값 형태가 들어간다.
-열거자객체: map.entries()를 통해 전체 map데이터를 가져온 뒤 next()를 사용하여 맵의 인덱스를 순회한다.
-map.keys() : 맵의 키만 가져오기 / map.values() : 맵의 값만 가져오기
-set 형식
-set은 배열과 비슷하지만 중복값을 자동적으로 없애준다.
-add() : 데이터 집어넣기
-json 객체 관련 메소드
-json을 문자열로 만들기 : JSON.stringify( json객체 );
-문자열을 json으로 만들기 : JSON.parse( 문자열 );
1. 웹페이지 구성 프로그램 종류 html/css/javascript
2. 자바스크립트를 해석하는 엔진 v8
3. html
<script type="text/javascript" src="./default.js"></script>
외부js파일 사용법
4. 변수와 상수를 선언하는 법
변수 : 데이터를 저장할 때 쓰이는 '이름이 있는 저장소' let 사용한다.
상수 : 변화하지 않는 변수를 선언할 땐 const를 사용한다.
5. 함수선언과 사용
선언적함수 : 함수의 이름이 존재하고 컴파일 시점에 함수 정보를 등록한다(함수의 호이스팅)
함수를 변수에 할당하여 함수를 생성하는 것을 함수 표현식
익명함수 : 이름이 없는 함수로 , 즉시 실행이 필요한 경우 사용한다.
function() {
logic
}
화살표 함수 : function() 키워드 대신 화살표를 사용하여 보다 간략한 방법으로 함수 선언할 수 있다.
화살표함수는 익명함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을
사용한다.
var pow = function (x) { return x * x; };
console.log(pow(10)); // 100
//화살표함수 사용
const pow = x => x * x;
console.log(pow(10)); // 100
또는 콜백함수로 사용할 수 있다.
var arr = [1, 2, 3];
var pow = arr.map(function (x) { // x는 요소값
return x * x;
});
console.log(pow); // [ 1, 4, 9 ]
//화살표함수 사용
const arr = [1, 2, 3];
const pow = arr.map(x => x * x);
console.log(pow); // [ 1, 4, 9 ]
() => { ... } // 매개변수가 없을 경우
x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.
6. 내장함수
setInterval
setTimeout
eval
7. 배열 1차원배열
8. 내장객체의 종류 (각각의 용도)
기본객체 :
BOM : 브라우저에 관련된 모든 내용을 담고있는 객체(뒤로가기, 북마크, 즐겨찾기, 히스토리, URL정보 등등)
브라우저가 가지고 있는 정보를 따로 객체화해서 관리함
DOM : Document Object Model html 태그와 관련된 모델 (HTML, CSS 등)
문서 즉 열려진 페이지에 대한 정보를 따로 객체화해서 관리함
'데이터 엔지니어링 정복 > HTML-CSS-JavaScript-Spring-Node.js' 카테고리의 다른 글
[JavaScript-Ajax] 1/11 | Ajax(데이터전송형식(CSV,XML,JSON-라이브러리이용해서 데이터베이스이용)), XMLHttpRequest(동기방식, 비동기방식(CSV,XML,JSON 데이터 가져오기)) (0) | 2021.01.11 |
---|---|
[HTML & CSS] 개인 웹페이지 만들기 (0) | 2020.11.13 |
[JavaScript] 기초 6 (0) | 2020.11.06 |
[JavaScript] 기초5 (0) | 2020.11.05 |
[JavaScript] 기초4 (0) | 2020.11.04 |