어제 ‘play’와 ‘close’ 페이지를 만들기 위해 해결해야 할 부분에 대해 정리했었다. 가장 맨 처음에 취한 행동은 ‘okky’라는 개발자 커뮤니티에 자문을 구한 것이다. 예비개발자인데, 다음의 기능을 구현하는 방법을 아시면 조언 부탁드린다는 글을 올렸다.
위의 4가지에 대해 물었고, 개발자 2분에게 약간의 힌트를 얻을 수 있었다. 우선 오늘은 1번에 대해 다음과 같이 정리했다.
“이미지 소스를 js에서 설정하되, 이미지 파일 리스트를 만들고 날짜를 베이스로 index를 부여해봐!”
“간단하게 클라이언트 코드상에서 랜덤함수로 바꿀 수도 있어요!”
“배경 이미지를 받아오는 URL이나 API 등은 유지하되 서버에서 바꿔치기 하도록 만들 수도 있겠죠~”
총 3가지 방법에 대해 힌트를 얻었다. 바로 구글링에 들어갔다. 검색을 해보니, setInterval-setTimeout : 일정 시간동안 반복되는 함수 / 자바스크립트
이미지 출력 / 랜덤함수 등등 여러 내용들이 쏟아져서 나왔다. 그 중에서 한 가지 방법이 내 눈에 들어왔다.
바로 ‘방문할때마다 변하는 이미지 구현하기’이다. 기존에 원했던 2주에 한번씩 랜덤으로 이미지가 변하는 것은 아니지만, 방문할때마다 바뀌도록 하는게 더 좋을 것 같다는 생각이 들어, 관련 내용을 보고 바로 코드를 천천히 살펴봤다.
<script language="javascript">
var imgArray = new Array();
imgArray[0] = "이미지 경로";
imgArray[1] = "이미지 경로";
imgArray[2] = "이미지 경로";
...
imgArray[n-2] = "이미지 경로";
imgArray[n-1] = "이미지 경로";
imgArray[n] = "이미지 경로";
function showImage(){
var imgNum = Math.round(Math.random()*n);
var objImg = document.getElementById("introImg");
objImg.src = imgArray[imgNum];
</script>
</head>
<body onload = "showImage()">
<img id="introImg" border="0">
</body>
</html>
1 이미지 리스트 만들기 - imgArray 변수 만듬
2 쇼이미지 함수 만들기 - 이미지넘버, obgImg 변수 만듬
3 onload = function() - 화면이 새로고침 될 때마다, 함수하라, 위의 경우 쇼이미지 하라! 방문할 때마다 이미지 바뀜. 크으...
4 document. getElementById(“id”);도 배움. - id가 속한 곳으로 가서 element 속성을 뽑아와라. 오오!
소소한 재미를 챙기며 4개 중 1개 클리어(?) 이제 집가서 코드 작성해보고 잘 되는지 테스트 해보자. 내일은 어느 녀석을 혼내줄까ㅎㅎ