Web Storage 에는 LocalStorage 와 SessionStorage 가 있다. 데이터는 키와 값(key-value)으로 저장하며 값은 문자열로 저장된다. ✅ 공통 메소드와 프로퍼티 setItem(key, value) getItem(key) removeItem(key) clear() key(index) : index에 해당하는 key length Local Storage 데이터를 사용자의 로컬에 보존하는 방식이다. 데이터를 저장, 덮어쓰기, 삭제 등 조작이 가능하며 자바스크립트로만 조작할 수 있다. 🍪 Cookie와의 차이점 유효기간이 없고 영구적으로 이용 가능 단순 문자열 외에 객체 정보 저장 가능 용량제한이 없음 ( 쿠키는 도메인당 20개의 쿠키 수가 제한되면 4KB까지 ) 쿠키와는 다르게..
💡 기존 JAVA와 동일 시 되는 부분은 생략하여 작성함 JavaScript 선언 HTML에서 JavaScript를 사용하려면 태그를 사용 태그는 HTML 파일 내부의 나 안 어느 곳에서나 선언 가능하지만 안의 끝부분에 태그를 둘 것을 권장 웹 브라우저가 HTML문서를 순차적으로 해석(parsing)하므로, script 위치에 따라 로드의 실행 시점이 달라진다. 변수 변수의 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정 같은 변수에 여러 타입의 값을 할당 가능 Camel 표기법을 사용 키워드, 공백, 문자 포함, 숫자로 시작X 특수 문자 _ $ 허용 Camel case : 소문자로 작성하되 2개 이상의 단어일 경우 단어의 첫 글자는 대문자로 표기 자료형을 원시타입(primitive)과..
AJAX 통신을 이용하여 yyyymmdd 형태로 날짜를 입력하면 해당 날짜의 영화 TOP 10 에 대한 순위, 제목, 개봉일을 출력해보자. var httpRequest = null; function req() { // XMLHttpRequest 객체 생성 httpRequest = new XMLHttpRequest(); // 응답 시 처리하는 콜백함수 설정 httpRequest.onreadystatechange = responseFunc; // 요청정보 설정 var date = document.querySelector("#date").value; var url = `https://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOf..
AJAX 란? AJAX (Asynchronous Javascript And Xml)은 비동기식 자바스크립트와 xml라는 의미로 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능이다. 브라우저가 가지고 있는 XMLHttpRequest객체를 이용하여 전체 페이지를 새로고침없이 페이지의 일부만을 위한 데이터를 로드하는 기법이다. 💡 동기 통신 vs 비동기 통신 동기 통신 : 웹 페이지를 새로고침하면서 데이터를 불러오는 방식 성능 저하 (사용자의 무한 대기 가능성有) 응답의 실체는 html 문서 👉 html 문서를 재랜더링 비동기 통신 : 웹 페이지를 새로고침 하지 않고도 데이터를 불러오는 방식 성능 향상 응답의 실체는 JSON 👉 html이 아니기 때문에 재랜더링 X ..
JSON JSON (JavaScript Object Notation) 은 데이터 포맷일 뿐이며 단순히 데이터를 표시하는 표현 방법 중 하나이다. 웹 애플리케이션에서 데이터를 전송할 때 일반적으로 사용한다 JSON 문법 { "key" : "value" } key값이나 문자열은 항상 " " (큰따옴표)를 이용하여 표기 데이터는 쉽표 , 로 나열, 객체는 중괄호 {}로 표현, 배열은 대괄호 []로 표현 # person 객체 생성과 속성(property), 기능(method) 작성 const person = { /* 속성 property */ "username" : "gangintheremark", "age" : 24, /* 기능 method */ // get 메서드 getusername: function ()..
템플릿 리터럴 (Template literal) 템플릿 리터럴이란 ` (백틱)으로 감싸진 문자열 리터럴로서 ES6부터 템플릿 리터럴이라 부르게 되었다. 백틱 ` 문자열을 표현할 때 일반적으로 값을 " "혹은 ' ' (작은 따옴표)를 사용하고, 변수를 문자열에 포함 시키려고 한다면 문자열을 열고 닫은 후 더해주는 형식( + ) 으로 작성한다. ` (백틱)은 ${변수}를 사용해서 문자열과 변수를 적절히 같이 사용할 수 있다. const num1 = 10; const num2 = 20; console.log(num1 + ' + ' + num2 + ' = ' + (num1+num2) + " 입니다."); // 백틱 적용X console.log(`${num1} + ${num2} = ${num1 + num2} 입니..
DOM을 이용한 이벤트 처리 방식이다. 이벤트 모델은 다음과 같이 DOM Level 에 따라 분류한다. 총 네가지 방법으로 이벤트를 연결할 수 있다. DOM Level0 인라인 이벤트 모델 기본 이벤트 모델 DOM Level2 마이크로소프트 인터넷 익스플로러 이벤트 모델 표준 이벤트 모델 고전 이벤트 모델 고전 방식은 자바스크립트에서 DOM 객체의 이벤트 속성으로 이벤트를 연결하는 방법이다. document.querySelector(선택자).onXXX = 익명함수; document.querySelector("#id").onclick = func(){ /* 이벤트를 처리할 함수 내용 */ }; # 고전 이벤트 모델 예시 이미지 변경 인라인 이벤트 모델 인라인 이벤트 모델은 HTML 태그 요소 노드에 이벤트..
DOM에서 발생되는 이벤트에 대한 핸들러를 등록하여 특정 이벤트에 대응하는 작업을 할 수 있다. 버튼을 클릭하거나 항목을 선택하는 것을 이벤트라고 한다. 이벤트는 일반적으로 함수와 연결이 되고, 이 함수는 이벤트가 발생되기 전에는 실행되지 않다가 이벤트가 발생할 경우 실행한다. 이벤트 핸들러 또는 이벤트 리스너라 한다. 이벤트의 종류 ✅ 마우스 이벤트 click 클릭 dbclick double click mousedown 요소 위에서 마우스 버튼을 눌렀을 때 mousemove 요소 위에서 마우스 포인터를 움직일 때 mouseover 마우스 포인터가 요소 위로 옮겨질 때 mouseout 마우스 포인터가 요소를 벗어날 때 mouseup 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 ✅ 키보드 이벤트 ..
문서객체모델 DOM (Document Object Model) 은 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법이다 DOM 트리 DOM 이란? Document Object Model의 줄임말입니다. DOM은 문서 요소 집합을 트리 형태의 계층 구조로, 웹 브라우저가 HTML 문서를 읽으면 아래 그림처럼 document 객체로 시작하는 DOM 트리가 만들어진다. DOM 트리에서 가지가 갈라져 나간 항목을 노드라고 하며, DOM트리의 시작 부분인 html 노드를 루트 노드라고 한다. 루트 노드를 시작으로 웹 문서에서 사용한 요소는 계층 구조를 이룬다. 각 노드 사이의 관계를 부모와 자식, 형제 간으로 표현할 수 있다. 부모 노드에는 자식 노드가..
자바스크립트를 사용하면 특정 사이트로 이동하거나 새 탭을 여는 등 웹 브라우저와 관련된 여러가지 효과를 만들 수 있다. window 객체 웹 브라우저의 상태를 제어하며 자바스크립트의 최상위 객체 window 객체의 method alert() : 브라우저의 알림 창 prompt() : 브라우저의 입력 창 confirm : 브라우저의 확인/취소 선택 창 [팝업창] open() : 주로 홉페이지의 팝업 창을 띄울 때 사용 close() : 주로 팝업 창 내용을 모두 살펴본 후에 창을 닫을 수 있도록 /* main.html - 메인화면 */ window.open("notice.html", "", "width=500, height=400"); //open(경로, 창 이름, 옵션) /* notice.html - 공..
자바스크립트의 내장객체로는Number Array Date String 가 대표적이다. Number 객체 참고. Number 메서드 var n = 10; // 💡 MAX_VALUE, MIN_VALUE : 최대값, 최소값 console.log(Number.MAX_VALUE); console.log(Number.MIN_VALUE); // 💡 toString : 수치값을 문자열로 변경 console.log(n.toString(), typeof n.toString()); // 10 string console.log(n.toString(2), n.toString(8), n.toString(16)); // 2진수 8진수 16진수 변경 // 💡 toFixed() : 소수 부분 자릿수 반환 var n2 = 15.6749..
객체(object)란? 자바스크립트에서 객체는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다. 흔히 자바스크립트는 모든 것이 객체 라는 말이 있을정도. 객체의 종류 3가지 내장 객체 : Number String Boolean Date Array 👉 내장 객체 바로가기 브라우저 관련 객체 : Window Navigation Screen History Location 👉 BOM객체 바로가기 문서 객체 모델(DOM) : document image link 👉 DOM객체 바로가기 웹 문서 자체도 객체이고 그 안에 삽입된 이미지와 링크, 텍스트 필드도 모두 객체이다. 객체의 인스턴스 자바스크립트에서 객체는 참조 형태로 사용한다. 즉, 객체 자체가 아니라 예약어 new를 이용하여 인스턴스의 형태로 만든다. //..
