2024. 6. 20 - JavaScript

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
복사

2024. 6. 20 - JavaScript

JavaScript

문서객체

기타