| history 객체
- 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체
- 사용자의 개인 정보를 보호하기 위해 이 객체의 대부분의 접근 방법을 제한
back(): 뒤로 이동
forward(): 앞으로 이동
go(0): 새로고침
location.reload(): 새로고침
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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 객체
브라우저 공급자 및 버전 정보등을 포함한 브라우저에 대한 정보를 저장하는 객체
geolocation: GPS정보를 수신하는 프러퍼티
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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);
//콜백함수라
//가지고 올수있는 환경이면 앞에 함수(success) 호출
//실패하면 뒤에 함수(fail) 호출
</script>
<title>navigator</title>
</head>
<body>
<h2>navigator</h2>
</body>
</html>
실행하면 위치 허용하겠냐고 뜸
허용 누르면 콘솔창에 위도 경도 뜸
구글지도에 둘다 복붙해서 검색하면 자기집 인터넷 기지국 주소를 알아낼수있다
휴대폰으로 실행하면 보다 더 정확한 위치알아낼수있음
| 문서 객체 모델(Document Object Model)
- HTML문서 또는 XML문서등을 접근하기 위한 일종의 인터페이스 역할
- 문서내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공
| document 객체
- 웹 페이지 자체(body)를 의미하는 객체
- 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때드시 document 객체로부터 시작
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서객체모델 1</title>
</head>
<body>
<h2>문서객체모델 1</h2>
<ul>
<li name="markup">HTML</li>
<li>CSS</li>
<li id="javascript" class="js">JavaScript</li>
<li class="js">jQuery</li>
<li class="backend">Apache</li>
<li class="backend">Spring</li>
<li id="framework" class="js">Node.js</li>
<li id="react" class="js">React</li>
</ul>
</body>
</html>
| getElementsByTagName(): 해당 태그 이름의 요소를 모두 선택
const tagName = document.getElementsByTagName('li');
for(let i=0; i<tagName.length; i++){
console.log(tagName[i]);
tagName[i].style.color = 'gold';
}
| getElementById(): 해당 아이디의 요소를 선택
const id = document.getElementById('javascript');
console.log(id);
id.style.color = 'greenyellow'
| getElementsByClassName(): 해당 클래스에 속한 요소를 모두 선택
const className = document.getElementsByClassName('js');
for(let i=0; i<className.length;i++){
console.log(className[i]);
className[i].style.color = 'deeppink';
}
| getElementsByName(): 해당 name 속성값을 가지는 요소를 모두 선택
const name = document.getElementsByName('markup');
for(let i=0; i<name.length;i++){
console.log(name[i]);
name[i].style.color = 'deepskyblue';
}
| querySelectorAll(): 선택자로 선택되는 요소를 모두 선택
(querySelector())
const qs = document.querySelectorAll('li.backend');
for(let i=0; i<qs.length; i++){
console.log(qs[i]);
qs[i].style.color = 'green';
}
| 노드(node)
HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장
| 노드 종류
- 문서노드: 문서 전체를 나타내는 노드
- 요소노드: HTML 요소는 요소노드, 속성 노드를 가질 수 있는 유일한 노드
- 속성노드: 속성은 모두 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음
- 텍스트 노드: 텍스트는 모두 텍스트 노드
- 주석노드: 주석은 모두 주석 노드
| 노드의 관계
parentNode: 부모 노드
childNodes: 자식 노드 리스트
fristChild: 첫번째 자식 노드 //이게 텍스트일수 태그일수도 있다 그래서 태그인 자식만 찾고싶다 그러면
firstElementChild: 첫번째 자식 요소 노드
lastChild: 마지막 자식 노드
nextSibiling: 다음 형제 노드
previSibling: 이전 형제 노드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서객체모델</title>
<script>
window.onload = function(){ //html이 모두 로드된다면 시작해라
const gnb = document.getElementById('gnb');
console.log(gnb) //<nav id="gnb">
console.log(gnb.parentNode) //gnb의부모 <div>
console.log(gnb.children[0]);//gnb자식 <ul>
console.log(gnb.children[0].nextElementSibling);//ul형제(x)
console.log(gnb.children[0].children[0]);
// <li class="first">내용 1</li>
console.log(gnb.children[0].firstChild);
//text ? 이상한거 막들어옴
// 웬만하면 이건 쓰지마라
//firstChild는 첫번째 자식노드이기 때문에, 첫 번째 <li> 앞에 공백이 오면 절대 안 됨.
console.log(gnb.children[0].firstElementChild);
//<li class="first">내용 1</li>
//얘는 공백와도 상관없고 children[0]한것과 같음
}
</script>
</head>
<body>
<h2>문서객체모델 2</h2>
<div>
<nav id="gnb">
<ul>
<li class="first">내용 1</li>
<li>내용 2</li>
<li>내용 3</li>
</ul>
</nav>
</div>
</body>
</html>
노드 추가
| appendChild(): 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가
function appendNode(){
const parent = document.getElementById('list');
const newItem = document.getElementById('item1');
parent.appendChild(newItem);
}
| insertBefore(): 새로운 노드를 특정 자식 노드 바로 앞에 추가
function insertNode(){
const parent = document.getElementById('list');
const backend = document.getElementById('backend');
const newItem = document.getElementById('item2');
parent.insertBefore(newItem, backend);
}
| insertData(): 새로운 노드를 텍스트 데이터로 추가
function appendText(){
const text = document.getElementById('text').firstChild;
console.log(text);
text.insertData(7,'너무너무 너무 졸려 너무');
}
노드생성
| createElement(): 새로운 요소 노드를 만듬
function createNode(){
const newItem = document.getElementById('item');
const newNode = document.createElement('p'); // <p></p>
newNode.innerHTML = '<b>새로운 요소가 나타났다 짠!</b>'
document.body.insertBefore(newNode, newItem);
}
| createAttribute(): 새로운 속성 노드를 만듬
function createAttr(){
const newItem = document.getElementById('item2');
const newAttr = document.createAttribute('style'); // style=""
newAttr.value = 'color:deeppink; background-color:gold;';
newItem.setAttributeNode(newAttr);
}
| createtextNode(): 새로운 텍스트 노드를 만듬
function createText(){
const textNode = document.getElementById('createText');
const newText = document.createTextNode('❤😁🍟🎃🙌❗🛑');
textNode.appendChild(newText);
}
노드 제거
| removeChild(): 자식 노드 리스트에서 특정 자식 노드를 제거. 노드가 제거되면 해당 노드를 반환.
function removeNode(){
const parent = document.getElementById('list');
const removeItem = document.getElementById('backend');
const result = parent.removeChild(removeItem);
console.log(result);
}
| removeAttribute(): 특정 속성 노드를 제거
function removeAttr(){
const newItem = document.getElementById('item2');
newItem.removeAttribute('style');
}
⬇ ⬇ ⬇
노드 복제
| cloneNode(): 기존의 존재하는 노드와 동일한 새로운 노드를 생성하여 반환
function cloneElement(){
const parent = document.getElementById('list');
const originItem = document.getElementsById('clone');
parent.appendChild(originItem.cloneNode(true));// true: 자식노드까지 같이 복사
}
노드 교체
| replaceChild(): 기존의 요소 노드를 새로운 요소 노드로 교체
function changeNode(){
const parent = document.getElementById('list');
const item1 = document.getElementById('backend');
const item2 = document.getElementById('item1');
parent.replaceChild(item2, item1);
}아예 추출해서 해서 빼버림
| replaceData(): 텍스트 노드의 텍스트 데이터를 교체
function changeText(){
const text = document.getElementById('fruit').firstChild;
text.replaceData(9,2,'메론');
}
정규 표현식
정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴
/ ~ / 시작과 끝
^ : 패턴의 시작
$ : 패턴의 끝
[ ] : 안의 문자를 찾음
[x-z] : x~z 사이의 문자를 하나를 찾음
x+ : x가 1번이상 반복
x$ : 문자열이 x로 끝남
^x : 문자열이 x로 시작
\d : 숫자
x{n} : x를 n번 반복한 문자를 찾음
x{n,m} : x를 n번 이상 m번 이하 반복한 문자를 찾음
1.아이디
- 영문 대문자 또는 소문자로 시작하는 아이디, 길이는 4 ~ 20자
/^[A-Za-z]{4, 20}$/
2.이름
- 한글만 사용
/[가-힣]+$/ //+ : 몇글자든 상관없다
//한글의 시작은 가 끝은 힣
3.휴대폰 번호
- 앞번호는 3글자, 중간번호는 3 또는 4글자, 마지막번호는 4글자 하이픈(-) 포함
010-1111-1111
/^\d{3}-\d{3,4}-\d{4}$/
4.이메일
- 영문 대문자 또는 소문자 또는 숫자로 시작하고 @포함 .포함
heor-ruse@naver.com
/^[A-Za-z0-9\-\.]+@[A-Za-z0-9\-\.]+\.[A-Za-z0-9]+$/
5.비밀번호
- 대문자 1개이상, 소문자 1개이상, 숫자 1개이상, 특수문자 1개이상을 포함한 8자이상
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}/
(?=.*[ ])(?=.*[ ])
6.또는 조건
최소 한글2자이상 또는 영어 4자이상 꼭 포함되게 닉네임작성하기
const expNicknameText = /^(.*[가-힣]){2,}|(.*[a-zA-Z]){4,}[a-zA-Z가-힣\d]$/
(.*[ ])|(.*[ ])
✔ test()
정규표현식에 대입한 문자열이 적합하면 true, 아니면 false를 리턴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<script defer src="./js/regist.js"></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
var extraAddr = ''; // 참고항목 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
if(data.userSelectedType === 'R'){
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraAddr !== ''){
extraAddr = ' (' + extraAddr + ')';
}
// 조합된 참고항목을 해당 필드에 넣는다.
document.getElementById("sample6_extraAddress").value = extraAddr;
} else {
document.getElementById("sample6_extraAddress").value = '';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample6_postcode').value = data.zonecode;
document.getElementById("sample6_address").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("sample6_detailAddress").focus();
}
}).open();
}
</script>
</head>
<body>
<h2>회원가입</h2>
<form action="./regist.jsp" name="regform" id="regform" method="post" onsubmit="return sendit()">
<p>아이디: <input type="text" name="userid" id="userid" maxlength="20"></p>
<p>비밀번호: <input type="text" name="userpw" id="userpw" maxlength="20" ></p>
<p>비밀번호 확인: <input type="text" name="userpw_re" id="userpw_re" maxlength="20" ></p>
<p>이름: <input type="text" name="name" id="name"></p>
<p>휴대폰번호: <input type="text" name="hp" id="hp"></p>
<p>이메일: <input type="text" name="email" id="email"></p>
<p>성별: <label>남자<input type="radio" name="gender" value="남자" checked></label> <label>여자<input type="radio" name="gender" value="여자"></label></p>
<p>취미: <label>등산<input type="checkbox" name="hobby" value="등산"></label>
<label>게임<input type="checkbox" name="hobby" value="게임"></label>
<label>운동<input type="checkbox" name="hobby" value="운동"></label>
<label>드라이브<input type="checkbox" name="hobby" value="드라이브"></label>
<label>독서<input type="checkbox" name="hobby" value="독서"></label></p>
<p>우편번호: <input type="text" id="sample6_postcode" name="zipcode" maxlength="5"><button type="button" onclick="sample6_execDaumPostcode()">검색</button></p>
<p>주소: <input type="text" name="address1" id="sample6_address"></p>
<p>상세주소: <input type="text" name="address2" id="sample6_detailAddress"></p>
<p>참고항목: <input type="text" name="address3" id="sample6_extraAddress"></p>
<p><button>가입완료</button> <button type="reset">다시작성</button> </p>
</form>
</body>
</html>function sendit(){
const userid = document.getElementById('userid');
const userpw = document.getElementById('userpw');
const userpw_re = document.getElementById('userpw_re');
const name = document.getElementById('name');
const hp = document.getElementById('hp');
const email = document.getElementById('email');
const hobby = document.getElementsByName('hobby');
// 정규 표현식
const expIdText = /^[A-Za-z\d]{4,20}$/;
const expNameText = /[가-힣]+$/;
const exeHpText = /^\d{3}-\d{3,4}-\d{4}$/;
const expEmailText = /^[A-Za-z0-9\-\.]+@[A-Za-z0-9\-\.]+\.[A-Za-z0-9]+$/;
const expPwText =/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}/;
if(userid.value ==''){
alert('아이디를 입력하세요');
userid.focus();
return false;
}
if(!expIdText.test(userid.value)){
alert('아이디는 4자 이상 20자 이하의 대소문자로 시작하는 조합입니다')
userid.focus();
return false;
}
if(userpw.value ==''){
alert('비밀번호를 입력하세요');
userpw.focus();
return false;
}
if(!expPwText.test(userpw.value)){
alert('비밀번호 형식을 확인하세요\n소문자,대문자,숫자,특수문자 1개씩 꼭 입력해야합니다');
userpw.focus();
return false;
}
if(userpw.value != userpw_re.value){
alert('비밀번호와 비밀번호 확인의 값이 다릅니다')
userpw_re.focus();
return false;
}
if(name.value ==''){
alert('이름을 입력하세요');
name.focus();
return false;
}
if(!expNameText.test(name.value)){
alert('이름은 한글로 입력하세요');
name.focus();
return false;
}
if(!exeHpText.test(hp.value)){
alert('휴대폰번호 형식을 확인하세요\n하이픈(-)을 포함해야합니다');
hp.focus();
return false;
}
if(!expEmailText.test(email.value)){
alert('이메일 형식을 확인하세요')
email.focus();
return false;
}
let count = 0;
for(let i in hobby){
if(hobby[i].checked){
count++;
}
}
if(count == 0){
alert('취미는 적앙 선택하세요');
return false;
}
return true;
//return true
//return false
}'웹 개발 > 🌐 JavaScript' 카테고리의 다른 글
| JavaScript | 이벤트타입,이벤트리스너,이벤트객체,이벤트전파,iterable,generator,spread,set,map,operator (0) | 2022.11.11 |
|---|---|
| JavaScript | 함수,오브젝트,클래스,상속,래퍼객체 (0) | 2022.11.09 |
| JavaScript | 화살표함수,객체,프로토타입,math,string,date,window,엘리먼트접근 (0) | 2022.11.07 |
| 호이스팅, var, let (0) | 2022.11.07 |
| JavaScript | 대화상자,제어문,반복문,배열,호이스팅 (0) | 2022.11.07 |
