객체
String 객체
- length : 문자열의 길이를 반환한다.
더보기
결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String 객체</title>
</head>
<body>
<h2>String 객체</h2>
<script>
const str1 = "안녕하세요. JavaScript";
const str2 = new String("안녕하세요. JavaScript");
// length: 문자열의 길이를 반환
console.log(str1.length);
</script>
</body>
</html>
- indexOf() : 특정 문자나 문자열이 처음 등장하는 위치를 인덱스로 반환한다.
더보기
결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String 객체</title>
</head>
<body>
<h2>String 객체</h2>
<script>
const str1 = "안녕하세요. JavaScript";
const str2 = new String("안녕하세요. JavaScript");
// indexOf(): 특정 문자나 문자열이 처음으로 등장하는 위치를 인덱스로 변환
console.log(str1.indexOf('J'));
console.log(str1.indexOf('Java'));
console.log(str1.indexOf('java')); // 대소문자 구별, -1
console.log(str1.indexOf('a'));
console.log(str1.lastIndexOf('a')); // 뒤에서부터 찾기
</script>
</body>
</html>
- charAt() : 특정 문자열에서 전달받은 인덱스에 위치한 문자를 반환한다.
더보기
결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String 객체</title>
</head>
<body>
<h2>String 객체</h2>
<script>
const str1 = "안녕하세요. JavaScript";
const str2 = new String("안녕하세요. JavaScript");
// charAt(): 특정 문자열에서 전달 받은 인덱스에 위치한 문자를 반환
console.log(str1.charAt(7));
</script>
</body>
</html>
- includes() : 특정 문자열에서 전달 받은 문자열이 포함되어 있는지 여부를 반환한다.
더보기
결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String 객체</title>
</head>
<body>
<h2>String 객체</h2>
<script>
const str1 = "안녕하세요. JavaScript";
const str2 = new String("안녕하세요. JavaScript");
// includes(): 특벙 문자열에서 전달 받은 문자열이 포함되어 있는지 여부를 반환
console.log(str1.includes('Java'));
console.log(str1.includes('java'));
</script>
</body>
</html>
- substring() : 전달 받은 시작 인덱스부터 종료 인덱스 직전까지의 문자열을 추출한다.
더보기
결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String 객체</title>
</head>
<body>
<h2>String 객체</h2>
<script>
const str1 = "안녕하세요. JavaScript";
const str2 = new String("안녕하세요. JavaScript");
// substring(): 전달 받은 시작 인덱스부터 종료 인덱스 직전까지의 문자열을 추출
console.log(str1.substring(7)); // 7 ~
console.log(str1.substring(7, 11)); // 7 ~ 10
</script>
</body>
</html>
- replace() : 원본 문자열의 일부를 전달받은 문자열로 치환한다.
더보기
결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String 객체</title>
</head>
<body>
<h2>String 객체</h2>
<script>
const str1 = "안녕하세요. JavaScript";
const str2 = new String("안녕하세요. JavaScript");
// replace(): 원본 문자열의 일부를 전달 받은 문자열로 치환
console.log(str1.replace('안녕하세요', 'Hello'));
</script>
</body>
</html>
- split() : 구분자를 기준으로 나뉜 문자열을 하나의 배열에 저장한다.
더보기
결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String 객체</title>
</head>
<body>
<h2>String 객체</h2>
<script>
const str1 = "안녕하세요. JavaScript";
const str2 = new String("안녕하세요. JavaScript");
// split(): 구분자를 기준으로 나뉜 문자열을 하나의 배열에 저장
console.log(str1.split('.'));
const str3 = "김사과, 오렌지, 반하나, 이메론, 배애리, 채리";
const students = str3.split(', ');
console.log(students);
</script>
</body>
</html>
- trim() : 문자열의 앞 뒤 공백을 제거한다.
더보기
결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String 객체</title>
</head>
<body>
<h2>String 객체</h2>
<script>
const str4 = " JavaScript ";
// trim(): 문자열의 앞 뒤 공백을 제거
console.log(`😀:${str4}😀`);
console.log(`😀:${str4.trim()}😀`);
</script>
</body>
</html>
- toUpperCase() : 문자열을 모두 대문자로 변환한다.
더보기
결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String 객체</title>
</head>
<body>
<h2>String 객체</h2>
<script>
const str4 = " JavaScript ";
// toUpperCase(): 문자열을 모두 대문자로 변환
console.log(`😀${str4.trim().toUpperCase()}😀`);
</script>
</body>
</html>
- toLowerCase() : 문자열을 모두 소문자로 변환한다.
더보기
결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String 객체</title>
</head>
<body>
<h2>String 객체</h2>
<script>
const str4 = " JavaScript ";
// toLowerCase(): 문자열을 모두 소문자로 변환
console.log(`😀${str4.trim().toLowerCase()}😀`);
</script>
</body>
</html>
Date 객체
- 날짜, 시간 등을 쉽게 처리할 수 있는 내장 객체이다.
# 사용 방법
const 변수명 = new Date(); // 현재 날짜 시간
const 변수명 = new Date(년, 월, 일, 시, 분, 초, 밀리초); //입력한 날짜 시간에 대한 객체더보기
결과
# 참고
'''
연도(year)
- 2자리로 표기
예) 23 -> 1923년
- 4자리로 표기
예) 2024 -> 2024년
월(month)
- 0 ~ 11
예) 0 -> 1월, 11 -> 12월
'''<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date 객체</title>
</head>
<body>
<h2>Date 객체</h2>
<script>
console.log(new Date());
console.log(new Date(24, 10, 11)); // 1924, 11, 11
const current_time = new Date(2024, 3, 17, 9, 51, 0);
console.log(current_time);
console.log(`현재 연도: ${current_time.getFullYear()}`);
console.log(`현재 월: ${current_time.getMonth()}`);
console.log(`현재 일: ${current_time.getDate()}`);
console.log(`현재 시간: ${current_time.getHours()}`);
console.log(`현재 분: ${current_time.getMinutes()}`);
console.log(`현재 초: ${current_time.getSeconds()}`);
</script>
</body>
</html>
폼(Form) 객체
- 일반적인 폼 요소에 접근할 때 사용한다.
<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.form[0].elements[0];
const userid = document.form[0][0];
const userid = document.getElementById('userid'); // id로 접근
window 객체
- 웹 브라우저의 창이나 탭을 설정하기 위한 객첵들이며, 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현할 수 있다.(모든 내장객체의 최상위 객체)
- setTimeout() : 일정 시간이 지난 후 매개변수로 제공된 함수를 실행한다.
# 사용 방법
const 변수명 = function(){
...
}
const st = setTimeout(변수명, 밀리초);더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setTimeout</title>
</head>
<body>
<h2>setTimeout</h2>
<script>
const hello = function(){
alert("안녕하세요. JavaScript");
}
</body>
</html>
- clearTimeout() : 일정 시간 후에 일어날 setTimeout()을 취소한다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setTimeout</title>
</head>
<body>
<h2>setTimeout</h2>
<script>
const hello = function(){
alert("안녕하세요. JavaScript");
}
const st = setTimeout(hello, 5000); // 5초
clearTimeout(st);
</script>
</body>
</html>
- setInterval() : 일정 시간마다 매개변수로 제공된 함수를 실행한다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setInterval</title>
</head>
<body>
<h2>setInterval</h2>
<script>
const hello = function(){
console.log("안녕하세요. JavaScript");
}
const si = setInterval(hello, 3000);
</body>
</html>
- clearInterval() : 일정 시간마다 일어날 setInterval()을 취소한다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setInterval</title>
</head>
<body>
<h2>setInterval</h2>
<script>
const hello = function(){
console.log("안녕하세요. JavaScript");
}
const si = setInterval(hello, 3000);
const clearInter = function(){
clearInterval(si);
console.log('hello()가 중지되었습니다.')
}
</script>
<p><button onclick="clearInter()">중지</button></p>
</body>
</html>
location 객체
- 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용한다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>location 객체</title>
</head>
<body>
<h2>location 객체</h2>
<script>
function pageInfo(){
console.log(`현재 문서의 URL주소: ${location.href}`);
console.log(`현재 문서의 protocol: ${location.protocol}`);
console.log(`현재 문서의 hostname: ${location.hosname}`);
console.log(`현재 문서의 pathname: ${location.pathname}`);
}
function sendit(){
location.href = 'https://python.org';
}
</script>
<p>
<button onclick="pageInfo()">페이지 정보</button>
<button onclick="sendit()">이동하기</button>
<button onclick="location.reload()">새로고침</button>
</p>
</body>
</html>
history 객체
- 브라우저의 히스토리 정보를 문서와 문서상태 목록으로 저장하는 객체이다.
- 사용자의 개인정보를 보호하기 위해 이 객체의 대부분의 기능을 제한했다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>history 객체</title>
</head>
<body>
<h2>history 객체</h2>
<button onclick="history.back()">뒤로</button>
<button onclick="history.forward()">앞으로</button>
<button onclick="history.go(0)">새로고침</button>
</body>
</html>
navigator 객체
- 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 정보를 저장하는 객체이다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>navigator 객체</title>
</head>
<body>
<h2>navigator 객체</h2>
<script>
const success = function(loc){
console.log(loc.coords.latitude);
console.log(loc.coords.longitude);
}
const fail = function(msg){
console.log(msg.code);
}
navigator.geolocation.getCurrentPosition(success, fail)
</script>
</body>
</html>
document 객체
- DOM(Document Object Model)
- 웹 페이지 자체(Body)를 의미하는 객체이다.
- HTML문서 또는 XML문서 등에 접근하기 위한 일종의 인터페이스 역할을 한다.
- 문서내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공한다.
- 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document 객체로부터 시작한다.
노드(node)
- HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장한다.
- 노드의 종류
- 문서 노드: 문서 전체를 나타내는 노드
더보기
결과
<!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>
<h2>문서 객체 모델</h2>
<ul>
<li name="markup">HTML</li>
<li>CSS</li>
<li id="javascript" class="js">JavaScript</li>
<li class="js">React</li>
<li class="backend">Apache</li>
<li class="backend">NgineX</li>
<li id="nodejs" class="js">Node.js</li>
<li id="vue" class="js">Vue</li>
</ul>
<script>
const tagName = document.getElementsByTagName('li');
for(let i=0; i<tagName.length; i++){
console.log(tagName[i]);
tagName[i].style.color = 'gold';
}
</script>
</body>
</html>
- 요소 노드: HTML 모든 요소는 요소 노드이며, 속성 노드를 가질 수 있음
더보기
결과
<!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>
<h2>문서 객체 모델</h2>
<ul>
<li name="markup">HTML</li>
<li>CSS</li>
<li id="javascript" class="js">JavaScript</li>
<li class="js">React</li>
<li class="backend">Apache</li>
<li class="backend">NgineX</li>
<li id="nodejs" class="js">Node.js</li>
<li id="vue" class="js">Vue</li>
</ul>
<script>
const className = document.getElementsByClassName('js');
for(let i=0; i<className.length; i++){
console.log(className[i]);
className[i].style.color = 'deeppink';
}
</script>
</body>
</html>
- 속성 노드: HTML 모든 요소는 속성 노드이며, 속성 노드에 관한 정보를 가지고 있음
더보기
결과
<!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>
<h2>문서 객체 모델</h2>
<ul>
<li name="markup">HTML</li>
<li>CSS</li>
<li id="javascript" class="js">JavaScript</li>
<li class="js">React</li>
<li class="backend">Apache</li>
<li class="backend">NgineX</li>
<li id="nodejs" class="js">Node.js</li>
<li id="vue" class="js">Vue</li>
</ul>
<script>
const id = document.getElementById('javascript');
console.log(id);
id.style.color = 'greenyellow';
</script>
</body>
</html>
- 텍스트 노드: HTML 모든 텍스트는 텍스트 노드
더보기
결과
<!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>
<h2>문서 객체 모델</h2>
<ul>
<li name="markup">HTML</li>
<li>CSS</li>
<li id="javascript" class="js">JavaScript</li>
<li class="js">React</li>
<li class="backend">Apache</li>
<li class="backend">NgineX</li>
<li id="nodejs" class="js">Node.js</li>
<li id="vue" class="js">Vue</li>
</ul>
<script>
const name = document.getElementsByName('markup');
for(let i=0; i<name.length; i++){
console.log(name[i]);
name[i].style.color = 'deepskyblue';
}
</script>
</body>
</html>
- 주석 노드: HTML 모든 주석은 주석 노드
더보기
결과
<!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>
<h2>문서 객체 모델</h2>
<ul>
<li name="markup">HTML</li>
<li>CSS</li>
<li id="javascript" class="js">JavaScript</li>
<li class="js">React</li>
<li class="backend">Apache</li>
<li class="backend">NgineX</li>
<li id="nodejs" class="js">Node.js</li>
<li id="vue" class="js">Vue</li>
</ul>
<script>
const qsa = document.querySelectorAll('li.backend');
for(let i=0; i<qsa.length; i++){
console.log(qsa[i]);
qsa[i].style.color = 'navy';
}
</script>
</body>
</html>
- 노드의 관계
- parentNode: 부모 노드
- children: 자식 노드
- childNodes: 자식 노드 리스트
- firstChild: 첫 번째 자식 노드
- firstElementChild: 첫 번째 자식 요소 노드
- lastChild: 마지막 자식 노드
- nextSibling: 다음 형제 노드
- previousSibling: 이전 형제 노드
더보기
결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 객체 모델2</title>
<script>
window.onload = function(){ // 지금 나의 페이지가 열렸다면(HTML이 읽혔다면) 여기 함수를 실행해
const gnb = document.getElementById('gnb');
console.log(gnb);
console.log(gnb.parentNode);
console.log(gnb.children[0]);
console.log(gnb.children[1]);
console.log(gnb.children[0]);
console.log(gnb.children[0].children[0]);
console.log(gnb.children[0].children[1]);
console.log(gnb.children[0].children[0].nextElementSibling); // ??
console.log(gnb.children[0].firstChild); // 띄어쓰기 때문에 text가 나옴
console.log(gnb.children[0].firstElementChild);
}
</script>
</head>
<body>
<h2>문서 객체 모델2</h2>
<div>
<nav id="gnb">
<ul>
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ul>
</nav>
</div>
</body>
</html>
- 노드 메서드
- insertData() : 새로운 노드를 텍스트 데이터로 추가한다.
- createElement() : 새로운 요소 노드를 만든다.
- createTextNode() : 새로운 텍스트 노드를 만든다.
- removeChild() : 자식 노드 리스트에서 특정 자식 노드를 제거하고 노드가 제거되면 해당 노드를 변환한다. 노드가 제거될 때 노드의 자식들도 다 같이 제거된다.
- removeAttribute() : 특정 속성 노드를 제거한다.
- cloneNode() : 기존에 존재하는 노드와 동일한 새로운 노드를 생성하여 반환한다. true로 설정하면 자식까지 복사하고, false로 설정하면 자식은 복사하지 않는다.
더보기
<!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>
<h2>노드 메서드</h2>
<script>
function appendNode(){
const parent = document.getElementById('list');
console.log(parent);
const newItem = document.getElementById('item1');
console.log(newItem);
// appendChild(): 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가
parent.appendChild(newItem);
}
function insertNode(){
const parent = document.getElementById('list');
const backend = document.getElementById('backend');
const newItem = document.getElementById('item2');
// insertBefore(): 새로운 노드를 특정 자식 노드 바로 앞에 추가
parent.insertBefore(newItem, backend);
}
function appendText(){
const text = document.getElementById('text').firstChild;
console.log(text);
// insertData(): 새로운 노드를 텍스트 데이터로 추가
text.insertData(7, '아주 피곤한 수요일 ');
}
function createNode(){
const newItem = document.getElementById('item1');
// createElement(): 새로운 요소 노드를 만듦
const newNode = document.createElement('p'); // <p></p>
// <p><strong>😀 새로운 요소가 추가됨</strong></p>
// innerHTML: HTML요소와 텍스트 삽입
// innerText: 텍스트만 삽입
newNode.innerHTML = '<strong>😀 새로운 요소가 추가됨</strong>';
document.body.insertBefore(newNode, newItem);
}
function createAttr(){
const newItem = document.getElementById('item2');
const newAttr = document.createAttribute('style'); // style=''
// style='color:deeppink; background-color:gold;'
newAttr.value = 'color:deeppink; background-color:gold;';
// <p id="item2" style='color:deeppink; background-color:gold;'>React</p>
newItem.setAttributeNode(newAttr);
}
function createText(){
const textNode = document.getElementById('ct');
// createTextNode(): 새로운 텍스트 노드를 만듦
const newText = document.createTextNode('😀😁😋😆😅😆');
textNode.appendChild(newText)
}
function removeNode(){
const parent = document.getElementById('list');
const removeItem = document.getElementById('backend');
// removeChild(): 자식 노드 리스트에서 특정 자식 노드를 제거. 노드가 제거되면 해당 노드를 반환. 노드가 제거될 때 노드의 자식들도 다같이 제거
const result = parent.removeChild(removeItem);
console.log(result);
}
function removeAttr(){
const newItem = document.getElementById('item2');
// removeAttribute(): 특정 속성 노드를 제거
newItem.removeAttribute('style');
}
function cloneElement(){
const parent = document.getElementById('list');
const originItem = document.getElementById('cl');
// cloneNode(): 기존에 존대하는 노드와 동일한 새로운 노드를 생성하여 반환(true 자식까지 복사, false 자식은 복사하지 않음)
parent.appendChild(originItem.cloneNode(true));
}
</script>
<h2 id="cl">노드</h2>
<div id="list">
<p id="backend">node.js</p>
<p>HTML</p>
<p>CSS</p>
</div>
<P id="item2">React</P>
<p id="item1">JavaScript</p>
<hr>
<p id="text">현재 시간은 오후 3시</p>
<button onclick="appendNode()">노드추가1</button>
<button onclick="insertNode()">노드추가2</button>
<button onclick="appendText()">텍스트 노드추가</button>
<hr>
<p id="ct"></p>
<hr>
<button onclick="createNode()">노드생성</button>
<button onclick="createAttr()">속성노드생성</button>
<button onclick="createText()">텍스트노드생성</button>
<hr>
<button onclick="removeNode()">노드삭제</button>
<button onclick="removeAttr()">속성노드삭제</button>
<hr>
<button onclick="cloneElement()">노드복제</button>
</body>
</html>