carousel
var carousel, prv, nxt, ul, div, nxtTime;
window.onload = () => {
carousel = document.querySelector('.carousel');
div = document.createElement('div');
ul = carousel.querySelector('ul');
div.appendChild(ul);
ul.style.marginLeft='0px';
prv = document.createElement('a');
prv.appendChild(document.createTextNode('<'));
prv.href="#";
nxt = document.createElement('a');
nxt.appendChild(document.createTextNode('>'));
nxt.href="#";
carousel.appendChild(div);
carousel.appendChild(prv);
carousel.appendChild(nxt);
prv.onclick = (e) => {
clearTimeout(nxtTime);
var x = parseInt(ul.style.marginLeft)+100;
if(x == 100) x = -500;
ul.style.marginLeft= x + 'px';
nxtTime = setTimeout(nextCallback, 2000);
return false;
}
nxt.onclick= (e) => {
nextCallback();
return false; // href 무효화 이벤트는 작동됨
}
nxtTime = setTimeout(nextCallback, 2000);
}
function nextCallback() {
clearTimeout(nxtTime);
var x = parseInt(ul.style.marginLeft)-100;
if(x == -600) x = 0;
ul.style.marginLeft= x + 'px';
nxtTime = setTimeout(nextCallback, 2000);
}validation
var form, id, pw, re, sel, item0;
window.onload = () => {
// Validation
form = document.querySelector('form');
id = form.querySelectorAll('input')[0];
pw = form.querySelectorAll('input')[1];
re = form.querySelectorAll('input')[2];
sel = form.querySelector('select');
item0 = sel.querySelector('option');
sel.onfocus = () => {
sel.style.backgroundColor='white';
// if(item0) sel.removeChild(item0); // 기본값 재선택 못하도록
// sel.innerHTML = "<option>item1</option><option>item2</option><option>item3</option><option>item4</option>";
};
form.onsubmit = () => {
console.log('submit');
// if(document.querySelector('span')) {
// id.parentElement.removeChild(span);
// }
// if(document.querySelector('span')) {
// pw.parentElement.removeChild(span);
// }
// if(document.querySelector('span')) {
// re.parentElement.removeChild(span);
// }
for(ele of form.querySelectorAll('div')){
span = ele.querySelector('span')
if(span) span.parentElement.removeChild(span);
}
if(id.value=='') {
var span = document.createElement('span');
//span.innerText='아이디를 입력해주세요';
span.appendChild(document.createTextNode('아이디입력'));
id.parentElement.appendChild(span);
return false;
}
if(pw.value=='') {
var span = document.createElement('span');
span.appendChild(document.createTextNode('패스워드입력'));
pw.parentElement.appendChild(span);
return false;
}
if(re.value=='') {
var span = document.createElement('span');
span.appendChild(document.createTextNode('패스워드재입력'));
re.parentElement.appendChild(span);
return false;
}
if(pw.value!=re.value){
var span = document.createElement('span');
span.appendChild(document.createTextNode('패스워드불일치'));
re.parentElement.appendChild(span);
return false;
}
if(sel.value=='done'){
sel.style.backgroundColor='red';
// sel.focus();
return false;
}
};
};
DOM LEVEL 3
level3는 2와 다르게 하나의 행동에 여러가지 이벤트를 동시에 수행할 수 있다.
var btn, btn2, btn3, btn4;
window.onload = () => {
btn = document.querySelector("button");
btn2 = document.querySelector("button+button");
btn3 = document.querySelector("button+button+button");
btn4 = document.querySelector("button+button+button+button");
var callback1 = () => {
console.log('level3 event');
}
var callback2 = () => {
alert('click');
}
btn.onclick = () => {console.log('level2 click')}; // 실행안됨
btn.onclick = () => {console.log('level2 click2')};
btn.onclick = false; // dom level2 이벤트 초기화
btn.addEventListener('click', callback1);
btn.addEventListener('click', callback2);
btn.removeEventListener('click', callback2);
btn2.addEventListener('click', () => {
btn.removeEventListener('click', callback1);
})
btn3.addEventListener('click', () => {
btn.addEventListener('click', callback1);
})
var callback4 = () => {
console.log('1번만 수행됨');
btn4.removeEventListener('click', callback4);
};
btn4.addEventListener('click', callback4);
}
var h1,btn, naver;
window.addEventListener('load', () => { // level3 load는 안쓰임
h1 = document.querySelector('h1');
console.log('addListener',h1.innerHTML);
})
window.onload = () => { // onload는 leve2를 씀 타겟팅을 확실히 하기 위해
h1 = document.querySelector('h1');
btn = document.querySelector('button');
naver = document.querySelector('a');
console.log('onload',h1.innerHTML);
btn.addEventListener('click', () => {
console.log('한번만 실행');
}, {once:true});
naver.addEventListener('click', (e) => {
e.preventDefault(); // 엘리먼트의 기본기능 취소, 반드시 callback의 첫줄
console.log(e, '이동안할까?');
// return false; //dom level 3 에선 먹지않음
// naver.onclick = () => {return false}; // 이래야 먹힘
}, {passive:true});
}
bubbling capturing
window.onload = () => {
div1 = document.querySelector('div');
div2 = document.querySelector('div>div');
div3 = document.querySelector('div>div>div');
// 이벤트 발생 순서에 따라 bubbling, capturing
// 3번째 매개변수로 true를 주면 capturing 발생
// capturing - 부모부터 이벤트 발생됨
// bubbling - 자신부터 이벤트 발생됨
div1.addEventListener('click', (e) => {
console.log('box1');
}, true);
div2.addEventListener('click', (e) => {
e.stopPropagation(); // 이벤트 확산을 막음
console.log('box2');
}, true);
div3.addEventListener('click', (e) => {
console.log('box3');
}, true);
};
열리는 메뉴 만들기
<style type="text/css" rel="stylesheet">
nav{}
nav>ul{
list-style: none;
margin: 0px;
padding: 0px;
}
nav>ul>li{
float: left;
width: 100px;
background-color: gray;
text-align: center;
color: white;
}
nav>ul>li>ol{
list-style: none;
margin: 0px;
padding: 0px;
overflow: hidden;
/*
height: 0px;
height: 140px;
*/
}
nav>ul>li>ol>li{}
nav>ul>li>ol>li>a{
height: 35px;
display: block;
text-align: center;
background-color: gray;
line-height: 35px;
color: white;
}
</style>
<script type="text/javascript">
var ul, lis;
window.onload = () => {
ul = document.querySelector('ul');
lis = ul.querySelectorAll('ul>li');
var overCallback = function(e){
console.log(this, e.target);
this.querySelector('ol').style.height='120px';
};
var outCallback = function(e){
console.log(this);
this.querySelector('ol').style.height='0px';
};
for(li of lis){
console.log(li.querySelector('ol'));
if(li.querySelector('ol')){
li.querySelector('ol').style.height='0px';
li.addEventListener('mouseover', overCallback);
li.addEventListener('mouseout', outCallback);
}
}
};
</script>
<nav>
<ul>
<li>menu1</li>
<li>menu2
<ol>
<li><a href="#">menu2-1</a></li>
<li><a href="#">menu2-2</a></li>
<li><a href="#">menu2-3</a></li>
</ol>
</li>
<li>menu3
<ol>
<li><a href="#">menu3-1</a></li>
<li><a href="#">menu3-2</a></li>
<li><a href="#">menu3-3</a></li>
</ol>
</li>
<li>menu4</li>
</ul>
</nav>
xhr 비동기 통신
<script type="text/javascript">
var xhr, target, btn, table;
window.onload = function(){
target = document.querySelector('#target');
btn = document.querySelector('button');
table = document.querySelector('table');
// 비동기 통신
btn.onclick = function() {
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (ele){
/*
readyState
0 객체만 생성
(request 단계)
1 open 메서드 호출
2 send 메서드 호출
(response 단계)
3 데이터 일부만 받은 상태
4 데이터 전부 받은 상태
*/
if(ele.target.status==200 && ele.target.readyState==4){
//target.innerHTML = ele.target.responseText; // jsp 파일을 그대로 읽어 올 수 있음
var tbody = document.createElement('tbody');
table.appendChild(tbody);
tbody = '';
var doc = xhr.responseXML; // xml파일을 읽어오기
var arr = doc.childNodes[0].children;
for(stu of arr){
var num = stu.children[0].childNodes[0].nodeValue;
var name = stu.children[1].childNodes[0].nodeValue;
var kor = stu.children[2].childNodes[0].nodeValue;
var eng = stu.children[3].childNodes[0].nodeValue;
var math = stu.children[4].childNodes[0].nodeValue;
console.log(num, name, kor, eng, math);
tbody += '<tr>';
tbody += '<td>'+num+'</td>';
tbody += '<td>'+name+'</td>';
tbody += '<td>'+kor+'</td>';
tbody += '<td>'+eng+'</td>';
tbody += '<td>'+math+'</td>';
tbody += '</tr>';
// var tr = document.createElement('tr');
// var td = document.createElement('td');
// td.appendChild(document.createTextNode(num));
// tr.appendChild(td);
// td = document.createElement('td');
// td.appendChild(document.createTextNode(name));
// tr.appendChild(td);
// td = document.createElement('td');
// td.appendChild(document.createTextNode(kor));
// tr.appendChild(td);
// td = document.createElement('td');
// td.appendChild(document.createTextNode(eng));
// tr.appendChild(td);
// td = document.createElement('td');
// td.appendChild(document.createTextNode(math));
// tr.appendChild(td);
// tbody.appendChild(tr);
}
// table.appendChild(tbody);
document.querySelector('tbody').innerHTML = tbody;
}
}
xhr.open('get', 'ex09.xml');
xhr.send();
}
}
XML
var table, input, btn, xhr, tmp;
var callback = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var doc = xhr.responseXML;
var tbody = document.createElement('tbody');
table.appendChild(tbody);
var arr = doc.children[0].children;
var trs = "";
tmp = doc;
for(emp of arr){
var empno = emp.children[0].firstChild.nodeValue;
var ename = emp.children[1].firstChild.nodeValue;
trs += '<tr>';
trs += '<td>'+empno+'</td><td>'+ename+'</td>';
trs += '</tr>';
}
tbody.innerHTML = trs;
}
}
var btnCallback = function() {
var cnt = 1;
if(input.value) cnt = input.value;
xhr.onreadystatechange = callback;
xhr.open('get', 'ex10.jsp?cnt='+cnt);
xhr.send();
if(table.querySelector('tbody')) {
table.removeChild(table.querySelector('tbody'));
}
}
window.onload = function(){
xhr = new XMLHttpRequest();
table = document.querySelector('table');
input = document.querySelector('input');
btn = document.querySelector('button');
btn.onclick = btnCallback;
}
----------------- ex10.jsp ----------------------
<?xml version="1.0" encoding="UTF-8"?>
<%@ page language="java" contentType="application/xml; charset=UTF-8"
pageEncoding="UTF-8"%>
<root>
<%
String param = request.getParameter("cnt");
if(param==null) param = "1";
int cnt = Integer.parseInt(param);
for(int i = 0; i < cnt; i++){
%>
<emp>
<empno><%=i+1 %></empno>
<ename><%="user"+(i+1) %></ename>
</emp>
<%} %>
</root>
JSON
<script type="text/javascript">
var xhr;
window.onload=function(){
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
var txt = xhr.responseText; // 문자열로 받아
console.log(txt);
var obj = JSON.parse(txt); // javascript obj로 변환
console.log(obj);
}
};
xhr.open('get','ex11.json');
xhr.send();
}
</script>
-------------------------------------------
ex11.json
{"root":[
{"key1":"val1", "key2":"val2"},
{"key1":"val3", "key2":"val4"},
{"key1":"val5", "key2":"val6"}
]}'회고록(TIL&WIL)' 카테고리의 다른 글
| TIL 2023.02.08 jQuery 2 (0) | 2023.02.08 |
|---|---|
| TIL 2023.02.07 JSON, jQuery (0) | 2023.02.07 |
| TIL 2023.02.03 JavaScript 3 (0) | 2023.02.03 |
| TIL 2023.02.02 JavaScript 2 (0) | 2023.02.02 |
| TIL 2023.02.01 CSS & JavaScript 1 (0) | 2023.02.01 |