본문 바로가기
Study/JavaScript

[javaScript] Dom Script 실습

힝쏘 2019. 5. 16. 10:15

Snapshot

- 텍스트 클릭하면 해당 이미지 보여주기 

<SCRIPT type=text/javascript>
//자기자신의 객체를 바로 갖고 와서 href의 값을 e에다 넣어준다.
//직접 접근은 불가능해서 getElementById로 img를 받고, img주소의 e값을 넣어준다.
 function showPic(i) {
  e = i.getAttribute("href");
  document.getElementById("placeholder").src = e;
  //document.all["placeholder"].src = e;

  t = i.getAttribute("title");
  document.getElementById("description").innerText = t;
}
</SCRIPT>

<H1>snapshots</H1>
<UL>
<LI><A title="A fireworks display" onclick="showPic(this); return false;">Fireworks</A></LI>
<LI><A title="A cup of black coffe" onclick="showPic(this); return false;">Coffee</A></LI>
<LI><A title="A red rose" onclick="showPic(this); return false;">Rose</A></LI>
<LI><A title="The famous Clock" onclick="showPic(this); return false;">BigBen</A></LI></UL><br/>
<IMG id=placeholder alt="my image gellery"
> 
<P id=description>Choose an image</P>

showPic.js

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; 

}

 

위의 코드에서 html태그 빼고 실행해보기

<html>
<head>
<script type="text/javascript" src="showPic2.js"></script>
</head>

<body>
<h1>snapshots</h1>
<ul id="imageGallery">

 <li><a href="images/fireworks.jpg" title="A fireworks display">
  Fireworks</a></li>
   <li><a href="images/coffee.jpg" title="A cup of black coffe">
  Coffee</a></li>
   <li><a href="images/rose.jpg" title="A red rose">
  Rose</a></li>
   <li><a href="images/bigben.jpg" title="The famous Clock">
  BigBen</a></li> 
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gellery"/>
<p id="description">Choose an image</p>
</body>
</html>

showPic2.js

function showPic(whichpic) {

 var text = "";

 var source = whichpic.getAttribute("href");

 var placeholder = document.getElementById("placeholder");

 placeholder.setAttribute("src", source);

 

 if(whichpic.getAttribute("title")) {

  text = whichpic.getAttribute("title");

 } else {

  text="";

 }

 var description = document.getElementById("description");

//p태그 첫번째 자식의 노드타입이 3(텍스트 노드)이면 텍스트 값을 넘겨주는 것이다.

 if (description.firstChild.nodeTyle == 3) {

  description.firstChild.nodeValue = text;

 }

 return false;

}



//for문을 돌려 이벤트를 전부 다 처리해 주었다

 //gallery는 ul을 담고있다

 //ul을 담고있는 태그 내에서만 a태그를 받는다

function prepareGallery() {

 var gallery = document.getElementById("imageGallery");
 var link = gallery.getElementsByTagName("a");
 for(var i=0; i<link.length; i++) {
  link[i].onclick = function () {
   return showPic(this);
  }
 }
}

function addLoadEvent(func) {
 //window.onload = prepareGallery;
 var oldonload = window.onload;
 //window.onload에 prepareGallery가 들어가지 않았을 때, 실행

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

  window.onload = function() {
   oldonload();
   //prepareGallery
   func();
  }
 }
}

//이 함수가 실행될 때 prepareaGallery함수가 실행되라는 뜻
addLoadEvent(prepareGallery);

img태그도 자바스크립트로 표현한 코드

<html>
<head>
<script type="text/javascript" src="showPic3.js"></script>
</head>

<body>
<h1>snapshots</h1>
<ul id="imageGallery">
 <li><a href="images/fireworks.jpg" title="A fireworks display">
  Fireworks</a></li>
   <li><a href="images/coffee.jpg" title="A cup of black coffe">
  Coffee</a></li>
   <li><a href="images/rose.jpg" title="A red rose">
  Rose</a></li>
   <li><a href="images/bigben.jpg" title="The famous Clock">
  BigBen</a></li> 
</ul>
</body>
</html>

showPic3.js

function showPic(whichpic) {
 var text = "";
 var source = whichpic.getAttribute("href");
 var placeholder = document.getElementById("placeholder");
 placeholder.setAttribute("src", source);

 if(whichpic.getAttribute("title")) {
  text = whichpic.getAttribute("title");
 } else {
  text="";
 }

 var description = document.getElementById("description");
 if (description.firstChild.nodeType == 3) {
  description.firstChild.nodeValue = text;
 }

 return false;
}

//img태그와 p태그를 자바스크립트로 구현
function preparePlaceholder() {
 var body_element = document.getElementsByTagName("body")[0];
 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");

//body태그에 ul에 전에 img와 p태그를 넣어준다
 body_element.insertBefore(placeholder, gallery);

 //p태그가 ul 뒤에 붙는다
 insertAfter(description, gallery);
}

function prepareGallery() {
 var gallery = document.getElementById("imageGallery");
 var link = gallery.getElementsByTagName("a");

 for(var i=0; i<link.length; i++) {
  link[i].onclick = function () {
   return showPic(this);
  }
 }
}

function addLoadEvent(func) {
 //window.onload = prepareGallery;
 var oldonload = window.onload;

 //window.onload에 prepareGallery가 들어가지 않았을 때, 실행
 if(typeof window.onload != 'function') {
  window.onload = func;
 } else {
  window.onload = function() {
   oldonload();

   //prepareGallery
   func();
  }
 }
}

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

//이 함수가 실행될 때 prepareaGallery함수가 실행되라는 뜻
addLoadEvent(prepareGallery);
addLoadEvent(preparePlaceholder);

 

저작자표시

'Study > JavaScript' 카테고리의 다른 글

[javaScript] 쿠키  (0) 2019.05.16
[javaScript] Dom Script  (0) 2019.05.16
[javaScript] Document 실습  (0) 2019.05.16
[javaScript] Document  (0) 2019.05.16
[javaScript] Form  (0) 2019.05.16

'Study/JavaScript' Related Articles

티스토리툴바