'Language/JAVASCRIPT' 카테고리의 글 목록 (11 Page)

getElementById, getElementsByName, getElementsByTagName

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

getElementById

지정한 id 속성값을 가지는 개체중 첫 번째 개체를 참조하는 매서드이다. explorer에서는 id만으로 개체를 인식할 수 있는데 netscape6.x에서는 이렇게 하면 개체를 인식하지 못하는데 getElementById는 explorer와 netscape6.x에서 공통적으로 개체를 인식하는데 적용되는 것으로 개체를 인식하는데 좀 번거롭기는 하지만 어쩌면 제일 중요하다고 할 수 있다.

document.getElementById(string)
string : id 속성값을 지정하는 string

getElementsByName

같은 name 속성 값을 가진 개체의 콜렉션을 임의로 만들 수 있게 하는 매서드이다.

①collObjects = document.getElementsByName(②string)

①collObjects	같은 name 속성값을 가지는 개체의 콜렉션을 나타내는 개체
②string	콜렉션을 만들 name 속성값을 지정하는 string

getElementsByTagName

element(태그) 이름이 같은 개체들의 콜렉션을 만드는 매서드로 explorer에서는 all 콜렉션의 tag 매서드와 같다.

①collObjects = object.getElementsByTagName(②string)

①collObjects	같은 element 이름을 가진 개체의 콜렉션을 나타내는 개체, 주의할 것은 getElementsByTagName을 이용해서 특정한 element를 참조하면 이 element가 포함하고 있는 모든 child element도 포함된다는 것이다.
②string	element의 이름을 지정하는 string

getlement.htm

<html>
<head>
<title>getElementsByName </title>
<META HTTP-EQUIV="Content-Type"    CONTENT="text/html; CHARSET=euc-kr">
<SCRIPT-x>
function getelef(){
   var indexx = document.form1.getele.selectedIndex
   var indexxValue=document.form1.getele.options[indexx].value
   var indexxseq = document.form1.sequence.selectedIndex
   var resultID=document.getElementById("result");

   if(indexx==0){
   var getidx=document.getElementById("topmenu");
    resultID.innerHTML=getidx.innerHTML

   }else if(indexx==1){
      var getbynamex=document.getElementsByName(indexxValue);
    resultID.innerHTML=getbynamex[indexxseq].parentNode.innerHTML;

   }else{
     var getbytagnamex = document.getElementById("middlemenu").getElementsByTagName(indexxValue)
    resultID.innerHTML=getbytagnamex[indexxseq].innerHTML;
   }
}
</SCRIPT-x>
<style>

</style>
</head>

<body>
<form name="form1">
<p><select size="1" name="getele" onchange="getelef();">
<option value="topmenu">getElementById</option>
<option value="firstmenu">getElementsByName</option>
<option value="li">getElementsByTagName</option>
</select>

<select name="sequence" size="1" onchange="getelef();">
<option selected >1</option>
<option >2</option>
<option >3</option>
</select></p>
</form>

<UL>
<LI id="topmenu">getElementsByTagName
   <UL>
      <LI><BUTTON VALUE="first" NAME="firstmenu" >버튼 1</BUTTON>
      <LI><BUTTON VALUE="second" NAME="firstmenu" >버튼 2</BUTTON>
      <LI><BUTTON VALUE="third" NAME="firstmenu" >버튼 3</BUTTON>
   </UL>
<LI id="topmenu">getElementsByName
   <UL id="middlemenu" >
      <LI><INPUT TYPE="text" value="type=text">
      <LI><INPUT TYPE="checkbox">type=checkbox
      <LI><INPUT TYPE="radio">type=radio
   </UL>
</UL>
    <div id="result" style="width:265px; height:160px; position:absolute; left:323px; top:36px; z-index:1;">
        <p> </p>
    </div>
</body>

</html>

   if(indexx==0){
   var getidx=document.getElementById("topmenu");
    result.innerHTML=getidx.innerHTML
첫 번째 메뉴 즉 getElementById를 선택하면 topmenu라는 id를 가진 개체의 내부 html을 result라는개체의 innerHTML 속성에 대입한다. 즉 topmenu라는 개체의 innerHTML을 result라는 개체의 innerHTML로 그대로 가져가는 것이다.

   }else if(indexx==1){
      var getbynamex=document.getElementsByName(indexxvalue);
    result.innerHTML=getbynamex[form1.sequence.selectedIndex].outerHTML;
두 번째 메뉴 즉 getElementsByName을 선택하면 그 메뉴의 value 속성값(firstmenu)을 변수 getbynamex에 대입한다. 같은 name 속성값을 가진 개체 중에서 두 번째 펼침메뉴에서 선택한 순서에 해당하는 개체의 outerHTML을 result 개체의 innerHTML로 대입한다.

   }else{
     var getbytagnamex = middlemenu.getElementsByTagName(indexxvalue)
    result.innerHTML=getbytagnamex[form1.sequence.selectedIndex].outerHTML
세 번째 메뉴 즉 getElementsByTagName을 선택하면 그 개체의 value 속성값(li 태그)을 getbytagnamex라는 변수에 대입한다. li태그 중 오른쪽 펼침메뉴의 순서에 해당하는 순서에 있는 li태그의 outerHTML 속성을 result 개체의 innerHTML 속성에 대입한다.
   }
}

function getelef(){
   var indexx = document.form1.getele.selectedIndex
   펼침메뉴에서 선택된 메뉴의 순서에 해당하는 정수를 변수 indexx에 대입한다.

   var indexxValue=document.form1.getele.options[indexx].value
   선택된 메뉴의 value 속성을 변수 indexxvalue에 대입한다. 이것이 속성 이름을 알아내는 것이다.

   var indexxseq = document.form1.sequence.selectedIndex
  선택된 메뉴의 순서를 지정해 주는 2번째 펼침메뉴 개체의 선택된 메뉴의 순서를 변수 indexxseq에 대입한다.

   var resultID=document.getElementById("result");
　선택된 값들을 오른쪽 박스에 보여주기 위해 박스 개체를 인식해서 resultID에 대입한다.

   if(indexx==0){
   펼침 메뉴에서 첫 번째 메뉴가 선택된 경우에 이 조건식이 실행된다. 이 메뉴는 오른쪽에 있는 메뉴의 순서와는 상관이 없다.

   var getidx=document.getElementById("topmenu");
   topmenu라는 개체를 인식해서 변수 getidx에 대입한다.

    resultID.innerHTML=getidx.innerHTML
    getidx내에 포함된 HTML을 resultID라는 박스의 내부에 그대로 포함시킨다.

   }else if(indexx==1){
   getElementsByName 메뉴를 선택한 경우에 이 조건식이 실행된다.

　var getbynamex=document.getElementsByName(indexxValue);
　getElementsByName 매서드는 indexxValue 변수에 의해 인식한 Name 속성이 지정된다. 그런데 indexxValue의 firstmenu 이므로 firstmenu라는 Name 속성을 가진 개체의 콜렉션을 변수 getbynamex라는 변수에 대입한다.

  resultID.innerHTML=getbynamex[indexxseq].parentNode.innerHTML;
firstmenu라는 Name 속성을 가진 개체중 변수 indexxseq에 의해 지정된 순서에 해당하는 개체의 parent 개체내에 포함된 HTML을 resultID의 내부에 포함시킨다. netscape에서는 outerHTML을 지원하지 않기 때문에 우회적인 방법으로 사용했다.

   }else{
   그 박의 경우 즉 getElementsByTagName 메뉴를 선택한 경우에 아래의 명령문이 실행된다.

var getbytagnamex = document.getElementById("middlemenu").getElementsByTagName(indexxValue)
middlemenu개체내에 포함된 변수 indexxValue에 지정된 개체 즉 li 태그인 개체들의 콜렉션을 변수  getbytagnamex에 대입한다.

resultID.innerHTML=getbytagnamex[indexxseq].innerHTML;
li 태그중 변수 indexxseq에 의해 지정된 개체내에 포함된 HTML을 resultID 개체내에 포함시킨다.
   }
}

[출처] getElementById, getElementsByName, getElementsByTagName |작성자 해피캐빈

저작자표시 비영리

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

키코드 (keyCode) (0)	2010.05.10
이벤트 정의와 사용 (0)	2010.05.10
document 및 속성 (0)	2010.05.10
history (0)	2010.05.10
document.open, docment.write ,document.clear (0)	2010.05.10

:

document 및 속성

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

브라우저 윈도우에 읽어들여진 HTML 문서를 나타내는 개체로 document 내에 포함된 html element, text 와 document에 대한 정보를 이용하기 위해 사용되는 개체이다.

property(속성)		method(메써드)		event handlers
netscape6.0	Expolorer	netscape6.0	Explorer	공통
title	title	captureEvents		onBlur
	URL	close	close	onClick
domain	domain			onDblClick
width		open	open	onFocus
height		releaseEvents		onKeyDown
linkColor	linkColor	routeEvent		onKeyPress
alinkColor	alinkColor	write	write	onKeyUp
vlinkColor	vlinkColor	writeln	writeln	onMouseDown
bgColor	bgColor		clear	onMouseUp
fgColor	fgColor	addEventListener	attachEvent	onMouseOver
links	links	removeEventListener	detachEvent	onMouseOut
lastModified	lastModified		createElement	onResize
referrer	referrer	createElement
forms	forms	createTextNode	createTextNode
anchors	anchors	createAttribute
images	images	createDocumentFragment
embeds	embeds	getElementById	getElementById
plugins		getElementsByName	getElementsByName
applets	applets	getElementsByTagName	getElementsByTagName
cookie	cookie	insertBefore
	activeElement	replaceChild
	defaultCharset	removeChild
	designMode	../data/lecture/hcjd/appendixcdChild
	dir	hasChildNodes
	uniqueID	cloneNode
documentElement	documentElement		createEventObject
	expando		createStyleSheet
	fileCreatedDate		elementFromPoint
	fileModifiedDate		execCommand
	fileSize		hasFocus
	media		mergeAttributes
	parentWindow		mergeAttributes
	protocol		setActive
	readyState
	URLUnencoded
	script-xs
	all
	frames
styleSheets	stylesheets
	children
	childNodes
body	body
location
ownerDocument
nodeName
nodeType
nodeValue
parentNode
childNodes
firstChild
lastChild
previousSibling
nextSibling
attributes

< 속성 >

title

문서의 제목을 나타내는 속성으로 html에서 title태그 사이에 위치한 값을 자바스크립트에서 반영한 것이다. 문서가 제목을 가지면 그 제목이 이 속성의 값이 되고 그렇지 않으면 null이다.

URL

문서의 전체 url을 나타내는 속성이다. 이것은 통상 문서를 읽어 들일 때 지정한 window.location.href와 일치한다. 그러나 redirection은 location.href를 변경한다.

domain

문서를 제공하는 서버의 도메인 이름을 의미한다.

width, height

윈도우의 넓이와 높이가 아니라 현재 document의 넓이와 높이를 나타내는 속성으로 넓이와 높이를 별도로 지정하지 않았고 브라우저에서 스크롤 막대가 생기지 않으면 window.innerWidth, window.innerHeight과 같다.

width.html
이 예는 explorer에서는 실행되지 않는다.

<html>
<head>
<title>document</title>
<script-x language="JavaScript-x">

</script-x>
</head>

<body>
<p>1</p><p>2</p><p>3</p><p>4</p>
<form name="oform">
    <p><input type="button" name="titlebutton" value="docuemnt title 확인 버튼" OnClick="widfun();"></p>
</form>
<p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
</body>

</html>

win1.document.write("document.width = " + document.width + "<p>");
win1 윈도우에 document의 넓이를 쓴다.

win1.document.write("document.height = " + document.height + "<p>");
win1 윈도우에 document의 높이를 쓴다.
나머지 window 속성에 대해서는 widnow 개체 부분을 보라.

< color 관련 속성 >

linkColor

문서에서 링크의 색을 지정하는 속성으로 body 태그의 link 속성을 자바스크립트에서 반영한 것이다. 색 속성은 16진수 rgb값 또는 색의 이름으로 표시될 수 있다.

예
document.linkColor="aqua"
document.linkColor="00FFFF"

alinkColor - 마우스 버튼을 눌렀을 때 링크 색을 지정하는 속성으로 body 태그의 alink 속성을 자바스크립트에서 반영한 것이다.

예
document.alinkColor="aqua"
document.alinkColor="00FFFF"

vlinkcolor - 방문했던 링크의 색을 지정하는 속성으로 body태그의 vlink속성을 자바스크립트에서 반영한 것이다.

예
document.vlinkColor="aqua"
document.vlinkColor="00FFFF"

bgColor - 문서의 배경색을 지정하는 속성이다. 이것은 body 태그의 bgcolor 속성을 반영한 것이다.

예
document.bgColor="aqua"
document.bgColor="00FFFF"

fgColor - 문서의 글꼴의 색을 지정하는 속성이으로 body태그의 text 속성을 자바스립트에서 반영한 것이다.

color.html

<html>
<head>
<title>color</title>
<script-x language="JavaScript-x">

</script-x>
</head>

<body onLoad="colorfun();">
<p><a href="http://www.microsoft.co.kr">링크1</a></p>
<p><a href="http://www.netscape.com">링크2</a></p>
<p><a href="http://www.Xpert.com">링크3</a></p>
</body>

</html>

document.alinkColor="yellow"
링크를 클릭했을 때 링크의 색을 노란색으로 지정한다.

document.vlinkColor="green"
방문했던 링크의 색을 녹색으로 지정한다.

document.linkColor="red"
링크의 색을 빨간색으로 지정한다.

document.bgColor="gray"
배경색을 회색으로 지정한다.

document.fgColor="black"
전경색(문자의 색)을 검정색으로 지정한다.

lastModified

문서의 최종 변경일을 나타내는 속성으로 서버가 이 정보를 제공하지 않는다면 자바스크립트는 0을 받게 되는데 이것은 GMT 1970년 1월 1일 0시 0분 0초를 의미한다.

lastmodified.htm

<html>
<head>
<title>lastModified</title>
<script-x language="JavaScript-x">

</script-x>
</head>

<body onLoad="modifiedfun();">
</body>

</html>

alert(document.lastModified);
문서의 최종 변경일을 경고 상자에 보여준다. 아래와 같은 상자가 나타날 것이다.

tags, classes, ids

netscape6.x에서 페지 되었다.

formName

문서에서 각각의 폼의 이름을 나타내는 속성이다.

예)
폼의 이름이 firstform라고 가정하면 document.firstform을 이용함으로써 이 폼을 참고할 수 있다.
form을 참고하는 방법에 대해서는 form 개체 부분을 참고하라.

referrer

사용자가 링크를 클릭할 때 호출하는 문서의 url을 나타내는 속성으로 사용자가 소스 문서에서 링크 개체를 클릭함으로써 목적 문서를 탐색할 때 referrer 속성은 소스 문서의 url을 포함한다.

중요
현재 문서가 www.netscape.com/index.html이라고 하자 여기에 www.microsoft.co.kr로 이동하는 링크를 클릭함으로 microsoft로 이동하였다고 하자 이 microsoft의 referrer속성은 www.netscape.com/index.html이 되는 것이다.

forms

문서에서 폼의 순서에 따라 배열이 만들어짐으로써 지정된 배열순서에 따라 폼을 참조할 수 있도록 하는 속성이다. 배열은 0부터 시작한다. 예컨대 N개의 폼이 이름이 차례대로 firstform, secondform, thirdform, ... Nform라고 하자 그러면 다음과 같이 폼의 순서에 따라 폼을 참조할 수 있다. 이것은 폼의 이름이 같을 때 이름으로 참조하려고 하면 두 개 이상의 폼이 이름이 같기 때문에 이름으로서 참조할 수 없게 된다. 이 때 폼의 배열 순서를 이용함으로 참조 할 수 있다 .

document.forms[0] = document.forms["firstform"]   = document.firstform
document.forms[1] = document.forms["secondform"] = document.secondform
document.forms[2] = document.forms["thirdform"]   = document.thirdform
document.forms[N] = document.forms["Nform"]   = document.Nform

links

Area와 link개체의 소스순서에 대응하는 개체 배열을 나타내는 속성이다. 참고하는 방법에 대해서는 앞의 forms부분을 보라

anchors

소스 순서에서 anchor에 대응하는 개체의 배열을 나타내는 속성으로 배열로서 참고하는 방법은 앞의 forms와 동일하다

images

소스 순서에서 image 개체에 대응하는 배열을 나타내는 속성으로 배열을 참고하는 방법은 앞의 forms와 동일하다.

embeds

문서에 삽입된 각각의 개체의 소스 순서에 따른 배열을 나타내는 속성으로 배열을 참고하는 방법은 forms와 동일하다

layers

소스순서에서 layer개체에 대응하는 배열을 나타내는 속성이다. 배열을 이용방법에 대해서는 forms 부분을 보라, netscape6.0에서 페지되었다.

plugins

소스 순서에서 plugin개체에 대응하는 배열을 나타내는 속성이다. 배열을 이용방법에 대해서는 forms 부분을 보라

applets

소스순서에서 applet개체에 대응하는 배열을 나타내는 속성이다. 배열을 참조하는 방법에 대해서는 forms 부분을 보라

cookie

쿠기라는 것은 브라우저에 의해 cookies.txt파일에 저장된 작은 정보의 조각을 의미하는데 문서와 관련된 cookie를 나타내는 속성이다. 쿠키에 저장된 값을 확인하기 위해 substring, charAt, indexOf, lastIndexOf 같은 string 매서드를 사용해야 한다.

document.cookie [ = sCookie ]

sCookie로 지정할 수 있는 것은 아래와 같다.

name=value; ①expires=date; ②domain=domainname; ③path=path; ④secure

①expires=date;	쿠키의 유효기간을 지정하는 것으로 유효기간을 지정하지 않으면 브라우저를 닫으면 유효기간이 종료해 쿠키가 지워지고 미래의 날짜를 유효기간으로 지정하면 쿠키는 브라우저를 통해 저장된다. 과거의 날짜를 지정하면 쿠키는 지워진다. date를 지정하기 위해서는 GMT 형식을 사용해야 한다.
②domain=domainname;	설정한 쿠키를 이용할 수 있도록 허용하는 도메인을 지정한다.
③path=path;	설정한 쿠키를 이용할 문서의 경로를 지정한다.
④secure;	secure로 쿠키를 설정하면 저장된 쿠키 정보는 보안이 유지된 상태에서만 접근할 수 있다.

cookie.htm
이 예는 보안상의 문제로 비밀번호를 저장하지 않고 ID만을 저장하도록 쿠키를 이용해 만든 것이다.

<html>
<head>
<title>cookie</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=euc-kr">
<SCRIPT-x>
function SetCookie(sName, sValue){
if(document.form1.saveid.checked){
var today = new Date();
     today.setDate( today.getDate() + 365 );
     document.cookie = sName + "=" + escape(sValue) + "; expires=" + today.toGMTString();
  }
  window.location= "http://www.dialpad.co.kr"
}

function GetCookie(sName){
  var cookiepiece = document.cookie.split("; ");
  for (var i=0; i < cookiepiece.length; i++)
  {
    var piece = cookiepiece[i].split("=");
    if (sName == piece[0]){
        document.form1.oid.value=(unescape(piece[1]));
     }
}
}
</SCRIPT-x>
<style>

</style>
</head>

<body onload="GetCookie('saveid');">
<p>
<div id="saveid" style="width:344px; height:97px; position:absolute; left:64px; top:35px; z-index:1;">
<form name="form1">
    <br> <font color="black"><b>아이디</b></font>  :
    <input type="text" name="oid" maxlength="10" size="15">
    <input type="checkbox" name="saveid"><font color="black"><b>아이디 저장</b></font> <br>
    <font color="black"><b>비밀번호</b></font>: <input type="password" name="password" maxlength="10" size="15">
                  
   <input class="colortxt" type="button" name="gobtn" value="go-입장" onclick="SetCookie('saveid', this.form.oid.value);" >
   </p>
</form>
</div>
</body>

</html>

function SetCookie(sName, sValue){
이 함수는 쿠기의 이름과 이름 값으로 사용할 사용자가 입력한 id를 매개변수로 받는다.

if(document.form1.saveid.checked){
사용자가 id 저장을 체크했다면 이 조건식에 속한 명령문이 실행된다.

var today = new Date();
     today.setDate( today.getDate() + 365 );
     document.cookie = sName + "=" + escape(sValue) + "; expires=" + today.toGMTString();
현재 날짜에서 365일을 더한 값을 쿠키의 유효기간으로 지정해서 사용자가 입력한 id를 cookie에 저장한다.

  }
　window.location= http://www.dialpad.co.kr
　현재 윈도우에 dialpad를 읽어들인다.
}

function GetCookie(sName){
　var cookiepiece = document.cookie.split("; ");
　쿠키의 각각의 속성은 세미콜론으로 구별한다고 했는데 각각의 속성들을 배열을 만들기 위해 split 매서드를 이용해서 만든 배열을 변수 cookiepiece 변수에 대입한다. split 매서드에 대해서는 string 개체를 보면 된다.

　for (var i=0; i < cookiepiece.length; i++)
　배열의 각각의 속성과 속성값을 확인하기 위해 for 명령문을 사용한다.

  {
    var piece = cookiepiece[i].split("=");
split 매서드를 이용해서 만든 배열에서 속성과 속성 값을 구별해내기 위해 다시 split 매서드를 사용해서 만든 배열을 변수 piece에 대입한다. 이렇게 만든 배열은 2개의 배열을 가지게 되는데 첫 번째는 속성이고 두 번째는 속성 값이다.

    if (sName == piece[0]){
        document.form1.oid.value=(unescape(piece[1]));
piece라는 변수의 첫 번째 배열은 속성의 이름이 되는데 속성이름이 매개변수로 지정한 이름과 같다면 그 속성의 값을 oid라는 id 입력 텍스트 박스에 대입한다.

<body onload="GetCookie('saveid');">
문서를 읽어들이기을 완료했다면 저장된 id를 자동으로 id 텍스트 박스에 입력하기 위해 GetCookie 함수를 호출한다.

activeElement

parent document가 초점을 받을 때 초점을 받은 개체를 나타내는 속성이다.

document.activeElement

defaultCharset

문서의 기본 문자셑을 나타내는 속성이다. 보기 > 인코딩을 변경하면서 확인해 보라 한국어로 지정한 경우에는 ks_c_5601-1987로 나타날 것이다

[ string = ] document.defaultCharset
string: 기본 문자셑을 나타내는 string

designMode

document가 편집될 수 있는지 없는지를 나타내거나 지정하는 속성이다.

document.designMode [ = string ]
string:string으로 지정될 수 있는 것은 다음과 같다.

On	Document 편집될 수 있다.
Off \| Inherit	기본값으로 편집될 수 없다.

DIR

개체를 읽어들이는 순서를 나타내는 속성이다.

object.dir [ = string]
string: string으로 지정할 수 있는 것은 다음과 같다.

ltr	기본값으로 왼쪽에서 오른쪽으로 읽어들인다.
rtl	오른쪽에서 왼쪽으로 읽어들인다.

uniqueID

개체를 인식하는 유일한 인식자를 만드는 속성이다.

[ string = ] object.uniqueID
string: 개체를 인식하는 유일한 인식자를 나타내는 stirng

documentElement

document 의 근본(최 상위) node를 나타내는 속성으로 HTML 문서인 경우에는 explorer, netscape6.x에서는 HTML 개체이다.

[ object = ] document.documentElement
object: 최 상위 node를 나타내는 개체

expando

개체내에서 임의의 변수(속성)를 만들 수 있을 지를 지정하는 속성이다.

document.expando [ = boolean ]

boolean: 값으로 지정할 수 있는 것은 다음과 같다.

true	기본값으로 임의의 변수를 만드는 것을 허용한다.
false	임의의 변수를 만드는 것을 허용하지 않는다.

fileCreatedDate

파일이 만들어진 날짜를 나타내는 속성이다.

[ string= ] object.fileCreatedDate
string: 파일이 만들어진 날짜를 나타내는 string

fileModifiedDate

파일이 마지막으로 변경된 날짜를 나타내는 속성이다.

[ string = ] object.fileModifiedDate
string: 파일이 마지막으로 변경된 날짜를 나타내는 string

fileSize

파일 크기를 나타내는 속성이다.

[string = ] object.fileSize
string: 파일의 크기를 나타내는 string

filesize.htm

<html>
<head>
<title>fileCreatedDate-fileModifiedDate-fileSize</title>
<script-x language="JavaScript-x">

</script-x>
</head>

<body >
<p> </p>
</body>

</html>

var oCreated=document.fileCreatedDate;
파일이 만들어진 날짜를 변수 oCreated에 대입한다.

var oModified=document.fileModifiedDate;
파일이 변경된 날짜를 변수 oModifed에 대입한다.

var oFilesize=document.fileSize;
파일크기를 변수 oFilesize에 대입한다.

document.write("fileCreatedDate: " + oCreated + "<p>");
파일이 만들어진 날짜를 document에 쓴다.

document.write("fileModifiedDate: " + oModified + "<p>" );
파일이 변경된 날짜를 document에 쓴다.

document.write("fileSize: " + oFilesize)
파일의 크기를 document에 쓴다.

document.close();
이제 문서를 다 작성했음으로 열린 스트림을 닫고 모아진 내용물을 보여준다.

parentWindow

현재 document 개체를 포함하는 window 개체를 참조하는 속성이다.

[ object = ] document.parentWindow

protocol

url의 protocol 부분(콜론 포함)만을 나타내는 속성이다. protoco이라는 것은 컴퓨터 간에 정보를 주고 받는 규칙을 말하는 것이다.

object.protocol [ = string ]
string: 정보를 주고 받는데 사용할 프로토콜

readyState

개체의 현재 상태를 나타내는 속성이다.

[String = ] object.readyState
String: 개체 상태를 나타내는 string

uninitialized	개체가 data를 초기화하기 않을 때
loading	개체가 data를 읽어들이고 있을 때
loaded	개체가 data를 읽어들이는 것을 완료했을 때
interactivedate	를 전부 읽어들이지는 않았지만 사용자와 개체가 상호 이용이 가능할 때
complete	개체가 완전히 초기화되었을 때

URLUnencoded

url에서는 빈칸 등 특수문자는 특정한 형태로 변환되어야 하는데 변환되지 않은 문서의 url을 나타내는 속성이다.

[ surl = ] document.URLUnencoded

[출처] document 및 속성|작성자 해피캐빈

저작자표시 비영리

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

이벤트 정의와 사용 (0)	2010.05.10
getElementById, getElementsByName, getElementsByTagName (0)	2010.05.10
history (0)	2010.05.10
document.open, docment.write ,document.clear (0)	2010.05.10
Array(배열) 오브젝트의 기초 (0)	2010.05.07

:

history

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

윈도우에서 사용자가 방문했던 url에 대한 정보를 포함하는 개체이다.

property(속성)		method(메써드)
netscape6.0	Expolorer	netscape6.0	Explorer
length	length	back	back
		forward	forward
		go	go

1) 속성

length

history 배열에 있는 리스트의 엔트리 수를 나타내는 속성이다.

2) 매서드

back

히스토리 리스트에서 이전 url을 읽어 들인다. 사용자가 브라우저에서 back버튼을 클릭하는 것과 같은 행위를 수행하며 go(-1)과 같다.

back()

forward

히스토리 리스트에서 다음 url을 읽어 들인다.

사용자가 브라우저 버튼에서 forward 버튼을 클릭하는 것과 같은 행위를 수행하며 go(1)과 같다..

forward()

go

히스토리 리스트에서 url을 읽어 들인다. go 매써드는 히스토리 리스트에서 새로운 엔트리를 만든다. 히스토리 리스트에서 새로운 엔트리를 만들지 않기 위해서는 location.replace를 사용해야 한다.

go(①delta)
go(②location)

① delta	히스토리 리스트에서 상대적인 위치를 나타내는 정수
② location	히스토리 리스트에서 전부 또는 부분 url을 나타내는 문자열

go 매서드는 지정된 매개변수에 의해 히스토리 리스트에서 location을 탐색한다. delta가 0이라면 현재 문서를 reload하고 0보다 크면 히스토리 리스트에서 앞쪽 엔트리 수에 해당하는 url을 읽어 들이며 0보가 작으면 히스토리 리스트에서 뒤쪽 엔트리 수에 해당하는 url을 읽어 들인다.

history.htm

이 예를 실행하기 전에 7개의 이상의 사이트를 한 개의 창에서 탐색한 다음에 뒤로 3단계 이동한 다음에 실행시켜 보라 그래야만 여기에 있는 속성을 제대로 확인할 수 있다.

<html>

<head>

<title>method</title>

</head>

<body>

</form>

</body>

</html>

2개의 버튼은 같은 역할을 하는 것으로 현재 히스토리에서 바로 이전의 히스토리 엔트리로 이동하게 된다.

이 2개의 버튼도 같은 역할을 하는 것으로 현재 히스트로에서 바로 다음의 히스토리 엔트리로 이동하게 된다.

이 버튼은 현재 히스토리에서 3단계 전의 히스토리 엔트리로 이동하게 된다.

이 버튼은 현재 히스토리에서 3단계 다음의 히스토리 엔트리로 이동하게 된다.

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

저작자표시 비영리

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

getElementById, getElementsByName, getElementsByTagName (0)	2010.05.10
document 및 속성 (0)	2010.05.10
document.open, docment.write ,document.clear (0)	2010.05.10
Array(배열) 오브젝트의 기초 (0)	2010.05.07
자바스크립트 replace (0)	2010.05.06

:

document.open, docment.write ,document.clear

Language/JAVASCRIPT 2010. 5. 10. 14:59

docment.open

write 또는 writein 매서드의 출력을 모으기 위한 docment를 여는 매서드로 JavaScript-x 1.1버전부터 document.open 또는 document.open("text/html") 매서드는 출력을 모으는 것을 완료했으면 현재 문서를 지우며 모아진 출력은 document.close 매서드에 의해 보여지게 된다. 문서를 열면서 replace를 지정한다면 target 윈도우의 히스토리 길이는 증가하지 않게 되고 지정하지 않는다면 열린 문서는 새로운 히스토리 엔트리(url)를 가진다.

공통
document.open(①mimeType, ②replace)
①mimeType	open 매서드로 여는 문서의 type을 지정하는 문자로 기본값은 text/html이다.
②replace	replace는 mimeType이 "text/html"인 경우에만 지정할 수 있으며 이전 문서가 사용한 history entry를 새로운 문서가 그대로 유지하게 한다.
Explorer
explorer에서는 네스케프에서와 같은 방법 이외에도 document.open()를 통해 새로운 윈도우를 열수도 있는 방법을 제공하는데 이것은 window 개체의 open()매서드와 같기 때문에 window 개체 부분을 참고하면 된다. document.open([url] [, windowname] [, windowfeatures][, Replace])

close

document.open 매서드로 열린 스트림을 닫고 모아진 내용물을 보여준다. 어떠 개체의 이벤트에서 window 또는 document을 지정하지 않고 함수를 호출하지 않고 close()매서드만을 호출할 때 document.close()로 인식하고 이벤트가 함수를 호출하고 그 함수에서 close()매서드만을 호출하면 window.close로 인식한다.

document.clear

현재 document을 지우는 매서드이다.

document.clear()

docment.write

지정된 윈도우의 document에 하나 이상의 html expression을 쓴다.

document.write(①expresssion1, expression2,..expressionN))
①expresssion1, expression2,..expression: JavaScript-x expressions(식, 표현)

writein

writein 매서드는 새로운 줄에서 문자를 시작한다는 것을 제외하고는 write 매서드와 같다.

[출처] document.open, docment.write ,document.clear|작성자 해피캐빈

저작자표시 비영리

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

getElementById, getElementsByName, getElementsByTagName (0)	2010.05.10
document 및 속성 (0)	2010.05.10
history (0)	2010.05.10
Array(배열) 오브젝트의 기초 (0)	2010.05.07
자바스크립트 replace (0)	2010.05.06

:

Array(배열) 오브젝트의 기초

Language/JAVASCRIPT 2010. 5. 7. 10:26

Array란 '정렬하다.배열하다'라는 뜻을 가집니다. 플래시 액션스크립트에 이러한 Array오브젝트 원소들을 효율적으로 다룰 수 있도록 다음과 같은 메서드와 속성을 제공합니다.

메서드(Method)요약

concat

두개의 배열을 연결한 다음,새로운 배열로 반환합니다.

join

배열에 속한 모든 원소를 제거하고, 그 값을 반환합니다.

pop

배열의 맨 마지막 원소를 제거하고, 그 값을 반환합니다.

push

새로운 원소를 배열의 맨 마지막에 추가하고, 바뀐 배열의 길이를 반환합니다.

reverse

배열의 순서를 반대로 합니다.

shift

배열의 첫 번째 원소를 제거하고 그 값을 반환합니다.

sort

배열에 속한 원소들을 정렬합니다.

splice

배열에 원소를 추가하거나 삭제합니다.

toString

배열에 속한 모든 원소를 연결해서 문자열을 만듭니다.

unshift

배열의 앞쪽에 한 개이상의 원소를 추가하고,업데이트왼 배열의 length속성을 반환합니다.

Array오브젝트의 속성(property)요약

length

배열의 길이를 반환합니다.

Array오브젝트 생성하기

Array오브젝트를 선언하는 방식은 두 가지가 있습니다.배열(Array)은 new Array()라는 생산자를 통해서 생성할 수도 있고,[]연산자를 이용해서 생성할수도 이습니다.

예문] myArray1=new Array();

myArray2=[];

[출처] Array(배열) 오브젝트의 기초|작성자 Bonnie

저작자표시 비영리

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

getElementById, getElementsByName, getElementsByTagName (0)	2010.05.10
document 및 속성 (0)	2010.05.10
history (0)	2010.05.10
document.open, docment.write ,document.clear (0)	2010.05.10
자바스크립트 replace (0)	2010.05.06

:

자바스크립트 replace

Language/JAVASCRIPT 2010. 5. 6. 13:06

자바스크립트에서 replace 를 사용할 때 단순히

replace('a', 'b') 

라고 쓰면 맨 처음 나타나는 'a' 만을 'b' 로 단 하나만 바꾸어 준다.

하지만 정규식을 이용한다면 모든 'a' 를 'b' 로 바꾸는 것도 가능하다.

replace(/a/gi, 'b')

처럼 말이다.

여기서 a 를 바꾸어질 문자(열), b 는 바뀔 문자(열)가 되겠다.

원한다면 무엇을 바꾸어도 되겠지..

g 의 의미는: 발생할 모든 pattern에 대한 전역 검색 

i 의 의미는: 대/소문자 구분 안함 

m 의 의미는: 여러 줄 검색(여기서는 사용하지 않았다. 원한다면 하자.)

문자열을 바꾸고 싶다면 문자열을 입력해 주자.

아래 소스는 abc 라는 문자열을 def 라는 문자열로 바꾸어 주는 소스이다.

replace(/abc/gi, 'def')

더 자세한 것은 정규식(Requral Expression)을 참고하도록 하자.

테스트:

자동 replace (포커스를 벗어나면 a 를 b 로) 
수동 replace (뒤에 버튼을 누르면 a 를 b 로) 
소스: (아래 부분을 클릭하고 Ctrl + A 를 누르면 깔끔하게 선택 완료)

<TABLE cellpadding="3" cellspacing="1" border="1">
<TR>
	<TD>자동 replace (포커스를 벗어나면 a 를 b 로)</TD>
	<TD><INPUT TYPE="text" NAME="txtAuto" value="ab  aaaa bbab aa" 
	onFocus="this.select();" 
	onBlur="this.value = this.value.replace(/a/gi, 'b');"></TD>
</TR>
<TR>
	<TD>수동 replace (뒤에 버튼을 누르면 a 를 b 로)</TD>
	<TD><INPUT TYPE="text" NAME="txtManual" value="ab  aaaa bbb aa" 
	onFocus="this.select();"><INPUT TYPE="button" VALUE="변환" 
	ONCLICK="txtManual.value = 
	txtManual.value.replace(/a/gi, 'b');"></TD>
</TR>
</TABLE>

저작자표시 비영리

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

getElementById, getElementsByName, getElementsByTagName (0)	2010.05.10
document 및 속성 (0)	2010.05.10
history (0)	2010.05.10
document.open, docment.write ,document.clear (0)	2010.05.10
Array(배열) 오브젝트의 기초 (0)	2010.05.07

:

랄라라

'Language/JAVASCRIPT'에 해당되는 글 106건

getElementById, getElementsByName, getElementsByTagName

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

document 및 속성

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

history

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

document.open, docment.write ,document.clear

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

Array(배열) 오브젝트의 기초

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

자바스크립트 replace

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

티스토리툴바