input 형식 연습
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form</title>
<style>
.container {
width : 500px;
padding : 20px;
}
</style>
</head>
<body>
<div class="container">
<div>
아이디 <input type="text" id="id" />
</div>
<div>
내용 <textarea rows="6" id="content"></textarea>
</div>
<div>
<!-- checked 미리 선택 시켜놓음. name을 넣어서 그룹화해야한다. 그래야 n개 중에 하나만 선택가능 -->
<!-- on 을 남, 여로 출력하기 위해서 임의의 value값을 준것. -->
남 <input type="radio" name="gender" value="남" checked />
여 <input type="radio" name="gender" value="여" />
<button onclick="handleRadio()">결과보기</button>
</div>
<div>
A <input type="checkbox" name="info" value="A" />
B <input type="checkbox" name="info" value="B" />
C <input type="checkbox" name="info" value="C" />
D <input type="checkbox" name="info" value="D" />
<button onclick="handleCheck()">결과보기</button>
</div>
<div>
<select id="sel">
<!-- //value 안넣어도 동작하긴 하지만 결과값을 다르게 보고싶으면 설정해야하는것. -->
<option value="a1">1</option>
<option value="a2">2</option>
<option value="a3">3</option>
</select>
<button onclick="handleSelect()">결과보기</button>
</div>
<div>
색상
<input type="color" id="color" />
<button onclick="handleColor()">결과보기</button>
</div>
<div>
파일 : 여러개 선택 (ctrl 키)
<input type="file" id="file" multiple />
<button onclick="handleFile()">결과보기</button>
</div>
</div>
<script>
const handleFile = () => {
const file = document.getElementById('file');
console.log(file.files);
// value는 파일 이름만 나옴, 파일은 files에 저장됨
// 배열형태로 예상해서 저장. 하나만 첨부해도 배열형태로 나온다.
for(let tmp of file.files) {
console.log(tmp);
}
}
const handleColor = () => {
const color = document.getElementById('color');
// color.value = '#cccccc'; //색상 미리 선택
console.log(color.value);
}
const handleSelect = () => {
const sel = document.getElementById('sel');
console.log(sel.value);
}
const handleCheck = () => {
//[ <>, <>, <>, <> ]
const check = document.getElementsByName('info');
for(let tmp of check) { //4번 반복
if(tmp.checked === true){
console.log(tmp.value);
}
}
}
const handleRadio = () => {
// gender => [ <input radio 남>, <input radio 여> ]
// 배열은 반복문 쓴다 생각
const gender = document.getElementsByName("gender");
// getElement... id빼고는 다 복수형!
console.log(gender);
// gender[1].checked = true; // 라디오의 상태를 수동으로 2번째 값으로 바꿈
for(let tmp of gender) { // 2번 반복
// 1개씩 가져온 라디오의 체크상태 확인
if(tmp.checked === true) {
console.log(tmp.value); //값을 출력
}
}
}
const id = document.getElementById('id');
id.value = 'aaa'; // input type에 입력한 내용 추가하기
console.log(id.value); // input type에 입력한 내용 가져오기
const content = document.getElementById('content');
content.value = 'bbb';
console.log(content.value);
</script>
</body>
</html>bootstrap 이용, 검색, 페이지 기능 추가
// 파일명 : board3.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시판2</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<!-- 다른 사람 이 만든 css쓸때는 class 뭐 썼는지를 잘 살펴서 쓰기 -->
</head>
<body>
<div class="container" style="border:1px solid #cccccc;">
<h3>게시판</h3>
<div style="width: 400px;">
<div style="display:inline-block">
<input type="text" class="form-control form-control-sm" id="txt" onkeyup="handleKeyup()" placeholder="검색어"/>
</div>
<div style="display:inline-block">
<button class="btn btn-primary btn-sm" onclick="handleSearch()">검색</button>
</div>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">제목</th>
<th scope="col">작성자</th>
<th scope="col">조회수</th>
<th scope="col">날짜</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
<div>
<nav aria-label="Page navigation example">
<!-- //3가지 클래스가 들어가 있는것. -->
<ul class="pagination justify-content-center pagination-sm" id="ul"></ul>
</nav>
</div>
</div>
<script src="js/axios.min.js" type="text/javascript"></script>
<script>
const ul = document.getElementById('ul');
const tbody = document.getElementById('tbody');
const txt = document.getElementById('txt');
// 주소창에 ?page=1 없으면
const href = new URL(window.location);
let page = href.searchParams.get("page");
// no 가져 왔던 방법이랑 동일하지만 page값이 없으면 1로 넣어줘야 하므로 상수가 아닌 변수 처리
console.log(page);
if(page === null) {
page = 1;
}
let text = href.searchParams.get("text");
if(text === null) {
text = '';
}
// 원래 화면에서 page=1&text= <==1페이지&전체가 보이는것. text뒤에 특정단어 쓰면 그단어만 검색된다.
// 원래 두개의 정보를 읽어서 화면을 구성하는것.
// 뒤에 두개를 받아야함.
// page 받아냄.
// text 도... 없으면 빈걸로
// 검색어 입력시 마다 호출
const handleKeyup = () => {
if(window.event.keyCode === 13) {
handleSearch()
}
}
// 엔터키로 검색할수있도록
// 검색어 입력 후 검색 버튼 클릭시 전역변수의 내용 바꿈
const handleSearch = async() => {
window.location.href=`/board3.html?page=1&text=${txt.value}`;
// 검색결과는 1페이지에서 보이도록 & text의 값이 입력한 검색어로 바뀐것->주소를 바꾼 역할
}
const onMounted = async() => {
const url = `http://1.234.5.158:23000/board101/select.json?page=${page}&text=${text}`;
// 주소창에 있는걸 읽어온거임. 이미 위의 함수에서 주소창이 바뀌었고 그렇게 바뀐 현재 상태의 주소를 그대로 읽어온것!
const headers = {"Content-Type":"application/json"};
const { data } = await axios.get(url, {headers});
console.log(data) ;
// rows로 목록
// total로 pagination
if(data.status === 200) {
const pages = Math.floor( (data.total -1 ) / 10 ) + 1 ; // 소숫점 버림.
console.log(pages);
for(let i=1; i<=pages; i++) { // 1부터 17까지
ul.innerHTML +=
`<li class="page-item"><a class="page-link" href="/board3.html?page=${i}&text=${text}">${i}</a></li>`;
//검색어 포함 안시키면 페이지 번호 누르면 검색어가 풀림.
}
for(let tmp of data.rows) {
tbody.innerHTML +=
`<tr>` +
`<th scope="row">${tmp._id}</th>` +
`<td>${tmp.title}</td>` +
`<td>${tmp.writer}</td>` +
`<td>${tmp.hit}</td>` +
`<td>${tmp.regdate}</td>` +
`</tr>` ;
}
}
}
onMounted();
</script>
</body>
</html>그밖에
- 뷰는 header, footer 부분은 그대로 두고 가운데 content 부분만 새로 읽어서 가져온다. 그걸 SPA라고 한다..? 다음주 부터 뷰 배움~
keep going