자바스크립트와 jQuery 라이브러리 이용
입력 양식 포커스
<script>
window.onload=function() {
//문서객체 선택
let input1=document.querySelectorAll('input')[0];
let input2=document.querySelectorAll('input')[1];
input1.onkeydown = function () {
if (6<=input1.value.length) {
input2.focus();
}
};
input2.onkeydown = function (event) {
let evt=event || window.event;
if (evt.keyCode == 8 && input2.value.length==0) {
input1.focus();
}
};
};
</script>
</head>
<body>
<input type="text" maxlength="6">
<span>-</span>
<input type="text" maxlength="7">
</body>
1번 텍스트 칸에 6글자 이상 채우면 2번 텍스트 입력칸으로 자동적으로 포커스가 가도록 하는 방법이다
그다음 2번 텍스트에서 아무런 글자를 채우지 않고 evt.keyCode==8 를 눌렀을때 1번 텍스트칸으로 포커스 하도록한다.
프레임 애니메이션
<script>
window.onload = function () {
let count = 0;
let image = document.getElementById('image');
let frames = [
'ani/0.png','ani/1.png','ani/2.png','ani/3.png','ani/4.png','ani/5.png',
'ani/6.png','ani/7.png','ani/8.png','ani/9.png','ani/10.png','ani/11.png',
'ani/12.png','ani/13.png','ani/14.png'
];
setInterval(function () {
image.src=frames[count % frames.length];
count = count+=1;
},1000/10);
};
</script>
</head>
<body>
<img id="image" >
</body>
frames에는 그림파일들의 주소들이 저장된 배열이다
그리고 setlnterval 은 특정한 시간 마다 함수를 실행하는 함수로 안의 내용물은 image의 주소는 frames 으로 부터 받아오는 코드이다 count값을 1씩 올리면서 배열을 탐색하며 % 나머지 기능을 이용하여 배열의 길이보다 커져도 계속 배열을 돌도록 한다
문서 객체 생성과 추가
이분분은 자바 스크립트를 이용해서도 할수 있지만 복잡하다 대신
(문서 객체 생성 하기 위해 어떤 태그를 만들꺼며 그안의 내용은 무엇이면 어디에 위치할지 지정해줘야한다
jquery에서는 간하게 구현할수 있다
jquery에서는
$('<h1>Create </h1>') 이렇게 하는 것만으로 문서 객체를 생성할수 있으면
.appendTo('body'); 그 뒤에 이런것을 넣어주면 body 안에 추가한다
.prepentTo =>객체를 대상 앞부분에 추가
.appendTo => 객체를 대상 뒷부분에 추가
.beforeTo => 객체를 대상의 앞쪽에 추가
.afterTo => 객체를 대상의 뒤쪽에 추가
무한 스크롤
=>사용자가 스크롤을 끝까지 내리면 자동으로 데이터를 추가해 스크롤이 끝나지 않게 해준다
<script>
$(document).ready(function () {
let appendDocument = function() {
for (var i =0 ; i<20; i++) {
$('<h1>Create '+i+'</h1>').appendTo('body');
}
};
//선언된 함수 실행을 위해
appendDocument();
$(window).scroll(function () {
let scrollheight = $(window).scrollTop()+$(window).height();
let documentheight=$(document).height();
if (scrollheight==documentheight){
appendDocument();
}
});
});
</script>
appendDocument() 이함수는 무선에 콘텐츠를 추가하는 함수
$(window).scroll 함수는 윈도우의 스크롤 이벤트 발생할때마다 실행한다는 뜻이다
let scrollheight = $(window).scrollTop()+$(window).height(); => 문서의 맨위에서 거리를 계산하고 위도우 높이를 더한다
let documentheight=$(document).height(); => 문서 전체 높이를 넣는다
이렇게 2 변수를 이용하여 이 변수들이 서로 같다면 현재 최대치까지 스크룰 한것임으로 appendDocument를 이용하여 문서의 전체 길이를 늘려준다
플로그인 사용
여러 다양한 기능들을 쉽게 사용하게 해준다 .
사용방법은 플로그인의 웹사이트에서 파일을 다운 받거나 CDN을 사용하여 기능을 사용할수 있다.
EX) Masonry 플로그인 사용
<script>
$(document).ready(function () {
for(let i=0; i<1000; i++) {
$('<div></div>').addClass('box').css({
width: 100,
height: Math.floor(Math.random()*100)+50,
backgroundColor: 'rgb('+(i*3)%255+','+i%255+','+(i*i)%255+')'
}).appendTo('body');
}
//MASONRY플로그인을 적용한다는 코드이다
$('body').masonry({
columnWidth:110
});
});
</script>
첫번쨀 src 부분이 그 플로그인의 CND 주소이다
결과로 이렇게 박스 크기들이 랜덤으로 부여된다
슬라이더
페이지가 넘어가도록 제품 홍포나 쇼핑몰에서 많있는 방법으로
버튼을 누르면 페이지가 이동한다
코드
<script>
$(document).ready(function () {
let width = $('[data-role="slider"]').attr('data-width');
let height = $('[data-role="slider"]').attr('data-height');
let count = $('[data-role="slider"] div.item').length;
$('[data-role="slider"]').css({
position: 'relative',
overflow: 'hidden',
width: width,
height: height
}).find('.container').css({
position: 'absolute',
width: count*width,
overflow: 'hidden'
}).find('.item').css({
width: width,
height: height,
float: 'left'
});
let currentpage=0;
let changepage=function() {
$('[data-role="slider"] > .container').animate({
left:-currentpage*width
},500);
};
$('#left-button').click(function() {
if (currentpage>=0) {
if(currentpage==0) {
currentpage=count-1;
changepage();
}else {
currentpage=currentpage-1;
changepage();}
}
});
$('#right-button').click(function() {
if (currentpage < count) {
if(currentpage==count-1){
currentpage=0;
changepage();
}
else {currentpage=currentpage+1;
changepage();
}
}
});
setInterval(function () {
if (currentpage < count) {
if(currentpage==count-1){
currentpage=0;
changepage();
}
else {currentpage=currentpage+1;
changepage();
}
} else if (currentpage>=0) {
if(currentpage==0) {
currentpage=count-1;
changepage();
}else {
currentpage=currentpage-1;
changepage();}
}
},3000)
});
</script>
<style>
div.item:nth-child(1) {background: blueviolet;}
div.item:nth-child(2) {background: pink;}
div.item:nth-child(3) {background: burlywood;}
</style>
</head>
<body>
<div data-role="slider" data-width="500" data-height="300">
<div class="container">
<div class="item">
<h1>hello</h1>
<p>
</p>
</div>
<div class="item">
<h1>hello</h1>
<p>
</p>
</div>
<div class="item">
<h1>hello</h1>
<p>
</p>
</div>
</div>
</div>
<button id="left-button">←</button>
<button id="right-button">→</button>
</body>
이 코드에서 버튼을 눌렀을때
이동하는 코드로는
$('#left-button').click(function() {
if (currentpage>=0) {
if(currentpage==0) {
currentpage=count-1;
changepage();
}else {
currentpage=currentpage-1;
changepage();}
}
});
이 코드로 왼쪽 이동에 대해서 만 설명하겠다 (count 는 전체 페이질의 크기를 나타낸다)
현재 페이가 0이면 마지막 페이지로 이동한다
현재 페이지가 0보다 크면 현제 페이지에서 -1 값을 준다
그다음 changepage 코드를 설명하자면
let changepage=function() {
$('[data-role="slider"] > .container').animate({
left:-currentpage*width
},500);
};
이코드는 현재 페이지 번호와 슬라이더의 너비를 이용하여 container의 위치를 변경하는 코드입니다 .