[2023 신입부원 기초 스터디] 박승환 #7주차 - 오랜만이다 js야

@@드디어 1학기가 좋강을 했다. 오늘은 js 보충 수업을 할 것 같다. 이번 강의는 보충 수업이라 외우는 것 보다 이런거가 있다는 식으로 공부하는 방향으로 나아가볼까 한다.@@

 

문자열 메소드

• toUpperCase() - 대문자로 바꾸는 것
• toLowerCase() - 소문자로 바꾸는 것
• trim() - 공백 지우기
• -trimStart() - 앞의 공백 지우기 
• -trimEnd() - 뒤의 공백 지우기 
• repeat(n) - n번 반복 
• padStart(n, '문자') - n의 길이의 문자를 앞에 채우는 것
• padEnd(n, '문자') - n의 길이의 문자를 뒤에 채우는 것                                                                                             //HTML, CSS에서 padding 과 같다.//
• indexOf(문자) - 한 문자열의 특정 문자의  index값을 검색해서 출력해주는 것.
• inculdes(키워드) - 한 문자열의 내가 찾고자 하는 키워드가 있으면 True, 없으면 False를 출력한다.
• startsWith(문자) - 한 문자열 중 시작하는 문자가 내가 입력한 문자와 같으면 True, 다르면 False를 출력한다.
• endsWith(문자) - 한 문자열 중 끝나는 문자가 내가 입력한 문자와 같으면 True, 다르면 False를 출력한다.
• replace(교체할 문자, 교체할 문자의 자리에 새로 넣을 문자) - 내가 원하는 문자를 다른 문자로 교체한다.                     - replace는 교체할 문자가 한개가 아니라 똑같은게 여러개 있어도 가장 앞에 있는 교체할 문자를 교체한다
• replaseAll(교체할 문자, 교체할 문자의 자리에 새로 넣을 문자) - 교체할 문자가 여러개일 때 모두 다른 문자로 교체하게 하는 것. 
• substring(n, v) - n부터 v-1까지의 인덱스에 해당하는 값을 출력한다.
• split('기준 문자') - 설정한 기준이 되는 문자로 나누어 배열함.
• slice(시작인자, 선택적 인자) - 지정한 시작인자부터 선택한 인자-1까지의 인덱스 값에 해당하는 문자를 제거한다.

배열 메소드

• push(n1, n2, n3,....) - 만든 배열에 맨 마지막에 추가하는 것. 
• pop() - 배열의 맨 뒤에 있는 요소 삭제 

 

• unshift( (n1, n2, n3,.....) - 만든 배열에 맨 앞에 추가하는 것
• shift() - 배열의 맨 앞에 있는 요소 삭제
• forEach(실행할 함수) - 배열의 인자들을 실행할 함수의 인자들로 넣어주는 것.  - 반환값이 없다.
• map(실행할 함수) - 배열의 인자들을 실행할 함수의 인자들로 넣어주는 것.  - 반환값이 있다.
• includes(요소) - 배열안에 찾는 요소가 있으면 True, 없으면 False
• find(조건) - 배열 안에 조건을 만족하는 첫번째 요소를 출력 
• findindex(조건) - 배열 안에 조건을 만족하는 첫번째 요소의 인덱스 값을 출력 
• fill(값, n) - 배열의 요소 모두를 n번 인덱스 값부터 끝까지 지정한 값으로 채워 넣기 
• slice(n, v) - 배열의 요소의 인덱스를 n 부터 v-1까지 잘라 새로운 배열을 만듦. 
• splice(n, v) - 배열의 요소의 인덱스를 n 부터 끝까지  v개를 잘라 새로운 배열을 만듦. 
• join() - 배열의 요소들을 이어붙여 하나의 새로운 문자열을 만듦.
• concat(새로운 배열) - 기본의 배열에 새로운 배열을 추가하는 기능. 
• filter(조건) - 배열 안에 조건을 만족하는 요소들을 출력.
• reduce(함수) - 잘 모르겠다 ㅎㅎ 

 

@@객체나 배열의 구조분해 할당이나 중첩은 이해하는 것이 중요한 것 같다.@@

 

DOM

//js를 html과 css와 연결해서 작성하는 단계이다.//

• getElementsById('Id값') - html에서 작성한 id를 출력 
• getElementsByClassName('class 이름') - html에서 작성한 클래스를 출력 
• getElementsByTagName('tag이름') - html에서 작성한 태그를 출력 
• querySelctor(id or 태그 or class등등) - 작성한 것을 출력함. 

querySelctor를 이용해 원하는 요소를 지정하고 html의 지정한 요소를  js로 바꿀 수 있다.

예를 들면 innerText나 style.color 등등... 

 

EVENT

• addEventListener('이벤트 종료 표시', 함수) - handler를 통한 함수를 만들어 종료표시를 할 때 마다 함수 실행됨.
• removeaddEventListener - addEventListener를 삭제함. 

 

모듈

• export - 만든 함수나 변수를 다른 파일에도 쓸 수 있게 내보냄.
• type = "module" - export한 것을 html에 쓰기 위해 연결된 링크 태그에 작성.
• import{가져올 모듈) from 파일 위치 - 외부 모듈 가져오기 

 

---

@@이번 강의는 진짜 js에 대해서 배운것 같다. js를 html과 css처럼 딱 정의하지는 못하겠지만 웹에서 가장 중요하다는 것을 알 것 같다. 모든 js강의중 가장 중요한 것 같기 때문에 복습을 철저히 해야겠다.!@@