'W3C/HTML DOM'에 해당하는 글 55건

HTML DOM Window Object Methods

W3C/HTML DOM 2006. 9. 1. 19:11
1. open() Method
open() 메소드는 새 브라우저 창을 여는데 사용한다.
window.open(URL, name, specs, replace)
[Parameter]
  • URL: 보여질 페이지의 URL 지정. 지정하지 않을 시 about:blank 페이지가 보여짐(선택)
  • name: 폼이나 링크에 타겟 속성값을 지정. 다음 값 제공(선택)
    _blank - URL이 새창으로 열림
    _media - URL이 미디어 표시줄의 영역에 열림 (IE6+)
    _parent - URL이 부모 프레임에 열림
    _search - URL이 브라우저의 검색패널에 열림 (IE5+)
    _self - URL이 현재 페이지를 대신함
    _top - URL이 로드된 프레임셋을 대신함
  • specs: 콤마로 구분된 아이템 리스트. 다음 값 제공(선택)
    fullscreen = yes | no | 1 | 0 = 풀스크린의 브라우저를 나타낼지를 지정 (디폴트 no)
    height = 윈도우의 세로 길이 지정 (최소값 100)
    left = 화면 왼쪽 창위치 좌표 픽셀로 지정
    location = yes | no | 1 | 0 = 주소 필드를 나타낼지를 지정 (디폴트 yes)
    menubar = yes | no | 1 | 0 = 메뉴바를 나타낼지를 지정 (디폴트 yes)
    resizable = yes | no | 1 | 0 = 창 재조정 가능한지를 지정 (디폴트 yes)
    scrollbars = yes | no | 1 | 0 = 스크롤바 나타낼지를 지정 (디폴트 yes)
    status = yes | no | 1 | 0 = 상태바 추가할지를 지정 (디폴트 yes)
    titlebar = yes | no | 1 | 0 = 제목표시줄 나타낼지를 지정 (디폴트 yes)
    toolbar = yes | no | 1 | 0 = 브라우저 툴바를 나타낼지를 지정 (디폴트 yes)
    top = 화면 상단 창위치 좌표 픽셀로 지정
    width = 윈도우의 가로 길이 지정 (최소값 100)
  • replace: URL이 새 입력을 만들지, 히스토리 리스트의 현재 입력을 대신할지를 지정. 다음 값 제공(선택)
    true - URL이 히스토리 리스트에서 현재 문서를 대신함
    false - URL이 히스토리 리스트에서 새 입력을 생성
<!-- 새창 띄우기 -->
<html>
<head>
<script type="text/javascript">
function newWin(){
  window.open("test_js.html","_blank","toolbar=yes, status=no, menubar=yes, scrollbars=yes, resizable=no, width=400, height=400")
}
</script>
</head>

<body>
<input type="button" onclick="newWin()" value="New Window" />
</body>
</html>

2. resizeBy() Method
resizeBy() 메소드는 지정된 픽셀로 창 크기를 재조정하는데 사용한다.
resizeBy(width,height)
[Parameter]
  • width - 지정된 숫자 만큼 창의 가로길이 픽셀을 재조정한다. 양의 숫자나 음의 숫자가 될 수 있다.(필수)
  • height - 지정된 숫자 만큼 창의 세로길이 픽셀을 재조정한다. 양의 숫자나 음의 숫자가 될 수 있다.(필수)
3. resizeTo() Method
resizeTo() 메소드는 지정된 가로,세로 크기로 창을 재조정하는데 사용한다.
resizeTo(width,height)
[Parameter]
  • width - 필수. 지정된 숫자로 창의 가로길이 픽셀을 재조정한다. 양의 숫자나 음의 숫자가 될 수 있다.
  • height - 선택. 지정된 숫자로 창의 세로길이 픽셀을 재조정한다. 양의 숫자나 음의 숫자가 될 수 있다.
<!-- 창 크기 변경 -->
<html>
<head>
<script type="text/javascript">
function sizeTo(){
  window.resizeTo(600,600)
}
function sizeBy(){
  window.resizeBy(-100,-100)
}
</script>
</head>

<body>
<input type="button" onclick="sizeTo()" value="To resize" /><br />
<input type="button" onclick="sizeBy()" value="By resize" />
</body>
</html>

4. setTimeout() Method
setTimeout() 메소드는 밀리초의 지정된 숫자 후에 함수 호출이나, 표현식의 값을 구하는데 사용.
setTimeout(code, millisec, lang)
[Parameter]
  • code: 실행될 코드나 함수의 포인터(필수)
  • millisec: 코드를 실행하기전 기다릴 밀리초의 숫자(필수)
  • lang: 스크립팅 언어: JScript | VBScript | JavaScript(선택)
<!-- 3초후 경고창 출력 -->
<html>
<head>
<script type="text/javascript">
function timedMsg(){
  window.setTimeout("alert('3 second')", 3000)
}
</script>
</head>
<body>
<input type="button" onclick="timedMsg()" value="Alert timed" />
</body>
</html>
.
<!-- 타임 무한루프 start/stop -->
<html>
<head>
<script type="text/javascript">
var c = 0
var t
function countStart(){
  document.getElementById('counter').value = c
  c = c + 1
  t = setTimeout("countStart()", 1000)
}
function countStop(){
  clearTimeout(t)
}
</script>
</head>
<body>
<input type="text" id="counter" size="20" /><br />
<input type="button" onclick="countStart()" value="Start Count" /><br />
<input type="button" onclick="countStop()" value="Stop Count" />
</body>
</html>
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

HTML DOM Window Object Properties

W3C/HTML DOM 2006. 9. 1. 18:13
1. self Property
self 속성은 현재 창에 참조를 반환한다.
window.self

2. top Property
top 속성은 최상위 부모 창을 반환한다.
window.top

<!-- 최상위 창 변경(예: 프레임셋) -->
<html>
<head>
<script type="text/javascript">
function breakOut(){
  if(window.self != window.top){
    window.top.location = "test_js.html"
  } else {
    alert ("This page is top!")
  }
}
</script>
</head>

<body>
<input type="button" onclick="breakOut()" value="Break Out of Frame" />
</body>
</html>


3. status Property
status 속성은 창의 상태표시줄에 텍스트를 지정하거나 반환한다.
window.status

<!-- 상태표시줄에 텍스트 삽입 -->
<html>
<head>
<script type="text/javascript">
function statusText(){
  window.status = "sometext"
}
</script>
</head>

<body onload="statusText()">
Look Status
</body>
</html>
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

HTML DOM Table Object Properties

W3C/HTML DOM 2006. 8. 31. 18:42
1. border Property
border 속성은 테이블 테두리의 굵기를 지정하거나 반환한다.
tableObject.border=number

2. cellPadding Property
cellPadding 속성은 셀 테두리와 내용 사이의 공간길이를 지정하거나 반환한다.
tableObject.cellPadding=number

3. cellSpacing Property
cellSpacing 속성은 테이블의 셀간격을 지정하거나 반환한다.
tableObject.cellSpacing=number

<!-- 테이블의 테두리, 셀간격, 셀안간격 변경 -->
<html>
<head>
<script type="text/javascript">
function changeTable(){
  var x = document.getElementById('myTable')
  x.border = 3
  x.cellPadding = 3
  x.cellSpacing = 3
}
</script>
</head>

<body>
<table id="myTable" border="1">
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
<tr>
<td>cell3</td>
<td>cell4</td>
</tr>
</table>
<input type="button" onclick="changeTable()" value="Change Table Properties" />
</body>
</html>
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

HTML DOM Table Object Collections

W3C/HTML DOM 2006. 8. 31. 18:29

1. cells Collection
cells 배열은 테이블의 각 셀을 포함하는 배열을 반환한다.
tableObject.cells[]

2. rows Collection
rows 배열은 테이블 안의 각 행을 포함하는 배열을 반환한다.
tableObject.rows[]

<!-- 테이블 안의 모든 셀과 행의 내용을 출력 -->
<html>
<head>
<script type="text/javascript">
function cell(){
  var x = document.getElementById('myTable').cells
  for(var i=0; i<x.length; ++i){
  alert(x[i].innerHTML)
  }
}
function row(){
  var x = document.getElementById('myTable').rows
  for(var i=0; i<x.length; ++i){
  alert(x[i].innerHTML)
  }
}
</script>
</head>

<body>
<table id="myTable" border="1">
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
<tr>
<td>cell3</td>
<td>cell4</td>
</tr>
</table>
<input type="button" onclick="cell()" value="Alert Cell innerHTML" /><br />
<input type="button" onclick="row()" value="Alert Row innerHTML" />
</body>
</html>
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

HTML DOM Select Object Collections

W3C/HTML DOM 2006. 8. 31. 18:03
1. options Collection
option 배열은 드롭다운 리스트의 모든 option들의 배열을 반환한다.
각 <option> 태그의 시작은 0이다.
selectObject.options[]

<!-- 선택된 옵션의 인덱스와 텍스트 구하기 -->
<html>
<head>
<script type="text/javascript">
function getOptionIndex(){
  var x = document.getElementById('mySelect')
  alert(x.selectedIndex)
}
function getOption(){
  var x = document.getElementById('mySelect')
  alert(x.options[x.selectedIndex].text)
}
</script>
</head>

<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<br />
<input type="button" onclick="getOptionIndex()" value="Alert Option Index"><br />
<input type="button" onclick="getOption()" value="Alert Selected Fluit">
</body>
</html>
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,