[2023 신입부원 기초 스터디] 정찬우 #7주차 - 종강 하니까 아무것도 하기 싫지만 윙크 스터디는 재밌어...

문자열 메소드

const str = '      haHA';

 

console.log(str.toUpperCase());  -  모두 대문자로 출력

console.log(str.toLowerCase());  -  모두 소문자로 출력

console.log(str.trim());   -  앞 뒤 공백 제거

console.log(str.trimStart());  - 앞 공백 제거

console.log(str.trimEnd());   -  뒤 공백 제거

console.log(str.repeat(int));   - int형 만큼 반환

console.log(str.padStart(10, '_'));  - 앞 _ 10개 추가

console.log(str.padEnd(10, '-'));  -  뒤 _ 10개 추가

console.log(str.indexOf('h'));  -  h가 몇번째 index 인지 출력

console.log(str.includes('H')); -  H가 있으면 true 아니면 false

console.log(str.startWith('h')); - h로 시작하면 true 아니면 false

console.log(str.replace('haHA' , 'HAHA'));  -  haHA를 HAHA로 바꿔줌     

console.log(str.substring(0, 5)); - 0~4번 index 값을 보여줌

 

    

 

배열 메소드

const arr = [1, 2, 3, 4, 5]

 

arr.push(6)  - 배열에의 맨 마지막에 6이 추가됨

arr.pop()  - 배열의 맨 뒤에 있는 요소 삭제

arr.unshift(6) - 배열에 맨 앞에 6을 추가하는 것

shift() - 배열의 맨 앞에 있는 요소 삭제

forEach( 함수) - 배열의 인자들을 실행할 함수의 인자들로 넣어주는 것

map ( 함수) - 배열의 인자들을 실행할 함수의 인자들로 넣어주는 것

🔑 forEach는 반환값이 없고, map은 반환값이 있다.

includes(찾을 값) - 배열안에 찾는 요소가 있으면 True 출력 , 없으면 False 출력

find(조건) - 배열 안에 조건을 만족하는 첫번째 요소를 출력 

findindex(조건) - 배열 안에 조건을 만족하는 첫번째 요소의 인덱스 값을 출력 

fill(요소, n) - n번 인덱스 값부터 배열 끝까지 지정한 요소로 삽입 

slice(n, k) - 배열 인덱스를 n ~ k-1까지 잘라서 새로운 배열을 만듦. 

splice(n, k) - 배열m인덱스를 n 부터 끝까지  k개를 잘라서 새로운 배열을 만듦. 

join() - 배열의 요소들을 이어붙임

concat(배열) - 원래 있던 배열에 concat한 배열을 추가함. 

filter(조건) - 조건에 충족되는 값만 출력

 

 

 

DOM

js를 html, css와 합치는 단계이다. 

• getElementsById(' id ') - html에서 작성한 id를 가진 요소를 출력 
• getElementsByClassName(' class ') - html에서 작성한 class를 가진 요소를 출력 
• getElementsByTagName(' tag ') - html에서 작성한 tag를 가진 요소를  출력 
• querySelctor(id 또는 tag 또는 class 등등) - 셋중에 뭐를 써도 상관없음
• querySelectorAll() : 인자로 지정한 선택자와 일치하는 요소들을 모두 선택해서 배열처럼 가져옴

이벤트

- 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것 

 

모듈

모듈이란 여러 기능들에 관한 코드가 모여있는 하나의 파일 로 다음과 같은 것들을 위해 사용한다.

• 유지보수성 : 기능들이 모듈화가 잘 되어있다면, 의존성을 그만큼 줄일 수 있기 때문에 어떤 기능을 개선한다거나 수정할 때 훨씬 편하게 할 수 있다.
• 네임스페이스화 : 자바스크립트에서 전역변수는 전역공간을 가지기 때문에 코드의 양이 많아질수록 겹치는 네임스페이스가 많아질 수 있다. 그러나 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제가 해결된다.
• 재사용성 : 똑같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 사용할 수 있다.