2024/07/06 3

이벤트(Events) - javascript 기본

Javascript EventEvent란?Event는 웹 페이지에서 발생하는 모든 일을 의미한다.사용자가 버튼을 클릭하거나, 텍스트를 입력하거나, 마우스를 움직이는 등의 모든 행위를 의미한다.이벤트는 브라우저에서 발생하는 것이기 때문에 브라우저에서만 사용할 수 있다.간단한 예제버튼을 클릭하면 target의 글자색이 빨간색으로 바뀌는 예제를 만들어보겠습니다.change colorHelloconst button = document.querySelector('button');const target = document.querySelector('#target');button.addEventListener('click', () => { target.style.color = 'red';});Event 종류HT..

Front/JavaScript 2024.07.06

DOM - javascript 기본

DOM(Document Object Model)JS HTML DOM : https://www.w3schools.com/js/js_htmldom.asp1. DOM이란?DOM은 HTML 문서를 객체로 표현한 것으로,자바스크립트를 이용해 HTML 문서를 제어할 수 있게 해준다.const h1El = document.querySelector('h1');console.log(h1El.textContent);2. Node vs Element(요소)Node(노드) : HTML 요소, 텍스트, 주석 등 모든 것을 의미한다.Element(요소) : HTML 요소를 의미한다.Node는 Element의 상위 개념이다. 1 text1 2 text2const container ..

Front/JavaScript 2024.07.06

비동기(Async) - javascript 기본

동기(Synchronous)와 비동기(Asynchronous)01. 개요- 동기 처리동기 처리란, 작업을 순차적으로 처리하는 것을 말한다.자바스크립트 코드는 기본적으로 동기적으로 처리된다.동기적으로 처리되는 코드는 위에서부터 아래로 순차적으로 실행되며, 어떤 작업이 끝나야 다음 작업을 수행할 수 있다.하지만, 동기적으로 처리되는 코드는 작업이 끝날 때까지 다른 작업을 수행할 수 없다는 단점이 있다.은행에서 번호 순서대로 업무를 처리하는 것, 순차적으로 처리되는 것console.log('은행 1번 번호표 업무 시작');console.log('은행 1번 번호표 업무 끝');console.log('은행 2번 번호표 업무 시작');console.log('은행 2번 번호표 업무 끝');- 비동기 처리비동기 처리란..

Front/JavaScript 2024.07.06
티스토리 친구하기