JavaScript
문서객체
•
캐스팅 : 문서객체 생성
•
엘리먼트 삭제, 부모객체.removeChild(자식 객체) 관련 내용
<script>
// 엘리먼트 삭제
// 부모객체.removeChild(자식 객체)
document.addEventListener('DOMContentLoaded', () => {
// 부모
// const div = document.querySelector('div')
// const h3 = document.querySelector('div > h3')
// div.removeChild(h3)
const delBtn = document.querySelector('div > input[type=button]')
// delBtn.onclick = (event) => {
// const div = document.querySelector('div')
// const h3 = document.querySelector('div > h3')
// div.removeChild(h3)
// }
delBtn.addEventListener('click', () => {
const div = document.querySelector('div')
const h3 = document.querySelector('div > h3')
div.removeChild(h3)
})
})
function delEl() {
const div = document.querySelector('div')
const h3 = document.querySelector('div > h3')
div.removeChild(h3)
}
</script>
<body>
<div>
<h3>삭제 대상</h3>
<p>내용을 설명합니다.</p>
<input type="button" style="color: red" value="삭제">
<!-- <input type="button" onClick="delEl()" style="color: red" value="삭제"> - 고전 방식 -->
</div>
</body>
JavaScript
복사
•
키보드 이벤트 적용
<script>
// 키보드 이벤트
// keydown : 키가 눌릴때 발생을 함
// keypress : 키가 입력될 때 x
// keyup: 키가 떨어질 때 m
document.addEventListener('DOMContentLoaded', () => {
const textarea = document.querySelector('textarea')
textarea.addEventListener('keyup', (event) => {
const str_len = event.currentTarget.value.length // currentTarget: 이벤트가 발생한 대상을 가리킴
const span_cnt = document.getElementById('cnt') // 글자 수 제한
span_cnt.textContent = str_len
if (str_len > 100) {
alert('100글자 까지 작성이 가능합니다.')
}
})
</script>
<body>
<!-- 글자 수 -->
<h1><span id="cnt"></span> / 100</h1>
<textarea cols="20" rows="10">
</textarea>
</body>
JavaScript
복사
•
선택 항목 적용
<script>
const select = document.querySelector('Select')
const h2_print = document.querySelector('h2.print')
select.addEventListener('change', (event) => {
const options = event.currentTarget.options
const index = event.currentTarget.options.selectedIndex
h2_print.textContent = `선택 항목 : ${options[index].textContent}`
})
</script>
<body>
<h2 class="print"></h2>
<!-- 선택, 위치값을 가지고 구분 -->
<select>
<option>HTML5</option>
<option>CSS</option>
<option>javascript</option>
<option>jquery</option>
<option>react.js</option>
</select>
</body>
JavaScript
복사
•
radio button 적용
<script>
const h3_output = document.getElementById('output')
const radios = document.querySelectorAll('[name=lang]')
// 모든 radio에 이벤트 연결
radios.forEach((radio) => {
// 이벤트 연결
radio.addEventListener('change', (event) => {
const current = event.currentTarget.radio
if (current.checked) {
h3_output.textContent = `선택 언어 : ${current.value.checked}`
}
})
})
</script>
<body>
<h3>관심 있는 언어를 선택하세요!</h3>
<input type="radio" name="lang" value="JAVA" checked> <span>JAVA</span>
<input type="radio" name="lang" value="HTML5"> <span>HTML5</span>
<input type="radio" name="lang" value="Javascript"> <span>Javascript</span>
<h3 id="output">선택 언어 : JAVA</h3>
</body>
JavaScript
복사
•
todo list
◦
카운트 변수를 활용하여 삭제 기능 적용
▪
삭제 대상 → div
▪
const key = keyCount++
◦
checkbox, button 이벤트 처리
◦
할일 추가 후 커서가 텍스트박스에 위치하도록 focus() 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js_todo</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 캐스팅
const input_newTodo = document.querySelector('#newTodo')
const add_Btn = document.querySelector('#addBtn')
const todoList = document.querySelector('#todoList')
// 카운트 변수
let keyCount = 0
add_Btn.addEventListener('click', () => {
if (input_newTodo.value.trim() === '') {
alert('할일을 입력해주세요!!!')
return
}
// alert(input_newTodo.value.trim())
// div > checkbox, span, button
const div_new = document.createElement('div')
const key = keyCount++
div_new.setAttribute('data-key', key)
// checkbox
const checkbox = document.createElement('input')
checkbox.type = 'checkbox'
// checkbox 이벤트 처리
checkbox.addEventListener('change', (event) => {
div_new.style.textDecoration = event.currentTarget.checked ? 'line-through' : ''
})
// span
const span_todostr = document.createElement('span')
span_todostr.textContent = input_newTodo.value
// button
const button_del = document.createElement('button')
button_del.textContent = '할일 삭제'
// button 이벤트 처리
button_del.addEventListener('click', (event) => {
// 삭제 대상 - > div
const div_del = document.querySelector(`[data-key="${key}"]`)
todoList.removeChild(div_del)
})
div_new.appendChild(checkbox)
div_new.appendChild(span_todostr)
div_new.appendChild(button_del)
todoList.appendChild(div_new)
input_newTodo.value = ''
input_newTodo.focus() // 할일 추가 후 커서가 텍스트박스에 위치함
})
})
</script>
</head>
<body>
<!-- 사용자가 할일을 입력하면 리스트에 추가 -->
<h1>Todo List</h1>
할일 추가 :
<input type="text" id="newTodo">
<button id="addBtn">할일 추가</button>
<hr>
<div id="todoList"></div>
</body>
</html>
JavaScript
복사
•
class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js_class</title>
<script>
// 객체 => {}
// 객체를 생성하기 위한 틀 =>
// new 틀() => 틀에서 정의된 변수나 함수로 이루어진 객체 생성
// class 클래스 이름 { 변수, 함수 } => new 클래스이름()
let obj_student = {
name: '손흥민',
sno: '21145712',
major: '컴퓨터'
}
class Student {
constructor(name, sno, major) {
this.name = name
this.sno = sno
this.major = major
}
}
let student1 = new Student();
console.log(typeof (student1)) // object
const students = [
new Student('son', '111', 'computer'),
// => {name: '', sno: '', major: ''}
new Student('son', '123', 'computer'),
new Student('son', '123', 'computer')
]
console.log(students)
// students.push( new Student('son', '111', 'computer'))
// local_storage: 데이터에 브라우저를 저장하고 관리해주는 곳
// getItem : 키값으로 불러옴
// setItem : local_storage에 저장
let saved_data = localStorage.getItem('members')
console.log('saved_data', saved_data)
//if (saved_data == null) {
localStorage.setItem('members', 'members List')
localStorage.removeItem('members')
//}
</script>
</head>
<body>
</body>
</html>
JavaScript
복사