[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 2주차 - 3일차 회고⎜javascript

Javascript 표준 객체

 - 기본적으로 가지고 있는 객체

 - 프로그래밍을 하는데 기본적으로 필요한 도구들

 - string, Number, Array, Date, Math, 등등

 

이번 시간엔 Date객체와 Math 객체를 살펴보는 시간이었다.

 

Date 객체 : 매 순간 바뀌는 시간과 날짜에 관한 정보를 얻기 위해 사용하는 객체

예시

Date.now(); : 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리초를 반환

 

Date.prototype getter 메소드

• date.getFullYear() : 주어진 날짜의 현지 시간 기준 연도를 반환
• date.getDate() : 주어진 날짜의 현시 시간 기준 요일을 반환(숫자로 반환하는데 일요일은 0)
• date.getDay() : 주어진 날짜의 현지 시간 기준 일을 반환
• 기타, 나머지 궁금한 자료들은 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date에서 찾아서 사용할 것

Math 객체 : 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 Javascript 표준 내장 객체 / 정확한 결과를 얻어야 할 경우에는 Math 메소드를 사용하지 않는 것이 좋다.

• Math.min() : 주어진 숫자들 중 가장 작은 값을 반환
• Math.max() : 주어진 숫자들 중 가장 큰 값을 반환
• Math.random() : 0 이상 1 미만의 구간에서 난수를 반환, 구간 조절 가능
• Math.round() : 입력값을 반올림한 수와 가장 가까운 정수 값을 반환
• Math.floor() : 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환
• Math.ceil() : 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 integer로 반환
• 기타, 나머지 궁금한 자료들은 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math 참고할 것

 

DOM(Document Object Model)

 

• HTML 문서 요소의 집합
• HTML 문서는 각각 node와 object의 집합으로 문서를 표현
• 각각 node 또는 object에 접근하여 문서구조 / 스타일 / 내용 등을 변경할 수 있도록 하는 것

요소 선택

1. getElementById : id 속성값으로 요소를 선택해서 가져오는 친구, id는 하나만 지정해야 함, 중복으로 있는 경우 앞에 거만 가져옴
2. getElementsByClassName : class 속성값으로 요소를 선택해서 가져온다.
3. getElementsByTagName: 태그 이름을 기준으로 요소를 선택해서 가져온다.
4. getElementByName : name 속성값으로 요소를 선택해서 가져온다.
5. document.querySelector : 특정 속성이 아니라 내가 원하는 걸 선택자를 이용해서 가져온다 / 문서에서 만나는 제일 첫 번째 요소를 반환 /css 선택자와 동일
6. document.quarySelectorAll : querySelector와 동일하지만 다른 점은 n개를 가져올 수 있다 / 모든 요소를 가져와서 배열(같은) 데이터로 만들어 줌 /NodeList 배열

 

다른 요소 접근 : 특정 노드(요소)를 선택한 후, 그 요소의 형제, 부모, 자식 요소에 접근하는 방법

 - creatElement("HTML 요소") : HTML의 특정 노드 생성 / let p = document.createElement("p";) -> 괄호 안에는 HTML의 요소인 태그명을 넣어주면 됨

• getParent : 부모 요소를 가져오는 친구 / Javascript 에선 element.parentNode로 사용가능
• pSibling : 현재 요소에서 이전 형제 요소를 가져오는 친구(#text와 주석까지 모두 node로 가져온다.) / Javascript 에선 element.preciousSibling로 사용가능
• pEibling : 현재 요소와 같은 태그 이름을 가진 이전 형제 요소를 가져오는 친구 / Javascript 에선 element.preciousElementSibling로 사용가능
• nEsibling : 현재 요소의 다음 형제 요소를 가져오는 친구 / Javascript 에선 element.nextsibling로 사용가능
• nESibling : 현재 요소와 같은 태그 이름을 가진 다음 형제 요소를 가져오는 친구 / Javascript 에선 element.nextElementsibling로 사용가능 

요소 추가/삭제

• 요소.append() / 요소.appendChild() : 선택된 요소의 맨 뒤의 자식 요소로 추가됨
• 요소.append() : 선택된 요소의 맨 앞쪽인 자식 요소로 추가됨
• 요소.before() : 선택된 요소의 앞에 있는 형제 요소에 추가됨
• 요소.after() : 선택된 요소의 바로 뒤인 형제 요소에 추가됨
• 요소.remove() : 선택된 요소 삭제
• 요소.removeChild() :자식을 삭제하는 친구 / 부모요소.removeChild(삭제할요소) -> 삭제할 때 어떤 걸 삭제한다. 를 알려주고 삭제가 된다. ( removeChidl 함수에 return 값이 있다.) // removeChild()는 부모를 필수로 알아야 한다.

이벤트(addEventListener)

 - 요소.addEventListener(이벤트, 명령) : 선택 요소에 지정한 이벤트가 발생하면, 약속된 명령어를 실행시키는 메소드

 

• Click : 클릭 

• Mouse 계열
     • Mouseover : 요소에 커서를 올렸을 때 

     • Mouseout : 마우스가 요소를 벗어날 때
     • Mousedown : 마우스 버튼을 누르고 있는 상태

     • Mouseup : 마우스 버튼을 떼는 순간 

• Focus : 포커스가 갔을 때
• Blur : 포커스가 벗어나는 순간 

• Key 계열
    • Keypress : 키를 누르는 순간+누르고 있는 동안 계속 발생

    • Keydown : 키를 누르는 순간에만 발생 • Keyup : 키를 눌렀다가 떼는 순간 

    • Load : 웹페이지에 필요한 모든 파일(html, css, js 등)의 다운로드가 완료되었을 때

• Resize : 브라우저창의크기가 변경될 때
• Scroll : 스크롤이 발생할 때
• Unload : 링크를 타고 이동하거나, 브라우저를 닫을 때 

• Change : 폼필드의상태가변경되었을때 

 

"모던자바스크립트 Deep DIve" 책을 사고 아직 별로 보지를 못했다. 교육 때 들은 회고와는 별개로 책을 정리하는 블로깅을 올리면서 기본 개념을 확실하게 잡아나가기 위해 어제 마음먹었으나, 쉽지 않은 거 같다. 좀 더 부지런해져서 교육시간 회고 마무리를 최대한 빨리 하고, 책 관련 블로깅을 동시에 시작해 보는 걸로 하자.