반응형
출처 : 명품 웹 프로그래밍
마우스 클릭을 연습하는 웹 페이지를 작성해보자.
10x10의 셀을 가진 표를 만들고 랜덤하게 선택한 셀에 이미지를 출력하라.
이미지를 클릭하면 다른 셀을 랜덤하게 선택하여 이미지를 출력한다.
우선, 다음과 같이 초기 표를 구성한다
css는 다음과 같다
.main_box {
width: 600px;
margin: 50px auto;
text-align: center;
}
.random_table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
.random_table td {
border: 3px #000 solid;
width: 50px;
height: 50px;
}
1. 셀 안의 이미지를 <img src="">로 삽입하여 이미지가 안 보이게 한다
<td><img src="" alt=""></td>.random_table img {
display: none; // 안 보이게
width: 100%; // 셀의 크기에 맞춘다
height: 100%;
}
display: none;으로 이미지가 출력되지 않도록 한다
2. JS로 랜덤으로 사진이 출력되도록 작성한다
function RandomImage() {
var randomNum = Math.floor(Math.random() * 100); // 0~99의 정수
// documnet.images[] 컬렉션에 <img> 객체들이 모두 들어있다
document.images[randomNum].src = "./image/snupi.jpg"; // 사진의 링크
document.images[randomNum].alt = "snoopy";
// document.images[randomNum].style.display = "block"; // 사진이 보이도록
}
Math.random() : 0 이상 1 미만의 부동소숫점 의사 난수
Math.floor() : 주어진 수 이하의 가장 큰 정수
document.images[] 컬렉션으로 웹 페이지에 있는 모든 이미지 객체를 알 수 있다
후에 <body>의 onload 리스너에서 RandomImage() 메소드를 호출하여
문서가 로딩되었을 때, 사진을 랜덤으로 출력한다
<body onload="RandomImage();">
3. 사진을 클릭하면 초기화시키고 다른 사진을 출력한다
document.images[randomNum].addEventListener("click",
function () { // "익명함수"
document.images[randomNum].src = "";
document.images[randomNum].alt = "";
document.images[randomNum].style.display = "none";
RandomImage();
});
addEventListener() 메소드로 onclick 리스너 때 실행할 익명함수를 작성한다
documnet.images[randomNum] 객체를 초기화시키고 RandomImage() 함수를 다시 호출한다
다음은 동작 영상이다
반응형
'JS, TS' 카테고리의 다른 글
| [Javascript] JS 자료형변환 (to String / to Number / to Boolean) (1) | 2021.07.21 |
|---|---|
| [Javascript][ES5] Array reduce() (0) | 2021.07.20 |
| [Javascript] document 객체와 DOM 객체의 API(프로퍼티, 컬렉션, 메소드) (0) | 2021.03.01 |
| [실습][Javascript] 갬블링 게임 웹 페이지 만들기 (0) | 2021.03.01 |
| [부스트코스][BoostCourse] 10. Javascript 활용(2/2) (UI-API / JS 심화공부 키워드) / 서포터즈 활동 끝 (0) | 2021.02.01 |
