HTML, CSS, Javascript 썸네일형 리스트형 [Javascript] HTML form 새로고침 없이 데이터 보내는 법 개요간단한 로그인 기능을 구현할 때 form 태그를 사용하면 버튼 클릭 시 페이지가 새로고침되는 문제가 발생할 수 있다. 이로 인해 입력한 값이 사라지거나 원하는 동작이 실행되지 않을 수 있습니다. form 태그가 새로고침을 유발하는 이유와 이를 막는 방법에 대해 알아보자. 목차form 태그새로고침 발생하는 이유새로고침 막는 방법 form 태그form 태그는 HTML에서 사용자 입력을 서버로 전송하기 위한 영역을 정의하는 태그이다. 주로 로그인, 회원가입, 검색 등의 입력 데이터를 다룰 때 사용된다. form 사용 예 로그인 새로 고침이 발생하는 이유 form 태그에서 혹은 요소를 클릭하면, 브라우저는 기본적으로 폼 데이터를 action에 지정된 경로로 전송하고 페이지를 .. 더보기 [Javascript] 자식 요소 개수 구하기 목차1. childElementCount2. children.length3. 두 속성의 차이점 1. childElementCount특정 요소의 직속 자식 요소의 수를 반환한다. 사용 방법은 다음과 같다.const parent = document.getElementById("parent");console.log(parent.childElementCount); 사용 예제 안녕하세요. ⚠️ 주의 :1. 직속 자식의 수를 구하는 것이므로, 요소의 갯수는 포함되지 않는다. parent의 직속 자식인 child만 카운팅된다.2. 텍스트 노드(안녕하세요.)와 주석은 카운팅되지 않는다. 2. children.leng.. 더보기 [Javascript] JS 이벤트 시스템, 어떻게 작동할까? 개요Javascript는 사용자와의 상호작용을 감지하고 반응하기 위해 이벤트(Event)를 사용한다. 우리가 클릭을 하거나, 키보드를 누르거나, 스크롤을 내리는 모든 동작은 브라우저에서 "이벤트"로 감지되고, 자바스크립트가 이를 처리한다. 목차1. 이벤트란 무엇인가? 정의와 예시브라우저와 자바스크립트의 역할2. 이벤트 리스너(Event Listner)의 등록 방식 addEventListener vs HTML 속성(onclick 등)이벤트 제거 방법3. 이벤트 흐름(Event Flow) 캡처링(Capturing) → 타깃(Target) → 버블링(Bubbling)useCapture 옵션의 의미4. 이벤트 객체(Event Object)주요 속성: target, currentTarget, type, pr.. 더보기 [Javascript] DOM(The Document Object Model) 개요브라우저에는 웹 문서를 해석할 수 있는 랜더링 엔진이 있다. 랜더링 엔진은 HTML 파일을 할 줄 한 줄 해석한다. 해석이 완료되면 웹 문서를 객체화(Document Object Model)하여 자바스크립트에서 접근할 수 있게 해준다. 문서를 객체화(DOM)한다는게 무엇일까? DOMDOM은 두 가지 의미가 있다. 하나는 HTML 문서의 트리 구조(실체)이고 다른 하나는 그 구조를 만들고 조작하는 데 필요한 API와 규칙을 정의한 표준 명세(설계도)가 있다. 혼동하지 않도록 한다. DOM 구조(실체)문서 객체 모델(Document Object Model, 이하 DOM)이라고 한다.DOM은 HTML 코드를 자바스크립트가 다룰 수 있게 객체화 한 것이다.Tree 구조를 갖는다. (DOM Tree)예.. 더보기 [Javascript] 요소를 붙이는 다양한 방법 append(요소, 요소..) :마지막 자식으로 요소(노드)가 추가된다. 여러 노드나 텍스트도 한 번에 추가할 수 있다.appendChild보다 유연하다.더보기 appendChild(요소) :부모 요소(노드)의 마지막 자식으로 새 요소(노드)를 추가한다.텍스트 추가하면 오류가 발생한다.append()와 달리 하나의 요소만 추가할 수 있다.추가된 노드를 반환한다.더보기 다른 메서드들은 콘솔 찍을 시, undefined가 뜬다. prepend(요소, 요소..) :첫 번째 자식으로 요소(노드)를 추가한다.여러 노드나 텍스트도 한 번에 추가할 수 있다.더보기 insertBefore(새 노드, 참조 노드) :기존 요소 앞에 새로운 요소를 삽입한다.더보기 .. 더보기 [Javascript] HTML 문서에 새 요소 붙이는 방법 HTML 문서에 새 요소를 붙이는 방법은 Javascript로 구현할 수 있다.우선, 새 요소를 생성한다.부모 요소를 찾는다.새 요소를 부모 요소에 붙여준다. index.html :더보기 parent id를 갖는 div 태그 자식 요소로 추가한다. 새 요소 생성, document.createElement(요소) :DOM에서 새 HTML 요소를 javascript로 생성할 때 사용한다.더보기const child = document.createElement("div");div 요소를 만들어 준다. const img = document.createElement('img');img.src = 'image.jpg';img.alt = '설명 텍스트';img.style.width = '100px';.. 더보기 [Javascript] addEventListner로 이벤트 적용하기 addEventListner :HTML 요소에 이벤트를 감지해서 어떤 동작을 실행하도록 설정할 때 사용한다.element.addEventListener(event, function, useCapture);element: 이벤트를 감지할 HTML 요소이다. (예: 버튼, 문서 전체 등)event: 감지할 이벤트 종류이다. (예: "click", "keydown", "mouseover" 등)function: 이벤트가 발생했을 때 실행할 함수이다.useCapture (선택): true 또는 false – 이벤트 전파 설정 단계이다. (일반적으로는 생략하거나 false) event 객체 : 이벤트가 발생했을 때, 브라우저가 자동으로 함수에 매개변수 형태로 전달해주는 객체(parameter)이다. 이 객체.. 더보기 [Javscript] 태그 요소 가져오는 방법 document.getElementsByName(name) :body 내의 특정 name 속성을 가진 모든 요소들을 찾을 수 있다. 📦 반환값 :NodeList(정확히는 NodeListOf)를 반환한다.이 NodeList는 배열처럼 생겼지만 진짜 배열은 아니며, 반복은 가능하지만 .forEach나 length, 인덱스 접근만 지원한다.name 속성을 가진 모든 요소들을 포함한다.더보기 document.getElementById(ID) :HTML 문서 안에서 특정 id(고유한 값) 값을 가진 요소 하나를 가져온다. 📦 반환값 : 해당 id 값을 가진 하나의 요소(Element) 를 반환한다.만약 해당 id를 가진 요소가 없다면 null을 반환한다.id는 문서 .. 더보기 이전 1 2 다음
