인사이트
[JavaScript] 정리2 본문
1. Browser Object Model
- 웹 브라우저와 관련한 객체(개발자가 이미 만들어진(제공해준) 기능을 가져다가 쓸 수 있도록 한 것)의 모음
2. window객체가 BOM 중 최상위
- 그래서 생략이 가능하다
ex) window.document.write(); // 자바스크립트에서 브라우저에 보여질 수 있게 해주는 코드
위 대신 document.write();만 해도 잘 동작한다.
왜 잘 동작할까?
- document위에는 window밖에 없기 때문에(BOM 그림 확인하면 이해감) 굳이 써주지 않아도 document앞에는window겠거니 라고 판단하기 때문
3. setInterval함수
- 1초마다 특정 동작을 수행하게 할 수 있는 함수
- 짝꿍으로는 clearInterval()이 있다 - 멈추게 하는 역할
- 아래 코드를 실행해보면 1초마다 현재 시간이 브라우저 화면에 찍힌다
4. setTimeout함수
- setInterval과 비슷하지만 내가 임의로 정한 시간 이후에는 작동이 멈춤
- 짝꿍으로는 clearTimeout()이 있다 - 멈추게 하는 역할
- 아래 코드를 실행해보면 3초 뒤 "3초 지났다"라는 문구가 console에 찍히고 끝난다
5. document.getElementById();
- html에 있는 태그에서 해당하는 id의 값을 선택한다(선택자를 잡은 것)
6. getElementByTagName();
- 해당 경우에는 여러개의 tag들이 잡힐 수 있는데, 이 때는 순서대로 배열에 담기게 된다
- 아래 코드를 보면 h2가 2개가 잡혀서 배열에 들어갔기 때문에 그 중 하나를 꺼내 쓸 수 있게 된 것이다
- 결과를 출력해보면 "한식" 글자색이 초록색으로 변한다
7. firstElementChild
- 자식 중 첫째자식을 선택할 수 있게 해주는 속성
- 아래 코드의 해석은 id가 wrap인 애의 자식 중 첫번째 자식(바로 아래 있는 p)의 글자색상을 빨간색으로 하겠다
8. form태그 내 input태그의 submit타입 => onsubmit(전부 소문자임!)
- 서버로 form태그 내 있는 내용을 전송하는 함수
- 코드해석
1) HTML에 있는 "f1"이라는 "name속성"을 가진 애의 하위에 "user_pw1, user_pw2"라는
"이름 속성"을 가진 애를 각각 pw1, pw2라는 변수로 둔다.
2) pw2의 값에 pw1에 적었던 값을 대입한다.
3) pw2의 칸에는 더이상 무엇인가 적을 수 없게 막는다.
9. form태그 내 input태그의 checkbox타입 => onclick(전부 소문자임!)
- 한 번 클릭 시 어떻게 하라는 클릭 이벤트 함수
- 보통 checkbox는 checked를 쓰는데 checked가 아니라 onclick인 이유는
한 번 누르면 선택이 되고, 또 한 번 누르며 해제가 되어야 하니까 onclick으로 다루는 게 훨씬 쉬움
- 코드해석
1) 전체선택 버튼을 한 번 누를 때마다 무슨 일이 일어나냐면
2) 만약에 전체선택 버튼을 눌러서 해당 체크박스가 체크가 되었다? 그러면 나머지 과목1~3 전부
체크 되게 하고,
3) 버튼을 눌렀는데 해당 체크박스가 체크 해제 되면 과목 1~3에 체크되어있던 거 전부 해제해라
'자바스크립트' 카테고리의 다른 글
[JavaScript] 정리 3 (0) | 2021.05.22 |
---|---|
[JavaScript] 정리1 (0) | 2021.05.18 |
[JavaScript] 반복문의 제어 (0) | 2021.05.18 |