665 No

[동영상강의] javascript06_window.open, location, navigator 객체, 이벤트처리, 정규표현식

2017-09-03 18:46:12 By 머나먼나라 1 1575 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

popup1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function popup(){

	//window.open("페이지주소", "팝업창이름", "옵션")
	window.open("notice.html", "pop1", "width=400, height=500,"
			+"left=300, top=10,scrollbars=no, toolbars=no, location=no, menubar=no " );	
			
	
}
</script>
</head>
<body>


<button onclick="popup()">팝업창 띄우기</button>

</body>
</html>

팝업창 띄우기

notice.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>
<!-- usemap="#이미지맵의 name" -->
  <img src="https://hqfootballrenders.files.wordpress.com/2014/02/mesut-c3b6zil.png" usemap="#intro"
  alt="신간 안내" width="300px"  height="400px">
<!-- 이미지맵 
coords="x1,y1,x2,y2" window.close() 창닫기 alt 대체텍스트
-->  
  <map name="intro" id="intro">
    <area shape="rect" coords="230,368,280,390"
    href="#" alt="창닫기" onclick="window.close()">
  </map>
</p>

<button  onclick="window.close()">창닫기</button>
</body>
</html>

신간 안내

창닫기

popup2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>

function winopen(){
	
	//id가 dan인 태그에 입력한 값
	var dan =document.getElementById("dan").value;
//팝업창 오픈 ( url, name, option )
  window.open(
	  		"gugu.jsp?dan="+dan, "", "width=300,height=300");
	
}

</script>

</head>
<body>

단을 입력하세요
<input id="dan" value="3" size="10">
<input type="button" value="팝업창 열기" onclick="winopen()">
<div id="result"></div>  


</body>
</html>

단을 입력하세요

3x1=3
3x2=6
3x3=9
3x4=12
3x5=15
3x6=18
3x7=21
3x8=24
3x9=27

gugu.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>

function send(str){
	
	opener.document.getElementById("result").innerHTML=str;
}
</script>

</head>
<body>
<%
	//팝업창으로 넘어온 dan 변수의 값을 숫자로 변환
	int dan =Integer.parseInt(request.getParameter("dan"));
	StringBuilder sb =new StringBuilder();
	for(int i=1; i<=9; i++){
		sb.append(dan +"x" +i +"=" +dan*i+"<br>");
	}
%>
<%= sb %> <br>

<input type="button" value="닫기" onclick="window.close()">

<input type="button" value="결과 전송" onclick="send('<%= sb.toString() %>')" >


</body>
</html>

3x1=3
3x2=6
3x3=9
3x4=12
3x5=15
3x6=18
3x7=21
3x8=24
3x9=27

onload.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

function onLoadDoc(){
	alert("로딩되었습니다.");
	document.body.style.backgroundColor="gold";	
}
</script>
</head>
<body onload="onLoadDoc()">

<a href="http://daum.net" >이동</a>

</body>
</html>

이동

location.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function replace(){
	location.replace("http://google.com");
	//location.href="http://google.com";
}
</script>
</head>
<body>

<!-- 하이퍼링크로 이동할 경우 -->
<a href="#" onclick="replace()">이동</a>
<!-- 버튼으로 이동할 경우 -->
<button onclick="replace()">이동</button>


</body>
</html>

이동 이동

onclick2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

body{
	background-image:url('http://c1.staticflickr.com/3/2854/33790111790_03ed6ab3d6_b.jpg');
}

</style>
<script type="text/javascript">

function change(imgUrl){
	document.body.style.backgroundImage="url("+imgUrl+")";
}

</script>

</head>
<body>

<h2>배경이미지 바꾸기</h2>
<input type="button" value="배경1"  onclick="change('http://c1.staticflickr.com/3/2879/33790116340_29a279ec4b_b.jpg')" >
<input type="button" value="배경2"  onclick="change('http://c1.staticflickr.com/3/2950/34043921901_966f4d0995_b.jpg')" >

</body>
</html>

배경이미지 바꾸기

onchange1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function move(){
	//id가 url 인 태그의 선택값
	url=document.getElementById("url").value;
	if(url !=""){
		location.href=url;//페이지 이동
	}else{
		alert("사이트를 선택하세요");
	}
}

</script>
</head>
<body>

<h2>사이트 선택</h2>
<select id="url" onchange="move()">
	<option value="">선택하세요</option>
	<option value="http://naver.com">네이버</option>
	<option value="http:daum.net">다음</option>
	<option value="http://google.com">구글</option>
</select>

<button type="button"  onclick="move()">확인</button>

</body>
</html>

사이트 선택

확인

onchange2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function imgView() {
		var img = document.getElementById("img");
		var div1 = document.getElementById("div1");
		// div 태그의 innerHTML 영역에 선택한 이미지를 출력
		div1.innerHTML = "<img src="+ img.value +" width='300px' height='300px'>";
	}
</script>
</head>
<body>
  <!-- InnerHTML 태그 내부의 html텍스트 <div>test</div> -->
  <table style="width: 400px; background-color: orange">
    <!-- valign : 세로 정렬 방식(top, middle, bottom) -->
    <tr align="center" valign="middle">
      <td width="150px" bgcolor="gold">그림을 선택하세요<br> 
      <select
        name="img" id="img" size="4" 
        onchange="javascript:imgView()">
          <option value="http://www.icons101.com/icon_png/size_512/id_78717/Music.png">행이</option>
          <option value="http://www.psdgraphics.com/file/color-wheel-icon.jpg">복이</option>
          <option value="http://www.psdgraphics.com/file/info-icon-preview.jpg">왕</option>
          <option value="http://www.psdgraphics.com/file/refresh-icon-1280x1024.jpg">왕비</option>
      </select>
      </td>
      <td bgcolor="white">
        <div id="div1">
          <img src="http://rocketdock.com/images/screenshots/ooVoo-Icon-1.png" width="300px" height="300px">
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

그림을 선택하세요

navigator.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
// navigator : 웹브라우저의 정보를 제공하는 객체
//  { 변수:값 , 변수:값 }
console.log(navigator);
for( var key in navigator ) {
	value = navigator[key];
	document.write( key +":"+ value+"<br>");
}
</script>
</head>
<body>

</body>
</html>

vendorSub:
productSub:20030107
vendor:Google Inc.
maxTouchPoints:0
hardwareConcurrency:2
appCodeName:Mozilla
appName:Netscape
appVersion:5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
platform:Win32
product:Gecko
userAgent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
language:ko
languages:ko-KR,ko,en-US,en
onLine:true
cookieEnabled:true
doNotTrack:1
geolocation:[object Geolocation]
mediaDevices:[object MediaDevices]
plugins:[object PluginArray]
mimeTypes:[object MimeTypeArray]
webkitTemporaryStorage:[object DeprecatedStorageQuota]
webkitPersistentStorage:[object DeprecatedStorageQuota]
serviceWorker:[object ServiceWorkerContainer]
getBattery:function getBattery() { [native code] }
sendBeacon:function sendBeacon() { [native code] }
getGamepads:function getGamepads() { [native code] }
webkitGetUserMedia:function webkitGetUserMedia() { [native code] }
javaEnabled:function javaEnabled() { [native code] }
vibrate:function vibrate() { [native code] }
requestMIDIAccess:function requestMIDIAccess() { [native code] }
credentials:[object CredentialsContainer]
permissions:[object Permissions]
presentation:[object Presentation]
getUserMedia:function getUserMedia() { [native code] }
registerProtocolHandler:function registerProtocolHandler() { [native code] }
unregisterProtocolHandler:function unregisterProtocolHandler() { [native code] }
storage:[object StorageManager]
requestMediaKeySystemAccess:function () { [native code] }

car.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}

body {
  /* 폰트사이즈 12px 줄간격 1.5 */
  font: 12px/1.5 dotum, "돋움", gulim, "굴림", sans-serif;
}

li {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

h1 {
  text-align: center;
}

#carZone {
  width: 600px;
  margin: 0 auto;
}

#estimate {
  width: 100%;
}

#estimate th, td {
  border: 1px solid #ccc;
  height: 30px;
}

#estimate th {
  background-color: #333;
  color: #fff;
}

#carZone td {
  text-align: center;
}

tfoot {
  font-size: 15px;
  font-weight: bold;
}

#total {
  border: none 0;
  background: none;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}
</style>
<script type="text/javascript">
	function car() {
		// Number(문자열) 숫자로 변환
		var basic_car = Number(document.getElementById("total").defaultValue);
		for (var i = 1; i <= 3; i++) {
			var chkObj = document.getElementById("opt" + i);
			if (chkObj.checked) { //체크 상태이면
				basic_car += Number(chkObj.value);
			}
		}
		document.getElementById("total").value = basic_car;
	}
</script>
</head>
<body>
  <h1>자동차 견적</h1>
  <div id="carZone">
    <p>
      <img src="https://tse1.mm.bing.net/th?id=OIP.CWLa4orKTccWazv1psgX0gEsC7&pid=15.1&P=0&w=274&h=172" alt="자동차">
    </p>
    <table id="estimate">
      <!-- 태그를 그룹으로 관리. 행이 아닌 열단위로 스타일 제어 가능 -->
      <colgroup>
        <col width="380px">
        <col width="160px">
        <col width="*">
        <!-- 나머지 사이즈 -->
      </colgroup>
      <!-- 테이블 헤더 -->
      <thead>
        <tr>
          <th>옵 션</th>
          <th>추가 가격</th>
          <th>선택</th>
        </tr>
      </thead>
      <!-- 테이블 푸터 -->
      <tfoot>
        <tr>
          <th>(기본)차량가격</th>
          <td colspan="2"><input type="text" name="total"
              id="total" value="13450000" readonly="readonly"></td>
        </tr>
      </tfoot>
      <!-- 테이블 본문 -->
      <tbody>
        <tr>
          <td><label for="opt1">인조가죽시트</label></td>
          <td>250000</td>
          <td>
            <!-- 옵션 체크박스에 클릭할 때 마다 car()에 저장된 일련의
실행문을 실행합니다. --> <input type="checkbox" name="opt1" id="opt1"
              value="250000" onclick="car()">
          </td>
        </tr>
        <tr>
          <td><label for="opt2">내비게이션</label></td>
          <td>250000</td>
          <td><input type="checkbox" name="opt2" id="opt2"
              value="250000" onclick="car()"></td>
        </tr>
        <tr>
          <td><label for="opt3">선루프</label></td>
          <td>440000</td>
          <td><input type="checkbox" name="opt3" id="opt3"
              value="440000" onclick="car()"></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

자동차 견적

자동차

옵 션	추가 가격	선택
(기본)차량가격
인조가죽시트	250000
내비게이션	250000
선루프	440000

move.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var w;//전역 변수(팝업창 참조변수)
function oepnWindow(){
	//window.open(url, name, option)
	w=window.open("", "", "width=300, height=300, top=350, left=350");
	//팝업창에 문자열 출력
	w.document.write("팝업창 테스트");
	w.document.write("<img src='http://www.bloomwoodphotography.co.uk/"
			 +"wp-content/uploads/2013/06/bigstock-A-photo-of-beautiful-girl-is-i-26669375-e1374105994779.jpg' "
			+ " width='200'  height='200'>" );
	//팝업창의 좌표 이동(절대좌표)
	w.moveTo(100, 200)
}
function moveWindow(){
	//상대좌표로 이동시킴
	w.moveBy(100, 100);
	//팝업창을 활성화시킴
	w.focus();
	
}
function maxWindow(){
	//screen:내장객체
	//availWidth:윈도우의 가로길이
	//availHeight; 윈도우 세로길이
	console.log("가로 : " +screen.availWidth);
	console.log("세로 : " +screen.availHeight);
	w.resizeTo(screen.availWidth, screen.availHeight);
	w.focus();
}
</script>

</head>
<body>


<input type="button" value="윈도우 생성" onclick="oepnWindow()" >
<input type="button" value="윈도우 이동" onclick="moveWindow()" >
<input type="button" value="전체화면 보기" onclick="maxWindow()" >

</body>
</html>

팝업창

팝업창 테스트

mouse1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#event{
	background-color:yellow;
	width:200px;
}
</style>
<script type="text/javascript">

 function OnMouseIn(elem){
	 elem.style.border="2px solid red";
	 elem.style.fontSize="30px";
 }

 function OnMouseOut(elem){
	 elem.style.border="";
	 elem.style.fontSize="12px";
 }
 
</script>

</head>
<body>
<!-- this: 이벤트가 발생한 태그 (여기서는 div) -->
<div id="event"  onmouseover="OnMouseIn(this)" onmouseout="OnMouseOut(this)">
마우스 이벤트
</div>


</body>
</html>

마우스 이벤트

mouse2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
  <h1 id="title">마우스 아웃</h1>
  <a href="#" id="btn">
    <img src="../images/btn_out.gif" alt="버튼">
  </a>
  <p id="img_src"></p>
  <script type="text/javascript">
			var btn = document.getElementById("btn");
			var s = document.getElementById("img_src");
			// 버튼.onmouseover = function() {} 
			btn.onmouseover = function() {
				document.getElementById("title").innerHTML = "마우스 오버";
				btn.firstChild.src = "../images/btn_over.gif";
				s.innerHTML = btn.firstChild.src;
			}
			btn.onmouseout = function() {
				document.getElementById("title").innerHTML = "마우스 아웃";
				btn.firstChild.src = "../images/btn_out.gif";
				s.innerHTML = btn.firstChild.src;
			}
		</script>
</body>
</html>

마우스 아웃

input.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	function checkNotEmpty(field) {
		if (field.value == "") { // 입력값이 빈값이면
			alert("필드가 비었습니다.");
			field.focus(); //입력포커스 설정
			return false;
		}
		//6자 ~ 8자
		var s = field.value;
		if (s.length >= 6 && s.length <= 8) {
			return true;
		} else {
			alert("이름은 6~8자 이내로 입력하세요.");
			field.focus();
			return false;
		}
		return true;
	}
</script>
</head>
<body>
  <form>
    이름 :
    <input type="text" id="user">
    <input type="button"
      onclick="checkNotEmpty(document.getElementById('user'))"
      value="확인">
  </form>
</body>
</html>

이름 :

reg.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function check(){
	userid = document.getElementById("userid");
	//if( userid.value == ""){ //id가 빈값이면
	if( !userid.value ) {
		alert("아이디를 입력하세요.");
		userid.focus(); //포커스 설정
		return; //함수 종료
	}
//정규표현식 ( regular expression )
// ^ 시작, $ 끝  {4,10} 4~10자
	exp1 = /^[A-Za-z0-9]{4,10}$/;
//정규표현식.test(검증할 값)	
//검증할값.match(정규표현식)
console.log(exp1.test(userid.value));
console.log(userid.value.match(exp1));
console.log( "hello world Hello".match( /hello/ig ));
	//if( !exp1.test(userid.value) ) {
	if( !userid.value.match(exp1)  ) {
		alert("아이디는 영문자,숫자 4~10자리로 입력하세요");
		userid.focus();
		return;
	}
  var name = document.getElementById("name");
  // \x20 16진수 20 => 10진수 32, 스페이스 1개
  var exp2 = /^[가-힣ㄱ-ㅎㅏ-ㅣ\x20]{3,10}$/;
  if (!exp2.test(name.value)) {
    alert("이름은 한글 3~10자 이내로 입력하세요.");
    name.focus();
    return;
  }
//이메일 체크
  var email = document.getElementById("email");
  // {2,} 2글자 이상
  var exp3 = /^[a-z0-9]{2,}@[a-z0-9]{2,}\.[a-z]{2,}$/;
  if (!exp3.test(email.value)) {
    alert("이메일 형식이 잘못 되었습니다.");
    email.focus();
    return;
  }
	alert("정상적으로 입력되었습니다.");
}
</script>
</head>
<body>

<form>
아이디 <input id="userid"><br>
이름 <input id="name"><br>
이메일 <input id="email"><br>
전화 <input id="phone"><br>
<button type="button" onclick="check()">확인</button>
</form>

</body>
</html>

아이디
이름
이메일
전화
확인