개발자애오

시나리오 코드 배송지 입력 이름 : 연락처 : check 배송지 입력2 ..

addEventListner() 메서드의 활용 - 아이템 추가, 토글 기능 만들기 EventListner를 사용한 요소 추가, 삭제, 수정, 토글 만들기 아이템 추가 리스트 토글 아이템1 수정하기 삭제하기  #reset.css/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acro..

HTML 요소에 이벤트 등록하기자바스크립트 이벤트는 웹 페이지에서 발생하는 다양한 동작이나 발생 상황을 나타낸다. 이런 이벤트를 활용하여 사용자의 행동에 반응하는 동적인 웹 페이지를 만들 수 있다. 예를 들어, 사용자가 버튼을 클릭할 때 메시지가 나타나게 하거나, 마우스를 웹 페이지의 특정 부분에 올렸을 때 스타일이 변경되게 할 수 있다. 이벤트를 활용하려면, 먼저 HTML 요소에 이벤트를 등록해야 한다. 이벤트 등록의 대표적인 3가지 방식Inline Event Handler : HTML 요소 내부에 직접 이벤트를 등록한다.Element Property : 자바스크립트에서 HTML 요소의 프로퍼티로 이벤트를 등록한다.addEventListener() 메서드 : 가장 권장되는 방식으로, 여러 이벤트 리스너..

웹 브라우저가 웹 페이지를 렌더링하는 과정 웹 페이지를 렌더링하는 과정은 대체로 다음의 순서로 이루어진다. HTML 파싱(Parsing) : 브라우저가 HTML 문서를 받아들이면, 이를 파싱하여 DOM Tree를 생성한다. CSS 파싱(Parsing) : 브라우저가 CSS를 파싱하여 CSSOM Tree를 생성한다. 렌더 트리(Render Tree) 생성 : DOM Tree와 CSSOM Tree를 결합하여 렌더 트리를 생성한다. 레이아웃(Layout) : 렌더 트리를 기반으로, 각 요소의 크기와 위치를 계산한다. 페인팅(Painting) : 렌더 트리를 기반으로, 픽셀로 변환하여 화면에 그린다. JavaScript와 HTML 파싱JavaScript는 웹 브라우저에서 HTML 문서를 파싱하는 도중에 실행될 ..

BOM JavaScript에서 BOM(Browser Object Model)은 웹 브라우저와 상호작용하기 위한 객체 모델이다. BOM을 사용하면 JavaScript가 브라우저 창 및 브라우저의 기타 요소와 상호작용할 수 있다. BOM은 DOM(Document Object Model)과는 달리 표준화되지 않았기 때문에 브라우저마다 차이가 있을 수 있다. 정리프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화 시켜 놓은 것을 의미한다. 추가적으로 BOM은 하나의 객체만을 가리키는 것이 아니라 브라우저와 관련된 여러 객체들을 포함하며 그 구조의 최상위 객체는 window 객체와 그 하위 객체들로 이루어져 있다.   Window Object 와 하위 객체들Window Object ├──..

브라우저에 띄울 웹 페이지가 단순히 정보 전달만을 목적으로 하는 정적인 웹이라면, HTML, CSS로도 충분하겠지만 그 이상의 인터렉티브한 기능을 구현하고자 한다면 자바스크립트와 DOM을 반드시 사용해야한다. DOM(문서 객체 모델)문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다. 즉, 자바스크립트같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당한다.  HTML 웹 페이지 문서 입니다 위의 HTML 코드를 기반으로 웹 페이지가 로드되면, 브라우저에 다음과 같이 여러 객체들이 생성..

함수의 선언과 사용 index7.html 파일입니다.   함수 표현식자바스크립트에서 "함수 표현식"은 함수를 변수에 할당하는 방식으로 정의하는 것을 의미한다. 함수 표현식은 함수를 값으로 다루는 함수형 프로그래밍의 개념 중 하나이며, 매우 유용한 패턴 중 하나이다.함수 자체가 식(Expression) 이기 때문에 함수를 변수에 할당하거나 함수의 매개변수로 사용할 수 도 있음 (일급 객체) index8.html 파일입니다.

객체는 프로그래밍에서 데이터와 그 데이터를 다루는 동작(메서드)을 함께 묶어서 표현하는 자료구조이다. 내장 객체 (Built-in Objects) 내장 객체는 JavaScript 언어 자체에 내장되어 제공되는 객체들을 말한다. 이러한 객체들은 JavaScript 프로그래밍에서 기본적인 기능을 제공하며, 모든 JavaScript 환경에서 사용할 수 있다. 몇 가지 주요 내장 객체에는 다음과 같은 것들이 있다. Object : 모든 객체의 기본이 되는 객체. 다른 모든 객체는 이 객체를 상속 받는다. Array : 배열을 다루는 데 사용되며, 순서가 있는 여러 값을 저장할 수 있다. String : 문자열을 다루는 데 사용되며, 텍스트 데이터를 처리하고 조작하는 데 유용하다. Number : 숫자를 다루는 ..

자료형컴퓨터가 처리하는 자료의 형태 자바스크립트 자료형 특징느슨한 자료형 체크(weak datatype check)자바스크립트는 미리 변수의 자료형을 지정하지 않음 변수를 지정하고 원하는 값을 할당만 하면 됨   숫자형정수 - 소수점이 없는 숫자 , 표현 방법에 따라 8진수, 10진수, 16진수 실수 - 소수점이 있는 숫자, (※ 자바스크립트에서는 정밀한 실수 계산을 못 함)부동소수점 방식으로 숫자를 표현하는 이진법의 한계 때문에 발생하는 문제이다.부동소수점 방식은 소수점 위치가 고정되어 있지 않고, 이진법으로 숫자를 표현하기 때문에 무한 소수의 경우 근사값으로 표현되어 오차가 발생할 수 있다.무한 소수(infinite decimal)란, 소수점 이하의 자리수가 무한히 반복되는 소수를 말한다. 예를 들어..

자바스크립트(JavaScript)는 웹 브라우저에서 동작하는 스크립트 언어 중 하나이다. HTML, CSS와 함께 웹 프로그래밍을 할 수 있도록 고안되었으며, 다양한 용도로 사용된다.자바스크립트는 기본적으로 클라이언트 측에서 실행되는 스크립트 언어로, 웹 페이지를 동적으로 만들고, 사용자와 상호 작용하는 기능을 구현할 수 있다.예를 들어, HTML 요소의 속성 값을 변경하거나, 이벤트 핸들러를 등록 하여 사용자의 동작에 따라 새로운 기능을 수행하도록 할 수 있다. 또한, AJAX를 이용하여 서버와 비동기적으로 데이터를 주고받는 기능을 구현할 수도 있다.자바스크립트는 브라우저를 제어하는 데 주로 사용되지만, Node.js와 같은 서버 측 프레임워크를 이용하여 서버 측에서도 사용될 수 있다.이러한 이유로, ..