본문 바로가기

분류 전체보기

 (137)
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..
JavaScript 표준 내장 객체 - Array(2) findIndex const numbers = [17,20,199,5,48] const foundIndex = numbers.findIndex(item=>itemitem>100)) // 2 const users = [ {name:'A', age: 12, email:'123@456.789'}, {name:'B', age: 15, email:'987@654.321'}, {name:'C', age: 18}, ] console.log(users.findIndex(user=> !user.email))// 2 console.log(users.findIndex(user=> user.call))// -1 - 배열 내 아이템에 콜백 테스트를 실행하여 처음으로 통과하는 요소의 인덱스를 반환합니다. - 테스트 통과 후 이후..
JavaScript 표준 내장 객체 - Array(1) length const fruits = ['Apple', 'Banana', 'Cherry'] console.log(fruits.length) // 3 - 배열 데이터의 길이를 확인할 수 있습니다. at console.log(fruits.at(1)) // banana console.log(fruits.at(-1)) // cherry - 배열의 인덱스를 확인할 수 있습니다. - 0부터 length-1까지 인덱싱할 수 있으며, 음수 입력시 역순으로 인덱싱합니다. 이 경우에는 -1부터 -length 값을 입력하여 사용합니다. concat const item1 = ['Apple','Banana','Cherry'] const item2 = ['Cherry', 'Durian'] const item3 = item1.c..
JavaScript 표준 내장 객체 - Date Date 클래스 호출 let date = new Date() console.log(date) let date2 = new Date(2024,11,16,17,23,11) - Date(날짜) 표준 내장 객체를 사용하기위해 Date 클래스를 먼저 선언합니다. - 기본값을 설정한 클래스를 출력 시 현재 시간을 출력합니다. - Date 클래스에 인수를 입력하여 특정 타임스탬프를 담아놓을 수 있습니다. Date 내 메서드 console.log(date.getFullYear())// 년 console.log(date.getMonth())// 월 (0~11) console.log(date.getDate())// 일 console.log(date.getDay())// 요일 (0~6) console.log(date.get..

티스토리툴바