본문 바로가기

js5

[JavaScript] 웹 스토리지(Web Storage) - localStorage, sessionStorage Web Storage API - 데이터를 사용자 로컬에 보존하는 방식 - 데이터를 저장, 덮어쓰기, 삭제 등 조작 가능 - 자바스크립트(JavaScript)로만 조작 - 모바일에서도 사용 가능 🍪 쿠키와 차이 - 유효 기간이 없고 영구적으로 사용 가능 - 쿠키(4KB)보다 많은 용량을 저장할 수 있음 - 쿠키와 다르게 네트워크 요청 시 서버로 전송되지 않음 - 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없음 - 웹 스토리지는 origin(프로토콜, 도메인, 포트)이 다르면 접근 불가 localStorage & sessionStorage - 키(Key)와 값(value)을 하나의 세트로 저장 - 도메인과 브라우저별로 저장 - 값은 반드시 문자열로 저장됨 (그러므로 배열을 저장할 때 JSON.s.. 2022. 3. 8.
[JavaScript] 이벤트(Event) 이벤트(Event) - 웹 페이지에서 여러 종류의 상호작용이 있을 때 마다 이벤트 발생 - JS를 사용하여 DOM에서 발생하는 이벤트를 감지하여 이벤트에 대응하는 여러 작업 수행 - 이벤트는 일반적으로 함수와 연결되고, 함수는 이벤트가 발생되기 전에는 실행되지 않다가 이벤트가 발생할 경우 실행. - Handler , Listener 마우스 이벤트(Mouse Event) - 마우스 이벤트 핸들러에 전달되는 이벤트 객체에는 마우스 위치와 버튼 상태 등의 정보를 담고 있음 이벤트 설명 onclick element 클릭 했을 때 발생 ondbclick element 더블 클릭 했을 때 발생 onmouseup element에서 마우스 버튼을 올렸을 때 발생 onmousedown element에서 마우스 버튼을 눌.. 2022. 3. 8.
[JavaScript] HTML과 DOM DOM - DOM(Document Object Model)은 HTML과 XML의 구조를 정의하는 API제공 - 문서의 요소 집합을 트리 형태의 계층구조 HTML로 표현 - 가장 위에는 document 노드가 있고, 아래로는 HTML 태그나 요소들을 표현하는 노드와 문자열을 표현하는 노드가 있음 안녕하세요. 잔디입니다! ↓ document 객체 만들기 함수명 설명 createElement(tagName) element node 생성 createTextNode(text) text node 생성 appendChild(node) 객체에 node를 child로 추가 setAttribute(name, value) 객체 속성 지정 getAttribute(name) 객체 속성값 가져옴 innerHTML 문자열을 HTM.. 2022. 3. 8.
[JavaScript] Web Browser와 Window 객체 🖥 Window 객체 - 웹 브라우저에서 작동하는 JavaScript의 최상위 전역객체 - 브라우저와 관련된 여러 객체와 속성, 함수가 있다. - JavaScript에서 기본으로 제공하는 프로퍼티와 함수도 포함 - BOM(Browser Oject Model) alert() 브라우저 알림창 confirm() 브라우저 확인/취소 선택창 prompt() 브라우저 입력 창 open() 새로운 창을 오픈 close() 현재 창 닫음 navigator 브라우저의 정보가 내장된 객체 서로 다른 브라우저를 구분, 브라우저 별로 다르게 처리 가능 navigator.userAgent navigator.platform ... location 현재 페이지 주소와 관련된 정보들을 알 수 있음 location.href locat.. 2022. 3. 8.
[JavaScript] JS의 기본 (특징, 문법) 1. 특징 - HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍언어 - 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어 - 각 브라우저별 JS엔진은 인터프리터와 컴파일러 장점을 결합하여 비교적 처리 속도가 느린 인터프리터의 단점 해결 - 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어 - 웹 브라우저는 JS를 HTML과 함께 다운로드하고, 브라우저의 JS 엔진이 JS를 실행 - 클래스가 존재하지 않는 프로토타입 기반의 객체지향 언어(Edition 6에서는 class 개념 지원) - ECMAScript 스펙을 준수하는 방식으로 JS를 지원 2. 선언 방법 - HTML에 포함하는 방법 - 외부 Java.. 2022. 3. 4.