문서 내용 검색하기
- textbox안에 단어를 넣으면 선택 단어가 노랑색으로 표시된다.
<html>
<head>
<title> 문서 내용 검색하기 </title>
<style>
<!--
body{background:url(city.gif) no-repeat fixed center center}/*배경 이미지 고정*/
body{margin:10,100 ; line-height:14pt}/*기본 스타일*/
h2{font-size:25px; font-family:궁서체; text-align:center; letter-spacing:-2pt}/*대제목*/
.title1{border-bottom:1px dotted; margin-top:30px; margin-bottom:10px}/*소제목*/
hr#hr5{height:5px;color:#5A798C;width:400}/*두께 5픽셀의 선*/
hr#hr2{height:2px;color:#5A798C;width:400}/*두께 2픽셀의 선*/
hr#hr10{height:10px;color:#5A798C}/*두께 10픽셀의 선*/
a{width:280; height:20; border:1px solid; margin:2px; background-color:#B5CFDE;
color:#5A798C; text-decoration:none; padding:2; text-indent:15pt}
a:hover{background-color: #E7EFEF; background:url(bullet.gif) no-repeat}
-->
</style>
<!-- 코딩1********************************************** -->
<script type="text/javascript">
function wordSearch(word) {
//body태그 안에 있는 모든 div태그를 불러오기
var tags = document.body.all.tags("div");
//정규 표현식(대,소문자 구분없고 전역매칭)
var re = new RegExp("("+word+")", "gi");
for(var i=0; i<tags.length; i++) {
//innerHTML - div태그 안에 있는 내용들을 가져온다.
var text = tags[i].innerHTML;
var newtext = text.replace(re,
"<span style = 'background:#FFFF00'>$1</span>");
tags[i].innerHTML = newtext;
}
}
</script>
<!-- ************************************************* -->
</head>
<body bgcolor="#E7EFEF" text="#5A798C">
<p>
<hr id=hr2>
<h2>섹스 & 시티 시즌1 <br></h2>
<h2 align=right>(Sex and the City season1, 1998) </h2>
<hr id=hr2>
<hr id=hr5>
<p>
<center>
<!-- 코딩2********************************************** -->
<form name=frm>
<input type="text" name="word">
<input type="button" value="검색" onclick="wordSearch(this.form.word.value)">
<!--<input type="button" value="검색" onclick="wordSearch(frm.word.value)">-->
</form>
<!-- ************************************************* -->
</center>
<div>
뉴욕에 거주하는 성공한 직업 여성들인 섹스 칼럼리스트 캐리(Carrie Bradshaw: 사라 제시카 파커 분),
변호사 미란다(Miranda Hobbes: 신시아 닉슨 분), 광고회사 간부 사만사(Samantha Jones: 킴 캐트럴 분),
미술품 매매인 샬럿(Charlotte York: 크리스틴 데이비스 분) 등 4명이 늘어놓는 각자의 섹스에 관한 경험,
환상들을 그린 TV 시리즈
</div>
<table border=0 width=300 align=center><tr> <td>
<br>
<a href="#"> 에피소드 1 - '섹스 & 시티'</a><br>
<a href="#"> 에피소드 2 - '모델 집착증'</a><br>
<a href="#"> 에피소드 3 - '총성 없는 전쟁'</a><br>
<a href="#"> 에피소드 4 - '20대 남자와 30대 여자'</a><br>
<a href="#"> 에피소드 5 - '여성의 파워'</a><br>
<a href="#"> 에피소드 6 - '은밀한 섹스'</a><br>
<a href="#"> 에피소드 7 - '일부일처제'</a><br>
<a href="#"> 에피소드 8 - '남자 하나 그리고 여자 둘'</a><br>
<a href="#"> 에피소드 9 - '토끼와 거북이'</a><br>
<a href="#"> 에피소드 10 - '베이비 샤워'</a><br>
<a href="#"> 에피소드 11 - '금욕'</a><br>
<a href="#"> 에피소드 12 - '남자가 뭐길래'</a><br>
</td></tr></table>
<br><br>
<div class=title1>* 에피소드 1 - '섹스 & 시티'</div>
<div>캐리와 친구들은 미란다의 생일 파티에 모여 섹스와 사랑에 대한 이야기를 펼친다.
남자들처럼 감정없이 섹스를 즐기는 것에 흥미를 트낀다.
캐리는 옛 애인을 실험 대상으로 삼고 단순히 섹스를 즐기는 것이 뜻밖의 즐거움을 준다는 사실을 깨닫지만
느닷없이 나타난 미스터 빅은 그녀의 이런 생각에 일치을 가한다.</div>
<div class=title1>* 에피소드 2 - '모델 집착증'</div>
<div>미란다는 파티에서 만난 한 남자와 데이트를 즐긴다.
하지만 하룻밤을 보낸 그 남자는 다름아닌 모델 중독자.
이 얘기를 들은 사만다는 모델 중독자와 데이트를 결심하고 자신의 성적 행동들을 비디오 테이프에 녹화한다.
한편 캐리는 모델 데렉을 실험대상으로 삼고 섹스를 즐긴 뒤 미스터 빅에게 집적대기 시작하는데…</div>
<div class=title1>* 에피소드 3 - '총성 없는 전쟁'</div>
<div>독신에 대한 기혼자들의 적대의식을 탐구하는 캐리.
모처럼 친구의 초대를 받아 집에 놀러갔던 그녀는 친구 남편의 벗은 몸을 본 사건 때문에
친구와의 관계가 이상해지자 기혼자들의 심리에 관심을 갖게 된다.
한편 캐리의 또 다른 친구는 결혼에 목멘 남자를 소개시켜 준다.</div>
<div class=title1>* 에피소드 4 - '20대 남자와 30대 여자'</div>
<div>30대 여성들이 20대의 연하 남자들에게 빠져드는 것을 의아해하던 캐리.
그녀는 30대의 심리를 파악하려 노력하던 중 자신도 젊은 남자에게 끌리고 있는 것을 알게 된다.
하지만 결국 이 모든 것이 성적 욕구를 표철하는 비이성적 행위의 일종이라는 결론을 내린다.</div>
<div class=title1>* 에피소드 5 - '여성의 파워'</div>
<div>신발을 사러 갔다가 신용카드가 정지되는 바람에 곤욕을 치르게 된 캐리.
때마침 나타난 아말리타로는 캐리 대신 신발값을 치러준다.
그 얼마 후 다시 아말리타로를 만난 캐리는 질이라는 남자를 소개받는다.
그와 잠자리까지 함께 한 캐리는 다음날 그가 돈을 남기고 떠나자 허탈함을 느낀다.</div>
<div class=title1>* 에피소드 6 - '은밀한 섹스'</div>
<div>캐리는 빅이라는 남자를 만나 처음 데이트를 하던 날 섹스를 하고 그와 함께 중국 식당에 간다.
그곳에서 만난 마이크는 이 중국 식당이 숨기고 싶은 애인을 데려가는 남자들만의 장소라고 알려준다.
캐리는 크게 실망하지만 빅은 그것이 사실이 아님을 말해준다.</div>
<div class=title1>* 에피소드 7 - '일부일처제'</div>
<div>빅과 행복한 시간을 보내던 캐리는 유연히 그가 어떤 여자와 함께 식사하는 장면을 목격한다.
이 일을 계기로 빅을 알아보던 중 그가 자신만이 아니라 여러 여자와 관계하고 있음을 알게 되는 캐리.
그녀는 빅을 불러내 마음을 확인하려 하는데…</div>
<div class=title1>* 에피소드 8 - '남자 하나 그리고 여자 둘'</div>
<div>캐리의 친구인 샬롯의 애인 잭이 그녀에게 트리플 섹스를 제안한다.
이를 계기로 트리플 섹스를 즐기는 사람들에 대해 알아보던 캐리는 연인인 빅 역시
과거에 전처와 트리플 섹스를 했던 적이 있음을 알게 된다.
캐리는 그의 전처 바바라에게 접근해 빅에 대해 알아보려 한다.</div>
<div class=title1>* 에피소드 9 - '토끼와 거북이'</div>
<div>친구 브룩이 결혼한 것을 계기로 다시 한번 결혼이라는 제도에 대해 생각해보는 캐리.
그녀의 친구들은 결혼에 대해 각각 다른 관점을 지니고 있는데,
빅은 그녀에게 결혼이란 요리처럼 순서와 타이밍의 예술이란 의견을 들려준다.</div>
<div class=title1>* 에피소드 10 - '베이비 샤워'</div>
<div>캐리는 친구들과 함께 예전에 어울려 놀았던 레이니의 예비엄마 파티에 초대받는다.
레이니의 행복한 모습이 부럽기만 한 친구들.
하지만 레이니 역시 그들처럼 혼자 불안정한 시간을 보냈던 때를 그리워 하고 있음을 알게 된다.
엄마가 되는 것 못지 않게 여자로서의 삶이 중요함을 깨닫는 캐리.</div>
<div class=title1>* 에피소드 11 - '금욕'</div>
<div>어느새 연이 사일 발전해 달콤한 시간을 보내는 캐리와 빅.
하지만 날이 갈수록 섹스를 하는 횟수가 줄어들자 캐리는 슬슬 불안해진다.
불만이 쌓이면서 관계도 소원해지는 캐리와 빅.
하지만 다른 사람들의 관계를 지켜보던 캐리는
섹스와 정신적 사랑이 꼭 연결되는 것이 아님을 알게 된다.</div>
<div class=title1>* 에피소드 12 - '남자가 뭐길래'</div>
<div>변호사 미란다가 천주교 신자를 애인으로 사귄다는 소식에 캐리는 교회를 찾아간다.
그곳에서 우연히 빅의 어머니를 만나게 된 캐리는 빅이 그녀를 단순히 친구라고 소개하자
상처를 받는다. </div>
<br><br>
<hr id=hr10>
<br><br>
</p>
</body>
</html>onload 이벤트 핸들러
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function checkText(text) {
if(text.value == "") {
alert("Input Name");
text.foucs();
}
}
</script>
</head>
<body onload="f.t.focus()">
<h3>onblur 예</h3>
<hr>
아래의 이름을 입력하지 않고 다른 창으로 갈 수 없습니다.
<form id="f" name="fo">
이름 <input type="text" id="txt" name="t" value=""
onblur="checkText(this)"><br>
학번 <input type="text" id="stid" name="student">
</form>
</body>
</html>onchange 이벤트 핸들러
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function check(s) {
alert(s.options[s.selectedIndex].value +"을 선택하셨습니다.");
}
</script>
</head>
<body>
<h3>onchange핸들러를 이용하여 select 객체의 옵션을 변경하는 예</h3>
<hr>
다른 과일이 선택하면 선택된 과일을 경고창으로 출력한다<p>
<form name="f">
과일
<select name="sel" onchange="check(this)">
<option value="맛있는 사과">사과
<option value="단감">감
<option value="물찬 배">배
</select>
</form>
</body>
</html>onclick & ondblclick 이벤트 핸들러
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style>
.mydiv {
background-color:yellow;
border-width:2;
border-style:ridge;
border-color:cyan;
}
</style>
<script type="text/javascript">
function show(obj, visible){
if(visible)
obj.style.display = "block";
else
obj.style.display = "none";
}
</script>
</head>
<body>
<h3>onclick, ondbclick 예: 문장 숨기기/보이기 예</h3>
<hr><p>
<span style="color: blue" id="sp" onclick="show(block,false)" ondblclick="show(block, true)">여기</span>
를 클릭하면 아래의 내용이 사라지고 더블클릭하면 나타납니다.</p>
<div id="block" class="mydiv">
본문 내용
</div>
<p>하이</p>
</body>
</html>onreset & onsubmit 이벤트
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function testReset(fo) {
return confirm("폼을 리턴할까요?");
}
function testSubmit(fo) {
if(fo.t.value.length <= 0)return notice();
if(fo.id.value.length <= 0)return notice();
for(var i=0; i<fo.g.length;i++) {
if(fo.g[i].checked)
break;
}
if(i==fo.g.length)
return notice();
return true;
}
function notice() {
alert("폼의 모든 필드를 채우세요");
return false;
}
</script>
</head>
<body>
<h3>onreset과 onsubmit 핸들러의 예</h3>
<hr>
reset버튼을 누르면 confirm 메시지 박스를 출력하고
submit버튼을 누르면 폼 요소가 모드 입력되었는 지를 검사<p>
<form name="f" method="post"
action="http://www.naver.com"
onreset="return testReset(this)"
onsubmit="return testSubmit(this)">
이름 <input type="text" name="t" value=""><br>
학번 <input type="text" name="id" ><br>
희망성적 <input type="radio" name="g" value="a">A
<input type="radio" name="g" value="b">B
<input type="radio" name="g" value="c">C
<input type="radio" name="g" value="d">D
<input type="radio" name="g" value="f">F
<br>
<input type="reset" value="리셋">
<input type="submit" value="완료">
</form>
</body>
</html>과제
과제1>>롤 오버 이미지
<html>
<head>
<title>롤오버 이미지</title>
<script type="text/javascript">
function show(visible) {
img1 = '2.gif';
img2 = '1.gif';
if(visible)
document.banner.src = img1;
else
document.banner.src = img2;
}
</script>
</head>
<body bgcolor=orange>
<table border=0 width=100% height=100%><tr> <td>
<!-- 종속테이블 -->
<table align=center width=400 height=400 bgcolor=white border=10>
<tr><td>
<center>
어린왕자의 그림 제 1호<br>
모자일까? 코끼리를 소화시키고 있는 보아뱀일까?<br><br>
<!-- 코딩1 -->
<a href="#">
<span onmouseover="show(true)" onmouseout="show(false)">
<!-- onmouseover="images.banner.src='2.gif'"-->
<img name=banner src="1.gif" name=img1 border=0>
</span>
</a>
<br><br>
마우스를 올려보세요~
</center>
</td></tr></table>
</td></tr></table>
</body>
</html>과제2>> 반짝 메뉴를 띄워보자!!
<html>
<head>
<title>반짝 메뉴를 띄워보자!</title>
<style>a{text-decoration : none; font-size:9pt}
a:link {color:#ffffff; }
a:visited {color:#676767; }
a:hover {text-decoration : underline; color: #66ccff; }
</style>
<!-- 코딩1 : 스타일 설정설명글에 대한 설정-->
<style type="text/css">
div {
position: absolute; left: 0; top: 0; visibility: hidden;
width: 200px; padding: 10px; color: black; font-size: 9pt;
}
</style>
<!-- 코딩2 : 자바스크립트 소스-->
<script type="text/javascript">
function viewLayer(n) {
//document.getElementById(n).style.left = event.clientX - 100;
document.all[n].style.left = event.clientX - 100;
document.all[n].style.top = event.clientY + 15;
document.all[n].style.visibility = "visible";
}
function hidden(n) {
document.all[n].style.visibility = "hidden";
}
</script>
</head>
<body leftmargin="0" topmargin="0" text=white>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td height="93"><img src="images/cat_01.gif"></td></tr>
<tr><td bgcolor="#000000" height="106"><img src="images/cat_02.gif"></td></tr>
<tr><td bgcolor="#000000" height="235">
<!-- 종속테이블 시작 -->
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="187" align="center">
- <a href="#">신체 특징</a><br>
- <a href="#">건강 관리</a><br>
- <a href="#">생활 습성</a>
</td>
<td width="613" align="right"><img src="images/cat_04.gif"></td>
</tr>
</table>
<!-- 종속테이블 끝 -->
</td></tr>
<tr><td bgcolor="#000000" height="30">
<!-- 종속테이블 시작 -->
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr height="15" align="center">
<td> </td>
<td width="130">＊ <!-- 코딩3 -->
<a href=# onmouseover="viewLayer('note1')" onmouseout="hidden('note1')" >
페르시안</a></td>
<td width="130">＊ <!-- 코딩3 -->
<a href="#" onmouseover="viewLayer('note2')" onmouseout="hidden('note2')" >
아비시니안</a></td>
<td width="150">＊ <!-- 코딩3 -->
<a href="#" onmouseover="viewLayer('note3')" onmouseout="hidden('note3')" >
아메리칸 숏헤어</a></td>
<td width="110">＊ <!-- 코딩3 -->
<a href="#" onmouseover="viewLayer('note4')" onmouseout="hidden('note4')" >
버어만</a></td>
<td width="110">＊ <!-- 코딩3 -->
<a href="#" onmouseover="viewLayer('note5')" onmouseout="hidden('note5')" >
샴</a></td>
</tr>
</table>
<!-- 종속테이블 끝 -->
</td></tr>
<tr><td bgcolor="#CCCCCC"> </td></tr>
</table>
<!-- 코딩4 --><div id=note1>
<img src="images/cat1.jpg" align=left>풍성한 피모와 조용한 태도의, 기품 넘치는 모습이 최대의 매력.
</div>
<!-- 코딩4 --><div id=note2>
<img src="images/cat2.jpg" align=left>피모는 짧고 가늘며 매우 부드럽다.
</div>
<!-- 코딩4 --><div id=note3>
<img src="images/cat3.jpg" align=left>굵은 목, 두터운 앞가슴, 강인한 탄력을 지닌 네다리,
균형 잡힌 꼬리와, 단단한 체격, 완만하고 둥근 머리를 지닌다.
</div>
<!-- 코딩4 --><div id=note4>
<img src="images/cat4.jpg" align=left>먼 옛날의 신비한 전설을 전해주는 성스러운 고양이
</div>
<!-- 코딩4 --><div id=note5>
<img src="images/cat5.jpg" align=left>흰 바탕색과 포인트의 아름다운 대비가 특징
</div>
</body>
</html>
실습
실습1>>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
//setObjects를 로딩한다.
window.onload = setObjects;
function setObjects() {
//폼의 input함수가 객체를 잃을 때 testValue를 리턴해준다
document.personData.firstName.onblur = testValue;
}
function testValue() {
alert("Hi "+this.value);
}
</script>
</head>
<body>
<form name="personData">
First Name: <input type="text" name="firstName" /><br><br>
Second Name: <input type="text" name="secondName" />
</form>
</body>
</html>실습2>>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
//setup을 로딩한다
window.onload = setup;
function clickMe(evnt) {
evnt = evnt ? evnt : window.event;
alert(evnt.type);
}
function setup(evnt) {
var evtObject = document.getElementById("clickme");
//addEventListener : 이벤트를 세팅할 때 사용할 때 쓰이는 함수
//기타 브라우저의 경우
if (evtObject.addEventListener) {
document.addEventListener("click", clickMe, false);
//익스플로러의 경우
} else if(evtObject.attachEvent) {
evtObject.attachEvent("onclick", clickMe);
//또 다른 경우가 생길 경우
} else if(evtObject.onclick) {
evtObject.onclick = clickMe;
}
}
</script>
</head>
<body>
<div id="clickme" style="background-color: #ff0; width: 200px; height: 200px; padding: 20px">
Click me
</div>
</body>
</html>'Study > JavaScript' 카테고리의 다른 글
| [javaScript] Document (0) | 2019.05.16 |
|---|---|
| [javaScript] Form (0) | 2019.05.16 |
| [javaScript] 정규 표현식, 이벤트, 이벤트 핸들러, 이벤트 버블 (0) | 2019.05.16 |
| [javaScript] 기초 실습 (0) | 2019.05.16 |
| [javaScript] 기초 (0) | 2019.05.16 |
