반응형




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>javascript :prototype 사용 변수 선언 </title>
  <script type="text/javascript" src="prototype.js"></script>
 
  <SCRIPT LANGUAGE="JavaScript">
   
  <!--

   function addLoadEvent(func) {
     var oldonload = window.onload;
     if (typeof window.onload != 'function') {
    window.onload = func;
     } else {
    window.onload = function() {
      oldonload();
      func();
    }
     }
   }


   var Subject = Class.create();

   Subject.prototype ={
    initialize:function(){
     var subjectList = new Array("java","jsp","ajax");
     var console = document.getElementById("area");
     if(console != null){
      console.innerHTML += "<b>수강과목</b><br/>"+subjectList+"";
     }
    }
   
   }
   function objectCreate(){
    var subject = new Subject();
   }
   addLoadEvent(objectCreate);

   

  //-->
  </SCRIPT>
 </head>
 <body>
  <div id="area"></div>
 </body>
</html>

Posted by 1010
반응형

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>javascript :prototype 사용 변수 선언 </title>
  <!--
  <script type="text/javascript" src="domTest2.js"></script>
  -->
 
  <SCRIPT LANGUAGE="JavaScript">
   
  <!--
   /*
   function Member(name,rename,age){
    this.name = name;
    this.rename = rename;
    this.age = age;
   }
   Member.prototype.toString = function(){
    return this.rename;
   }
   Member.prototype.getAge = function(){
    var today = new Date();
    var toage = parseInt(this.age.substring(0,2));


    return today.getFullYear() - toage;
   }
   
   Member.prototype.setValue = function(newName,rename,newage){
    this.name = newName;
    this.rename = rename;
    this.age = newage; 
   }
   
*/
   function log(text){
    var console = document.getElementById("debugConsole");
    if(console != null){
     console.innerHTML += text+"<br/>";
    }
   }
   
   Member = function(name,id,securityNo){
    this.name = name;
    this.id = id;
    this.securityNo = securityNo;
   }

   Member.prototype ={
    setValue : function(newName,newId,newSecurityNo){
     this.name = newName;
     this.id = newId;
     this.securityNo = newSecurityNo; 
    },
    getAge : function(){
     var birthYear = parseInt(this.securityNo.substring(0,2));
     var code = this.securityNo.substring(6,7);
     if(code == '1' || code == '2'){
      birthYear += 1900;
     }else if(code == '3' || code == '4'){
      birthYear += 2000;
     }
     var today = new Date();
     return today.getFullYear() - birthYear;
    },
    toString : function(){ 
     return this.name = "["+this.id+"]";
    }
   }
 
   window.onload = function(){

    var mem = new Member("hong","홍길동","7700001000000");
    log('변경전');
    log('회원이름 : '+mem.toString());
    log('회원연령 : '+mem.getAge());
    log('<br/>');

    mem.setValue("GilDong","길동","7000001000000");
    log('변경후');
    log('회원이름 : '+mem.toString());
    log('회원연령 : '+mem.getAge());

   }
  //-->
  </SCRIPT>
 </head>
 <body>
  <div id="debugConsole"></div>
 </body>
</html>

Posted by 1010
반응형

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>애니메이션</title>
  <script type="text/javascript" src="addLoadEvent.js"></script>
  <script type="text/javascript" src="domEx10_1.js"></script>
  <!--
  <script type="text/javascript" src="highlightRows.js"></script>
  -->
  <!--
  <link rel="stylesheet" type="text/css" href="format.css"/>
  -->
 </head>
 <body>
  <p id="message">야호</p>
 </body>
</html>



----------------------------------------------
function positionMessage() {
   if (!document.getElementById) return false;
   if (!document.getElementById("message")) return false;
   var elem = document.getElementById("message");
   elem.style.position = "absolute";
   elem.style.left = "50px";
   elem.style.top = "100px";
   /*
   moveElement("message",125,25,20);
   if (!document.getElementById("message2")) return false;
   var elem = document.getElementById("message2");
   elem.style.position = "absolute";
   elem.style.left = "50px";
   elem.style.top = "50px";
   moveElement("message2",125,75,20);
   */
 
   setTimeout("moveMessage()",5000);
}
function moveMessage(){
 var elem = document.getElementById("message");
 elem.style.left="200px";
}

addLoadEvent(positionMessage);
//addLoadEvent(moveMessage);

Posted by 1010
반응형

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">

  <SCRIPT LANGUAGE="JavaScript">
  <!--
 function test(){
  var rootNode = document.getElementById("test");
  var newNode = document.createElement("p");
  rootNode.appendChild(newNode);

  var newTextNode = document.createTextNode("sdfsaffwefwef");
  newNode.appendChild(newTextNode);
 }
 window.onload = function(){
  test();
 }
  //-->
  </SCRIPT>
 </HEAD>

 <BODY>
 <div id="test">text</div>
 </BODY>
</HTML>

Posted by 1010
반응형

애스터리스크(*) 표시가 있는 항목은 W3C DOM에 대한 Microsoft의 확장 기능을 나타낸다.


async(*) : 비동기식 다운로드를 허용할 것인지를 나타내며, 읽고 쓰기가 가능하다.

attributes : 주어진 노드에 대한 속성 목록을 저장하며, 읽기 전용이다.

baseName(*) : Namespace에서 확인된 기본 이름으로, 읽기 전용이다.

childNodes : 자식 노드들의 목록을 저장하며, 읽기 전용이다.

dataType(*) : 주어진 노드에 대한 데이터 형식을 제공하며, 읽고 쓰기가 가능하다.

definition(*) : DTD 또는 스키마에서의 노드에 대한 정의를 제공하며, 읽기 전용이다.

doctype : 주어진 노드에 대한 데이터 형식을 제공하며, 읽기 전용이다.

documentElment  : 문서의 루트 요소를 가리키며, 읽고 쓰기가 가능하다.

firstChild : 현재 노드의 첫 번째 자식을 가리키며, 읽기 전용이다.

implementation : 문서에 대한 XMLDOMImplementation 객체로서, 읽기 전용이다.

lastChild : 현재 노드의 마지막 자식 노드로서, 읽기 전용이다.

namespaceURI(*) : Namespace의 URI(Uniform Resource Identifier)를 알려주며, 읽기 전용이다.

nextSibling : 동일 레벨에서 현재 노드의 다음 노드로서, 읽기 전용이다.

nodeName : 구성요소, 속성 또는 엔티티 참조에 대한 검증된 이름, 또는 다른 노드형식에서는

                  문자열을 저장하는 속성으로, 읽기 전용이다.

nodeType : XML DOM노드 형식을 가리키며, 읽기 전용이다.

nodeTypeValue(*) : 노드의 값을 저장하며, 읽고 쓰기가 가능하다.

nodeTypeString(*) : 노드 형식을 문자열로 알려 주며, 읽기 전용이다.

nodeValue : 노드에 관련된 텍스트를 제공하며, 읽고 쓰기가 가능하다.

ondataavailable(*) : ondataavailable 이벤트의 이벤트 처리기로서, 읽고 쓰기가 가능하다.

onreadystatechange(*) : readState 속성의 변경을 처리하는 이벤트 처리기로서,

                                   읽고 쓰기가 가능하다.

onreadystatechange(*) : readyState 속성의 변경을 처리하는 이벤트 처리기로서, 읽고 쓰기가능.

ontransformnode(*) : ontransformnode이벤트에 대한 이벤트 처리기로서, 읽고 쓰기가 가능하다.

ownerDocument :  지정한 노드를 포함하는 문서의 루트를 가리키며, 읽기 전용이다.

parentNode : 부모노드(부모를 가질 수 있는 노드)로서, 읽기 전용이다.

parsed(*) : 지정한 노드와 모든 자손 노드들이 파싱되었다면 참이고, 아니면 거짓이며, 읽기전용

parseError(*) : 가장 최근의 파싱 오류에 관한 정보를 갖는 XMLDOMParseError객체로서

                      읽기 전용

prefix(*)  : Namespace접두어로서,일기 전용이다.

preserveWhiteSpace(*) : 처리 과정에서 여백이 유지되어야 한다면 참, 아니면 거짓을 가지며,

                                   읽고 쓰기가 가능하다.

previousSibling : 지정한 노드와 동일 레벨에서의 이전 노드를 가리키며, 읽기 전용이다.

readyState(*) : XML 문서의 현재 상태를 나타내며, 읽기 전용이다.

resolveExternals(*) : 파싱 할때 외부 정의를 풀어놓을 것인지 지정하며, 읽고 쓰기가 가능하다.

given(*) : 노드를 직접 지정할 것인지 기본값에서 가져올 것인지를 나타내며, 읽기 전용이다.

text(*) : 노드와 하위 트리의 텍스트 내용을 저장하며, 읽고 쓰기가 가능하다.

url(*) : 가장 최근에 로드된 XML문서의 URL(Uniform Resource Locator)을 알려주며, 읽기 전용

validateOnParse(*) : 파서에서 지정한 문서를 검증하도록 할 것인지를 지정하며, 읽고 쓰기 가능

xml(*) : 노드와 모든 자손의 XML 표현을 알려주며, 읽기 전용이다.

Posted by 1010
반응형

---------------------test.html---------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Image Gallery</title>
  <script type="text/javascript" src="test.js"></script>
  <link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</head>
<body>
  <h1>Snapshots</h1>
  <ul id="imagegallery">
    <li>
      <a href="images/fireworks.jpg" title="A fireworks display">
        <img src="images/thumbnail_fireworks.jpg" alt="Fireworks" />
      </a>
    </li>
    <li>
      <a href="images/coffee.jpg" title="A cup of black coffee" >
        <img src="images/thumbnail_coffee.jpg" alt="Coffee" />
      </a>
    </li>
    <li>
      <a href="images/rose.jpg" title="A red, red rose">
        <img src="images/thumbnail_rose.jpg" alt="Rose" />
      </a>
    </li>
    <li>
      <a href="images/bigben.jpg" title="The famous clock">
        <img src="images/thumbnail_bigben.jpg" alt="Big Ben" />
      </a>
    </li>
  </ul>
</body>
</html>


---------------------------test.js-------------------------------

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

function preparePlaceholder() {
  if (!document.createElement) return false;
  if (!document.createTextNode) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;
  var placeholder = document.createElement("img");
  placeholder.setAttribute("id","placeholder");
  placeholder.setAttribute("src","images/placeholder.gif");
  placeholder.setAttribute("alt","my image gallery");
  var description = document.createElement("p");
  description.setAttribute("id","description");
  var desctext = document.createTextNode("Choose an image");
  description.appendChild(desctext);
  var gallery = document.getElementById("imagegallery");
  insertAfter(placeholder,gallery);
  insertAfter(description,placeholder);
}

function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this);
 }
    links[i].onkeypress = links[i].onclick;
  }
}

function showPic(whichpic) {
  if (!document.getElementById("placeholder")) return true;
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  if (!document.getElementById("description")) return false;
  if (whichpic.getAttribute("title")) {
    var text = whichpic.getAttribute("title");
  } else {
    var text = "";
  }
  var description = document.getElementById("description");
  if (description.firstChild.nodeType == 3) {
    description.firstChild.nodeValue = text;
  }
  return false;
}

addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);

Posted by 1010
반응형

function getObject(objectID){
 if(document.getElementById && document.getElementBId(objectID)){
  return document.getElementById(objectID); // check W3C DOM
 }else if(document.all && document.all(objectID)){
  return document.all(objectID); // IE4
 }else if(document.layers && document.layers[objectID]){
  return document.layer[objectID]; // NN4
 }else{
  return false;
 }
}

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

function showPic(whichpic) {
  if (!document.getElementById("placeholder")) return true;
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  if (!document.getElementById("description")) return false;
 var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
  /*
  if (whichpic.getAttribute("title")) {
    var text = whichpic.getAttribute("title");
  } else {
    var text = "";
  }
  */  var description = document.getElementById("description");
  if (description.firstChild.nodeType == 3) {
    description.firstChild.nodeValue = text;
  }
  return false;
}

function prepareGallery() {
  //if (!document.getElementsByTagName) return false;
  //if (!document.getElementById) return false;
  //if (!document.getElementById("imagegallery")) return false;
  var gallery = getObject("imagegallery");
  //alert(gallery);
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this);
 }
    links[i].onkeypress = links[i].onclick;
  }
}


function getObject(objectID){
 if(document.getElementById && document.getElementById(objectID)){
  return document.getElementById(objectID); // check W3C DOM
 }else if(document.all && document.all(objectID)){
  return document.all(objectID); // IE4
 }else if(document.layers && document.layers[objectID]){
  return document.layer[objectID]; // NN4
 }else{
  return false;
 }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(prepareGallery);

Posted by 1010
반응형
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>가족 사진첩</title>
 <!--<script type="text/javascript" src="scripts/showPic.js"></script>-->
 <SCRIPT LANGUAGE="JavaScript">
 <!--
  function showPic(whichpic) {
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    var text = whichpic.getAttribute("title");
    var description = document.getElementById("description");
    description.firstChild.nodeValue = text;
  }
 //-->
 </SCRIPT>
</head>
<body>
<h1>가족 사진</h1>
  <ul>
    <li>
      <a href="images/dad.jpg" title="멋있는 아빠 사진" onclick="showPic(this); return false;">아빠</a>
    </li>
    <li>
      <a href="images/mom.jpg" title="이쁜 엄마 사진" onclick="showPic(this); return false;">엄마</a>
    </li>
    <li>
      <a href="images/jisu.jpg" title="귀여운 지수 사진" onclick="showPic(this); return false;">딸</a>
    </li>
    <li>
      <a href="images/jisung.jpg" title="똑똑한 지성 사진" onclick="showPic(this); return false;">아들</a>
    </li>
  </ul>
  <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
  <p id="description">사진을 선택하세요.</p>
</body>
</html>
Posted by 1010
반응형
Posted by 1010
반응형

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>title</title>
  <script type="text/javascript" src="log.js"></script>
  <script type="text/javascript" src="showDom.js"></script>
 </head>
 <body>
  <h1>최신영화</h1>

  <span id="2012">2012</span>
  <p>굿모닝프레지던트<span id="comedy">코미디</span></p>

  <div>
   <p>솔로이스트</p>
   <span id="nonfiction">실화</span>
  </div>

  <div id="debugConsole" style="border:1px solid #000"></div>

 </body>
</html>


----------------------------------log.js
function log(msg){
 var console = document.getElementById("debugConsole");
 if(console != null){
  console.innerHTML += msg+"<br/>";
 }
}


-------------------------showDom.js------------

window.onload = function(){

 var rootNode = document.documentElement;
 log("root 태그 : "+rootNode.tagName);

 var bodyNode = document.getElementsByTagName("body").item(0);
 log("body 태그 : "+bodyNode.tagName);

 var spanList = document.getElementsByTagName("span");
 log("span 태그의 개수 : "+spanList.length);
 for(var i=0; i < spanList.length ; i++){
  var span = spanList.item(i);
  log((i+1)+"번째 span id : "+span.getAttribute("id"));
  log((i+1)+"번째 span 노드 값 : "+span.firstChild.nodeValue);
 }

 var bodyLastChild = bodyNode.lastChild;
 if(navigator.appName == "Microsoft Internet Explorer"){
  log("body의 마지막 자식 노드 IE: "+bodyLastChild.nodeName);
 }else{
  log("body의 마지막 자식 노드 FE: "+bodyLastChild.previousSibling.nodeName);
 }
 var pList = document.getElementsByTagName("p");
 var pNode = pList.item(0);
 log("p노드의 첫번째 자식 노드 : "+pNode.nodeName+","+pNode.firstChild.nodeValue);
 var pNode2 = pList.item(1);
 log("p노드의 두번째 자식 노드 : "+pNode2.nodeName+","+pNode2.firstChild.nodeValue);

 var divList = document.getElementsByTagName("div");
 var div1Attr = divList.item(1).getAttribute("id");
 log("div  노드의 id 속성 노드 : "+div1Attr);

}

Posted by 1010
반응형
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <title></title>
 </head>
 <body>
   
 </body>
</html>
Posted by 1010