[JavaScript] 자바스크립트 이벤트(Event)

이벤트(Event)란? 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다. 이벤트 타입 // 마우스 클릭 이벤트 예시 여길 클릭하세요! 발생한 이벤트의 종류 (폼, 키보드, 마우스, HTML DOM, Window객체 등) 이벤트 핸들러 // 이 함수는 HTML 문서가 로드될 때 실행됨. window.onload = function() { // 아이디가 "text"인 요소를 선택함. var text = document.getElementById("text"); text.innerHTML = "HTML 문서가 로드되었습니다."; } 이벤트가 발생했을 때 그 처리를 담당하는 함수 지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록..

• format_list_bulleted Front-End
• · 2023. 3. 9.
• textsms

[JavaScript] Node 객체

노드(Node) 와 노드 트리 HTML DOM 에서 정보를 저장하는 계층적 단위 노드 트리는 노드들의 집합으로, 노드 간의 관계를 나타낸다. 자바스크립트에서는 HTML DOM 을 이용해 노드 트리에 포함된 모든 노드에 접근할 수 있다. 노드 간의 관계 노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있다. 루트 노드 : HTML ( HEAD, BODY의 부모 노드 ) 첫 번째 자식 노드 : HEAD 두 번째 자식 노드 : BODY 형제 노드 관계 : HEAD 와 BODY 노드의 종류 문서 노드 HTML 문서 전체를 나타내는 노드 요소 노드 모든 HTML 요소가 해당하며, 속성 노드를 가질 수 있는 유일한 노드 주석 노드 HTML 문서의 모든 주석은 주석 노드 속성 노드 모든 HTML 요소의 속성은 속성..

• format_list_bulleted Front-End
• · 2023. 3. 8.
• textsms

[JavaScript] DOM (문서객체 모델)

DOM 이란? 문서 객체 모델 ( Document Object Model ) 객체 지향 모델로써 구조화된 문서를 표현하는 방식 XML 이나 HTML 문서의 프로그래밍 인터페이스를 제공 문서의 구조화된 표현 (structured representation) 을 제공해서 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다. DOM의 종류 Core DOM 모든 문서 타입을 위한 DOM 모델 HTML DOM HTML 문서를 위한 DOM 모델 HTML 문서를 조작하고 접근하는 표준화된 방법 모든 HTML 요소는 HTML DOM을 토해 접근 가능 XML DOM 문서를 위한 DOM 모델 XML 문서에 접근하여 그 문서를 다루는 표준화된 방법을 정의 모든 XML 요소는 XML DOM을 통해 접근 ..

• format_list_bulleted Front-End
• · 2023. 3. 8.
• textsms

[WEB] 웹을 구성하는 요소

프로그래밍이란? 컴퓨터와 소통하는 방법을 의미 컴퓨터에게 전달하는 정보를 어떻게 보여주고 제어할지 결정 가능 웹 개발을 하기 위한 언어로 브라우저와 소통 HTML, CSS, JavaScript HTML : 정보 또는 설계도 CSS : 디자인 또는 스타일링 JavaScript : 기능과 효과 웹사이트 제작 시 고려 사항 웹 표준 : 웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격 웹 접근성 : 장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식 크로스 브라우징 : 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms

[JavaScript] 기본 구조, 문법 정리

'Hello world!' 문자(String) 데이터 123 숫자(Number) 데이터 true / false 불린(Boolean) 데이터 null Null 데이터 { } { 키1: 값1, 키2: 값2 } 객체(Object) 데이터 Key: Value 형태로 데이터 저장 const user = { name: 'Heropy', age: 85 } console.log(user.name) console.log(user['name']) 점 표기법 혹은 대괄호 표기법으로 데이터를 사용 [ ] [값1, 값2, 값3] 배열(Array) 데이터 데이터를 나열해서 저장 const fruits = ['Apple', 'Banana'] console.log(fruits[0]) console.log(fruits[1]) 대괄호 ..

• format_list_bulleted Front-End
• · 2023. 1. 11.
• textsms

[JavaScript] setInterval() 함수

setInterval() setInterval() 메서드는 반복적으로 함수를 호출하거나 코드 snippet을 실행한다. 이 함수는 각각의 interval을 구분해주는 interval ID를 반환하므로, clearInterval() 함수 호출을 통해 제거할 수 있다. Syntax setInterval(code) setInterval(code, delay) setInterval(func) setInterval(func, delay) setInterval(func, delay, arg0) setInterval(func, delay, arg0, arg1) setInterval(func, delay, arg0, arg1, /* ... ,*/ argN) 반환 값 반환하는 intervalID 는 양의 정수로써 set..

• format_list_bulleted Front-End
• · 2023. 1. 4.
• textsms