본문 바로가기

분류 전체보기

 (137)
JavaScript 모듈 모듈화란   - 각각의 기능을 하는 함수들의 집합 파일을 모듈이라고 합니다.   - 많은 기능을 추가하여 길어진 코드를 각각의 기능을 가진 모듈로 분리하여 합치는것을 모듈화라고 합니다.    가져오기 (import)calculator.js main.jsimport {add,sub} from './calculator.js'console.log(add(1,3))console.log(sub(4,1)) index.html   - import {가져오고자 하는 요소} from '경로' 의 형식으로 경로 모듈의 요소를 가져올 수 있습니다.   - import * from '경로' 의 형식으로 경로 모듈에 존재하는 모든 값을 가져올 수 있습니다.   - html에 연결된 main 스크립트에 type = 'module..
JavaScript - 선택적 체이닝(Optional chaining) 선택적 체이닝( optional chaining : 옵셔널 체이닝 ) 이란?console.log(null.abc) // 에러 발생console.log(undefined.abc) // 에러 발생// 위의 코드를 변경하여 옵셔녈 체이닝 사용console.log(null?.abc) // undefined 출력console.log(undefined?.abc) // undefined 출력const numbers = nullconsole.log(numbers?.[0])const user = { name: 'Neo', age: 22,}console.log(user.name)console.log(user.age)console.log(user?.email)   - 대괄호 또는 점 표기법의 대상이 null이..
JavaScript 구조 분해 할당 구조 분해 할당   - 배열데이터와 객체 데이터를 각자의 데이터로 분해하여 할당시키는 방법입니다.   - 데이터의 순서를 변경하거나, 일부만 추출할 때 사용합니다.    배열구조 분해할당const numbers = [1,2,3]let a = numbers[0]let b = numbers[1]let c = numbers[2]console.log(a,b,c) // 1,2,3let d,e,f[d,e,f] = numbersconsole.log(d,e,f) // 1,2,3let g,h,i[h,i,g] = numbersconsole.log(g,h,i) // 3,1,2const numbers2 = [,,5]let [x=2,y,z] = numbers2con..
JavaScript 이벤트 - 이벤트 전파 이벤트 버블링 const parentEl = document.querySelector('.parent') const childEl = document.querySelector('.child') const anchorEl = document.querySelector('a') window.addEventListener('click', ()=>{ console.log('Window') }) document.documentElement.addEventListener('click', ()=>{ console.log('HTML') }) document.body.addEventListener('click', ()=>{ console.log('Body') }) parentEl.addEventListener('click..
JavaScript 이벤트 이벤트   - 특정한 상황에 따라 원하는 동작을 실행시킬 수 있는 기능입니다.   - 클릭, 키다운, 드래그 등의 다양한 이벤트를 설정할 수 있습니다.    이벤트 등록/제거addEventListenerconst parentEl = document.querySelector('.parent')const childEl = document.querySelector('.child')parentEl.addEventListener('click', ()=>{ console.log('Parent')})childEl.addEventListener('click',()=>{ console.log('Child')})   - 이벤트를 등록하면서, 발생한 이벤트의 정보..
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 ..

티스토리툴바