자바스크립트 - screen 객체와 document 객체 , link 객체와, anchor 객체

개발/실전 2014. 3. 13. 11:08

 

[screen 객체]

 

screen 객체는 화면의 정보를 알려주므로 화면의 상태에 따라 처리해야 하는 작업이 다를 경우 사용한다.

형식) window.screen. 속성
         screen.속성


----------------- screen 속성 -------------------

○ availHeight
    - 작업 표시줄을 제외한 화면의 높이를 픽셀 값으로 표시

○ availWidth
    - 작업 표시줄을 제외한 화면의 너비를 픽셀 값으로 표시

○ availTop
    - 화면 표시 영역의 y 좌표 표시

○ availLeft
    - 화면 표시 영역의 x 좌표 표시

○ height
    - 화면의 높이를 픽셀 값으로 표시

○ width
    - 화면의 너비를 픽셀 값으로 표시

○ colorDepth
    - 컴퓨터에서 사용하고 있는 컬러 수를 표시

○ pixelDepth
    - 화면의 컬러 해상도를 표시(넷스케이프 네비게이터용)


-------------------------------------------

 

[document 객체]

 

document 객체는 자바스크립트에서 가장 많이 사용하는 객체로 HTML 문서에 대한 정보와

문서에 포함된 객쳉 대한 정보를 갖는다.


형식) document.속성
       document.메소드


----------------------- document 객체의 속성 ------------------------

+_+_+_+_+_+_+_+_+_+_ 색상 지정 +_+_+_+_+_+_+_+_+_+_+_

○ bgcolor
    - 문서의 배경색 지정

○ fgcolor
    - 문서의 글자색, 선색 지정

○ linkcolor
    - 링크 문자색 지정

○ vilinkcolor
    - 방문한 링크 문자색 지정

○ alinkcolor
    - 선택 중인 링크 문자색 지정


+_+_+_+_+_+_+_+_+_+_+ 웹 문서와 관련된 정보 +_+_+_+_+_+_+_+_+

○ lastModifed
    - 홈페이지가 마지막으로 갱신된 날짜 저장

○ location
    - 웹 문서의 URL 주소 저장

○ URL
    - 문서의 URL 주소 값 반환

○ domain
    - 서버의 도메인 명을 지정하거나 반환

○ title
    - <title> 태그 사이의 문서 제목을 제공

○ referer
    - 링크를 실행한 이전 문서의 URL 정보를 제공(넷스케이프 네비게이터용)

 

+_+_+_+_+_+_+_+_+_+_+_+ 웹 문서에 포함된 배열 객체 +_+_+_+_+_+_+_+_+_+_


○ images
    - 문서에 삽입된 그림을 배열로 제공

○ links
    - 문서에 포함된 모든 링크의 이름을 배열로 제공

○ forms
    - <form> 태그 입력 순서대로 배열로 제공

○ anchors
    - 문서에 포함된 하이퍼링크의 이름을 배열로 제공

○ Applets
    - 문서에 포함된 배열들의 배열을 설정

○ Embeds
    - 문서에 포함된 플러그인을 배열로 제공

○ layers
    - 레이어의 배열 정보를 제공

--------------------------------------------------------------------


-------------------------- document 객체의 메소드 ------------------------------

○ clear()
    - 문서의 모든 내용을 지움

○ open()
    - 문서의 내용을 보여줌

○ close()
    - open() 으로 보여준 문서를 닫음

○ write()
    - 태그를 포함하는 문자열을 출력

○ writeln()
    - <pre> 태그와 함께 사용되면 행 마지막에서 자동 개행 자동 개행을 제외하면 write()와 동일한 기능

○ getSelection()
    - 마우스로 선택한 문자열을 반환(넷스케이프 네이게이터용)

-----------------------------------------------------------------------------------


document 객체에서 사용되느느 이벤트핸들러는 onclick, ondbclick, onkeydown, onkeypress,

onmousedown, onmouseup 이다

 

======================================================================================

 

[실습하기]

 

------------------------ 문서 없이 새 창 열기 ---------------------------------------
<html>
<head>
 <title>Test</title>

<script language="javascript">

var win = null

function openWin()
{
 win = open("","win","width=350 height=540 directories=no");

 if(win != null)
 {
  win.document.write("<html><head>")
  win.document.write("<title></title></head>")
  win.document.write("<body onclick='self.close()'>")
  win.document.write("</body></html>")

 }
}

function closeWin()
{
 win.close();

}

</script>
</head>

<body>

<img src=images/zoom.gif style="cursor:hand" onclick="openWin()">

<form name=info>
<input type=button name=bt value=창닫기 onclick="closeWin()">
</form>

</body>

</html>
------------------------------------------------------------------------------------------


--------------------------객체속성 확인하기-------------------------------

<html>
<head><title> document 객체속성 모두 확인해 보기  </title></head>
<body>
<script language="javascript1.2">
<!--
document.fgColor="white"
document.bgColor="orange"
document.linkColor="blue"
document.vlinkColor="yellow"
document.alinkColor="pink"


document.write("<h3>문서제목 :"+document.title+"<br><br>")
document.write("전경색 :"+document.fgColor+"<br><br>")
document.write("배경색 :"+document.bgColor+"<br><br>")
document.write("링크색 :"+document.linkColor+"<br><br>")
document.write("홈페이지 마지막 갱신일 :"+document.lastModified+"<br><br>")
document.write("URL 주소 :"+document.URL+"<br></h3>")

//-->
</script>
</body>
</html>

------------------------------------------------------------------------


====================================================================================

 

[ link 객체 ]

 

lnik 개체는 document 객체의 하위 객체로 홈페이지 문서 내의 링크 정보를 제공한다. 문자, 그림, 이미지맵

등에 설정한 하이펄이크 정보를 얻을 수 있다.

----------------형식---------------------------

document.links[인덱스 번호].속성 // 인덱스 번호번째 링크 속성

document.links.length  // 문서에 삽입된 링크 개수

document.링크이름.속석  // 링크의 name이 링크이름인 링크의 속성

----------------------------------------------------------------------

link 객체의 속성은 다음과 같다.


---------------------- link 객체의 속성 -----------------------------------

○ length
   - 문서 내 링크 개수 알려줌

○ href
   - URL 전체 주소 알려줌

○ protocol
   - 프로토콜의 종류 알려줌

○ host
   - 링크에 설정된 URL 주소, 호스트명, 포트번호 알려줌

○ hostname
   - 도메인며이나 IP 주소를 알려줌

○ pathname
   - URL에서 경로 부분의 정보를 알려줌

○ port
   - :8080과 같은 포트번호를 알려줌

○ search
   - ? 이후의 문자열을 알려줌

○ hash
   - anchor 객체의 이름을 알려줌

○ target
   - target 속성으로 지정한 문서가 열리는 프레임 이름을 알려줌

○ text
   - 해당 링크를 가지고 있는 문자열을 알려줌

○ x
   - 문서에서 해당 링크의 x 좌표 값을 알려줌

○ y
   - 문서에서 해당 링크의 y 좌표 값을 알려줌

 

---------------------------------------------------------------

 

[ anchor 객체 ]

 

anchor 객체는 document 객체의 하위 객체로 문서에 설정한 책갈피 정보를 제공한다.

document.anchors[인덱스 번호].속성  // 인덱스 번호번째 책갈피 속성
document.anchors.length   // 문서에 삽입된 책갈피의 개수
document.anchors[책갈피명] 또는 document.all[책갈피명] // 책갈피명이 같은 책갈피 설정


------------------- anchor 객체의 속성 -------------------------------

○ length
   - 문서에 삽입된 책갈피 개수를 알려줌

○ name
   - 책갈피명을 알려줌

○ text
   - 책갈피로 설정한 문자열을 알려줌  (넷스케이프 네비게이터전용)

○ x
   - 문서에서 해당 anchor의 x좌표 값을 알려줌 (넷스케이프 네비게이터전용)

○ y
   - 문서에서 해당 anchor의 y좌표 값을 알려줌 (넷스케이프 네비게이터전용)


==========================================================================================


[실습하기]


-------------------- lnik , anhort 예제..--------------------------------------------
<html>
<head>
 <title>Test</title>

<script languange=javascript>

function LastLinkInfo()
{
 var LastIndex = document.links.length - 1;


 href = document.links[LastIndex].href;
 protocol = document.links[LastIndex].protocol;
 hostname = document.links[LastIndex].hostname;
 port = document.links[LastIndex].port;

 message = "href : " + href + "\n" + "protocol : " + protocol + "\n" + "hostname : " + hostname + "\n" + "port : " + port;

 alert(message) 
}

</script>

</head>

<body>

<a href=http://www.naver.com>링크1</a>
<a href=http://www.yahoo.co.kr>링크2</a>
<a href=http://www.daum.net>링크3</a>
<a href=http://www.google.co.kr>링크4</a>

<br>

<a name=site3>쿨사이트</a><br>

 


<script languange=javascript>

document.write("링크수 : " + document.links.length + "<br>")
document.write("앵커수 : " + document.anchors.length + "<br>")

for(i=0; i<document.links.length; i++)
{
 document.write(i + " : " + document.links[i] + "<br>")
}

</script>

<input type=button name=bt value="마지막링크 정보보기" onclick="LastLinkInfo()">

</body>

</html>

--------------------------------------------------------------------------------

 

---------------- 2초후에 공지사항 창이 뜨고 3초후에 공지사항 창이 사라지는 예제----------------------
<html>
<head>
 <title>Test</title>

<script languange=javascript>

var win = null;

function openWin()
{
 win = window.open("allim1.htm","","width=250 height=385"); 
 setTimeout('closeWin()',3000)
}

function closeWin()
{
 win.close();
}

</script>

</head>

<body onload="setTimeout('openWin()',2000)">

 

</body>

</html>

 

-----------------------------------------------------------------------------------------

 

 

----------------------------5 초뒤에 다른 사이트로 접속하기--------------------------------------

<html>
<head>
 <title>Test</title>

<script languange=javascript>


var n = 5

function AddNum()
{

 if(n == 0)
 {
  location.href = "http://blog.naver.com/kimgudtjr"
 }


 fo.num.value = n; 
 n = n-1;
 setTimeout("AddNum()",1000);
}

</script>

</head>

<body onload="AddNum()">

<form name=fo>

<input type=text name=num size=2>초 뒤에 다른사이트로 이동합니다.

</form>


</body>

</html>


-----------------------------------------------------------------------------------------

 

---------------------- 포토앨범 새창으로 띄우기 --------------

<html>
<head>
 <title>Test</title>
<style>img{cursor:hand}</style>

<script languange=javascript>


var win= null           // -> 윈도우를 닫을 때 사용하기 위해 전역변수로 선언

function openWin(f,w,h)
{
 win=window.open("", "win", "width="+w+" height="+h+" directories=no");
 if(win != null)
 {
  win.document.write("<html><head>")
  win.document.write("<title>포스터 확대 보기</title>")
  win.document.write("</head><body leftmargin=0 topmargin=0 onclick='self.close()'>")
  win.document.write("<img src='"+f.src+"'>")
  win.document.write("</body></html>")
 }

}
</script>

</head>

<body>

            <img src="images/photo2.jpg" width="70" height="70" border="1" onclick="openWin(this,600,390)">
            <img src="images/photo3.jpg" width="70" height="70" border="1" onclick="openWin(this,600,397)"><br>
            <img src="images/photo4.jpg" width="70" height="70" border="1" onclick="openWin(this,600,389)">
            <img src="images/photo5.jpg" width="70" height="70" border="1" onclick="openWin(this,400,274)"><br>
            <img src="images/photo6.jpg" width="70" height="70" border="1" onclick="openWin(this,400,267)">
            <img src="images/photo7.jpg" width="70" height="70" border="1" onclick="openWin(this,894,600)"><br>    

</body>

</html>
------------------------------------------------------------------------

 


-------- 흔들면서 나타나는 공지 창 만들기 (3초후 공지창 띄우고 흔들리면서 가운대로 이동 --------------
<html>

<head>
<title>Test</title>

 <script language="JavaScript">
 var remote; //전역변수
 function openwin()
 {
//window.open("띄울 파일의이름","띄운 창의 이름","크기,좌표,여러가지 설정값들,menubar=yes,toolbar=yes,status=yes,scrollbars=yes,resizable=yes")
  remote=window.open("allim.htm", "", "width=250 height=385 left=100 top=100 directories=no"); 
  setTimeout("movewin()",3000);
 }
 
 position=0;
 function movewin(
 {//자바스크립트에서 페이지를 움직이는 함수:moveBy(x축이동량,y축이동량)
  if(position>15)
  {
   return;
  }
  
  remote.moveBy(10,10);
  position=position+1;  //position+=1
  setTimeout("movewin2()",50);
 } 
 
 function movewin2()
 {
  remote.moveBy(10,-10);
  setTimeout("movewin()",50);
 }
 
 </script>


</head>

<body onload="setTimeout('openwin()',3000)">


</body>

</html>

[출처] 자바스크립트 - screen 객체와 document 객체 , link 객체와, anchor 객체|작성자 파란만장 미스터송

 

'개발 > 실전' 카테고리의 다른 글

자바스크립트 option  (0) 2014.03.14
HEAD 에 들어가는 태그 (title, style, script, meta 태그)  (0) 2014.03.13
&nbsp &It &gy &amp &quot  (0) 2014.03.12
document.getElementById  (0) 2014.03.12
<% %>와 <script>차이 점 <%! 설명  (0) 2014.03.12
,

티스토리툴바