웹 기초 17강 - 자바 스크립트 DOM , BOM, 정규식

새로운 HTML 요소 생성

텍스트 노드를 갖는 요소와 갖지 않는 요소로 구분
요소노드와 텍스트 노드를 생성한 후에 텍스트 노드를 요소 노드에 붙임

메소드 설명
createElement(tagName) 태그요소 생성
createTextNode(text) 텍스트 노드 생성
appendChild(node) 새로운 노드를 추가
removeChild(node) 노드를 삭제한다
remove() 노드삭제

새로운 이미지 태그 만들어 추가하기
-createElement()

  • firstChild.data
    -appendChild()

1.새로운 HTML 요소 생성(이미지요소)
버튼을 클릭하면 이미지를 표시한다.

    1. 각 list의 문자를 가져온다 - fisrtChild.data;
    1. 이미지 객체를 생성한다 - createElement('img')
    1. 각 list의 자식으로 이미지를 추가한다 - appendChild()

DOM 트리 순회
속성 내용
childNodes 한 요소의 모든 자식 요소에 접근할 수 있다. 배열이 반환
firstChild "childNodes" 배열의 첫번째 자식 노드가 반환된다. "childNodes[0]"와 같다.
lastChild "childNodes" 배열의 마지막 자식 노드가 반환된다. "childNodes[childNodes.length – 1]"와 같다.
parentNode 현재 노드의 부모 노드를 반환한다.
nextSibling 현재 노드의 다음 형제 노드를 반환한다.
previousSibling 현재 노드의 이전 형제 노드를 반환한다.

과제
연습
시작버튼 클릭하면 첫 번째 이미지(index 0)를 div box의 뒤로 추가한다
첫번째 이미지가 div box의 뒤로 추가될때 첫번째 이미지는 삭제되어진다
1초마다 반복적으로 실행한다(setInterval)
시작버튼은 클릭하면 감췄다가 종료버튼 클릭 시 다시 표시된다

환영합니다 시작버튼을 클릭하세요 당신에게 행운을 드립니다
시작 종료

폼검증과 정규식

폼의 유효성 검증
입력 필드에서의 잘못을 검증하는 작업

정규식
정규식(regular expression): 특정한 규칙을 가지고 있는 문자열들을 표현하는 수식이다
정규 표현식은 /과 / 내부에 위치 (예) ^[0-9]+abc$

식 기능 설명
^ 시작 문자열의 시작을 표시
$ 끝 문자열의 끝을 표시
. 문자 한 개의 문자와 일치
\d 숫자 한 개의 숫자와 일치
\w 문자와 숫자 한 개의 문자나 숫자와 일치
\s 공백문자 공백, 탭, 줄바꿈, 캐리지리턴 문자와 일치
[] 문자 종류, 문자 범위
[abc]는 a 또는 b 또는 c를 나타낸다. [a-z]는 a부터 z까지 중의 하나, [1-9]는 1부터 9까지 중의 하나를 나타낸다.

수량한정자

기능 설명
() 문자를 그룹핑한다. "abc|adc"와 "a(b|d)c"는 같은 의미를 가진다.

  • 0회 이상 반복 "a*b"는 "b", "ab", "aab", "aaab"를 나타낸다.
  • 1회 이상 "a+b"는 "ab", "aab", "aaab"를 나타내지만 "b"는 포함하지 않는다.
    ? 0 또는 1회 "a?b"는 "b", "ab"를 나타낸다.
    {m} m회 "a{3}b"는 "aaab"와 매칭된다.

이메일을 검사하는 정규식

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
(예) /^[0-9]+abc$/   0~9사이 1회이상 abc로 끝남
/abc/            abc 와 일치 
/./                한 개의 문자  
/\d\d\d/        세자리 숫자 
/[a-z]/          a~z 사이 1글자 
/\w/             한자리 문자나 숫자 
/^\d/             시작이 한자리의 숫자  123, 2nd
/\d\d$/         끝 두자리 숫자   chr01,  product82
/.+/              어떤문자가 1회이상 반복
/\w*/          어떤 문자나 숫자로 이루어진 문자열 0회이상 
^[1-9][0-9]*$          1-9  사이의 숫자와 0~9사이의 숫자가 반복
/^\d{6}-\d{7}$/     숫자6자리 – 숫자7자리   
/^[0-9]+$/   
/(Good)?Bye/       GoodBye   또는 Bye
2013/06/01  ->   /^\d{4}/\d{2}/\d{2}   2013/6/1  ->  /^\d{4}/\d{1,2}/\d{1,2} 
표현식
아이디나 비밀번호 정규식 
var regExp = /^[a-z0-9_]{4,20}$/; 
숫자만 체크 정규식
       var regExp = /^[0-9]+$/;
핸드폰번호 정규식
var regExp = /^\d{3}-\d{3,4}-\d{4}$/;
일반 전화번호 정규식
var regExp = /^\d{2,3}-\d{3,4}-\d{4}$/;
이름 
     var pattern = /^[가-힣]{2,4}$/;
     var pattern = /^[a-zA-Z]{2,10}\s[a-zA-Z]{2,10}$/;
     var pattern = /^[가-힣]{2,4}|[a-zA-Z]{2,10}\s[a-zA-Z]{2,10}$/;

정규식문제
아이디는 영문자 소문자로 시작하고 8 ~ 20 글자로 입력 받는다.
비밀번호는 영문 소문자, 대문자, 숫자, 특수문자가 반드시 1글자 포함되도록 8 ~ 20 글자 사이로 입력 받는다.
이름은 한글로 2자에서 5자로 입력받는다.
생일, 전화번호는 숫자만 입력 받을 수 있도록 한다.
이메일 형식에 맞게 입력받는다.

요소 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">

<style>
 img{
 	width : 100px;
 	height: 100px;
 	
 	border-radius : 50%;
 }
</style>

<script type="text/javascript">
function proc1(){
	
	//ultag = document.getElementsByTagName('ul')[0];
	ultag = document.querySelector('ul');
	
	//allitem = ultag.getElementsByTagName('li');
	allitem = ultag.querySelectorAll('li');
	
	for(i=0; i<allitem.length; i++){
		item = allitem[i].firstChild.data;
		//alert(item);
		
		//img태그 만들기 - <img src="" alt="">
		vimg = document.createElement('img');
		vimg.src = "../images/" + item + ".jpg";
		vimg.alt = item;
		
		//li에 추가
		allitem[i].appendChild(vimg);
		
	}
	
}

function proc2(litag){
	//litag는 클릭한 li태그다
	idata = litag.firstChild.data;
	
	vimg = document.createElement('img');
	
	vimg.src="../images/" + idata+".jpg";
	vimg.alt= idata;
	
	litag.appendChild(vimg);
	
}
</script>
</head>
<body>

<div class="box">
버튼을 클릭하면 아이템에 해당하는 이미지를 생성하여 추가한다
 <ul>
 	<li>수국</li>
 	<li>아메리카노</li>
 	<li>스포츠3</li>
 	<li>국화</li>
 	<li>딸기스무디</li>
 </ul>
 <br>
  <button type="button" onclick="proc1()">확인</button>
  <div id="result1"></div>
</div> 

<div class="box">
아이템을 클릭하면 아이템에 해당하는 이미지를 생성하여 추가한다
 <ul>
 	<li onclick="proc2(this)">수국</li>
 	<li onclick="proc2(this)">아메리카노</li>
 	<li onclick="proc2(this)">스포츠3</li>
 	<li onclick="proc2(this)">국화</li>
 	<li onclick="proc2(this)">딸기스무디</li>
 </ul>
 <br>
</div> 

</body>
</html>

정규식

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">

<style>
label{
	display: inline-block;
	width: 100px;
	height: 40px;
	
}
input{
	height: 30px;
	margin: 2px;
}
</style>

<script type="text/javascript">

function proc1(){
	/*
	ff = document.myform;
	//입력한 값 가져오기 - value
	//공백, 길이체크
	idvalue = ff.id.value.trim();
	if(idvalue.length < 1){
		alert("아이디 입력하세요");
		return false;
	}
	if(idvalue.length < 8 || idvalue.length > 20){
		alert("아이디는 8~20 사이로 입력")
		return false;
	}
	
	
	//정규식
	idreg = /^[a-z][A-Za-z0-9]{7,19}$/
	//정규식.test(value) - true/false를 리턴
	if(!idreg.test(idvalue)){
		alert("아이디 형식오류");
		return false;
		
	}
	
	namevalue = ff.name.value.trim();
	
	if(namevalue.length < 1){
		alert("이름 입력하세요");
		return false;
	}
	if(namevalue.length < 2 || namevalue.length > 5){
		alert("이름은 2~5 사이로 입력")
		return false;
	}
	
	//정규식
	namereg = /^[가-힣]{2,5}/;
	//정규식.test(value) - true/false를 리턴
	if(!(namereg.test(namevalue))){
		alert("이름 형식오류");
		return false;
	}
	
	telvalue = ff.tel.value.trim();
	
	if(telvalue.length < 1){
		alert("전화번호 입력하세요");
		return false;
	}
	//정규식
	telreg = /^\d{2,3}\d{3,4}\d{4}$/;
	if(!(telreg.test(telvalue))){
		alert("전화번호 형식오류");
		return false;
	}
	
	emailvalue = ff.email.value.trim();
	if(emailvalue.length < 1){
		alert("이메일 입력하세요");
		return false;
	}
	
	emailreg = /^([a-zA-Z0-9]+)@([a-zA-Z0-9]+)(\.[a-zA-Z]+){1,2}$/
	
	if(!(emailreg.test(emailvalue))){
		alert("이메일 형식오류");
		return false;
	}
	*/
	
	//전방탐색 - 탐색문자?=기준점
	//a = "http://www.naver.com" //value
	a = "https://www.naver.com"
			
	b = /\w+(?=:)/ //reg
	
	bb = a.match(b);
	alert(bb);
	
	
	//alert("성공");
	
	

// 	passvalue = ff.pass.value.trim();
	
	
}
</script>


</head>


<body>

<div class="box">
 <form name="myform">
 	<label>아이디</label>
 	<input type="text" id="id" name="id"><br>
 	
 	<label>이름</label>
 	<input type="text" id="name" name="name"><br>
 	
 	<label>비밀번호</label>
 	<input type="text" id="pass" name="pass"><br>

 	<label>전화번호</label>
 	<input type="text" id="tel" name="tel"><br>

 	<label>이메일</label>
 	<input type="text" id="email" name="email"><br>
  </form>
 
 <br>
  <button type="button" onclick="proc1()">확인</button>
  <div id="result1"></div>
 </div> 
</body>
</html>

추가/삭제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">

<script type="text/javascript">
str = ["좋은 아침", "졸리운 오후","신나는 저녁", "행복한 하루", "맛있는 점심", "영광이의 하루"]

function addProc(){
	
	//랜덤발생 - 랜덤수에 해당하는 문자를 str배열에서 선택
	rnd = parseInt(Math.random() * str.length);
	
	//선택된 문자로 textNode를 생성
	text = document.createTextNode(str[rnd]);
	
	//p태그 생성
	ptag = document.createElement("p");
	
	//p태그에 textNode를 추가
	ptag.appendChild(text);
	
	//p태그를 result1에  추가
	document.getElementById('result1').appendChild(ptag)
	
}

function delProc(){
	
	//삭제할 대상의 부모검색
	parent = document.getElementById('result1'); //result1을 부모로 함
	child = parent.lastChild; //마지막 p태그를 선택
	
	parent.removeChild(child);
	
}

function proc2(){
	//랜덤 생성
	rand = parseInt(Math.random() * str.length);
	
	//랜덤수번째의 문자를 str배열에서 선택- textNode로 생성
	text = document.createTextNode(str[rand]);
	
	//삭제button 태그를 생성 -
	//<button type="button">삭제</button>
	//<input type="button" value="삭제">
	
	/*------------------------------------------------
	//버튼으로 생성시
	but = document.createElement('button');
	but.type = "button";
	but.innerHTML = "삭제";
	------------------------------------------------*/
	
	//input으로 생성시
	inputtag = document.createElement('input');
	inputtag.type = "button";//but.setAttribute('type', 'button')
	inputtag.value = "삭제"; 
	//txt = document.createTextNode("삭제");
	//but.appendChild(txt)
	inputtag.onclick =function(){
		//부모를 지정해서 삭제
		//this : 클릭한 삭제버튼 parentNode : p태그
		this.parentNode.remove()
	}
	
	//p태그를 생성
	ptag = document.createElement('p');
	
	//p태그에 textNode와 Button을 추가
	ptag.appendChild(text);
	ptag.appendChild(inputtag);
	
	//result2에 p태그를 추가
	document.getElementById('result2').appendChild(ptag);
	
}

//배열검색 - 이미지 검색해서 배열에 담기

random=null;
function start(vst){
	gvst = vst;
	//확인버튼 사라지게 한다
	vst.style.display= "none";
	// 선택된 이미지의 border를 클리어 시킨다
	//~~~~~.style.border="none"
	

	
	//이미지의 부모요소를 검색 - result2
	parent = document.getElementById('result3');
	array = parent.getElementsByTagName('img');
	
	if(random != null){
		random.style.border="none";
	}
	idx = setInterval(function(){

	//img의 첫번째 요소 - firstChild 선택 result2에 추가 - appendChild
		parent.appendChild(parent.firstChild);
	}, 500)
	
}

function stop(){
	//setInterval() 종료 - clearInterval
	clearInterval(idx);
	
	//랜덤을 발생 - 3,
	rand = parseInt(Math.random() * array.length);
	random = array[rand];
	// 3번째 인덱스의 이미지 하나를 선택 border를 지정한다
	//~~~~.style.border="5px double red"
	random.style.border="5px double red";
	
	
	//시작버튼이 나타난다
	gvst.style.display = "inline-block";
	
}

</script>

<style>
 img{
 	width : 100px;
 	height : 100px;
 }
</style>
</head>
<body>

<div class="box">
 추가버튼 클릭 시<br>
 랜덤으로 발생되는 문자를 result1에 출력<br>
 <br>
 삭제버튼 클릭 시<br>
 추가된 문자를 차례대로 삭제<br>
 
 <br>
  <button type="button" onclick="addProc()">추가</button>
  <button type="button" onclick="delProc()">삭제</button>
  <div id="result1"></div>
 </div> 
 
 <div class="box">
 추가삭제버튼 클릭 시<br>
 랜덤으로 발생되는 문자와 삭제버튼을 생성하여 result2에 출력<br>
 <br>
  <button type="button" onclick="proc2()">추가삭제</button>
  <div id="result2"></div>
 </div> 
 
 <div class="box">
 시작버튼 클릭 시 이미지회전<br>
 첫번째 이미지를 선택하여 appendChild()로 div의 맨 마지막에 추가된다<br>
 첫번째 이미지는 잘라내기 붙여넣기와 같은 이동의 효과가 나타난다<br>
 시작버튼은 사라진다
 
 종료버튼 클릭 시작버튼 나타난다
 당첨을 표시한다
 
 다시 시작버튼 클릭시 당첨표시를 클리어 후 실행한다
 <br>
  <button type="button" onclick="start(this)">시작</button>
  <button type="button" onclick="stop()">종료</button>
  
  <div id="result3">
   <img src="../images/국화1.jpg" alt="국화1.jpg">
   <img src="../images/셔틀콕.jpg" alt="셔틀콕.jpg">
   <img src="../images/쇼핑백2.jpg" alt="쇼핑백2.jpg">
   <img src="../images/옷1.jpg" alt="옷1.jpg">
   <img src="../images/풍차.jpg" alt="풍차.jpg">
  </div>
 </div> 
 
</body>
</html>
인터페이스 default/static method
java 디지털 이미지 처리 기반 이미지 파일 쓰기 예시 사용하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage