본문 바로가기

JavaScript12

JavaScript - cookie, sessionStorage, localStorage 1. cookie2. sessionStorage3. localStorage 1. cookie쿠키는 브라우저를 종료시켜도 쿠키의 유효 기간까지 데이터가 남아있다.쿠키 CRUD 함수는 정형화되어 있는 느낌이라 보통 만들어져 있는 함수를 검색해 가져와 사용한다. 쿠키를 제거 : 쿠키의 유효시간을 과거 시간으로 변경하는 게 쿠키의 제거방법이다. 쿠키 수정 : 존재하는 쿠키의 키(key)에 다른 값(value)을 주면 내용이 변경된다. cookie생성 함수 예시//setfunction createCookie(name, value, time) { // expire에 넣은 시간이 지나면 유효하지 않다. // 시간을 넣지 않고 쿠키를 생성하면 세션 쿠키 지속, 만료되지 않는 쿠키 let date = n.. 2024. 4. 25.
JavaScript - 삼항 연산자 1. 삼항 연산자란? 1. 삼항 연산자란?삼항 연산자는 참/거짓에 따라 선택적으로 실행되는 조건문이다.보통 if문을 간결하게 표현하기 위해 사용된다.삼항 연산자의 depth가 많아지면 내용 파악이 if문보다 어려워져 보통 2depth까지 사용한다. 문법[조건문] ? [true일 때] : [false일 때]// 조건이 true인 경우 참 반환true ? "참" : "거짓";// 조건이 false인 경우 거짓 반환false ? "참" : "거짓";// 참이 반환된다.1 === 1 ? "참" : "거짓";// 3depth 까지는 쓰지 말것. 많아도 2depth까지.1 === 1 ? 2 === 2 ? 3 === 3 ? "참" : "거짓" : "거짓" : "거짓";  i.. 2024. 4. 24.
JavaScript - DOM 1. DOM이란? 2. javascript 예제 1. DOM이란? Document Object Model의 약자로 HTML, XML 문서의 프로그래밍 interface이다. 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. 웹 페이지는 일종의 문서(document)이기 때문에 JavaScript와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다. 페이지 콘텐츠는 DOM에 저장되고 JavaScript를 통해 접근하거나 조작할 수 있다. 2. javascript 예제 요소 선택 getElementById // getElementById // test라는 아이디를 가지고 있는 요소를 찾아서 반환 // 해당하는 id를 가진 HT.. 2024. 4. 23.
JavaScript - Class, this 1. class 1 - 1. this 1 - 2. class 선언 및 호출 1 - 3. 부모, 자식 클래스(상속) 1 - 4. getter setter 1. class 클래스는 객체를 만들기 위해 사용되는 방법 중 하나이다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화해, 클래스 사용 시 코드의 가독성이 좋아지고, 상속을 통한 코드의 재사용성이 좋아진다. 1 - 1. this this는 객체를 참조하기 위해서 사용된다. this를 사용하는 방법과 이유는 다양하지만 클래스 내에서 사용하게 되는 이유만 간략히 설명하자면, new 예약어(동적할당) 사용 시 빈 객체를 생성한 뒤 클래스 생성자 함수를 호출했을 때 this로 빈 객체를 참조하기 위해서 class선언 시에 생성자 함수에 this를 사용해야.. 2024. 4. 19.
JavaScript - 객체(object) 1. 객체 2. 객체 문법 3. 객체 호출 4. 객체 수정 1. 객체 객체(Object) : 키(key)와 값(value)으로 구성된 값들의 집합이다. 객체 안에 속성이라 불리는 값들을 할당하고 각각 속성 쌍들을 쉼표(,)로 구분한다. 중괄호 '{}' 를 이용해 객체를 선언한다. const computer = { name : "ASUS", model : 14, color : "black", sell : false, price : 1000 } 2. 객체 문법 // 리터럴 문법 const user = {}; // 생성자 문법 // new 예약어 const user = new Object(); 3. 객체 호출 각 속성에 지정한 키(key) 값으로 객체를 호출해 키 값과 일치하는 속성을 찾은 후 값(value).. 2024. 4. 17.
JavaScript - 배열 1. 원시 타입, 참조 타입2. 문법3. 자주 사용하는 매서드4. 배열의 깊은 복사 1. 원시 타입, 참조 타입 자바스크립트의 메모리자바스크립트의 메모리 영역에는 call stack영역과 heap영역이 있다.call stack 메모리엔 원시 타입이 저장되고, heap 메모리에는 참조 타입이 저장된다. 원시타입원시 타입은 메모리에 값이 저장되고 변수가 직접 값을 가리키고 있다.원시 타입(불변성)은 재할당 시 새로운 메모리에 재할당한 값을 저장하고 가리키는 주소가 바뀌는 형태로 관리된다.원시 타입으로는 string, number, boolean, undefined 등이 있다. 참조 타입참조 타입은 원시 타입과 다르게 변수의 크기가 동적으로 변한다.데이터가 동적으로 변하기 때문에 참조 타입의 데이터는 heap.. 2024. 4. 16.