'Language' 카테고리의 글 목록 (44 Page)

Location

Language/JAVASCRIPT 2010. 5. 10. 15:25

< Location >

브라우저의 현재 url에 대한 정보를 포함하는 개체로 location을 변경하기 위해서는 location의 일부분을 나타내는 아래의 각각의 속성을 지정하는 것보다는 href 속성을 세팅하는 것이 더 편리하며 netscape6.0에서 assign 매서드가 추가되었다.

property(속성)		method(메써드)
netscape6.0	Expolorer	netscape6.0	Explorer
hash	hash	reload	reload
host	host	replace	replace
hostname	hostname	assign	assign
href	href
pathname	pathname
port	port
protocol	protocol
search	search

1) 속성

protocol

url의 시작을 의미하는 문자열로 콜론까지 포함한다. 이 속성은 url의 일부분을 나타내며, url의 접근방법을 지정한다.

예)위 표에서 protocol 속성은 "http:"이다.

protocol의 종류

1. javascript-x:	4. http:	7. mailto:
2. view-source:	5. file:	8. news:
3. https:	6. ftp:	9. gopher:
10. telnet:	11. res:

hostname

hostname 속성은 서버 내임, 하위 도메인, 도메인, 포트넘버를 포함한 서버의 충분한 이름을 포함하는 문자열을 의미한다.

예)위 표에서 hostname 속성은 "home.world.co.kr"이다.

port

서버가 사용하는 통신포트를 나타내는 속성으로 지정한 port가 현재 location에서 발견 되지 않으면 에러가 발생하고 port속성을 지정하지 않으면 기본값인 80이 된다.

예)위 표에서 port 속성은 "8080"이다.

host

host 속성은 hostname + port를 합쳐놓은 것이다.

예)위 표에서 host 속성은 "home.world.co.kr:8080"이다.

pathname

url의 경로부분을 나타내는 속성이다.

예)위 표에서 pathname 속성은 "book/javascript-x.html"이다.

hash

url에서 anchor의 인식자인 hash마크( #)로 시작하는 문자열이다.

이 속성은 url의 일부를 나타내면 http 프로토콜에서만 적용되며 지정한 hash가 현재 location에서 발견되지 않는다면 에러를 얻게 될 것이다.

예)위 표에서 hash 속성은 "#windowurl"이다.

search

url에서 어떤 query정보를 지정하는 물음표(?)로 시작하는 문자열이다.

이 속성은 url의 일부분을 나타내며 http 프로토콜에서만 적용되며 변수와 값이 쌍으로 이루는데 각 쌍은 ampersand(&)로 분리된다.

예)위 표에서 search 속성은 "?x=5&y=7"이다.

href

href 속성은 전체 url을 나타내는 속성으로 다른 location개체의 속성은 href속성의 일부분이다.

location 개체에서 속성 이름을 생략하는 것은 location.href로 속성을 지정하는 것과 같다.

예)window.location=http://home.world.co.kr/ = window.location.href= "http://home.world.co.kr/"

2) 매서드

reload - 현재문서를 다시 읽어 들이는 매서드이다. 이 매서드는 도구막대에서 reload버튼을 클릭 하는 것과 동일한 결과를 가져온다.

reload()

replace - 현재 히스토리 리스트에 있는 url을 지워버리고 이 매서드에서 지정한 url을 읽어 들인다.

replace(url)
url: 현재 url을 대신할 url을 의미한다.

현재 문서의 url이 www.netscape.com이라고 하자 이 문서에 location.replace("http://www.microsoft.co.kr")매서드를 이용하면 브라우저는 www.microsoft.co.kr을 읽어 들일 것이다. 도구막대에서 이전 버튼을 클릭하면 www.netscape.com으로 이동하지 않는다. www.microsoft.co.kr이 www.netscape.com을 히스토리 리스트에서 지워버리고 www.microsoft.co.kr로 바꾸어 버렸기 때문이다.

assign - 새로운 html document를 읽어들이는 매서드이다.

location.assign(sURL)
sURL : 읽어들인 document의 url을 지정하는 String

예)
<form name="oform">
<input type="button" name="ass" value="assign" onclick="location.assign('http://www.msn.co.kr')">
</form>

[출처] Location|작성자 해피캐빈

저작자표시 비영리

'Language > JAVASCRIPT' 카테고리의 다른 글

checkbox (0)	2010.05.10
BUTTON (0)	2010.05.10
DIV (0)	2010.05.10
window 개체 (0)	2010.05.10
onSelect \| onkeypress (0)	2010.05.10

:

DIV

Language/JAVASCRIPT 2010. 5. 10. 15:24

< DIV >

html 을 렌더링할 컨테이너를 지정하는 개체로 block요소이며 종료 태그가 있어야 한다. Dynamic html과 DOM에서는 html에서 나온 하나 하나의 html element(태그)를 개체로 취급하는데 이 개체 중 가장 대표적인 것이 div 개체로써 explorer와 netscape6.x에서 스타일 컨테이너로써 가장 중요하고 가장 많이 사용되며 가장 많은 속성과 매서드가 적용된다. 그러므로 html element(태그) 이용법은 모든 html element(태그)에 적용되는 것은 아니지만 div 개체를 참조하면 된다.

참고로 netscape4.5에서 div 태그에 스타일을 적용해서 만든 layer 개체는 netscapt6.0에서 폐지되었으며 explorer와 유사하게 되었다.

property(속성)		method(메써드)		event handlers
netscape6.0	Expolorer	netscape6.0	Explorer	공통
	accessKey		applyElement	onBlur
align	align	addEventListener	attachEvent	onclick
	canHaveChildren	removeEventListener	detachEvent	ondblclick
	canHaveHTML	focus	focus	onFocus
	clientHeight	blur	blur	onkeypress
	clientLeft	click	click	onkeydown
	clientTop	insertBefore	insertBefore	onkeyup
	clientWidth	replaceChild	replaceChild	onmousedown
offsetTop	offsetTop	removeChild	removeChild	onmouseup
offsetLeft	offsetLeft	../data/lecture/hcjd/appendixcdChild	../data/lecture/hcjd/appendixcdChild	onmouseover
offsetWidth	offsetWidth	hasChildNodes	hasChildNodes	onmousemove
offsetHeight	offsetHeight	cloneNode	cloneNode	onmouseout
offsetParent	offsetParent		removeNode
	isContentEditable		replaceNode
	contentEditable		swapNode
			clearAttributes
	isDisabled	getAttribute	getAttribute
	disabled	setAttribute	setAttribute
innerHTML	innerHTML	removeAttribute	removeAttribute
	innerText		mergeAttributes
	outerHTML	getAttributeNode
	outerText	setAttributeNode
id	id	removeAttributeNode
className	className	getElementsByTagName	getElementsByTagName
tagName	tagName	normalize	contains
title	title		doScroll
	tabIndex		insertAdjacentHTML
	parentElement		insertAdjacentText
style	style		insertAdjacentElement
	hideFocus		getAdjacentText
lang	lang		replaceAdjacentText
	language		setActive
	scrollHeight		setExpression
	scrollLeft		getExpression
	scrollTop		removeExpression
	scrollWidth		scrollIntoView
	noWrap
	readyState
	uniqueID
	sourceIndex
ownerDocument
nodeName	nodeName
nodeValue	nodeType
nodeType	nodeValue
parentNode	parentNode
childNodes
firstChild	firstChild
lastChild	lastChild
previousSibling	previousSibling
nextSibling	nextSibling
attributes

모든 HTML ELEMENT에 적용되는 것

[출처] DIV |작성자 해피캐빈

저작자표시 비영리

'Language > JAVASCRIPT' 카테고리의 다른 글

BUTTON (0)	2010.05.10
Location (0)	2010.05.10
window 개체 (0)	2010.05.10
onSelect \| onkeypress (0)	2010.05.10
이벤트 핸들러와 이벤트 (0)	2010.05.10

:

window 개체

Language/JAVASCRIPT 2010. 5. 10. 15:22

window 개체는 브라우저가 html 파일을 읽어 들일 때마다 자동으로 만들어지는 최상위 개체로 모든 개체는 window 개체 아래에 위치하게 된다. window 개체의 속성 또는 매서드에 접근하기 위해서는

window.속성 또는 window.매서드로 접근해야 한다.

property(속성)		method(메써드)		event handlers
netscape6.0	Expolorer	netscape6.0	Explorer	공통
name	name	alert	alert	onblur
window		confirm	confirm	onerror
self	self	prompt	prompt	onfocus
top	top	back		onload
parent	parent	forward		onunload
closed	closed	find		onresize
defaultStatus	defaultStatus	home		onmousedown
status	status	print	print	onmouseup
length	length	stop		onclick
locationbar		blur	blur	onmouseover
menubar		close	close	onmouseout
personalbar		focus	focus	onkeydown
scrollbars		setTimeout	setTimeout	onkeyup
statusbar		clearTimeout	clearTimeout	onkeypress
toobar		setInterval	setInterval	onmousemove
innerHeight		clearInterval	clearInterval	onsubmit
innerWidth		moveBy	moveBy	onreset
outerHeight		moveTo	moveTo	onchange
outerWidth		resizeBy	resizeBy	onselect
pageXOffset		resizeTo	resizeTo	onclose
pageYOffset		scrollBy	scrollBy	onabort
screenX		scrollTo	scrollTo	onpaint
screenY		open	open	ondragdrop
	screenLeft	captureEvents		onscroll
	screenTop	handleEvent
opener	opener	releaseEvent
document	document	routeEvent
frames	frames	addEventListener	attachEvent
history	history	removeEventListener	detachEvent
location	location		navigate
navigator	navigator		setActive
screen	screen		showHelp
	frameElement		showModalDialog
	returnValue		showModelessDialog
	dialogArguments
	dialogTop
	dialogLeft
	dialogWidth
	dialogHeight

[출처] window|작성자 해피캐빈

저작자표시 비영리

'Language > JAVASCRIPT' 카테고리의 다른 글

Location (0)	2010.05.10
DIV (0)	2010.05.10
onSelect \| onkeypress (0)	2010.05.10
이벤트 핸들러와 이벤트 (0)	2010.05.10
onClick \| onDblClick \| onFocus \| onBlur (0)	2010.05.10

:

onSelect | onkeypress

Language/JAVASCRIPT 2010. 5. 10. 15:22

onselect.htm

<html>
<head>
<title>onselect</title>
</head>

<body>
<form name="oform">
<textarea name="selecttextarea" rows="5" cols="30" onSelect="alert('onselect 이벤트가 발생했습니다.');">이 상자에 있는 텍스트를 선택하십시요 그러면 onselect이벤트 핸들러가 실행됩니다.</textarea></p>
</form>
</body>
</html>

<textarea name="selecttextarea" rows="5" cols="30" onSelect="alert('onselect 이벤트가 발생했습니다.');">
텍스트 상자에서 텍스트를 마우스 클기를 해서 선택하면 select 이벤트가 발생하고 'onselect 이벤트가 발생했습니다.'라는 메시지를 보여준다.

onkeypress.htm

<html>
<head>
<title>onkeypress</title>
<script-x>
function intfun(e) {
  var keyChar = ((navigator.vendor)? String.fromCharCode(e.which): String.fromCharCode(event.keyCode));
      x = parseInt(keyChar, 10)
      document.getElementById("result").innerHTML= ((isNaN(x))?"숫자가 않입니다 숫자를 눌러주세요 ":"숫자입니다.");
}
document.onkeypress = intfun;
</script-x>
<style>

</style>
</head>

<body>
<p align=center><span id="result"> </span></p>
</body>

</html>

var keyChar =
　　　　　　((navigator.vendor)? String.fromCharCode(e.which): String.fromCharCode(event.keyCode));
눌러진 키의 ASCII값을 netscape6.x에서는 which 속성을 통해 explorer인 경우에는 keyCode 속성을 통해 문자로 변경한 다음 변수 keyChar에 대입한다.

　　　x = parseInt(keyChar, 10)
변수 keyChar에 대입된 값을 십진수의 정수로 변경한 값을 x에 대입한다.

　document.getElementById("result").innerHTML= ((isNaN(x))?"숫자가 않입니다 숫자를 눌러주세요 ":"숫자입니다.");
x가 숫자인지 안닌지를 확인해서 숫자가 아니면 result 개체의 내부HTML로 "숫자가 않입니다 숫자를 눌러주세요 "라는 메시지를 숫자이면 "숫자입니다."라는 메시지를 보여준다.

document.onkeypress = intfun;
document에서 keypress 이벤트가 발생하면 intfun 함수를 호출한다.

[출처] onSelect | onkeypress|작성자 해피캐빈

저작자표시 비영리

'Language > JAVASCRIPT' 카테고리의 다른 글

DIV (0)	2010.05.10
window 개체 (0)	2010.05.10
이벤트 핸들러와 이벤트 (0)	2010.05.10
onClick \| onDblClick \| onFocus \| onBlur (0)	2010.05.10
onMouseDown \| onMouseUp \| onMOuseOver \| onMouseOut (0)	2010.05.10

:

이벤트 핸들러와 이벤트

Language/JAVASCRIPT 2010. 5. 10. 15:19

이벤트 핸들러

이벤트는 사용자의 어떤 행위(마우스를 클릭하거나 윈도우의 크기를 변경하거나 링크위로 마우스를 가져 가는 것등)에 의해 통상 발생한다. 이러한 행위가 발생할 때 실행될 자바스크립트를 지정하는 것이 이벤트 핸들러이다.

이벤트 핸들러의 형태

이벤트 핸들러의 형태는 이벤트의 앞에 on이 추가된 형태이다. 아래 표에서 첫 칸은 이벤트이고 둘째 칸은 이벤트 핸들러이다. 둘째 칸에는 모두 이벤트의 이름 앞에 on이 추가되어 있다는 것이 확인될 것이다.

event handler="①handlerText"
①handlerText: 자바스크립크 코드 또는 함수를 호출한다.

아래의 이벤트는 netscape와 explorer에서 공통적으로 적용되는 이벤트이다.

Event	Event handler	설 명
Click	onClick	클릭 이벤트가 발생(사용자가 마우스 버튼을 눌렀다 놓을 때)할 때 지정된 자바스크립트 코드를 실행하거나 또는 함수를 호출한다.
DblClick	onDblClick	개체를 더블 클릭했을 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다.
Blur	onBlur	blur 이벤트가 발생할 때 즉 개체가 초점을 읽을 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다. 초점을 읽는다는 것은 초점이 어떤 개체에 주어 졌을 때 다른 개체를 클릭하거나 탭 키를 누름으로서 다른 개체로 초점이 이동할 때 기존 개체는 초점을 읽는다.
Focus	onFocus	focus 이벤트가 발생할 때 즉 개체가 초점을 얻을 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다. 초점을 얻는다는 것은 어떤 개체가 focus 매써드에 의해 초점이 주어지거나 그 개체를 마우스로 클릭하거나 탭 키로 초점이 그 개체로 이동할 때 발생한다.
Abort	onAbort	abort 이벤트가 발생할 때 즉 사용자가 그림을 다운로드 중 브라우저에서 중지 버튼을 클릭했을 때 실행될 자바스크립트 코드나 함수를 호출한다.
Change	onChange	change 이벤트가 발생할 때 즉 개체가 초점을 읽고 그것의 value가 변경되었을 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다. 사용자의 입력 값이 유효한 것인지 확인하기 위해 사용된다.
Load	onLoad	브라우저가 윈도우 또는 프레임을 읽어 들이는 것을 마쳤을 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다. 프레임에 있는 onLoad 이벤트가 프레임셋에 있는 onLoad 이벤트보다 먼저 발생한다.
Unload	onUnload	사용자가 문서를 종료 시킬 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다. 프레임에 사용된 onUnload 이벤트가 프레임셋에 있는 onUnload 이벤트보다 먼저 발생한다.
MouseDown	onMouseDown	사용자가 마우스 버튼을 누를 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다.
MouseUp	onMouseUp	사용자가 마우스 버튼을 놓을 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다.
MouseOver	onMouseOver	마우스 커서가 개체나 영역 밖에서부터 개체나 이미지 위에 위치할 때 지정된 자바스크립트 코드를 실행한다. onMouseOver와 함께 status 또는 default status 속성을 설정할 때에는 이벤트 핸들러 안에 true를return해야만 한다.
MouseOut	onMouseOut	마우스 커서가 링크나 이미지 맵의 영역을 떠 날 때 마다 지정된 자바스크립트 코드를 실행한다. onMouseOver와 함께 status 또는 default status 속성을 세팅할 때에는 이벤트 핸들러 안에 true를 return해야만 한다.
Reset	onReset	사용자가 폼에서 리셑 버튼을 클릭할 때 지정된 자바스크립트 코드를 실행한다. 이 이벤트 핸들러는 form 태그에서 사용함을 주의하라.
Submit	onSubmit	사용자가 폼을 제출할 때 지정된 자바스크립트 코드를 실행한다. 폼이 제출되는 것을 막기 위해 onSubmit 이벤트 핸들러를 사용할 수 있으며 이벤트 핸들러에 return 명령어(statement)를 놓아야 한다. 이 이벤트 핸들러는 form태그에 사용된다는 점에 주의하라.
Select	onSelect	사용자가 텍스트박스나 텍스트 필드의 텍스트를 선택할 때 지정된 자바 스크립트 코드를 실행한다.
MouseMove	onMouseMove	사용자가 마우스 커서를 이동 시킬 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다. 마우스의 이동은 계속적으로 발생하는 것이기 때문에 어떤 개체의 이벤트가 아니다,
DragDrop	onDragDrop	사용자가 개체를 윈도우에 떨어뜨릴 때 지정된 자바스크립트 코드를 실행한다.
Error	onError	브라우저 자체의 에러가 아니라 그림이나 문서를 읽어들이는 동안 에러가 발생할 경우 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다.
Resize	onResize	사용자나 스크립트가 윈도우 또는 프레임의 크기를 변경할 때 지정된 자바스크립트 코드를 실행한다.
KeyDown	onKeyDown	사용자가 키를 누를 때 지정된 자바스크립트 코드를 실행한다. KeyDown 이벤트는 KeyPress 이벤트 전에 발생한다, KeyDown이 false를 리턴하면, KeyPress이벤트는 발생하지 않는다.
KeyUp	onKeyUp	onKeyUp 이벤트 핸들러는 사용자가 눌렀던 키를 놓을 때 지정된 자바스크립트 코드를 실행한다.
KeyPress	onKeyPress	사용자가 키를 누르고 있을 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다. keypress 이벤트는 keydown이벤트가 false 이외의 다른 것을 리턴할 때에만 keypress 이벤트가 발생한다. 이 이벤트는 키를 누르고 있는 동안 계속 반복적으로 발행한다.

[출처] 이벤트 핸들러(event handler)|작성자 해피캐빈

저작자표시 비영리

'Language > JAVASCRIPT' 카테고리의 다른 글

window 개체 (0)	2010.05.10
onSelect \| onkeypress (0)	2010.05.10
onClick \| onDblClick \| onFocus \| onBlur (0)	2010.05.10
onMouseDown \| onMouseUp \| onMOuseOver \| onMouseOut (0)	2010.05.10
onMouseMove (0)	2010.05.10

:

onClick | onDblClick | onFocus | onBlur

Language/JAVASCRIPT 2010. 5. 10. 15:18

cdfb.htm
onclick 이벤트에서 그림을 클릭하면 그림이 확대되었다가 다시 그림을 클릭하면 그림이 원상태로 돌아 가며 onfocus-onblur 이벤트에서는 마우스로 버튼을 클릭하거나 버튼1을 마우스로 클릭한 다음 탭 키로 초점을 이동시키면 이벤트를 확인할 수 있다.

<html>
<head>
<title>zoom</title>
<style>

</style>
</head>

<body onload="addele();">
<script-x language="JavaScript-x">
function addele(){
     zoomimg = document.createElement("IMG");
     zoomimg.style.position = "absolute";
     zoomimg.style.visibility = "hidden";
     document.body.../data/lecture/hcjd/appendixcdChild(zoomimg);
}

var zoom = true
var magnify = 3

function display(e){
oObject = ((navigator.vendor)? e.target : event.srcElement);
if(oObject.tagName=="IMG"){

   if(zoom){
        with(zoomimg.style){
                            left = oObject.offsetLeft
                            top = oObject.offsetTop
                            width = (oObject.width) * magnify
                            height = (oObject.width) * magnify
                            visibility = "visible"
                   }
         zoomimg.src = oObject.src
         zoom = false
   }else{
         zoomimg.style.visibility = "hidden";
         zoom = true
   }
}
}
document.body.onclick=display
</script-x>
<p align="center"><span>onclick 이벤트</span><p>
<img src="board.gif" width="80" height="54" border="0" alt="board.gif">
<img src="creditcard_visa.gif" width="60" height="38" border="0" alt="creditcard_visa.gif">
<img src="f_wmelon01.gif" width="48" height="49" border="0" alt="f_wmelon01.gif">
<hr>
<p align="center"><span>onDblClick 이벤트</span>
<form name="oform">
    <p><input type="button" name="dblbutton" value="xpert로 이동하기 위해서는 버튼을 더블 클릭 하세요"   onDblClick="window.location='http://www.xpert.co.kr';"></p>
<hr>
    <p align="center"><span>onFocus-onBlur 이벤트 </span>
    <p id="blfo" style="font-size:20pt">  </p>
<p><input type="button" name="blurbtn" value="버튼1" onblur="document.getElementById('blfo').innerHTML='버튼1에서 blur이벤트가 발생했습니다.';">
   <input type="button" name="midbtn" value="버튼2" >  
<input type="button" name="focusbtn" value="버튼3" onFocus="document.getElementById('blfo').innerHTML='버튼3에서 focus이벤트가 발생했습니다.';">
</p>
</form>
</body>

</html>

<body onload="addele();">
문서를 읽어들이는 것을 완료하면 addele 함수를 호출한다.

function addele(){
     zoomimg = document.createElement("IMG");
img 개체를 만든 다음 zoomimg라는 변수에 대입한다.

　　zoomimg.style.position = "absolute";
     zoomimg.style.visibility = "hidden";
     document.body.../data/lecture/hcjd/appendixcdChild(zoomimg);}
img 개체의 위치를 절대값으로 visibility 속성을 hidden으로 해서 보이지 않게 한 다음 body에 추가한다.

var zoom = true
zoom 변수는 이미지를 클릭할 때 첫 번째 클릭은 그림을 확대하고 두 번째 클릭은 확대 그림을 감추는 역할을 하는 변수로 처음에 마우스로 그림을 클릭했을 때 그림을 볼 수 있도록 하기 위해 true로 설정한다.

var magnify = 3
변수 magnify는 그림을 몇 배로 확대할 것인가를 지정하는 것으로 그림의 크기는 이 값을 변경으로 확대배율을 조정할 수 있다.

function display(e){
이 함수는 e 변수를 통해 이벤트를 변수로 받는다. 이것은 netscape에서만 이용된다.

oObject = ((navigator.vendor)? e.target : event.srcElement);
netscape6.x 인 경우에는 target 속성을 통해 explorer인 경우에는 srcElement 속성을 통해 이벤트가 발생한 개체를 변수 oObject에 대입한다.

if(oObject.tagName=="IMG"){
click 이벤트가 발생한 개체가 IMG 즉 그림인 경우에 이 조건식에 속한 명령문이 실행된다.

   if(zoom){
   zoom 변수의 초기값은 true이기 때문에 그림을 확대하는 아래의 명령문이 실행된다. 다음에 IMG 개체에서 click 이벤트가 발생할 때에는 zoom 속성이 false이기 때문에 else 에 속한 명령문이 실행되어 확대된 그림이 보이지 않게 된다.

        with(zoomimg.style){
                            left = oObject.offsetLeft
                            top = oObject.offsetTop
                            width = (oObject.width) * magnify
                            height = (oObject.width) * magnify
                            visibility = "visible"
                   }
zoomimg 개체의 offsetLeft, offsetTop 속성을 통해 그림의 위치를 지정해 준 다음 width , height 속성을 통해 그림의 확대 크기를 지정한 다음 visibility 속성을 통해 추가한 img 개체를 보이게 한다.

         zoomimg.src = oObject.src
이제 확대 그림을 보여줄 준비는 다 했는데 아직 그림의 주소가 정해 지지 않았음으로 이벤트가 발생한 IMG 개체의 주소를 zoomimg 개체의 주소로 지정해 줌으로써 확대된 그림이 보이게 된다.

         zoom = false
이제 다음 번에 그림을 클릭할 때 확대된 그림을 보이지 않게 하기 위해 zoom 속성을 false로 변경한다.

   }else{
         zoomimg.style.visibility = "hidden";
그림이 확대된 경우에 확대된 그림이 보이지 않게 하는 역할을 한다.

         zoom = true
다음에 IMG 개체를 클릭할 때 그림이 확대되도록 zoom 속성을 true로 설정한다.
   }
}
}

document.body.onclick=display
document의 body에서 click 이벤트가 발생하면 이 이벤트를 처리하기 위해 display 함수를 호출한다.

<p><input type="button" name="dblbutton" value="xpert로 이동하기 위해서는 버튼을 더블 클릭 하세요"   　　　　　　　　　　　　　　　　　onDblClick="window.location='http://www.xpert.co.kr';"></p>
이 버튼을 더블 클릭하면 xpert를 읽어 들이고 더블클릭이 아닌 클릭만 하면 아무런 일도 발생하지 않는다.

<p><input type="button" name="blurbtn" value="버튼1" onblur="document.getElementById('blfo').innerHTML='버튼1에서 blur이벤트가 발생했습니다.';">
이 버튼을 클릭하면 이 버튼으로 초점이 이동하게 된다. 그런 다음 다른 개체를 클릭하거나 탭 키를 누르면 다음 버튼으로 초점이 이동하게 되고 이 버튼이 초점을 읽게 됨으로 blur 이벤트가 발생하게 되어 onblur 이벤트 핸들러에 의해 "버튼1에서 blur이벤트가 발생했습니다."라는 메시지를 보여준다.

<input type="button" name="focusbtn" value="버튼3" onFocus="document.getElementById('blfo').innerHTML='버튼3에서 focus이벤트가 발생했습니다.';">
2번 버튼을 클릭한 다음 탭 키를 누르거나 이 버튼을 클릭하면 초점이 이 버튼으로 이동하게 되고 focus 이벤트가 발행하게 되어 "버튼3에서 focus이벤트가 발생했습니다."라는 메시지를 보여준다.

[출처] onClick | onDblClick | onFocus | onBlur|작성자 해피캐빈

저작자표시 비영리

'Language > JAVASCRIPT' 카테고리의 다른 글

onSelect \| onkeypress (0)	2010.05.10
이벤트 핸들러와 이벤트 (0)	2010.05.10
onMouseDown \| onMouseUp \| onMOuseOver \| onMouseOut (0)	2010.05.10
onMouseMove (0)	2010.05.10
onAbort \| onReset \| onSubmit (0)	2010.05.10

:

onMouseDown | onMouseUp | onMOuseOver | onMouseOut

Language/JAVASCRIPT 2010. 5. 10. 15:18

onmouseover, onmouseout 이벤트는 링크위로 마우스 포인터가 이동하면 링크에 대한 정보를 보여주면서 링크 개체에서는 정보 상자가 마우스를 따라 다닌다. onmousedown과 onmouseup 이벤트는 축구공에서 마우스를 누르면 농구공 모양을 되고 마우스를 놓으면 원래의 축구공 모양을 돌아가는에 여기서는 이벤트를 보여주기 위해 간단하게 작성한 것이기 때문에 실제 작성시에는 이미지를 미리 읽어들여 놓아야 한다. 이미지를 미리 읽어들이는 방법은 window 개체의 settimeout 매서드에 나오는 settimeout.htm을 참고하면 된다.

mouse.htm

<html>
<head>
<title>onmouseover-onmouseout-onmousedown-onmouseup</title>
<Script-x LANGUAGE="JavaScript-x">

</Script-x>
<style>

</style>
</head>

<body>
<p align="center"><span>onMouseOver-onMouseOut 이벤트</span><p>
<div id="overtxt" style="width:232px; height:168px; position:absolute; left:353px; top:219px; z-index:1; visibility:hidden;overflow :visible;">
    <table border="1" cellspacing="0" width="100%" bordercolordark="white" bordercolorlight="black">
        <tr>
            <td width="190" bgcolor="#3333FF">
                <p id="txttitle" style="color:white;"> </p>
            </td>
        </tr>
        <tr>
            <td width="190" bgcolor="#FFFFCC">
                <p id="txtcontent"> </p>
            </td>
        </tr>
    </table>
</div>
<a href="../data/lecture" onMouseOver="over('helpme119', 'helpme119로 이동합니다.'); " onmouseout="out();" >helpme119</a></p>
<p><a href="http://www.naver.com" onMouseOver="over('네이버', '네이버로 이동합니다.');" onmouseout="out();" >네이버</a></p>
<p><a href="http://www.zoo.co.kr" onMouseOver="over('동물원', '동물원으로 이동합니다.');" onmouseout="out();">
<img src="f_fish_red.gif" width="120" height="92" border="0"></a></p>
<hr>
<p align="center"><span>onMouseDown-onMouseUp 이벤트</span><p>
<p><img src="football03.gif" width="59" height="59" border="0" alt="football03.gif" onmousedown="this.src='basketball.gif';" onmouseup="this.src='football03.gif';" >
</p>
</body>

</html>

[출처] onMouseDown | onMouseUp | onMOuseOver | onMouseOut|작성자 해피캐빈

저작자표시 비영리

'Language > JAVASCRIPT' 카테고리의 다른 글

이벤트 핸들러와 이벤트 (0)	2010.05.10
onClick \| onDblClick \| onFocus \| onBlur (0)	2010.05.10
onMouseMove (0)	2010.05.10
onAbort \| onReset \| onSubmit (0)	2010.05.10
키코드 (keyCode) (0)	2010.05.10

:

onMouseMove

Language/JAVASCRIPT 2010. 5. 10. 15:17

이 예는 mousemove 이벤트를 이용해 웹 문서에서 마우스를 따라 다니는 그림을 나타낸 것으로 마우스가 이동하는 곳으로 아래의 노란색 병아리가 따라 다니게 된다.

onmousemove.htm

<html>
<head>
<title>onmousemove</title>
<script-x language="JavaScript-x">
    currentX = currentY = 0;
    function moveEl(e) {
      chickID = document.getElementById("chick")
if (navigator.vendor){
        currentX = (e.pageX);
        currentY = (e.pageY);
  }else{
        currentX = (event.clientX + document.body.scrollLeft);
        currentY = (event.clientY + document.body.scrollTop);
  }
         chickID.style.visibility = "visible";
         chickID.style.left = currentX;
         chickID.style.top = currentY;
    }
document.onmousemove = moveEl;
</script-x>
<style>

</style>
</head>

<body>
<p align="center"><span>onmousemove 이벤트</span><p>
<div id="chick" style="width:59px; height:57px; position:absolute; left:26px; top:14px; z-index:1; visibility:hidden;">
    <p><img src="chick_search.gif" width="50" height="53" border="0"></p>
</div>
</p>
</body>
</html>

document.onmousemove = moveEl;
document에서 mousemove 이벤트가 발생하면 moveEl 함수가 호출된다. 나머지는 바로 앞 예와 같음으로 생략한다.

[출처] onMouseMove|작성자 해피캐빈

저작자표시 비영리

'Language > JAVASCRIPT' 카테고리의 다른 글

onClick \| onDblClick \| onFocus \| onBlur (0)	2010.05.10
onMouseDown \| onMouseUp \| onMOuseOver \| onMouseOut (0)	2010.05.10
onAbort \| onReset \| onSubmit (0)	2010.05.10
키코드 (keyCode) (0)	2010.05.10
이벤트 정의와 사용 (0)	2010.05.10

:

랄라라

'Language'에 해당되는 글 463건

checkbox

'Language > JAVASCRIPT' 카테고리의 다른 글

BUTTON

'Language > JAVASCRIPT' 카테고리의 다른 글

Location

'Language > JAVASCRIPT' 카테고리의 다른 글

DIV

'Language > JAVASCRIPT' 카테고리의 다른 글

window 개체

'Language > JAVASCRIPT' 카테고리의 다른 글

onSelect | onkeypress

'Language > JAVASCRIPT' 카테고리의 다른 글

이벤트 핸들러와 이벤트

'Language > JAVASCRIPT' 카테고리의 다른 글

onClick | onDblClick | onFocus | onBlur

'Language > JAVASCRIPT' 카테고리의 다른 글

onMouseDown | onMouseUp | onMOuseOver | onMouseOut

'Language > JAVASCRIPT' 카테고리의 다른 글

onMouseMove

'Language > JAVASCRIPT' 카테고리의 다른 글

티스토리툴바