본문 바로가기

자바스크립트

(33)
JavaScript DOM - 크기와 좌표 사용하는 기본 html, js, css 파일 index.html 사과 바나나 체리 텍스트 1 텍스트 2 기본 main.js const parentEl = document.querySelector('.parent') const childEl = document.querySelector('.child') style.css // style.css body{ width: 3000px; height: 3000px; } .parent{ width: 300px; height: 200px; margin-top: 100px; margin-left: 50px; padding: 20px; overflow: auto; border: 10px solid; } .child{ height: 100px; margin-bottom: ..
JavaScript DOM - 생성,조회,수정 (2) classList const el = document.querySelector('.child') el.classList.add('active') console.log(el.classList.contains('active')) el.classList.remove('active') console.log(el.classList.contains('active') el.addEventListener('click', ()=>{ el.classList.toggle('active') console.log(el.classList.contains('active')) }) - 요소의 class 속성을 제어합니다. - contain() 메서드를 사용하여 클래스의 존재 유무를 확인할 수 있습니다. - add(), remove(..
JavaScript DOM - 생성, 조회, 수정 사용되는 index.html 사과 바나나 체리 텍스트 1 텍스트 2 요소의 생성 createElement const divEl = document.createElement('div') divEl.textContent = 'hello World' divEl.classList.add('box') console.log(divEl) - HTML 요소를 메모리상에 생성하여 반환합니다 - 화면에는 적용되지 않지만, 콘솔에는 출력됩니다. 요소의 삽입 prepend, append, appendChild const parentEl = document.querySelector('.parent') const divEl = document.createElement('div') divEl.textContent = 'hello ..
JavaScript DOM - 요소(Element)와 노드(Node) DOM 이란? 사과 바나나 체리 텍스트 1 텍스트 2 - Document Object Model - HTML 문서를 객체로 표현한 것이며, JS를 사용하여 제어할 수 있게 합니다. 노드(Node) - 요소, 텍스트, 주석 등의 각 구조를 의미합니다. 요소(Element) - 노드의 하위 객체로 요소를 의미합니다. 요소의 검색 - querySelector const parentEl = document.querySelector('.parent') console.log(parentEl) const els = document.querySelectorAll('.child') console.log(els) console.log(els[0],els[1],els[2]) - querySelector와 querySelec..
JavaScript 표준 내장 객체 - JSON JSON이란? - JavaScript Object Notation, 데이터 전달을 위한 표준 데이터 포맷입니다. - 문자, 숫자, 불린, Null, 객체, 배열만 사용할 수 있습니다. - 함수나 undefined는 사용할 수 없습니다. - 문자는 큰 따옴표만 사용할 수 있으며, 후행 쉼표는 사용 불가합니다. - .json 확장자를 가진 파일을 사용 가능합니다. // test.json const user_json = { "name" : "A", "age" : 15, "isValid": true, "emails":["123@456.789" , "987@654.321"] } // main.js const user_obj = { name : 'A', age : 15, isValid: true, emails:['..
JavaScript 표준 내장 객체 - Object assign const target = {a:1, b:2} const source1 = {b:3, c:4} const source2 = {c:5, d:6} console.log(target) const result = Object.assign(target,source1,source2) console.log(target) console.log(result) - 하나 이상의 '출처객체(Source)'로부터 '대상객체(Target)'으로 속성을 복사하고 대상객체를 반환합니다. - 즉, Source의 값을 Target에 복사하여 합치며, 중복된 값은 덮어씌웁니다. - Target은 변경되지만, Source는 변경되지 않습니다. keys const user_obj = { name: 'A', age: 25, ema..
JavaScript 표준 내장 객체 - Array(4) splice const fruits_list = ['Apple','Banana','Cherry'] fruits_list.splice(2,0,'Durian') // 2번째 인덱스에서 0개만큼 지우고, Durian을 추가한다. console.log(...fruits_list) const fruits_list2 = ['Apple','Banana','Cherry'] fruits_list2.splice(1,1)// 1번째 인덱스에서 아이템을 하나만 지운다. console.log(...fruits_list2) const fruits_list3 = ['Apple','Banana','Cherry'] fruits_list3.splice(1,1,'Durian','Orange','Mango') // 1번째 인덱스에서 아이템..
JavaScript 표준 내장 객체 - Array(3) reverse const fruits1 = ['Apple','Banana','Cherry'] console.log(...fruits1) console.log(...fruits1.reverse()) console.log(...fruits1.reverse()) console.log('원본이 바뀌지 않는 방법') const fruits2 = ['Apple','Banana','Cherry'] console.log(...[...fruits2].reverse()) console.log(...fruits2) - 배열의 순서를 반전시켜 반환합니다. - 원본을 바꾸므로 주의해야 합니다. - [...Array] 의 형식으로 복사본을 만들면 원본을 바꾸지 않고 사용할 수 있습니다. slice const numbers_arr..