21. 자바스크립트 기본 정리3

 

1. 객체

String 객체

const str1 = 'JavaScript';
const str2 = new String('JavaScript');

str1 == str2; //true
str1 === str2; //false

 

Date 객체

날짜, 시간 등을 쉽게 처리할 수 있는 내장 객체

    const 변수명 = new Date(); // 현재 날짜 시간
    const 변수명 = new Date(년, 월ㅇ, 일,시, 분, 초, 밀리초); // 입력한 날짜 시간에 대한 객체

연도(year)
2자리로 표기
    예) 23 -> 1923년
4자리로 표기
    예) 2024 -> 2024년

월(month)
0 ~ 11
    예) 0 -> 1월, 11 -> 12월

 

 

 

2. 폼(form) 관련 객체

 

폼(form) 개체

• 일반적인 폼 요소에 접근할 때 사용
• document.forms 컬렉션을 이용해서도 접근이 가능

EX:
<form name='myform' id ='regform' method='post' action='/regist'>
    아이디: <input type='text' name='userid' id='userid'><br>
    비밀번호: <input type='pawword' name='userpw' id='userpw'><br>
</form>

 

폼 접근하기

const frm = document.myform;            // name
const frm = document.forms['myform'];   //name
const frm = document.forms[0];          //폼 중에서 첫번째 폼
const frm = document.getElementById('regform); // id

 

아이디 입력상자에 접근하기

const userid = frm.userid;  // name
const userid = document.forms['myform'].elements['userid]; // name
const userid = document.forms[0].elements[0];
const userid = document.forms[0][0];
const userid = document.getElementById('userid'); // id

 

3. 브라우저 객체

window 객체

웹 브라우저의 창이나 탭을 설정하기 위한 객체들이며, 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현할 수 있음. 모든 내장객체의 최상위 객체

    window.alert()
    window.confirm()
    window.promot()

 

setTimeout()

웹 브라우저의 창이나 탭을 설정하기 위한 객체들이며, 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현할 수 있음. 모든 내장객체의 최상위 객체

    const  변수명 = function(){
        ...
    }

    const st = setTimeout(변수명, 밀리초);

 

clearTimeout()

일정 시간 후에 일어난 setTimeout()을 취소함

 

setInterval()

일정 시간마다 매개변수로 제공된 함수를 실행

 

clearInterval()

일정 시간마다 일어날 setInterval()을 취소함

 

 

location 객체

현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용

https://koreaisacademy.com/community/jobinterview_view.asp?txtContentSeq=208

URL
https://koreaisacademy.com/community/tv_view.sap

 

Protocol: 클론을 포함하는 http, https, ftp 등 프로토콜 정보를 반환

예) https://

 

hostname: 호스트의 이름과 포트번호를 반환

    예) https://koreaisacademy.com/

 

pathname: URL 경로부분을 반환

    예) /community/tv_view.sap

 

href: 페이지 URL 전체 정보를 반환 또는 URL을 지정하여 페이지를 이동시킴

 

reload(): 새로고침

 

history 객체

• 브라우저의 히스토리 정보를 문서와 문서상태 목록으로 저장하는 객체
• 사용자의 개인 정보를 보호하기 위해 이 객체의 대부분의 기능을 제한

    back(): 페이지를 뒤로 이동시킴
    forward(): 페이지를 아프올 이동시킴
    go(0): 새로고침, location, reload()와 같은 기능

 

navigator 객체

브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 정보를 저장하는 객체

geolocation: GPS정보를 수신하는 프로퍼티

 

 

4. 노드(Node)와 관련된 정보

document 객체

• DOM(Document Object Model)
• HTML문서 또는 XML문서 등을 접근하기 위한 일종의 인터페이스 역할
• 문서내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공
• 웹 페이지 자체(body)를 의미하는 객체
• 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document 객체로부터 시작

    getElementById(): 해당 아이디의 요소를 선택
    getElementByTagName(): 해당 태그 이름의 요소를 모두 선택
    getElementByClassName(): 해당 클래스에 속한 요소를 모두 선택
    getElementByName(): 해당 name 속성값을 가지는 요소를 모두 선택
    querySelectorAll(): 선택자로 선택되는 요소를 모두 선택
    querySelector(): 선택자로 선택되는 요소를 선택

노드(node)

HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장

 

노드 종류

문서 노드: 문서 전체를 나타내는 노드
요소 노드: HTML 모든 요소는 요소노드이며, 속성노드를 가질 수 있음
속성 노드: HTML 모든 요소는 속성노드이며, 속성노드에 관한 정보를 가지고 있음
텍스트 노드: HTML 모든 텍스트는 텍스트노드
주석 노드: HTML 모든 주석은 주석노드

 

노드인 관계

parentNode: 부모 노드
children: 자식 노드
childNodes: 자식 노드 리스트
firstChild: 첫번째 자식 노드
firstElementChild: 첫번째 자식 요소 노드
lastChild: 마지막 자식 노드
nextSibiling: 다음 형제 노드
previousSibiling: 이전 형제 노드