오전
키보드 event
keydown: 모든 키가 눌렸을 때 실행, 눌린 키의 코드 제공
keypress: 문자, 숫자, 기호 등 출력 가능한 키가 눌렸을 때 실행
keyup: 눌렸던 키가 놓아졌을 때
수업 들으면서 헷갈린 함수,속성 정리
- innerHTML : innerText 와는 달리 요소(element) 안의 HTML 을 가져옴
- innerText : 요소 안의 text 값들만을 가져온다.
- element.value : value값을 불러올 수 있다.
- .target : 이벤트가 발생한 요소를 반환해준다
- Array.from() : 유사배열을 배열로 형변환 시켜서 만들어준다
// 1. 문자열을 배열로 만드는 예시
console.log(Array.from("Hello"));
// [ 'H', 'e', 'l', 'l', 'o' ]
// 2. 유사 배열 객체를 배열로 만드는 예시
console.log(Array.from({ 0: "찬민", 1: "희진", 2: "태인", length: 3 }));
// [ '찬민', '희진', '태인' ]
// 3. 함수의 매개변수들을 순서대로 배열로 만드는 예시
const funcA = (...arguments) => {
return Array.from(arguments)
}
- querySelectorAll() : html 문서에서 모든 지정 요소를 찾는다
classlist :
classList는 JavaScript에서 노드의 클래스를 다룰 수 있도록 제공되는 기능이에요. 클래스를 하나만 조작할 수 있으며 add, remove, contains, toggle등의 함수를 사용할 수 있음.
오늘 풀어본 문제 해석해보기
<body>
<form action="" name="joinForm" onsubmit="return false">
<input name="username" placeholder="이름을 입력하세요">
<input name="age" placeholder="나이를 입력하세요">
<input name="address" placeholder="주소를 입력하세요">
<button class="btn">입력</button>
</form>
<hr>
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
<th>삭제</th>
<th>수정</th>
</tr>
// form의 기본기능은 비활성화합니다
//입력버튼을 눌렀을때 table의 tbody에 입력된 (이름/나이/주소/삭제버튼)이 생성될수 있도록합니다
//입력된 노드의 이름/나이/주소를 수정할수 있도록합니다.
//특정행의 삭제버튼을 클릭했을때 해당 행이 삭제 될수 있도록 합니다.
//특정행의 위치를 위로이동/아래로 이동이 가능하도록 합니다(나중에)
//버튼 이벤트 처리
const btnEl = document.querySelector('.btn')
btnEl.addEventListener('click', function () {
console.log('clicked...!')
const form = document.joinForm;
if (!isValid(form)) { //반환값을 반대로 만듬 form이 true라면 반전해서 fasle 를 반환 false 라면 작업을 종료시키고 싶을 때 사용
return ; //작업을 종료한다는 뜻임 isValid가 true라면 여기서 false니까 밑에 함수 코드들을 계속 실행해서 테이블을 만듬
} //근데 false 라면 true 가 되어서 return; = 종료한다는 뜻으로 그냥 함수가 alert가 뜬 다음 함수가 바로 종료됨
const username = form.username.value; // input 입력한 값을 찾아줌
const age = form.age.value
const address = form.address.value;
createNode(username, age, address) //createNode 라는 함수를 호출 !
form.username.value = '' //위의 함수가 끝나고 나면 input들의 value값을 '' = 즉 빈 값으로 초기화해줌
form.age.value = ''
form.address.value = ''
})
//유효성검사 함수(Validation Check )
function isValid(form) {
// if(form.username.value.trim()===""){ // trim으로 공백같은 문자열 없애줌
// alert('username을 입력하세요..') // username이 공백이라면 alert 가 뜬다
// return false; // 그리고 false 반환
// }
// if(form.age.value.trim()===""){
// alert('age을 입력하세요..')
// return false;
// }
// if(form.address.value.trim()===""){
// alert('adress을 입력하세요..')
// return false;
// }
return true; //아니면 true 반환
}
//노드생성 함수
isEdited = []; //각 요소의 idx는 추가되는 tr의 순서번호
function createNode(username, age, address) {
const tblBodyEl = document.querySelector('table tbody') //table 태그 안 tbody태그 참조
const trEl = document.createElement('tr'); //tr 태그 생성
const td1El = document.createElement('td'); //td태그 생성
const td2El = document.createElement('td');
const td3El = document.createElement('td');
const td4El = document.createElement('td');
const td5El = document.createElement('td');
const in1 = document.createElement('input')
in1.value = username
in1.readOnly = true;
const in2 = document.createElement('input')
in2.value = age;
in2.readOnly = true;
const in3 = document.createElement('input')
in3.value = address
in3.readOnly = true;
in3.setAttribute('style', 'width:90%;')
const delBtn = document.createElement('span')
delBtn.innerHTML = 'delete'
delBtn.setAttribute('style', 'cursor:pointer;display:block;')
delBtn.addEventListener('click', () => {
console.log('clicked!!!')
const parent = delBtn.parentNode.parentNode //span의 부모 td , td의 부모 tr
parent.remove() //tr삭제
})
const editBtn = document.createElement('span')
editBtn.innerHTML = 'edit'
editBtn.setAttribute('style', 'cursor:pointer;display:block;')
isEdited.push(false);
editBtn.setAttribute('data-id',isEdited.length-1)
editBtn.addEventListener('click', () => {
console.log('clicked!!!')
const parent = editBtn.parentNode.parentNode;
const inputEls = parent.querySelectorAll('input')
console.log(inputEls)
const id=editBtn=editBtn.getAttribute('adta-id')
isEdited[id]=!isEdited[id];
if(isEdited[id]){
inputEls.forEach(el=>el.readOnly-false)
}else{
inputEls.forEach(el=>el.readOnly-ture)
}
// inputEls.forEach(el=>el.readOnly=false)
})
td1El.appendChild(in1)
td2El.appendChild(in2)
td3El.appendChild(in3)
td4El.appendChild(delBtn)
td5El.appendChild(editBtn)
//-------------------------------------------
trEl.appendChild(td1El) //trE1 = tr 안에 tdlEl = td 요소를 추가
trEl.appendChild(td2El)
trEl.appendChild(td3El) //다 마찬가지
trEl.appendChild(td4El)
trEl.appendChild(td5El) //수정 버튼
tblBodyEl.appendChild(trEl) //순서가 밑에있긴 한데 관계없고 tbody 안에 tr태그를 생성해줌
// isEdit
isEdited.push(false);
console.log(isEdited)
}일단 테이블 생성까지만 해석한 상태.. 수정,삭제 버튼은 좀 시간 생기면 따로 해석해보자 ㅠㅠㅠ
<a href="javascript:void(0)" class="btn1">예약실행</a> //javascript:void(0)
\페이지가 바뀌면서 이동을 하지않게 하고 싶다
로깅도 중요하긴 한데 빨리 css 과제 완성해야 하는디..
'Developer Note > 국비과정 수업내용 정리&저장' 카테고리의 다른 글
| 24년 09월 06일 (0) | 2024.09.08 |
|---|---|
| 24년 09월 05일 (1) | 2024.09.08 |
| 24년 09월 03일 (0) | 2024.09.05 |
| 24년 09월 02일 (0) | 2024.09.02 |
| 24년 08월 30일 (2) | 2024.09.01 |