html
국비 코딩 풀스택 수업 2일차
비루블
2022. 6. 22. 17:10
수업내용
이미지 전송, 폼(입력항목들)
오브젝트(중요)
1. 이미지전송
가정) 로그인을 하려고 한다.
로그인을 할때 아이디와 비밀번호가 입력 되지 않았는데,
이 것을 서버로 보낸다면 백엔드가 욕함.
그래서 프론트는 if 및 return false; 를 이용하여
데이터의 이동을 미리 차단하여야함.
파일 선택이 되지 않았을때, no image를 표기하고
이미지 파일이 선택하였을때, 화면을 바꾼 이미지 파일로 표기
image src 입력시 style에 width만 줘도 비율 맞춰 줄어들게 됨.
등록 버튼 클릭시
물품과 가격에 공란인지 확인한 후 서버에 올리는 시스템
공란일시 크롬 alert가 울림
또한 focus를 활용하여 공란인 곳에 자동 클릭됨
<!DOCTYPE html>
<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>Document</title>
<link href="./css/style1.css" rel="stylesheet" />
</head>
<body>
<div class = "container">
<h3>물품등록</h3>
<hr />
<div>
물품:
<input type="text" id="name"/>
</div>
<div>
가격:
<input type="number" id="price"/>
</div>
<div>
이미지:
<img src="./img/noimage.png" style="width : 80px;" id="image"/>
<!--width만 설정해도 자동으로 세로비율까지 조절해줌-->
<input type="file" id="file"/>
</div>
<div>
버튼:
<input type="button" value="등록" id="btn"/>
</div>
</div>
<script>
const name = document.getElementById("name");
const price = document.getElementById("price");
const image = document.getElementById("image");
const file = document.getElementById("file");
const btn = document.getElementById("btn");
// 데이터를 들고와서 저장
console.log(name, price, image, file, btn); //개체 확인용
file.addEventListener('change', function(e){
//file에 대해서 이벤트 감지기 만들어라 그리고 바꼈는지 확인하여라e에 내용을 저장하여라
if (e.target.files[0]){ // 첨부함
//console.log('T'); // 확인용
image.src = URL.createObjectURL(e.target.files[0]);
//바뀐이미지로 바꿔라
}
else { //첨부하지 않음
//console.log('F'); // 확인용
image.src="./img/noimage.png"
}
console.log('change', e.target.files) //어떤 체인지인지 확인차 e기입
//e.target.files는 크롬 console에서 파일명만 가져옴
});
btn.addEventListener('click', function(e){
if(name.value === ''){
alert('왜 물품명 입력안함?')
name.focus();
return false; // 이벤트 종료 됨. 백엔드로 전송 못하도록
}
if(price.value === ''){
alert('왜 가격 입력안함?')
price.focus();
return false; // 이벤트 종료 됨.
}
//이 시점에 밴엔드로 전송할 타이밍
});
</script>
</body>
</html>
2. 폼(입력항목들)
텍스트에 id를 붙이고
스크립트에서 활용할 수 있도록하게끔함.
체크박스의 체크 유무 확인과
체크박스 배열을 만들어서, 한번에 확인하는 것을 배움
<!DOCTYPE html>
<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.html</title>
<link href="./css/style1.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<h3>form 실습</h3>
<hr />
<label>1. input type text</label>
<input type="text" id="text" />
<hr />
<label>2. input type checkbox</label>
<input type="checkbox" id="chk" />
<button id="btn1">체크상태확인용</button>
<!--3번 예제-->
<hr />
<label>3. input type checkbox array</label>
<input type="checkbox" name="chk1" /> html
<input type="checkbox" name="chk1" /> css
<input type="checkbox" name="chk1" /> javascript
<button id="btn2">체크상태확인용2</button>
<!--벨류를 넣는 이유는 자바는 체크박스에 체크해도 값을 모름-->
</div>
<script>
//const text = document.getElementById('#text');
const text = document.querySelector('#text');
//위 두개는 똑같은 말임. 태그를 찾는 것.
text.value = '추가할 값'; // 내용 추가하기
console.log(text.value); // 내용 가져오기
//중요 input type의 내용이 변경될때 반응
//ex)아이뒤 중복확인 자동반응
text.addEventListener('keyup',function(e){ //이벤트 종류, e=이벤트가 일어날을때 정보
console.log(text.value); // 내용 가져오기
});
//2번 예제 btn확인용------------------------------------------------
const chk = document.getElementById('chk');
const btn1 = document.getElementById('btn1');
btn1.addEventListener('click', function(e){
if(chk.checked === true) {
console.log('chk 체크함');
}
else {
console.log('chk 체크 안함')
}
});
//3번 예제btn 클래스or네임 -----------------------------------------
const btn2 = document.getElementById('btn2');
const chk1 = document.getElementsByName('chk1');
btn2.addEventListener('click', function(e){
console.log(chk1); // [input(0), input(01), input(2)]]
console.log(chk1[0]);
console.log(chk1[1]);
console.log(chk1[2]);
});
</script>
</body>
</html>
3. 오브젝트(테이블, 백엔드에서 정보를 받아왔을때 기입하는 방법 등등)
for문과 innerHTML로 스크립트에서 화면을 표시하게끔 만들음
ex) 요새 많이 쓰는 홈페이지를 새로고침 안해도 바뀌는 ui
문자와 변수를 같이 쓸 수 있는 템퍼릿 리터럴 Template Literal ````````````````
https://curryyou.tistory.com/185
https://velog.io/@e_juhee/Template-Literal
<!DOCTYPE html>
<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>Document</title>
<link href="./css/style1.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<h3>오브젝트 실습</h3>
<hr />
<div id = "output1">
<!--아래처럼 만들고 싶다
<p>홍길동</p>
<p>23</p>
<p>010-0000-0001</p>-->
</div>
<table border="1">
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>연락처</th>
</tr>
</thead>
<tbody id = "tbody">
</tbody>
</table>
</div>
<script>
const output1 = document.getElementById('output1');
//output1.innerHTML = "<button>추가된버튼</button>";
//위에서 설계하지않고 script에서 버튼 만드는 법
//백엔드에서 정보를 주는 방식 2가지
//const member = "홍길동, 23, 010-0000-0001"
//위에서처럼 안줌 틀릴수도 있기때문, 아래처럼 오브젝트 타입으로 백엔드에서 줌
//아래 방식은 (JSON포멧)이라고 부름 member1위에 마우스 올리면 정보 뜸
const member1 = {name:'홍길동', age: '23', phone:'010-0000-0001'};
console.log(member1.age);
console.log(member1.name);
console.log(member1.phone);
output1.innerHTML =
//'<p>홍길동</p><p>23</p><p>010-0000-0001</p>';
`<p>${member1.name}</p>` +
`<p>${member1.age}</p>` +
`<p>${member1.phone}</p>`;
//커텐실 마크 ''
//=============================================================
const tbody = document.getElementById('tbody')
// [{},{},{}] <= 회원 3명의 데이터 1개씩
const memberlist =[
{name:'홍길동1', age: '23', phone:'010-0000-0003'},
{name:'홍길동2', age: '33', phone:'010-0000-0004'},
{name:'홍길동3', age: '43', phone:'010-0000-0005'}
];
//memberlist의 배열 개수 만큼 반복하면서 tmp로 복사
for(let tmp of memberlist){
tbody.innerHTML +=
`<tr>` +
`<td>${tmp.name}</td>` +
`<td>${tmp.age}</td>` +
`<td>${tmp.phone}</td>` +
`</tr>`;
}
</script>
</body>
</html>
3.1 실습
데이터 형태를 조금 바꾸어 실습 문제를 내주심
<!DOCTYPE html>
<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>Document</title>
<link href="./css/style1.css" rel="stylesheet" />
</head>
<!--object 실습 문제입니다-->
<body>
<div class="container">
<h3>어레이 연습</h3>
<hr />
<div style='margin-bottom: 40px;' id = "output1">
</div>
<table border="1" width="200" height="100">
<thead>
<tr>
<th>코드</th>
<th>물품명</th>
<th>가격</th>
</tr>
</thead>
<tbody id = "tbody">
</tbody>
</table>
<div style='margin-top: 20px;'>
</div>
<table border="1" width="200" height="100">
<thead>
<tr>
<th>코드</th>
<th>제목</th>
<th>날짜</th>
</tr>
</thead>
<tbody id = "tbody1">
</tbody>
</table>
<script>
const data1 = {
status:200,
result:{
data:[
{no:1, title:'제목1', date:'2020-06'},
{no:2, title:'제목2', date:'2020-07'},
{no:3, title:'제목3', date:'2020-08'}
]
}
}
for(let tmp of data1.result.data){
//데이터 형태를 보고 이전 object 수업가 다른 data의 형태
tbody1.innerHTML +=
`<tr>` +
`<td>${tmp.no}</td>` +
`<td>${tmp.title}</td>` +
`<td>${tmp.date}</td>` +
`</tr>`;
}
//=========================================================================
//백엔드에서 받은 데이터를 테이블로 표시
//정보는 "코드, 물품명, 가격"
const data = {result:
[
{code:1, name:'사과', price:1230},
{code:2, name:'사과2', price:2230},
{code:3, name:'사과3', price:3230},
{code:4, name:'사과4', price:4230},
{code:5, name:'사과5', price:5230}
]
}
for(let tmp of data.result){
//데이터 형태를 보고 이전 object 수업가 다른 data의 형태
tbody.innerHTML +=
`<tr>` +
`<td>${tmp.code}</td>` +
`<td>${tmp.name}</td>` +
`<td>${tmp.price}</td>` +
`</tr>`;
}
</script>
</body>
</html>const b1 = {
userid:{user:{user1:
[
{no:3, name:'b'},
{no:33, name:'c'}
]
}
}
}
//console.log(b1.userid.user.user1[1].name)
//=======================================================
const a1 = {abc:[{user:'aaa', asdf:'KKK'}]};
const a2 = a1.abc; //[{ }]
const a3 = a2[0].asdf;
console.log(a3);
const d1 = {key:'aaa'}
console.log(d1.key); // aaa가 출력됨.
const e1 = [{key:'ccc'},{key:'bbb'}]
console.log(e1[1].key); // bbb가 출력됨배열이 어려운 문제를 몇개 내주심
비주얼 스튜디오 코드 단축키
수업 따라갈만 한거 같기도...?