22-10-01-JavaScript

JavaScript

HTML을 프로그래밍으로 제어
사용자의 이벤트를 받아 조작할 수 있다.

ECMA Script 등장

넷스케이프 사에서 자바스크립트를 단기간 개발하여 지원 시작
크로스 브라우징 이슈 문제로 인해 ECMA 인터네셔널에 자바스크립트 표준화 요청
-> 즉, 표준 스크립트 프로그래밍 언어로 자바스크립트 뼈대를 구성하는 언어

ECMA Script version

(ES6부터 도입된 문법) -> ES2015 (ES6를 의미) 이전 버전은 불편함이 자주 발생
ES2015 부터 해결되는 const, let 등의 여러 문법이 추가되면서 유지보수성이 크게 향상되었으므로 언급이 많다.

Framework

대부분의 필요한 기능들을 구현해 놓음

출력방법

about:blank -> document.라고 치면 여러가지 document 메서드 확인 가능
document.getElementById('one').innerHTML = "hello <strong>world</strong>";

console.log('hello');
window.alert('hi');
document.write('hee');

변수

변할 수 있는 수
데이터를 잠시 보관하는 상자 같은 역할 (x와 3값 모두 메모리에 올라가므로
포스트잇 정도로 표현)

변수는 선언, 할당하여 사용 가능
변할 수 있는 수로 값을 계속 변경 가능

변수명

$, _ 제외한 공백, 특수문자, 등등은 사용 불가
숫자로 시작할 수 없다
대소문자 구별한다
예약어 사용 불가능
유니코드 문자도 사용할 수 있다.
var, const, let 키워드 사용
보통은 let 사용

변수의 자료형

자바스크립트는 다른 언어와 다르게 자료형을 함께 쓸 필요 없다.

문자열 - "" 나 ''로 둘러싸며 순서가 존재한다.
순서는 index 0 부터 시작하며 띄어쓰기도 문자로 취급

Number

Number() -> 다른 타입을 Number 타입으로 변환

소수 n번째 자리까지 출력

    console.log(변수.toFixed(n));
    
    console.log(Number(true)); // 1
    console.log(Number(false)); // 0
    console.log(Number(""));	// 

parseInt()와 Number()의 차이점??

parseInt()는 문자열을 파싱해서 숫자를 찾음
Number()는 숫자를 생성하는 역할을 함

console.log(parseInt("2022년");	// 2022
console.log(Number("2022년");	// NaN

그렇지만 parseInt() 는 소수점 이하는 출력 불가
-> parseFloat() 존재

Math

	console.log(Math.min(10,20,1,2);	// 1

	let data = [10,20,30,4,40];
    console.log(Math.max(data)); // NaN
    console.log(Math.max(...data));
    스프레드 문법 전개를 해야함 (최신)
    
    // 반올림
    console.log(Math.round(4.6));	// 5
    console.log(Math.round(4.4);	// 4
    
    // ceil(올림) floor(내림)
    // 제곱근
    console.log(Math.sqrt(64));		// 8
    
    // n승 2의 3승
    console.log(Math.pow(2,3);		// 8

큰 숫자 사용 BigInt()

큰 숫자를 사용할 때에는 BigInt();를 사용함
Number 원시 값이 안정적으로 나타낼 수 있는
 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체
 
 정수 리터럴 뒤에 n을 붙이거나 BigInt() 호출하여 생성
 
 BigInt보다 더 큰 수를 사용하고 싶은 경우 -> 문자열로 표현
 

String

문자열
특수 문자 표현 -> 이스케이프 문자 사용

let txt3 = "mom said \"hello world\"";
// index[0] 부터 시작
// \t , 공배 또한 1개의 문자열로 처리함
// parseInt() -> 숫자형을 찾아서 표현

String의 메서드

. 찍으면 나오는 것
.length -> 11글자여도 index : 0 - 10 까지 (length-1);

.indexOf('E'); -> 인덱스 번호 반환
.search('F'); -> 인덱스 번호 반환

slice (시작 인덱스[,종료 인덱스]);

종료 인덱스 -1까지 반환

let txt = "abcAHelloBC";
let txt2 = "abcdef CEO ndkfms CEO";
console.log(txt.slice(1,3));
// 인덱스 1부터 2까지 출력 : bc

console.log(txt.slice(2));
// 인덱스 2부터 출력 : cdef CEO ndkfms CEO

substring (시작 인덱스[,종료 인덱스]);

// 시작 인덱스부터 종료인덱스 -1까지 반환
console.log(txt2.substring(1, 3));
console.log(txt2.substring(3, 1)); // 작동합니다.
console.log(txt2.substring(2));

slice와 substring의 차이점??

slice (시작, 종료)
시작 > 종료 인 경우 빈 문자열을 리턴 
substring (시작, 종료)
시작 > 종료 인 경우 start와 end의 위치를 바꿔서 결과를 계산함

음수인 경우
slice의 경우에는 문자열 끝에서 앞쪽으로 음수만큼 이동된 인덱스로 계산
substring의 경우 시작 부분을 0으로 변경하여 계산

replace(바꿀 문자열, 바뀔 문자열);

console.log(txt2.replace('CEO','cto');
// abcdef cto ndkfms CEO 앞 부분만 cto로 변경됨

// 다른 부분도 변경할려면 정규 표현식 사용
console.log(txt2.replace(/CEO/g, "cto"));

// 콘솔 환경의 경우 .replaceAll()로 모두 변경 가능

대소문자 변경

console.log(txt.toUpperCase());
console.log(txt.toLowerCase());

문자열 분리하기 split()

console.log(txt2.split(" ")); // 띄어쓰기 기준으로 잘라내기

문자열 양 끝 공백 제거 trim()

console.log("          a b c".trim()); // a b c