현재 위치

홈 ›› Forums ›› 공부 ›› 프로그래밍 QnA

Javascript 자바스크립트 clone 질문드립니다.

littleapple3의 이미지
글쓴이: littleapple3 / 작성시간: 월, 2016/01/25 - 9:37오전

과제를 하는 중에 막혀서 여기에 도움 청하고자 질문 올립니다.
매칭게임이라고 해서 한 화면을 좌우로 css를 이용해서 나누고, 왼쪽과 오른쪽을 같게 만드는 자바스크립트를 짜는 중입니다.
과제힌트에는 클론노드를 이용하라고 나와있는데, 어디에서 시작을 해야될지 잘 모르겠습니다.

<!DOCTYPE html>
<html>
<head>
 <style>
  img {
    position:absolute;
  }
  div {
    position: absolute;
    width: 500px;
    height:500px;
   }
  #leftside {
    float: left;
   }
  #rightside {
    float:right;
    left: 500px;
    border-left: 1px solid black;
    }
  </style>
  <script>
//여기에 var theLeftSide = document.getElementById('leftside'); 로 시작을 하라고 하는데 그 이유를 모르겠네요 ㅠ 
  function generateFaces() {
   for(var i=0; i<5; i++){
    var img = document.createElement('img');
    document.getElementById('leftSide').appendChild(img);
    var position = Math.floor(Math.random() * 500);
    var position1 =Math.floor(Math.random()*250);
    img.src ='http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png';
    img.id = 'smileImage';
    img.style.top=position+"px";
    img.style.right=position1+"px";
    img.style.left=position1+"px";
  }}
  window.onload = generateFaces;
</script>
 
</head>
 <body>
   <h1>Matching Game</h1>
   <p>Click on the extra smiling face on the left.</p>
   <div id="leftSide"></div>
   <div id="rightSide"></div>
  </body>
  </html>

바쁘신 시간 내주셔서 감사합니다

Forums: 
프로그래밍 QnA
shint의 이미지

글쓴이: shint / 작성시간: 월, 2016/01/25 - 7:54오후 

<!DOCTYPE html>
<html>
<head>
</head>
 
 <style>
  img {
    position:absolute;
  }
  div {
    position: absolute;
    width: 500px;
    height:500px;
   }
  #leftside {
    float: left;
   }
  #rightside {
    float:right;
    left: 500px;
    border-left: 1px solid black;
    }
  </style>
 
 
<script language="JavaScript">
 
 
  function generateFaces()
  {
 
   for(var i=0; i<5; i++)
   {
    var img = document.createElement('img');
 
    var position = Math.floor(Math.random() * 500);
    var position1 =Math.floor(Math.random()*250);
    img.src ='http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png';
    img.id = 'smileImage';
    img.style.top=position+"px";
    img.style.right=position1+"px";
    img.style.left=position1+"px";
    document.getElementById('leftside').appendChild(img);
 
    var img2 = img.cloneNode(true); 
    document.getElementById('rightside').appendChild(img2);
  }
 
}
 
  window.onload = generateFaces;
</script>
 
 
 
 <body>
   <h1>Matching Game</h1>
   <p>Click on the extra smiling face on the left.</p>
 
 
   <div id="leftside" >test</div>
   <div id="rightside" >test</div>
 
 
  </body>
  </html>

더 자세한 내용은 책을 참고해보세요.

Javascript 자바스크립트 - cloneNode() 클론노드 - 사용방법 (소문자)
어떤 예제는 CloneNode()라고. 대문자로 잘못 적혀 있으니. 주의하시기 바랍니다.

javascript clone
https://www.google.co.kr/webhp?hl=ko#hl=ko&q=javascript+clone

javascript clone
http://search.zum.com/search.zum?method=uni&option=accu&qm=f_typing.top&query=javascript+clone

$('div').append($('h1').clone());
https://search.naver.com/search.naver?sm=stb_hty&where=se&ie=utf8&query=%24%28%27div%27%29.append%28%24%28%27h1%27%29.clone%28%29%29%3B

댓글 첨부 파일: 
첨부파일 크기
HTML icon javascript clone.html1.2 KB

----------------------------------------------------------------------------
젊음'은 모든것을 가능하게 만든다.

매일 1억명이 사용하는 프로그램을 함께 만들어보고 싶습니다.
정규 근로 시간을 지키는. 야근 없는 회사와 거래합니다.

각 분야별. 좋은 책'이나 사이트' 블로그' 링크 소개 받습니다. shintx@naver.com

littleapple3의 이미지

글쓴이: littleapple3 / 작성시간: 화, 2016/01/26 - 11:13오전

답변 감사드립니다.
스크립트 부분 코드를 지우고 처음부터 instruction이 요구한대로 시작해서 차근차근 검색해서 다시 해서 완성했습니다.
걸어주신 링크 감사드립니다. 많은 도움이 될거 같습니다

둘러보기