학습1
UI 설계
-> 대분류 개념으로 지문을 읽어볼 것
학습2
UI 구현
-> 12_회원가입.html 철저히 분석할 것
객관식(20문제) 50점
개념 select element에서 일어날수 있는 event-> onchange
함수의 기능
객체가 해야하는 것
자바에서 숫자형태나 문자형으로 형변환 number, parseint
html css 3school.com에 있는 문제로 냇움 2문제 글자갯수제한 보충설명
주관식(문제해결형) 50점
-> 1) 결과보고서.docx 작성해서 제출
(시연결과 캡쳐 + html문서)
2) .html 제출
사진스크롤
12장나오기
쫙 나열해놓고 보이는공간을 줄이는 것.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>23_이미지스크롤.html</title>
<style>
#myfilm{position: absolute;left: 100px;top: 80px;width: 289.2px;height: 100px;background-color: white;overflow: hidden; /*scroll or hidden*/}
</style>
</head>
<script>
//1)스크롤하고자 하는 이미지를 전역변수에 대입
var ctnt=[]; //배열선언
ctnt[0]="<img src='../images/taco.webp' width='85'>";
ctnt[1]="<img src='../images/spongebob.webp' width='85'>";
ctnt[2]="<img src='../images/welcome.webp' width='85'>";
ctnt[3]="<img src='../images/run.webp' width='85'>";
ctnt[4]="<img src='../images/happy.gif' width='85'>";
ctnt[5]="<img src='../images/heart.png' width='85'>";
ctnt[6]="<img src='../images/rain.webp' width='85'>";
ctnt[7]="<img src='../images/smile.webp' width='85'>";
//2) 1)에서 준비한 이미지를 id=myfilm에 배치하기
//스크롤 되는 이미지를 만드려면 여백조절을 해서 움직여줘야하는데 이미지를 조절하는 것이 아니라 이미지당 블럭요소를 하나씩 만들어주고, 이미지를 블럭에 넣어 블럭의 여백조절을 통해 스크롤되는 이미지를 만들어주어야한다.
function start(){
//<div id='' style=''></div>
for(i=0;i<8;i++) {
document.write("<div id='area" +i+ "' style='position:absolute;top:0;left:" +(102.1*i)+"px'>");
document.write(ctnt[i]);
document.write("</div>");
}
//3) 3초후에 scroll함수 1번 호출이미지 스크롤
setTimeout(scroll,3000);
}//start() end
//4) 이미지 스크롤
function scroll(){
//alert("scroll 3초후에 함수 호출");
//이미지의 블록요소 id=area의 style안의 left에 접근해서 왼쪽으로 옮기며 , 스크롤한다.
//alert(document.getElementById("area0").style);
//alert(document.getElementById("area0").style.left);
//id=area0의 왼쪽여백값을 가져와서 -10px만큼 줄임
//var tmp=document.getElementById("area0").style;
//tmp.left=parseInt(tmp.left)-10+"px";
//5) id=area0~id=area7까지 동시에 왼쪽여백줄임
for(idx=0; idx<8; idx++){
var tmp=document.getElementById("area"+idx).style;
tmp.left=parseInt(tmp.left)-10+"px";
//7) 이미지 순환
if(parseInt(tmp.left)<=-100){
tmp.left=parseInt(tmp.left)+100+(102.1*7)+"px";
}
}//for end
//6) 0.4초마다 scroll함수 호출
timer=setTimeout(scroll,100);
}//scroll() end
var timer;
function killtime(){
clearTimeout(timer);
}//killtime() end
</script>
<body unload="killtime()">
<!--이미지가 스크롤되는 위치-->
<div id="myfilm">
<script>start();</script>
</div>
</body>
</html>
JavaScript BOM
The Browser Object Model (BOM)
-> window, document, location, history, ~
window.alert() : 확인
window.confirm() : 확인/취소
document.write() : <body>영역에 출력
location.href : 페이지이동
일반적 기능 객체 : Number, Math, Date ~
*3school - html window
https://www.w3schools.com/jsref/obj_window.asp
1) window.open() 새창만들기
-> 부모창과 자식창이 서로 독립적 관계이다.
-> window.open("URL 또는 파일명","창이름","옵션")
-> window.close() 창닫기
'공부 > 화면구현 UI' 카테고리의 다른 글
| 7월12일 - JavaScript 5 (0) | 2019.07.12 |
|---|---|
| 7월11일 - JavaScript 4 (0) | 2019.07.11 |
| 7월10일 - JavaScript 3 (1) | 2019.07.10 |
| 7월9일 - JavaScript 2 (0) | 2019.07.09 |
| 7월8일 - JavaScript 1 (0) | 2019.07.08 |
