학습한 내용
Javascript 8일차. DOM과 폼, 자바스크립트 그리고 BOM에 대해서 학습했다.
문서 객체 모델(DOM)
자바스크립트가 웹 문서를 동적으로 다룰 수 있도록 문서에 있는 각 요소를 객체 형태로 처리하는 것
브라우저 객체 모델(BOM)
자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것
학습소감
각 객체에 내장되어 있는 객체들이 많아서 복습과 실습을 자주 해봐야 할 것 같다.
어제 스터디를 할 때 message의 값을 소문자로 변경하고 좌우공백을 제거하라는 문제가 있었다.
const message = " TASTE THE RAINBOW! ";
우선 소문자로 변경하기 위해 구글링을 해서 toLowerCase()를 사용하면 된다는 것을 알았다. 그래서 lowerChange 변수에 소문자로 변경한 값을 넣어줬다.
const lowerChange = message.toLowerCase();
그 후에 좌우공백을 제거하기 위해 구글링을 통해서 replace() 함수에 대해 알게됐다. 어제 문제를 풀 때만 해도 replace가 단순히 공백을 제거해주는 함수인줄 알았는데 지금 글쓰면서 생각해보니 replace는 '대체하다'라는 의미가 있는 단어였다. 그래서 공백을 아무것도 없는 걸로 대체한다는 의미였다는 걸 이제야 깨달았다.
살아가는 그 이유 블로그
const deleteSpace = lowerChange.replace(/(^\s*)|(\s*$)/g, ""); console.log(deleteSpace);
위에서 공백을 '/(^\s*)|(\s*$)/g' 이걸로 표현했는데 이건 정규표현식이라는 것이었다.
(^\s*) 으로 표현한 앞 부분은 '공백으로 시작하는 모든 부분'을 의미한다.
중간에 있는 |는 '앞 부분 또는 뒷 부분'을 의미한다.
(\s*$) 으로 표현한 뒷 부분은 '공백으로 끝나는 모든 부분'을 의미한다.
마지막에 있는 g는 전체 문자열을 탐색해서 모든 일치를 반환하도록 지정하는 전역 탐색 플래그다.
hitomis님의 블로그
정규표현식 MDN
좌우공백을 제거할 때 나는 replace() 함수를 사용했지만 출제자가 의도한 것은 trim() 함수였다고 한다.
trim() MDN
