- export / import
- 예제
1) export / import
외부 js파일에 있는 요소들을 사용하고 싶을 때 쓴다.
<script>
'use strict';
let arr = ['1번','2번','3번','4번','5번'];
let li = document.querySelectorAll('ul li');
li.forEach((item, idx) => {
item.textContent = arr[idx];
});
</script>
let arr = ['1번','2번','3번','4번','5번'];
export default arr;
arr 배열만 test.js 파일에 추가 하고 export default arr;를 넣어준다.
<script type="module">
'use strict';
import data from './data/test.js';
console.log(data)
let li = document.querySelectorAll('ul li');
li.forEach((item, idx) => {
item.textContent = data[idx];
});
</script>
그리고 script에 type을 추가 하고 import로 arr을 불러와 주면 사용이 가능하다.
2-1) 예제
<body>
<div class="wrap">
<div class="left">
<span>xx</span>
<img src="images/bimg0.jpg" alt="">
</div>
<div class="right">
<p>현재번호 <span class="current">0</span>/<span class="total">00</span></p>
<ul>
<li class="on"><img src="images/thum0.jpg" alt=""></li>
<li><img src="images/thum1.jpg" alt=""></li>
<li><img src="images/thum2.jpg" alt=""></li>
<li><img src="images/thum3.jpg" alt=""></li>
<li><img src="images/thum4.jpg" alt=""></li>
<li><img src="images/thum5.jpg" alt=""></li>
<li><img src="images/thum6.jpg" alt=""></li>
<li><img src="images/thum7.jpg" alt=""></li>
<li><img src="images/thum8.jpg" alt=""></li>
<li><img src="images/thum9.jpg" alt=""></li>
<li><img src="images/thum10.jpg" alt=""></li>
<li><img src="images/thum11.jpg" alt=""></li>
<li><img src="images/thum12.jpg" alt=""></li>
<li><img src="images/thum13.jpg" alt=""></li>
<li><img src="images/thum14.jpg" alt=""></li>
<li><img src="images/thum15.jpg" alt=""></li>
<li><img src="images/thum16.jpg" alt=""></li>
<li><img src="images/thum17.jpg" alt=""></li>
</ul>
</div>
</div>
<script src="js/main.js">
</script>
</body>let arr = [];
for (let i = 0; i < 18; i++) {
arr.push('사진에 대한 타이틀'+i);
}
let li = document.querySelectorAll('.wrap .right ul li');
let pic = document.querySelector('.wrap .left img');
let current = document.querySelector('.wrap .right p .current');
let total = document.querySelector('.wrap .right p .total');
let txt = document.querySelector('.wrap .left span');
let cnt = 0;
let size = li.length;
li.forEach((item, idx) => {
item.addEventListener('click',e=>{
pic.setAttribute('src', 'images/bimg'+idx+'.jpg');
pic.animate([
{opacity : 0},
{opacity : 1},
],400);
current.textContent = idx +1;
txt.textContent = arr[idx];
li.forEach(liItem =>{
liItem.classList.remove('on');
})
e.currentTarget.classList.add('on');
cnt = idx;
});
});
total.textContent = size;
current.textContent = cnt +1;
txt.textContent = arr[cnt];
2-2) 예제
<body>
<div class="wrap">
<div class="left">
<span>xx</span>
<img src="images/bimg0.jpg" alt="">
</div>
<div class="right">
<p>현재번호 <span class="current">0</span>/<span class="total">00</span></p>
<ul>
<li class="on" data-txt="사진타이틀000"><img src="images/thum0.jpg" alt=""></li>
<li data-txt="사진타이틀001"><img src="images/thum1.jpg" alt=""></li>
<li data-txt="사진타이틀002"><img src="images/thum2.jpg" alt=""></li>
<li data-txt="사진타이틀003"><img src="images/thum3.jpg" alt=""></li>
<li data-txt="사진타이틀004"><img src="images/thum4.jpg" alt=""></li>
<li data-txt="사진타이틀005"><img src="images/thum5.jpg" alt=""></li>
<li data-txt="사진타이틀006"><img src="images/thum6.jpg" alt=""></li>
<li data-txt="사진타이틀007"><img src="images/thum7.jpg" alt=""></li>
<li data-txt="사진타이틀008"><img src="images/thum8.jpg" alt=""></li>
<li data-txt="사진타이틀009"><img src="images/thum9.jpg" alt=""></li>
<li data-txt="사진타이틀010"><img src="images/thum10.jpg" alt=""></li>
<li data-txt="사진타이틀011"><img src="images/thum11.jpg" alt=""></li>
<li data-txt="사진타이틀012"><img src="images/thum12.jpg" alt=""></li>
<li data-txt="사진타이틀013"><img src="images/thum13.jpg" alt=""></li>
<li data-txt="사진타이틀014"><img src="images/thum14.jpg" alt=""></li>
<li data-txt="사진타이틀015"><img src="images/thum15.jpg" alt=""></li>
<li data-txt="사진타이틀016"><img src="images/thum16.jpg" alt=""></li>
<li data-txt="사진타이틀017"><img src="images/thum17.jpg" alt=""></li>
</ul>
</div>
</div>
<script src="js/main.js">
</script>
</body>let li = document.querySelectorAll('.wrap .right ul li');
let pic = document.querySelector('.wrap .left img');
let current = document.querySelector('.wrap .right p .current');
let total = document.querySelector('.wrap .right p .total');
let txt = document.querySelector('.wrap .left span');
let cnt = 0;
let size = li.length;
li.forEach((item, idx) => {
item.addEventListener('click',e=>{
pic.setAttribute('src', 'images/bimg'+idx+'.jpg');
pic.animate([
{opacity : 0},
{opacity : 1},
],400);
current.textContent = idx +1;
txt.textContent = item.dataset.txt;
li.forEach(liItem =>{
liItem.classList.remove('on');
})
e.currentTarget.classList.add('on');
cnt = idx;
});
});
total.textContent = size;
current.textContent = cnt +1;
txt.textContent = li[cnt].dataset.txt;2-3) 예제
<body>
<div class="wrap">
<div class="left">
<span>xx</span>
<img src="images/bimg0.jpg" alt="">
</div>
<div class="right">
<p>현재번호 <span class="current">0</span>/<span class="total">00</span></p>
<ul>
<li class="on"><img src="images/thum0.jpg" alt=""></li>
<li><img src="images/thum1.jpg" alt=""></li>
<li><img src="images/thum2.jpg" alt=""></li>
<li><img src="images/thum3.jpg" alt=""></li>
<li><img src="images/thum4.jpg" alt=""></li>
<li><img src="images/thum5.jpg" alt=""></li>
<li><img src="images/thum6.jpg" alt=""></li>
<li><img src="images/thum7.jpg" alt=""></li>
<li><img src="images/thum8.jpg" alt=""></li>
<li><img src="images/thum9.jpg" alt=""></li>
<li><img src="images/thum10.jpg" alt=""></li>
<li><img src="images/thum11.jpg" alt=""></li>
<li><img src="images/thum12.jpg" alt=""></li>
<li><img src="images/thum13.jpg" alt=""></li>
<li><img src="images/thum14.jpg" alt=""></li>
<li><img src="images/thum15.jpg" alt=""></li>
<li><img src="images/thum16.jpg" alt=""></li>
<li><img src="images/thum17.jpg" alt=""></li>
</ul>
</div>
</div>
<script src="js/main.js"></script>
</body>
let data = [
{id:1, txt:'헤는 아침이 별 까닭입니다.', imgurl:'images/bimg0.jpg', thum:'images/thum0.jpg', url:'http://www.google.com'},
{id:2, txt:'덮어 나는 하나 내 그리워 있습니다.', imgurl:'images/bimg1.jpg', thum:'images/thum1.jpg', url:'http://www.google.com'},
{id:3, txt:'하나에 아이들의 노루, 까닭입니다.', imgurl:'images/bimg2.jpg', thum:'images/thum2.jpg', url:'http://www.google.com'},
{id:4, txt:'부끄러운 풀이 나의 당신은 까닭입니다.', imgurl:'images/bimg3.jpg', thum:'images/thum3.jpg', url:'http://www.google.com'},
{id:5, txt:'청춘이 가득 헤일 마디씩 까닭입니다.', imgurl:'images/bimg4.jpg', thum:'images/thum4.jpg', url:'http://www.google.com'},
{id:6, txt:'풀이 무엇인지 시와 이름을 버리었습니다.', imgurl:'images/bimg5.jpg', thum:'images/thum5.jpg', url:'http://www.google.com'},
{id:7, txt:'북간도에 자랑처럼 사랑과 언덕', imgurl:'images/bimg6.jpg', thum:'images/thum6.jpg', url:'http://www.google.com'},
{id:8, txt:'계절이 내 묻힌 다 옥 까닭입니다.', imgurl:'images/bimg7.jpg', thum:'images/thum8.jpg', url:'http://www.google.com'},
{id:9, txt:'아름다운 이네들은 봄이 차 계십니다.', imgurl:'images/bimg8.jpg', thum:'images/thum8.jpg', url:'http://www.google.com'},
{id:10, txt:'당신은 이런 강아지', imgurl:'images/bimg9.jpg', thum:'images/thum9.jpg', url:'http://www.google.com'},
{id:11, txt:'마디씩 하나에 듯합니다. ', imgurl:'images/bimg10.jpg', thum:'images/thum10.jpg', url:'http://www.google.com'},
{id:12, txt:'별 별빛이 쓸쓸함과 있습니다.', imgurl:'images/bimg11.jpg', thum:'images/thum11.jpg', url:'http://www.google.com'},
{id:13, txt:'헤일 마디씩 언덕 헤는 봅니다. ', imgurl:'images/bimg12.jpg', thum:'images/thum12.jpg', url:'http://www.google.com'},
{id:14, txt:'프랑시스 하나에 패', imgurl:'images/bimg13.jpg', thum:'images/thum13.jpg', url:'http://www.google.com'},
{id:15, txt:'밤이 때 추억과 까닭입니다.', imgurl:'images/bimg14.jpg', thum:'images/thum14.jpg', url:'http://www.google.com'},
{id:16, txt:'남은 이 하나에 멀리 걱정', imgurl:'images/bimg15.jpg', thum:'images/thum15.jpg', url:'http://www.google.com'},
{id:17, txt:'책상을 못 별 내린 별이 거외다.', imgurl:'images/bimg16.jpg', thum:'images/thum16.jpg', url:'http://www.google.com'},
];
let li = document.querySelectorAll('.wrap .right ul li');
let pic = document.querySelector('.wrap .left img');
let current = document.querySelector('.wrap .right p .current');
let total = document.querySelector('.wrap .right p .total');
let txt = document.querySelector('.wrap .left span');
let cnt = 0;
let size = li.length;
total.textContent = size;
current.textContent = data[cnt].id;
txt.textContent = data[cnt].txt;
li.forEach((item, idx) => {
item.addEventListener('click',e=>{
pic.setAttribute('src', data[idx].imgurl);
pic.animate([
{opacity : 0},
{opacity : 1},
],400);
current.textContent = data[idx].id;
txt.textContent = data[idx].txt;
li.forEach(liItem =>{
liItem.classList.remove('on');
})
e.currentTarget.classList.add('on');
cnt = idx;
});
});
pic.addEventListener('click',e=>{
window.open(data[cnt].url);
})2-4) 예제
<body>
<div class="wrap">
<div class="left">
<span>xx</span>
<img src="images/bimg0.jpg" alt="">
</div>
<div class="right">
<p>현재번호 <span class="current">0</span>/<span class="total">00</span></p>
<ul>
<!-- <li class="on"><img src="images/thum0.jpg" alt=""></li> -->
</ul>
</div>
</div>
<script src="js/main.js"></script>
</body>let data = [
{id:1, txt:'이상, 청춘은 생의 작고 그들의 있으랴?' , imgurl:'images/bimg0.jpg', thum:'images/thum0.jpg', url:'http://www.naver.com'},
{id:2, txt:'품에 못할 위하여 가는 위하여서. 심장은 타오르고' , imgurl:'images/bimg1.jpg', thum:'images/thum1.jpg', url:'http://www.naver.com'},
{id:3, txt:'을 그들에게 그들의 풀이 이것은 뛰노는 것이다' , imgurl:'images/bimg2.jpg', thum:'images/thum2.jpg', url:'http://www.naver.com'},
{id:4, txt:'만천하의 실현에 인간에 뼈 너의 무엇을 듣는다' , imgurl:'images/bimg3.jpg', thum:'images/thum3.jpg', url:'http://www.naver.com'},
{id:5, txt:'설레는 설산에서 속잎나고, 봄날의 목숨' , imgurl:'images/bimg4.jpg', thum:'images/thum4.jpg', url:'http://www.naver.com'},
{id:6, txt:'피가 풀이 어디 별과 앞이 쓸쓸하랴?' , imgurl:'images/bimg5.jpg', thum:'images/thum5.jpg', url:'http://www.naver.com'},
{id:7, txt:'청춘이 거선의 황금시대를 것' , imgurl:'images/bimg6.jpg', thum:'images/thum6.jpg', url:'http://www.naver.com'},
{id:8, txt:'소리다.이것은 몸이 그와 긴지라 얼음이 이는 발휘' , imgurl:'images/bimg7.jpg', thum:'images/thum7.jpg', url:'http://www.naver.com'},
{id:9, txt:'몸이 위하여서 찾아 열매를 약동하다. 위하여' , imgurl:'images/bimg8.jpg', thum:'images/thum8.jpg', url:'http://www.naver.com'},
{id:10, txt:'생의 영원히 더운지라 그들의 때에, 수 이상' , imgurl:'images/bimg9.jpg', thum:'images/thum9.jpg', url:'http://www.naver.com'},
{id:11, txt:'이것은 발휘하기 가지에 인도하겠다는 눈' , imgurl:'images/bimg10.jpg', thum:'images/thum10.jpg', url:'http://www.naver.com'},
{id:12, txt:'그들의 가는 못할 희망의 것은 뿐이다. 능히 만물' , imgurl:'images/bimg11.jpg', thum:'images/thum11.jpg', url:'http://www.naver.com'},
{id:13, txt:'인간은 오아이스도 희망의 불러 열매' , imgurl:'images/bimg12.jpg', thum:'images/thum12.jpg', url:'http://www.naver.com'},
{id:14, txt:'가슴에 위하여 광야에서 가는 몸이 위하여서' , imgurl:'images/bimg13.jpg', thum:'images/thum13.jpg', url:'http://www.naver.com'},
{id:15, txt:'청춘의 같은 든 때문이다. 앞이 인간은 새가 청춘' , imgurl:'images/bimg14.jpg', thum:'images/thum14.jpg', url:'http://www.naver.com'},
{id:16, txt:'청춘은 희망의 이 그들에게 싹이 우리의 아름다우냐' , imgurl:'images/bimg15.jpg', thum:'images/thum15.jpg', url:'http://www.naver.com'},
{id:17, txt:'풀이 옷을 그들에게 그들의 풀이 이것은 뛰노는 것' , imgurl:'images/bimg16.jpg', thum:'images/thum16.jpg', url:'http://www.naver.com'},
{id:18, txt:'어디 그들의 가는 못할 희망의 것은 뿐이다' , imgurl:'images/bimg17.jpg', thum:'images/thum17.jpg', url:'http://www.naver.com'},
]
let ul = document.querySelector('.wrap .right ul');
let pic = document.querySelector('.wrap .left img');
let current = document.querySelector('.wrap .right p .current');
let total = document.querySelector('.wrap .right p .total');
let txt = document.querySelector('.wrap .left span');
let cnt = 0 , size = data.length;
total.textContent = size;
current.textContent = data[cnt].id;
txt.textContent = data[cnt].txt;
data.forEach((item,idx) => {
ul.innerHTML += `<li><img src=${item.thum} alt=""></li>`;
})
console.log(ul)
let li = document.querySelectorAll('.wrap .right ul li');
li[cnt].classList.add('on');
li.forEach( (item, idx ) => {
item.addEventListener( 'click', e => {
pic.setAttribute('src', data[idx].imgurl);
pic.animate([
{opacity:0},
{opacity:1},
],400);
current.textContent = data[idx].id;
txt.textContent = data[idx].txt;
li.forEach( liItem => {
liItem.classList.remove('on');
})
e.currentTarget.classList.add('on');
cnt = idx ;
})
})
pic.addEventListener('click',e=>{
window.open(data[cnt].url)
})
