본문 바로가기

분류 전체보기

 (354)
JS 이벤트 처리 - 3 ( forms ) 시나리오 코드 1 배송지 입력 이름 : 연락처 : check 배송지 입력2 ..
JS 이벤트 처리 - 2 ( addEventListener ) addEventListener() 메서드의 활용 - 아이템 추가, 토글 기능 만들기 EventListener를 사용한 요소 추가, 삭제 수정, 토글 만들기 아이템 추가 리스트 토글 아이템 1 수정하기 삭제하기     2. 이벤트 위임(Event Delegation)이벤트 리스너를 하위 요소 개별적으로 달지 않고, 상위 요소에서 하나의 리스너로 모든 하위 요소의 이벤트를 관리하는 패턴이다. 이 패턴은 주로 동적으로 요소가 변경될 때 유용하다.원리브라우저에서 이벤트는 대상 요소에서 발생하며, 이후 상위 요소로 버블링(bubbling)..
JS 이벤트 처리 - 1 ( 기본 ) 1. HTML 요소에 이벤트 등록하기자바스크립트 이벤트는 웹 페이지에서 발생하는 다양한 동작이나 발생 상황을 나타낸다. 이런 이벤트를 활용하여 사용자의 행동에 반응하는 동적인 웹 페이지를 만들 수 있다. 예를 들어, 사용자가 버튼을 클릭할 때 메시지가 나타나게 하거나, 마우스를 웹 페이지의 특정 부분에 올렸을 때 스타일이 변경되게 할 수 있다.  이벤트를 활용하려면, 먼저 HTML 요소에 이벤트를 등록해야 한다.이벤트 등록에 대표적인 3가지 방식Inline Event Handler : HTML 요소 내부에 직접 이벤트를 등록한다.Element Property : 자바스크립트에서 HTML 요소의 프로퍼티로 이벤트를 등록한다.addEventListener() 메서드 : 가장 권장되는 방식으로, 여러 이벤트 ..
JS - 점검 6 ( 웹 페이지 렌더링 과정 ) 1. 웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자웹 페이지를 렌더링하는 과정은 대체로 다음의 순서로 이루어진다.HTML 파싱 (Parsing): 브라우저가 HTML 문서를 받아들이면, 이를 파싱하여 DOM Tree를 생성한다.CSS 파싱 (Parsing): 브라우저가 CSS를 파싱하여 CSSOM Tree를 생성한다.렌더 트리 (Render Tree) 생성: DOM Tree와 CSSOM Tree를 결합하여 렌더 트리를 생성한다.레이아웃 (Layout): 렌더 트리를 기반으로, 각 요소의 크기와 위치를 계산한다.페인팅 (Painting): 렌더 트리를 기반으로, 픽셀로 변환하여 화면에 그린다.  JavaScript는 웹 브라우저에서 HTML 문서를 파싱하는 도중에 실행될 때, 그 파싱 과정을 ..
JS - 점검 5 ( Browser Object Model ) 1. BOM 에 대하 알아 보자JavaScript에서 BOM (Browser Object Model)은 웹 브라우저와 상호작용하기 위한 객체 모델이다. BOM을 사용하면 JavaScript가 브라우저 창 및 브라우저의 기타 요소와 상호작용할 수 있다. BOM은 DOM(Document Object Model)과는 달리 표준화되지 않았기 때문에 브라우저마다 차이가 있을 수 있다. 💡 정리 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화 시켜 놓은 것을 의미한다. 추가 적으로 BOM은 하나의 객체만을 가리키는 것이 아니라 브라우저와 관련된 여러 객체들을 포함하며 그 구조는 최상위 객체는 window 객체와 그 하위 객체들로 이루어져 있다.   2. Window Object 와 하위 객..
JS - 점검 4 ( Document Object Model ) 브라우저에 띄울 웹 페이지가 단순히 정보 전달만을 목적으로 하는 정적인 웹이라면 HTML, CSS로도 충분하겠지만 그 이상의 인터랙티브한 기능을 구현하고자 한다면 자바스크립트와 DOM을 반드시 사용해야 한다.  1. DOM 이란 무엇일까? (문서 객체 모델)문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당한다. HTML 웹 페이지 문서 입니다 위의 HTML 코드를 기반으로 웹 페이지가 로드되면, 브라우저는 다음과..
JS - 점검 3 ( 함수의 이해와 활용 ) 1. 함수의 선언과 사용 index7.html 파일    2. 함수 표현식이란?자바스크립트에서 "함수 표현식"은 함수를 변수에 할당하는 방식으로 정의하는 것을 의미한다. 함수 표현식은 함수를 값으로 다루는 함수형 프로그래밍의 개념 중 하나이며, 매우 유용한 패턴 중 하나이다.💡 함수 자체가 식(Expression) 이기 때문에 함수를 변수에 할당하거나 함수의 매개변수로 사용 할 수 도 있음 (일급 객체) index8.html 파일
JS - 점검 2 ( 객체와 배열 ) 1. 객체에 대한 이해와 사용객체는 프로그래밍에서 데이터와 그 데이터를 다루는 동작(메서드)을 함께 묶어서 표현하는 자료구조이다. 내장 객체 (Built-in Objects)내장 객체는 JavaScript 언어 자체에 내장되어 제공되는 객체들을 말한다. 이러한 객체들은 JavaScript 프로그래밍에서 기본적인 기능을 제공하며, 모든 JavaScript 환경에서 사용할 수 있다. 몇 가지 주요 내장 객체에는 다음과 같은 것들이 있다.Object: 모든 객체의 기본이 되는 객체입니다. 다른 모든 객체는 이 객체를 상속 받는다.Array: 배열을 다루는 데 사용되며, 순서가 있는 여러 값을 저장할 수 있다.String: 문자열을 다루는 데 사용되며, 텍스트 데이터를 처리하고 조작하는 데 유용하다.Number..
728x90

티스토리툴바