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

1. height Property
height 속성은 <img> 태그의 세로 길이 속성값을 지정하거나 반환한다.
imageObject.height = number

2. width Property
width 속성은 <img> 태그의 가로 길이 속성값을 지정하거나 반환한다.
imageObject.width = number

<!-- 이미지의 가로와 세로길이를 변환 -->
<html>
<head>
<script type="text/javascript">
function changeSize(){
  document.getElementById('myImage').width = "180"
  document.getElementById('myImage').height = "140"

}
</script>
</head>

<body>
<img id="myImage" src="test_img.gif" width="80" height="40" />
<br />
<input type="button" onclick="changeSize()" value="Change Size" />
</body>
</html>


3. src Property
src 속성은 이미지의 URL을 지정하거나 반환한다.
src 속성은 언제나 바꿀 수 있지만, 새 이미지가 원본 이미지의 가로, 세로 속성에 비례하게 된다.
imageObject.src = URL

<!-- 이미지의 URL을 변경 -->
<html>
<head>
<script type="text/javascript">
function changeUrl(){
  document.getElementById('myImage').src = "test_img2.gif"
}
</script>
</head>

<body>
<img id="myImage" src="test_img1.gif" width="80" height="40" />
<br />
<input type="button" onclick="changeUrl()" value="Change Image" />
</body>
</html>

WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

트랙백  0 , 댓글  0개가 달렸습니다.
secret
1. src Property
src 속성은 iframe으로부터 로드될 URL을 지정하거나 반환한다.
iframeObject.src = URL

<!-- iframe으로부터 로드된 2개의 웹페이지의 URL을 동시에 다른 페이지로 바꿈 -->
<html>
<head>
<script type="text/javascript">
function changeUrl(){
  document.getElementById('frame1').src = "test3_js.html"
  document.getElementById('frame2').src = "test4_js.html"

}
</script>
</head>

<body>
<iframe src="test1_js.html" id="frame1"></iframe>
<iframe src="test2_js.html" id="frame2"></iframe>
<br />
<form>
<input type="button" onclick="changeUrl()" value="Change Iframe URL" />
</form>
</body>
</html>

WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

트랙백  0 , 댓글  0개가 달렸습니다.
secret
1. reset() Method
reset() 메소드는 폼의 모든 요소의 기본값으로 재지정한다.
formObject.reset()

2. submit() Method
submit() 메소드는 폼을 전송한다.
formObject.submit()

<!-- 전송될 입력데이터를 기본값으로 재지정하거나 전송 -->
<html>
<head>
<script type="text/javascript">
function formReset(){
  document.getElementById('myform').reset()
}
function formSubmit(){
  document.getElementById('myform').submit()
}
</script>
</head>

<body>
<form id="myform" action="test_js.asp">
FirstName: <input type="text" size="20" /><br />
LastName: <input type="text" size="20" /><br />
<input type="button" onclick="formReset()" value="Reset" />
<input type="button" onclick="formSubmit()" value="Submit" />
</form>
</body>
</html>

WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

트랙백  0 , 댓글  0개가 달렸습니다.
secret
1. action Property
action 속성은 전송될 입력데이터의 URL을 지정하거나 반환한다.
formObject.action = URL

<!-- 전송될 입력데이터를 처리할 URL 변경 -->
<html>
<head>
<script type="text/javascript">
function changeAction(){
  var x = document.getElementById('myform')
  alert("Old Action: " + x.action)
  x.action = "new_js.asp"
  alert("New Action: " + x.action)
}
</script>
</head>

<body>
<form id="myform" action="text_js.asp">
<input type="button" onclick="changeAction()" value="Change Action" />
</form>
</body>
</html>


2. method Property
method 속성은 폼 데이터가 서버에 전송될 방식을 지정하거나 반환한다.
("get" or "post")
formObject.method = get|post

<!-- 폼 데이터 전달방식을 출력 -->
<html>
<head>
<script type="text/javascript">
function showMethod(){
  var x = document.getElementById('myform')
  alert(x.method)
}
</script>
</head>

<body>
<form id="myform" method="post">
<input type="text" size="20" value="Mickey Mouse" /><br /><br />
<input type="button" onclick="showMethod()" value="Show Method" />
</form>
</body>
</html>

WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

트랙백  0 , 댓글  0개가 달렸습니다.
secret

1. open() Method
open() 메소드는 쓰기를 위한 문서를 불러온다.
문서가 타겟에 존재한다면 비워질 것이다.
메소드가 요소를 가지고 있지 않는다면, 새 창(about:blank)이 보여진다.
document.open("mimetype"[,replace])

2. close() Method
close() 메소드는 출력된 창을 닫고 보내진 데이터를 나타낸다.
document.close()

3. write() Method
write() 메소드는 문서에 문자열을 출력한다.
document.write()

<!-- 새 문서를 부르고 내용입력 -->
<html>
<head>
<script type="text/javascript">
function createNewDoc() {
  var newDoc = document.open( "text/html", "replace" )
  var txt = "<html><body>This is New Document</body></html>"
  newDoc.write( txt )
  newDoc.close()
}
</script>
</head>

<body>
<input type="button" value="click" onclick="createNewDoc()" />
</body>
</html>

4. getElementById() Method
getElementById() 메소드는 지정된 ID를 가진 오브젝트에 참조를 반환한다.
document.getElementById(id)

5. getElementByName() Method
getElementByName() 메소드는 지정된 NAME을 가진 오브젝트 배열에 참조를 반환한다.
document.getElementByName(name)

<!-- 페이지가 로드될 때 지정된 ID에 포커스를 줌 -->
<html>
<head>
<script type="text/javascript">
function setFocus(){
  document.getElementById("fname").focus()
}
</script>
</head>

<body onload="setFocus()">
Name: <input type="text" id="fname" size="30"><br />
Age: <input type="text" id="age" size="30">
</body>
</html>

<!-- 라디오버튼을 선택하여 텍스트필드에 값 출력 -->
<html>
<head>
<script type="text/javascript">
function check(browser){
  document.getElementById("answer").value = browser
}
</script>
</head>

<body>
<form>
<input type="radio" name="browser" onclick="check(this.value)" value="Internet Explorer" />Browser1<br />
<input type="radio" name="browser" onclick="check(this.value)" value="Firefox" />Browser2<br />
<input type="radio" name="browser" onclick="check(this.value)" value="Netscape" />Browser3<br />
<input type="radio" name="browser" onclick="check(this.value)" value="Opera" />Browser4<br />
You selected: <input type="text" id="answer" size="20" />
</form>
</body>
</html>

<!-- 리스트박스를 선택하여 텍스트필드에 값 출력 -->
<html>
<head>
<script type="text/javascript">
function favBrowser() {
  var mylist = document.getElementById("myList")
  document.getElementById("mySelect").value = mylist.options[mylist.selectedIndex].text
}
</script>
</head>

<body>
<form>
<select id="myList" onchange="favBrowser()">
  <option>Brower Select</option>
  <option>Internet Explorer</option>
  <option>Netscape</option>
  <option>Opera</option>
</select>
<br />
You selected: <input type="text" id="mySelect" size="20" />
</form>
</body>
</html>

<!-- 리스트박스를 선택하여 URL로 이동하기 -->
<html>
<head>
<script type="text/javascript">
function go(){
  window.location=document.getElementById("menu").value
}
</script>
</head>

<body>
<form>
<select id="menu" onchange="go()">
  <option>-- Select a page --</option>
  <option value="Yahoohttp://kr.yahoo.com">Yahoo</option>
  <option value="Googlehttp://www.google.co.kr">Google</option>
  <option value="Naverhttp://www.naver.com">Naver</option>
</select>
</form>
</body>
</html>

<!-- 칸을 채우면 자동으로 다음 필드에 커서 위치 -->
<html>
<head>
<script type="text/javascript">
function checkLen( x, y ){
  if( y.length == x.maxLength ) {
  var next = x.tabIndex
  if( next < document.getElementById( "myForm" ).length ) {
     document.getElementById( "myForm" ).elements[next].focus()
  }
  }
}
</script>
</head>

<body>
<form id="myForm">
<input size="3" tabindex="1" maxlength="3" onkeyup="checkLen( this, this.value )" />
<input size="2" tabindex="2" maxlength="2" onkeyup="checkLen( this, this.value )" />
<input size="3" tabindex="3" maxlength="3" onkeyup="checkLen( this, this.value )" />
</form>
</body>
</html>

WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

트랙백  0 , 댓글  0개가 달렸습니다.
secret