String 객체
const str1 = 'JavaScript';
const str2 = new String('JavaScript');
str1 == str2 // true
str1 === str2 // falseDate 객체
날짜, 시간 등을 쉽게 처리할 수 있는 내장 객체
const 변수명 = new Date(); // 현재 날짜 시간
const 변수명 = new Date(년, 월, 일, 시, 분, 초, 밀리초); // 입력한 날짜 시간에 대한 객체연도(year)
2자리로 표기
예) 23 -> 1923년
4자리로 표기
예) 2024 -> 2024년
월(month)
0 ~ 11
예) 0 -> 1월, 11 -> 12월
폼(form) 객체
- 일반적인 폼 요소에 접근할 때 사용
- document.forms 컬렉션을 이용해서도 접근이 가능
<form name='myform' id'regform' method='post' action='/regist'>
아이디: <input type='text' name='userid' id='userid'><br>
비밀번호: <input type='password' 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'); // idwindow 객체
웹 브라우저의 창이나 탭을 설정하기 위한 객체들이며, 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현할 수 있음.
모든 내장객체의 최상위 객체
window.alert()
window.confirm()
window.prompt()setTimeout()
일정 시간이 지난 후 매개변수로 제공된 함수를 실행
const 변수명 = function(){
...
}
const st = setTimeout(변수명, 밀리초);
clearTimeout()
일정 시간 후에 일어날 setTimeout()을 취소함
setInterval()
일정 시간마다 매개변수로 제공된 함수를 실행
clearInterval()
일정시간마다 일어날 setInterval()을 취소함
문제
현재 시간을 출력하는 문서를 만들어보자.
(단, 시작 버튼을 누르면 콘솔에 현재 시간을 초마다 출력하고, 중지 버튼을 누르면 시간이 정지됨. 다시 시작 버튼을 누르면 시간이 다시 출력되기 시작)
[시작] [중지]콘솔
2024-04-17 11:16:00
2024-04-17 11:16:01
2024-04-17 11:16:02
2024-04-17 11:16:03
2024-04-17 11:16:04
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>시간출력</title>
</head>
<body>
<script>
const clock = function(){
const time1 = new Date()
console.log(`${time1.getFullYear()}-${time1.getMonth()}-${time1.getDate()} ${time1.getHours()}:${time1.getMinutes()}:${time1.getSeconds()}`)
}
const start = function(){
si = setInterval(clock, 1000)
}
const stop = function(){
clearInterval(si)
console.log('중지합니다.')
}
</script>
<form action="time" name="frm" id="frm">
<button type="button" onclick="start()">시작</button>
<button type="button" onclick="stop()">중지</button>
</form>
</body>
</html>
location 객체
현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용
URL
https://koreaisacademy.com/community/tv_view.asp
Protocol
콜론을 포함하는 http, https, ftp 등 프로토콜 정보를 반환
예) https://
hostname
호스트의 이름과 포트번호를 반환
예) https://koreaisacademy.com/
pathname
URL 경로부분을 반환
예) /community/tv_view.asp
href
페이지 URL 전체 정보를 반환 또는 URL을 지정하여 페이지를 이동시킴
reload()
새로고침
history 객체
- 브라우저의 히스토리 정보를 문서와 문서상태 목록으로 저장하는 객체
- 사용자의 개인 정보를 보호하기 위해 이 객체의 대부분의 기능을 제한
- back(): 페이지를 뒤로 이동시킴
forward(): 페이지를 앞으로 이동시킴
go(0): 새로고침, location.reload()와 같은 기능
navigator 객체
브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 정보를 저장하는 객체
geolocation: GPS정보를 수신하는 프로퍼티document 객체
- DOM(Document Object Model)
- HTML문서 또는 XML문서 등을 접근하기 위한 일종의 인터페이스 역할
- 문서내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공
- 웹 페이지 자체(Body)를 의미하는 객체
- 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document 객체로부터 시작
- getElementById(): 해당 아이디의 요소를 선택
getElementsByTagName(): 해당 태그 이름의 요소를 모두 선택
getElementsByClassName(): 해당 클래스에 속한 요소를 모두 선택
getElementsByName(): 해당 name 속성값을 가지는 요소를 모두 선택
querySelectorAll(): 선택자로 선택되는 요소를 모두 선택
querySelector(): 선택자로 선택되는 요소를 선택
노드(node)
HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장
노드 종류
문서 노드: 문서 전체를 나타내는 노드
요소 노드: HTML 모든 요소는 요소노드이며, 속성노드를 가질 수 있음
속성 노드: HTML 모든 요소는 속성노드이며, 속성노드에 관한 정보를 가지고 있음
텍스트 노드: HTML 모든 텍스트는 텍스트노드
주석 노드: HTML 모든 주석은 주석노드
노드의 관계
parentNode: 부모 노드
children: 자식노드
chileNodes: 자식 노드 리스트
firstChild: 첫번째 자식 노드
firstElementChild: 첫번째 자식 요소 노드
lastChild: 마지막 자식 노드
nextSibling: 다음 형제 노드
previousSibling: 이전 형제 노드
노드 메서드
appendChild(): 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가
insertBefore(): 새로운 노드를 특정 자식 노드 바로 앞에 추가
insertData(): 새로운 노드를 텍스트 데이터로 추가
createElement(): 새로운 요소 노드를 만듦
innerHTML: HTML요소와 텍스트를 삽입
innerText: 텍스트만 삽입
createAttribute(): 새로운 속성 노드를 만듦
createTextNode(): 새로운 텍스트 노드를 만듦
removeChild(): 자식 노드 리스트에서 특정 자식 노드를 제거. 노드가 제거되면 해당 노드를 반환. 노드가 제거될 때 노드의 자식들도 다같이 제거
removeAttribute(): 특정 속성 노드를 제거
cloneNode(): 기존의 존재하는 노드와 동일한 새로운 노드를 생성하여 반환(true: 자식까지 복사, flase: 자식은 복사하지 않음)
'코딩 > Web' 카테고리의 다른 글
| node.js (1) | 2024.04.26 |
|---|---|
| 자바스크립트 정규 표현식, 이벤트 (0) | 2024.04.18 |
| 자바스크립트 함수 (1) | 2024.04.16 |
| 자바스크립트 반복문과 배열 (1) | 2024.04.16 |
| 자바스크립트 JavaScript (1) | 2024.04.15 |
