반응형
배열
=> 데이터 타입과 상관없이 배열에 데이터를 저장할 수 있다.
console.log
콘솔에 log를 찍음=> f12를 눌렀을때 확인할 수 있음
document.createElement("label") => 새 라벨 추가
labal.innerHTML="~~~~" => label에 데이터값 저장
document.getElementById("print").appendChild(label) => 뒤에 이어서 라벨을 추가함
Join
=> 문자열로 이어써주는 기능
concat & slice
concat => 배열 맨 뒤에 데이터값을 이어서 추가함
slice(n1, n2) => n1번째부터 n2-1개 까지 자름
unshift & shift
unshift => 배열 앞에 데이터 추가
shift => 첫번째 값을 지우고 배열 당김
forEach
indexOf()
시간
시계가 움직이게 만듬
시작 / 종료 버튼 추가
setTimeout()
=> 일정 시간마다 주기적으로 실행
=> 자기자신만 호출 가능
setInterval(함수, 시간)
=> 일정 시간마다 주기적으로 실행
=> 다른 함수를 부를때 사용
onload
=> 보통 body에 적용
마우스이벤트
문제
일정 시간마다 다음 사진으로 넘어가고,
사진과 화살표에 마우스가 올라가면 멈춤
화살표 누르면 이전사진, 다음사진으로 이동
document.crateElement()
=> 태그를 만듬
document.getElementById("아이디").style
=> 태그 스타일 변경
하위 태그 초기화
문제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
img { width: 120px; height: 120px;}
h2 { background: red; text-align: center;}
.recentlist { width: 120px; height: 700px; position: absolute; top: 20px; right:20px;}
</style>
<script type="text/javascript">
var list;
var arr=[];
var insert = document.getElementById("insert");
function add(n) {
document.getElementById("recent").style.background = "green"
document.getElementById("recent").innerHTML = "최근 구경한 상품"
document.getElementById("recentlist").innerHTML = ""
index = arr.indexOf("resources/images/최근상품0" + n + ".jpg")
if (index != -1) {
arr.splice(index, 1)
}
arr.unshift("resources/images/최근상품0" + n + ".jpg")
if (arr.length > 5) {
arr = arr.slice(0, 5)
}
for (var i = 0; i < arr.length; i++) {
var img = document.createElement("img");
img.src = arr[i];
document.getElementById("recentlist").appendChild(img);
}
}
</script>
</head>
<body>
<div>
<table border=1>
<tr>
<th><img onclick="add(1)" src="resources/images/최근상품01.jpg"></th>
<th><img onclick="add(2)" src="resources/images/최근상품02.jpg"></th>
<th><img onclick="add(3)" src="resources/images/최근상품03.jpg"></th>
<th><img onclick="add(4)" src="resources/images/최근상품04.jpg"></th>
</tr>
<tr>
<th><img onclick="add(5)" src="resources/images/최근상품05.jpg"></th>
<th><img onclick="add(6)" src="resources/images/최근상품06.jpg"></th>
<th><img onclick="add(7)" src="resources/images/최근상품07.jpg"></th>
<th><img onclick="add(8)" src="resources/images/최근상품08.jpg"></th>
</tr>
</table>
</div>
<div class="recentlist">
<h2 id="recent">목록이<br>없습니다.</h2>
<div id="recentlist">
</div>
</div>
</body>
</html>
반응형
'Java > 자바 기반 웹 개발자 과정 필기' 카테고리의 다른 글
| [200514.55일차] JSP 1 - 환경설정, 표현식, 선언문 등 (0) | 2020.05.14 |
|---|---|
| [200513. 54일차] jQuery (0) | 2020.05.13 |
| [200512.53일차] JavaScript 3 (0) | 2020.05.12 |
| [200508.51일차] JavaScript 1 (0) | 2020.05.08 |
| [200507.50일차] CSS 3 (0) | 2020.05.07 |
| [200506.49일차] CSS 2 (0) | 2020.05.06 |
| [200504.48일차] CSS 1 (0) | 2020.05.04 |
