[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초마다 현재 시간이 브라우저 화면에 찍힌다

setInterval예제

---

4. setTimeout함수

    - setInterval과 비슷하지만 내가 임의로 정한 시간 이후에는 작동이 멈춤

    - 짝꿍으로는 clearTimeout()이 있다 - 멈추게 하는 역할

    - 아래 코드를 실행해보면 3초 뒤 "3초 지났다"라는 문구가 console에 찍히고 끝난다

setTimeout예제

---

5. document.getElementById();

    - html에 있는 태그에서 해당하는 id의 값을 선택한다(선택자를 잡은 것)

---

6. getElementByTagName();

    - 해당 경우에는 여러개의 tag들이 잡힐 수 있는데, 이 때는 순서대로 배열에 담기게 된다

    - 아래 코드를 보면 h2가 2개가 잡혀서 배열에 들어갔기 때문에 그 중 하나를 꺼내 쓸 수 있게 된 것이다

    - 결과를 출력해보면 "한식" 글자색이 초록색으로 변한다 

html내용 중 일부

자바스크립트 내용 중 일부

---

7. firstElementChild

    - 자식 중 첫째자식을 선택할 수 있게 해주는 속성

    - 아래 코드의 해석은 id가 wrap인 애의 자식 중 첫번째 자식(바로 아래 있는 p)의 글자색상을 빨간색으로 하겠다

firstElementChild 속성 사용

---

8. form태그 내 input태그의 submit타입 => onsubmit(전부 소문자임!)

    - 서버로 form태그 내 있는 내용을 전송하는 함수

    - 코드해석

        1) HTML에 있는 "f1"이라는 "name속성"을 가진 애의 하위에 "user_pw1, user_pw2"라는

           "이름 속성"을 가진 애를 각각 pw1, pw2라는 변수로 둔다.

        2) pw2의 값에 pw1에 적었던 값을 대입한다.

        3) pw2의 칸에는 더이상 무엇인가 적을 수 없게 막는다.

좌측은 html코드, 우측은 js코드

결과화면

---

9. form태그 내 input태그의 checkbox타입 => onclick(전부 소문자임!)

    - 한 번 클릭 시 어떻게 하라는 클릭 이벤트 함수

    - 보통 checkbox는 checked를 쓰는데 checked가 아니라 onclick인 이유는

      한 번 누르면 선택이 되고, 또 한 번 누르며 해제가 되어야 하니까 onclick으로 다루는 게 훨씬 쉬움

    - 코드해석

        1) 전체선택 버튼을 한 번 누를 때마다 무슨 일이 일어나냐면

        2) 만약에 전체선택 버튼을 눌러서 해당 체크박스가 체크가 되었다? 그러면 나머지 과목1~3 전부

           체크 되게 하고,

        3) 버튼을 눌렀는데 해당 체크박스가 체크 해제 되면 과목 1~3에 체크되어있던 거 전부 해제해라

좌측은 html코드, 우측은 js코드