학습1
UI 설계 ->
대분류 개념으로 지문을 읽어볼 것.
학습2
UI구현 -> 12_회원가입. html (참고: https://seaweedisland.tistory.com/72 )
객관식 20문제 50점
주관식 문제해결형 50점
-> 1) 결과보고서.docx 작성해서 제출. (시연결과 캡쳐 + HTML문서)
-> 2) .html 제출
Javascript 기초문법Ⅵ
17. 이미지 슬라이드
자바스크립트로 이미지 슬라이딩 구현하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>이미지 스크롤</title>
</head>
<style type="text/css" media="screen">
#myfilm { position: relative;left: 100px; top: 50px; width: 320px; height: 65px; background-color: #fff; overflow: hidden;}
</style>
<script type="text/javascript">
//1) 스크롤하고자 하는 이미지를 전역변수에 대입
var imgs = []; //배열선언
imgs[0] = "<img src='../images/img01.jpg' width='100'>";
imgs[1] = "<img src='../images/img02.jpg' width='100'>";
imgs[2] = "<img src='../images/img03.jpg' width='100'>";
imgs[3] = "<img src='../images/img04.jpg' width='100'>";
imgs[4] = "<img src='../images/img05.jpg' width='100'>";
imgs[5] = "<img src='../images/img06.jpg' width='100'>";
imgs[6] = "<img src='../images/img07.jpg' width='100'>";
imgs[7] = "<img src='../images/img08.jpg' width='100'>";
//2) 1)에서 준비한 이미지를 id=myfilm에 배치하기
function start(){
for (var i=0; i<imgs.length; i++){
document.write("<div id='area"+i+"' "+"style='position:absolute; top:0; left:"+(i*110)+"px;'>"); //이미지를 div안에 있어야 한다.
document.write(imgs[i]);
document.write("</div>")
}
/* document.write("<div id='area0'"+i+" "+"style='position:absolute; top:0; left:"+i+";'>"); //이미지를 div안에 있어야 한다.
document.write(imgs[i]);
document.write("</div>")
document.write("<div id='area1' style='position:absolute; top:0; left:105px;'>");
document.write(imgs[1]);
document.write("</div>")*/
setTimeout(scroll,500);
} //start() end
//3) 이미지 스크롤하기
function scroll(){
//alert("scroll 함수 호출");//alert();
/* alert(document.getElementById("area0").style);
alert(document.getElementById("area").style.left);*/
//id = area0의 왼쪽 여백값을 가져와서 -10px 만큼 줄이기
/* var tmp = document.getElementById("area0").style;
tmp.left = parseInt(tmp.left)-10+"px";*/
//동시에 왼쪽 여백 줄이기
for (var i=0; i<imgs.length; i++){
var tmpt = document.getElementById("area"+i).style;
tmpt.left = parseInt(tmpt.left)-10+"px";
//이미지 슬라이드 순환
if (parseInt(tmpt.left) <= 110*(-1)) {
tmpt.left = 110*(imgs.length-1)+"px";
}
}
timer=setTimeout(scroll,100);
}//scroll() end
var timer;
function killtime(){
clearTimeout(timer);
}
</script>
<body onmouseover="killtime()" onmouseout="scroll()">
<!-- 이미지가 스크롤되는 위치 -->
<div id="myfilm" >
<script>start();</script> <!-- 얘를 작성안해줘서 하다가 오류생겼었음 -->
</div>
</body>
</html>
18. BOM
The Browser Object Model (BOM)
window, document, location, history, ~
일반적 객체: Number, Math, Date~
BOM(Browser Object Model)이란 웹브라우저의 창이나 프래임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단이다. BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어할 수 있다. 따라서 BOM에 대한 수업은 Window 객체의 프로퍼티와 메소드의 사용법을 배우는 것이라고 해도 과언이 아닐 것이다.
-생활코딩
BOM의 예시로는
1) windows.open() 새창만들기
-> 부모창과 자식창이 서로 독립적 관계이다.
-> windows.open("URL 또는 파일명","창 이름","옵션")
window.open("Digit.html","win","width=350, height=300");
2) Modal 창
부모창과 자식창을 한몽으로 하고자 하는 경우 사용.
Bootstrap3 Modal Plugin 활용한다.
3) Confirm 창
확인true, 취소false 이다.
if(confirm("영구히 삭제됩니다. 삭제할까요?")){
alert("you pressed OK");
} else {
alert("You pressed Cancel");
}
4) device의 해상도 확인
alert(screen.width);
alert(screen.height);
5) 페이지 이동
//window.location.href="URL 또는 파일명"
location.href="https://seaweedisland.tistory.com/" //페이지이동
location.reload(); //현재페이지 새로고침
6) 뒤로, 앞으로
페이지 이동, 앞뒤
history.back(); //뒤로가기
history.forward(); //앞으로가기
history.go(-2);
7) 쿠키
웹서버가 사용자에게 저장하는 텍스트 형태의 정보
쿠키는 웹브라우저의 영향을 받는다.
예) 아이디저장, 오늘창그만보기 같은 것.
document.cookie
- 팝업창.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>25_팝업창</title>
</head>
<body>
<script type="text/javascript">
//getCookie
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
//팝업창 띄우기
//-> popcookie값이 done이 아니면 즉(체크하지 않았으면)
if(){
window.open("popup.html","popwin","width=300, height=350");
}
</script>
</body>
</html>
- 팝업.html
<!DOCTYPE html>
<html>
<head>
<title>popup.html</title>
</head>
<body>
<img src="../images/k5.png" style="width: 58%">
<form name="myform">
<input type="checkbox" name="check" value="">오늘 창 그만보기
<hr>
<a href="javascript:closeWin()">닫기</a>
</form>
<script type="">
//setCookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function closeWin(){
var ch = document.myform.check.checked;
if(ch==true){
setCookie("popcookie","done",1);
window.close();
//오늘창그만보기 체크하면 닫힘.
} else {
alert("체크하세요");
}
}
</script>
</body>
</html>
'Frontend' 카테고리의 다른 글
| 07월 16일 화 | UI 화면구현 10 - Javascript 기초문법Ⅶ (0) | 2019.07.16 |
|---|---|
| 자바스크립트 완벽가이드 목차 (0) | 2019.07.15 |
| 07월 12일 금 | UI 화면구현 08 - Javascript 기초문법Ⅴ (0) | 2019.07.12 |
| 07월 11일 목 | UI 화면구현 07 - Javascript 기초문법Ⅳ (0) | 2019.07.11 |
| 07월 10일 수 | UI 화면구현 06 - Javascript 기초문법Ⅲ (0) | 2019.07.10 |
댓글