[2023 신입부원 기초 스터디] 김찬중 #7주차 js(보충)

[메소드]

 

1. 문자열 메소드

// 문자열을 대문자로 변환

toUpperCase()

 

// 문자열을 소문자로 변환

toLowerCase()

 

// 문자열 앞과 뒤의 공백을 제거

trim()

 

// 문자열 앞의 공백 제거

trimStart()

 

// 문자열 뒤의 공백 제거

trimEnd()

 

// 옵션의 카운트만큼 반복,

새로운 문자열로 반환

repeat()

 

// 좌측부터 문자열의 시작에 다른 문자열을 채운다.

padStart()

 

// 우측부터 현재 문자열에 다른 문자열을 채운다.

padEnd()

 

// 문자열에서 특정 문자열을 찾고,

해당 문자열이 첫번째로 나타내는 index 리턴

indexOf()

 

// 문자열이 특정 문자열을 포함하는지 확인

includes()

 

// 문자열이 특정 문자로 시작하는지 확인

startWith()

 

// 문자열이 특정 문자로 끝나는지 확인

endsWith()

 

// (A, B)일때 A를 B로 치환

단, A가 여러개여도 첫 번째 A만 바뀜

모두 바꾸고 싶다면 replaceAll() 사용

replace()

replaceAll()

 

// (a, b) 일 때 a부터 b 앞까지 잘라서 반환

substring()

slice()

 

// 문자열을 잘라서 배열로 저장

split()

 

 

2. 배열 메소드

// 배열의 마지막에 새로운 요소 추가

push()

 

// 배열의 마지막 요소 제거

pop()

 

// 배열의 첫 번째 자리에 새로운 요소 추가

unshift()

 

// 배열 맨 앞의 값 제거

shift()

 

// 배열의 요소 반복, 함수 호출

forEach()

 

// 배열 내 모든 요소의 주어진 함수 호출 결과를 모으고,

새로운 배열을 반환

map()

 

// 배열을 순환하며 조건에 맞는

첫 번째 배열요소를 반환

find()

 

// 배열을 순환하며 조건에 맞는

첫 번째 요소의 인덱스를 반환

findIndex()

 

// 배열을 같은 값으로 채움

fill()

 

// 배열의 모든 요소를 연결, 하나의 문자열을 만듬

join()

 

// 두 개의 문자열을 하나의 문자열로 만듬

concat()

 

// filter 이름 그대로 조건에 맞는 요소를 거르고,

새로운 배열 반환

filter()

 

 

3. DOM

Document Object Model

HTML 요소들을 계층적으로 표현

생성 수정 삭제

모든 HTML 요소들은

HTML 돔을 통해 접근 가능함

 

getElementById() - HTML의 태그안에 id 요소를 지정해 해당 요소를 가져옴

getElementByClassName() - HTML의 class 속성을 지정해 해당 요소를 가져옴 

getElementByTagName() - HTML의 tag 이름을 지정해 해당 요소를 가져옴

querySelector() - 이를 이용해서 요소를 가져오는게 위의 방식보다 구체적임.

querySelectorAll() - 요소 리스트를 나타내는 NodeList를 반환함.

 

 

4. 이벤트

마우스, 키보드 등 어떤 원인에 의한 사건이 발생하는 것.

동적인 웹사이트를 구축할 수 있다.

 

addEventListener() - js에서 이벤트를 등록할 때 가장 권장되는 방법.

 

removeEventListener()

add~를 통해 이벤트를 추가할 수 있으며

마찬가지로 remove를 통해 제거도 가능하다.

 

 

5. 모듈

모듈 = 코드를 모아둔 하나의 파일

재사용성이나 유지보수성을 위해 사용.

 

모듈의 규칙은 X

일반적으로 큰 목적하나를 달성하기 위해

관련된 조각 코드, 함수들을 모아 하나의 모듈로 작성.

 

쉽게 말하자면 하나의 js 파일이다.

이렇게 생각하면 쉬움.

 

import를 이용해 외부에서 가져오거나

export를 이용해 내보낼 수 있다.