<html>
<head>
<title> Windows객체(파일없이 새창띄우기) </title>
<script> // 새창, 내용
win = window.open("","w","width=300 height=300");
// △파일명을 안썼다고해서 에러가 나지 않는다.
win.document.open(); // ◁ win 안에 쓰겠다 : 내용이 대상 시작태그 역할?
win.document.write("홍길동<br>");
// △ win 이라는 객체에 홍길동을 출력
win.document.write("<img src=../html/img/1.jpg>");
win.document.close(); // ◁ 다 썼다 : 끝 태그 역할?
function winClear(){
win.document.open();
// ▽ 팝업창의 내용 지우기 : 기존 파일이 있는 팝업이어도 그 내용까지 삭제
win.document.clear();
win.document.close();
}
function winClose(){ // 창 자체를 컨트롤 하므로 open/close 필요 없음
// ▽ 팝업창 닫기
win.window.close();
}
// window.status = "우와 신기하다" // 텍스트만 가능
// 상태표시줄 텍스트가 오른쪽에서 왼쪽으로 움직이듯 보이게 출력하기
// 텍스트 앞에 공백을 두고 공백을 한칸씩 줄여가며 글자가 오른쪽에서
// 왼쪽으로 들어오는 것처럼 보이도록 하고 전일 했었던
// setTimeOut("함수명",밀리초)를 이용하여 속도 조절.
statusMsg = "☆우★와☆신★기☆하★다☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★"
space = "";
for (i=1; i<82; i++)
{
space += " ";
}
statusMsg = space + statusMsg;
// 반복처리를 위한 함수생성
ndx = 0;
function winStatus(){
window.status = statusMsg.substring(ndx);
if(ndx>statusMsg.length)ndx=0; // index가 글자의 크기보다 크면 초기화 시킨다.
// 계속 반복되면 글자수보다 큰 값의 위치를 지정하게 되어 에러→그래서 if문삽입
ndx++;
setTimeout("winStatus()",100) // 밀리초만큼 대기 후 함수 재 호출=반복
}
</script>
</head>
<body onLoad="winStatus()">
<img src="../html/img/2.jpg" onClick="winClear()">
<input type="button" value="팝업창닫기" onClick="winClose()">
</body>
</html>
# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)
이미지 클릭시 팝업창 내용 삭제
팝업창닫기 버튼 누를시 창 사라짐
파일없이 새창띄우기.html* 스크롤바 자동이동하기
<head>
<title> ScrollMove.html </title>
<script>
function timer(){
date = new Date(); // 변수=생성 클래스(). 시스템의 날짜를 구하는 객체
y = date.getYear(); // date라는 객체 안에서 Year(년도)를 얻어내(get)라.
// get은method - 정보를 얻어내는 기능
// date.setYear(2012) : 객체의 년도만 2012년으로 셋팅해라.
m = date.getMonth()+1; // 월구하기: 0-1월 ~ 11-12월)
d = date.getDate(); // 일구하기
h = date.getHours(); // 시간 구하기: 자바에는 s가 없다
mm = date.getMinutes(); // 분 구하기: 자바에는 s가 없다
ss = date.getSeconds(); // 초 구하기: 자바에는 s가 없다
window.status = y+"년 "+m+"월 "+d+"일 "+h+"시 "+mm+"분 "+ss+"초"
}
window.setInterval("timer()",1000); // 1초에 한번씩 timer()함수를 실행하여 초가 바뀌도록
// 스크롤바 자동이동하기
i=0
function ScrollDelay()
{
i++;
if(i>700){
clearTimeout("ScrollDelay()");
i=0; // 다시 위로 갔을 때 작동되도록 i값 초기화
}
else{
window.scrollBy(0,2); // (x,y)
setTimeout("ScrollDelay()",15);
}
}
</script>
</head>
<body onLoad="timer()"><center>
<input type="button" value="이동" onClick="ScrollDelay()">
<!-- 이동을 누르면 스크롤바가 움직이도록 하는 함수 이벤트 만들기 △-->
<br><br><br><br><br><br>
<object id='skplayer' name='skplayer' width='640' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00' align='center'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219090085/20111019071001477945621006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219090085/20111019071001477945621006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='640' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br>
<object id='skplayer' name='skplayer' width='480' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219077554/20111017181001469645991006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219077554/20111017181001469645991006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='480' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br><br><br><br>
<object id='skplayer' name='skplayer' width='640' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219069655/20111016181001518942131006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219069655/20111016181001518942131006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='640' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br><br><br><br>
<object id='skplayer' name='skplayer' width='480' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219072376/20111016221001448724141006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219072376/20111016221001448724141006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='480' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br><br><br><br>
<a href="#">위로</a>
</center>
</body>
</html>
# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)
스크롤바 이동효과를 보기 위해 <body> 소스에 잡다한 것을 많이 넣었다.
이동 버튼을 누르면 아래로 이동하고 이동 후 위로 올라가 다시 한번 이동버튼을
눌렀을 때 재작동이 용이하도록 if문에 i값을 초기화 시키는 소스를 넣었다.
* Document 객체
<head>
<title> Document 객체 </title>
</head>
<body bgcolor="#ff9900">
<script>
// document.write(document.속성명) : 속성값 출력
// document.속성명='색상명' : 속성 적용
// <body>의 글자색을 알아내겠다!! forground 전경색, 글자색
document.write("글자색="+document.fgColor);
// <body>의 배경색을 알아내겠다!! background 배경색
document.write("<br>배경색="+document.bgColor);
// <script>에서의 배경색 설정(#99ffff) : <body>설정값 무시?
document.bgColor='#e0e0e0';
// <script>에서의 글자색 설정(#9d9d9d) : <body>설정값 무시?
document.fgColor='#9d9d9d';
// link(방문이력없음)Color, alink(active:클릭후 놓지 않음)Color, vlink(visited:방문이력있음)Color
document.linkColor='#cc0000';
document.alinkColor='#ffcc00';
document.vlinkColor='#0099ff';
document.write("<br>link="+document.linkColor)
document.write("<br>alink="+document.alinkColor)
document.write("<br>vlink="+document.vlinkColor)
// lastModified : 이문서가 마지막으로 업데이트된 날짜
document.write("<br>마지막작성일="+document.lastModified);
// title : 윈도우의 제목설정
document.title='자바스크립트 공부중';
// location : 현재 페이지 주소
document.write("<br>현재페이지주소="+document.location);
// select에 해당 색을 선택하면 배경색 바꾸기
// 여담: 클라이언트 언어는 완벽하게 소스보기를 막을 수는 없다.
// 방법이 있기 마련?
// #FF0000 : FF(R)00(G)00(B)
</script>
<hr>
<select onChange="document.bgColor=this.options.value">
<!--입력값이 변경시 마우스 이벤트 : onChange
select 객체에서 옵션들 중에 선택된 값(this.options.value)
-->
<option value="">----배경----</option>
<option value="ff0000">빨강</option>
<option value="blue">파랑</option>
<option value="black">검정</option>
<option value="gray">회색</option>
<option value="purple">보라</option>
<option value="#ffcccc">#ffcccc</option>
</select>
<select onChange="document.fgColor=this.options.value">
<!--입력값이 변경시 마우스 이벤트 : onChange
select 객체에서 옵션들 중에 선택된 값(this.options.value)
-->
<option value="">----글자----</option>
<option value="ff0000">빨강</option>
<option value="blue">파랑</option>
<option value="black">검정</option>
<option value="gray">회색</option>
<option value="purple">보라</option>
<option value="#ffcccc">#ffcccc</option>
</select>
<hr>자바 Web 프로그래밍<br>
<img src = "../html/img/sun.jpg"><br>
<a href="#" target="_blank">링크테스트</a>
</body>
</html>
# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)
이미지는 별 의미 없이 썰렁해서 넣은 것으로 엑박이어도 관계 없어 링크가 없다.
* Image 객체
<head>
<title> Image 객체 </title>
</head>
<body>
<!-- 이미지와 관련된 정보를 얻어내겠다!! -->
<img id="img1" src="../html/img/dog.jpg" name="자신의 개 코스프레" align="center" border="10" hspace="20" vspace="10"> <!--id부여로 스타일시트에서 사용가능-->
<br><br><br><br>
<script>
// 이미지의 이름을 구하라 연예인
document.write("<br>이름 = "+document.img1.name);
// 파일명 : 이미지를 넣을 때 src= 하고 넣어서 src
document.write("<br>파일명 = "+document.img1.src);
// document.img1.src='../html/img/1.jpg'; // 이런식으로 프로그램 중간에 바꿀 수 있다..
// 너비(width), 높이(height), 좌우여백(hspace),상하여백(vspace)
document.write("<br>너비 = "+document.img1.width);
document.write("<br>높이 = "+document.img1.height);
document.write("<br>좌우여백 = "+document.img1.hspace);
document.write("<br>상하여백 = "+document.img1.vspace);
// 정렬(align)
document.img1.align='right';
document.write("<br>정렬 = "+document.img1.align);
// 테두리 두께(border)
document.write("<br>테두리두께 = "+document.img1.border);
</script>
</body>
</html>
# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)
* onMouseOver시 상세 이미지 뜨는 테이블 작성
<head>
<title> Exam.마우스오버하면 상세 이미지 뜨도록 하기 </title>
<script>
function carDetail(n){
document.aa.img1.src="car/car_b_0"+n+".jpg"}
// 하나의 함수에 여러 값의 결과를 얻기 위해 함수명에 (n)값을 받아 그 n값에
// 해당되는 주소를 출력하도록 하였다.
</script>
</head>
<body>
<form name="aa"> <!--폼안에 테이블을 넣고 함수에서 폼의 주소값을
지명하지 않으면 스크립트 오류로 로드되지 않는데 이유를 모르겠다...-->
<table cellspacing='10' cellpadding='0' border='1'><tr><td><img id='car1_1' src='car/car_a_01.jpg' onMouseOver="carDetail('1')"></td>
<td rowspan='8'><img src='car/car_b_01.jpg' id='img1'></td>
</tr><tr><td><img src='car/car_a_02.jpg' onMouseOver="carDetail('2')"></td></tr>
<tr><td><img src='car/car_a_03.jpg' onMouseOver="carDetail('3')"></td></tr>
<tr><td><img src='car/car_a_04.jpg' onMouseOver="carDetail('4')"></td></tr>
<tr><td><img src='car/car_a_05.jpg' onMouseOver="carDetail('5')"></td></tr>
<tr><td><img src='car/car_a_06.jpg' onMouseOver="carDetail('6')"></td></tr>
<tr><td><img src='car/car_a_07.jpg' onMouseOver="carDetail('7')"></td></tr>
<tr><td><img src='car/car_a_08.jpg' onMouseOver="carDetail('8')"></td></tr>
</table></form>
</body>
</html>
# 결과
많은 이미지의 링크가 어려워 스크린샷(gif ani)으로 대체
* 페이지 이동 / history 객체
- 메타 태그(meta tag)에서의 페이지 이동
<meta http-equiv="refresh" content="5;url=http://www.daum.net">
: 5초뒤 해당 url로 이동
- 자바스크립트에서의 페이지 이동
<script>
location.href="http://www.google.co.kr"
</script>
- histoty 객체
익스플로러에서 뒤로 앞으로를 눌렀을때 사용자가 왔다 갔다 했던 경로를 저장하고 있듯이 자바스크립트에도 그것을 저장하고 있는 history라는 녀석이 있다고 한다.
실질적으로 테스트 해보진 않았다;;
ex) 홈-회원가입-member.jsp-홈/로그인 : member.jsp 는 페이지 이동시 실행되고
실질적으로도 경로에 남게 되는 것이지만 사용자 측면에서 보면 보여지지 않는 없는 경로일
뿐이다. 이런 경로를 설정해주는데에 history객체가 사용되는 듯 하다.
종류 : 전체일지 대표적인 일부의 예인지 모르겠지만 적는다
history.back() : 전페이지로 이동
history.forward() : 앞페이지로 이동
history.go(n) : n(페이지수)이 양수일땐 앞페이지, 음수일땐 전페이지
* 롤오버시 변경되는 메뉴 이미지 만들기
<html>
<head>
<title> RollOverMenu.html </title>
<script>
function menu(p,imgN){
if (p==1){ // over 기능을 수행 : eval내에 싱글따옴표 위치에 주의한다.
eval("document.aa.m"+imgN+".src='menuimg/menu0"+imgN+"_over.gif'");
}else{ // out 기능을 수행
eval("document.aa.m"+imgN+".src='menuimg/menu0"+imgN+".gif'");
}// eval : 문자열의 속성이 가지고 있는 값으로 자동으로 형 변환 (일전에 기술했었음)
}
</script>
</head>
<body>
<form name="aa">
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="menuimg/menu_back01.gif"></td>
<!--오버이미지의 p값을 1 / 아웃이미지의 p값을 2로 정하고
각자의 imgN을 지정하여 하나의 함수에 여러 이미지가 접근이
가능하도록 한다.-->
<td onMouseOver="menu(1,1)" onMouseOut="menu(2,1)"><a href="#">
<img src="menuimg/menu01.gif" border="0" name="m1"></a></td>
<td onMouseOver="menu(1,2)" onMouseOut="menu(2,2)"><a href="#">
<img src="menuimg/menu02.gif" border="0" name="m2"></a></td>
<td onMouseOver="menu(1,3)" onMouseOut="menu(2,3)"><a href="#">
<img src="menuimg/menu03.gif" border="0" name="m3"></a></td>
<td onMouseOver="menu(1,4)" onMouseOut="menu(2,4)"><a href="#">
<img src="menuimg/menu04.gif" border="0" name="m4"></a></td>
<td onMouseOver="menu(1,5)" onMouseOut="menu(2,5)"><a href="#">
<img src="menuimg/menu05.gif" border="0" name="m5"></a></td>
<td onMouseOver="menu(1,6)" onMouseOut="menu(2,6)"><a href="#">
<img src="menuimg/menu06.gif" border="0" name="m6"></a></td>
<td onMouseOver="menu(1,7)" onMouseOut="menu(2,7)"><a href="#">
<img src="menuimg/menu07.gif" border="0" name="m7"></a></td>
<td onMouseOver="menu(1,8)" onMouseOut="menu(2,8)"><a href="#">
<img src="menuimg/menu08.gif" border="0" name="m8"></a></td>
<td><img src="menuimg/menu_back02.gif"></td>
</tr>
</table>
</form>
</body>
</html>
# 결과
이미지가 많아 링크에 어려움이 있어 스크린샷으로 대체함
'Html/Jsp/Javascript' 카테고리의 다른 글
| jQuery.ajax(options) (0) | 2013.01.22 |
|---|---|
| Html,Jsp,Css_10 (2) | 2011.10.21 |
| Html,Jsp,Css_08 (0) | 2011.10.19 |
| Html,Jsp,Css_07 (0) | 2011.10.18 |
| [Test] for문과 테이블을 이용한 구구단 출력하기 & while문으로도 해보기 (0) | 2011.10.17 |
