차곡차곡

DOM Tree 란? Document Object Model Tree 약자로, 웹 페이지의 구조를 트리 형태로 표현한 것이다. 웹 브라우저는 HTML 코드를 파싱하여 DOM Tree를 만들고 이를 통해 웹 페이지를 렌더링하고 사용자와 상호작용을 한다. DOM Tree 구성요소 Node DOM Tree 기본 단위 모든 DOM 요소의 기본이 되는 인테퍼이스로 요소, 텍스트 , 주석 등 웹 페이지의 모든 구성 요소 포함한다. 모든 요소는 Node 자손이며 , 노드는 자식 노드를 가질 수 있다. Document DOM Tree 의 최상위 노드 웸 페이지 자체를 대표한다. 문서 전체를 나타나며 DOM 트리의 진입 점 역할을 한다. Element html 또는 xml 문서의 모든 요소를 대표한다. 예를 들어 , ,..

자바스크립트를 사용하여 웹 페이지를 동적으로 조작하기 위한 요소 선택 및 조작하는 방법 1. 요소 선택 - getElementById : id 속성을 사용하여 특정 요소 선택 - getElementsByTagName : 태그의 이름으로 모든 요소 선택 - getElementsByClassName : class 속성으로 모든 요소 선택 - querySelector : css선택자를 사용하여 요소 선택 - querySelectorAll : css 선택자를 사용하여 모든 요소 선택 2. 요소 조작 - innerHTML : 요소의 HTML 내용 변경 - textContent : 요소의 텍스트 내용 변경 - style : 요소의 스타일 속성 변경 - setAttribute : 요소의 속성 설정 - removeAt..

페이지 리다이렉션은 location 객체를 사용하여 수행할 수 있으며, 리다이렉션은 사용자를 다른페에지로 이동시키는것을 의미한다. location 객체를 사용하여 페이지 리다이렉션 방법은 3가지가 있다. location.href location.href 속성에 새로운 URL을 할당하면 페이지를 해당 URL로 이동시킨다. // 사용자를 www.google.com으로 이동시킵니다. location.href = "https://www.google.com"; location.assign() location.assign() 메서드는 location.href 속성과 유사하지만 브라우저 히스토리를 유지한다. 즉, 사용자가 뒤로 가기 버튼을 클릭하면 이전 페이지로 돌아갈 수 있다. // 사용자를 www.naver.co..

웹 브라우저 웹 브라우저는 사용자가 웹 페이지를 볼 수 있게 해주는 소프트웨어이다. 사용자가 URL을 통해 웹 페이지에 접근하면, 웹 브라우저는 해당 주소에 있는 웹 서버로부터 웹 페이지 데이터(HTML, CSS, 자바스크립트 등)를 요청하고 받아온다. 이후 웹 브라우저는 받아온 데이터를 해석하여 사용자에게 시각적으로 표현한다. 웹 서버 웹 서버는 인터넷을 통해 웹 브라우저나 다른 클라이언트 소프트웨어로부터 온 요청을 처리하고 응답을 전송하는 서버 소프트웨어이다. 주로 HTML 문서, CSS 파일, 자바스크립트 파일, 이미지 및 비디오 등 웹 페이지를 구성하는 자료들을 저장한다. 사용자가 웹 페이지에 접속하려고 할 때, 웹 브라우저는 웹 서버에 해당 페이지의 데이터를 요청하고, 웹 서버는 요청받은 데이터..

함수란? 자바스크립트에서 함수는 작업을 수행하거나 값을 계ㅅ산하는데 사용되는 코드의 집합이다. 함수를 사용하면 코드의 재사용성을 높이고 코드 관리를 효율적으로 할 수 있다. 자바스크립트에서 함수는 function 키워드를 사용하여 정의 할 수 있으며 , 매개변수 (parameters)를 통해 입력받고 , returen문을 사용하여 결과값을 반환할 수 있다. 함수의 정의 방법 1. 함수 선언문 : 이름이 있는 함수를 정의 function sayHello() { console.log("Hello!"); } 2. 함수 표현식 : 함수를 변수에 할당하여 익명 함수 또는 명명된 함수 사용 가능 const sayGoodbye = function() { console.log("Goodbye!"); }; 3. 화살표 ..

웹브라우저 제어 주로 자바스크립트를 통해 이루어지며 웹 페이지의 동적 변경 , 사용자와의 상호작용처리 , 웹페이지의 요소조작 수행 DOM 조작 DOM 이란? Document Object Model의 약자로 문서 객체 모델 즉 , 웹 페이지 ( HTML or XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다. 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당하고있다. DOM 요소의 생성 방식 웹 페에지의 객체 지향 표현방식으로 웹 페이지 구조를 트리형태로 나타내며 자바스크립트를 통해 DOM 요소를 선택,추가,수정 ,삭제 할 수..