비동기 데이터 통신 HTTP HyperText Transfer Protocol 웹 브라우저와 웹 서버가 데이터를 주고받을 수 있게 디자인된 통신 규약 웹에서 이루어지는 모든 데이터 교환의 기초 규약을 암호화하여 보안을 확장한 규약을 HTTPS라 함 HTTP 통신의 특징으로 인해 stateless규약이라고도 함 HTTP 통신 HTTP에서 클라이언스(사용자)가 서버(호스트)에 요청 메시지를 보내고 이에 대해 서버가 응답 메시지를 반환 서버는 응답 메시지를 반환한 후 초기상태로 돌아감 HTTP 요청 요청 메시지는 요청행, 요청 헤얻, 메시지 본문으로 구성됨 요청행 : 요청 메소드, URL, HTTP 버전 정보 등을 포함 요청 헤더 : 메시지 정보, 메시지에 저장한 데이터 정보 등을 포함 메시지 본문 : 서버 ..
로컬 스토리지 window.localStorage locaStorage 속성은 현재 도메인의 로컬 저장소에 접근할 수 있게 해 줌 로컬 저장소는 웹브라우저에서 각 도메인에 대해 할당해 주는 저장공간으로 여기에 데이터를 영구적으로 보관할 수 있음 영구보관 : 브라우저가 껐다가 켜거나 페이지를 새 로고침해도 해당 도메인에 데이터가 남아있도록 할 수 있음을 말함 데이터 보관 시 데이터의 이름과 데이터의 실제 값을 각각 지정하며 데이터 타입은 문자열 형태만 허용 loacalStorage 사용법 데이터를 읽거나 쓸 때는 메서드를 이용해 접근 메서드명 기능 사용 예 setItem 키와 밸류를 전달받아 저장 setItem(”key”,”value”) getItem 전달받은 키에 해당하는 밸류를 반환 getItem(’K..
빌트인 객체 Math 수와 관련된 속성과 메서드를 가진 내장 객체 관련 메서드 메서드 또는 속성 기능 abs 주어진 숫자의 절댓값을 반환 floor 주어진 숫자보다 작거나 같은 수 중에서 가장 큰 정수를 반환 pow 주어진 첫 번째 숫자에 두 번째 숫자만큼 제곱해서 반환 random 0이나 1 미만의 난수를 반환 sign 주어진 숫자가 양의 수인지 음의 수인지 나타내는 부호를 반환 sqrt 주어진 숫자의 제곱근을 반환 객체 리터럴 객체를 구성하는 속성(값이나 기능)의 이름과 실제 값을 한쌍으로 묶어 표현하는 ‘객체 리터럴’을 이용하면 객체를 생성할 수 있음 속성의 이름은 키(key), 속성의 실제 값을 밸류라 함(value) 속성에 밸류가 함수로 주어지면, 속성은 메서드가 됨 키는 중복될 수 없으나 값은..
HTML 클래스 적극 활용하기 Element.classList classList속성은 웹 요소(Element)로부터 클래스 컬렉션을 반환하는 속성 관련 메소드 메서드 기능 사용 예 add 지정한 클래스 값 추가 add(”new_class”) remove 지정한 클래스 값 제거 remove(’old_class”) item 인덱스를 이용해 클래스 값 반환 item(1) toggle 클래스 값 토글링 toggle(’some_value”) contains 지정한 클래스 값 존재 여부 확인 contains(”is_contains”) replace 기존 클래스를 새 클래스로 대체 replace(”old”,”new”)
배열 여러 개의 데이터를 보관하는 역할을 수행하는 객체 let numbers = [1,2,3] 배열을 만드는 두 가지 방법 배열 리터럴로 생성 const arr = [1,2,3] Array 생성자로 생성 const arr = new Array(1,2,3) 특징 배열에 포함된 값 하나하나를 배열 요소라고 함 각 배열 요소는 왼쪽부터 순서가 매겨짐(인덱스 번호) 인데스 번호는 0부터 시작 배열 요소 수는 원하는 개수만큼 포함시킬 수 있으며 0개일 수도 있음 다양한 유형의 데이터를 포함시킬 수 있음 대괄호 연산자(‘[]’)를 이용해 특정 인데스 번호의 배열 요소를 참조할 수 있음 배열 메소드 및 속성(대표적인 것들) 메소드 또는 속성 기능 push 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 길이 반환 ..
빌트인 생성자 개발자의 편의를 위해 유용한 기능을 제공하는 빌트인 생성자 or 빌트인 객체를 지원 빌트인 생성자 JS에 내장된 생성자, 이를 이용해 객채 생성할 수 있음 빌트인 객체 JS에 내장된 객체, 이를 이용해 값이나 기능을 호출할 수 있음/ 빌트인 생성자 Date 날짜와 시간을 처리하는 다양한 메소드가 정의된 빌트인 생성자 월은 0부터 시작(6월 입력하기 위해서는 5를 입력) 사용 예시 const then = new Date(2008,5,10) //2008년 6월 10일 날짜끼리 연산시 밀리초 단위로 연산됨 주요 기능들 메소드 기능 특이사항 getFullYear 연도를 뜻하는 숫자 값 반환 getMonth 월을 뜻하는 숫자 값 반환 0부터 시작 getDate 날짜를 뜻하는 숫자값 반환 getDay..
객체를 만드는 생성자 객체 자바스크립트 명령문으로 어떤 처리를 지시하고자 하는 대상 객체에 내릴 수 있는 명령 객체 데이터 객체가 가지고 있는 다양한 데이터를 사용할 수 있음(속성 사용) 객체 기능() 객체가 가지고 있는 다양한 기능을 수행할 수 있음(메서드 사용) 개발자는 자신이 원하는 값이나 기능으로 구성된 객체를 직접 만들 수 있음 생성자 객체를 생성할 때 사용하는 함수(생성자 함수) 사용할 기능을 정희한 일반 함수와 생성자 함수 사이에는 특별한 문법적 차이가 존재 X 생성자 함수는 객체생성을 목 전으로 만드는 것 생성자 함수를 통해 자바스크립트가 제공하지 않는 유형의 데이터 창조 가능 this 키워드 생성자 함수 정의 시 this 키워드는 객체 그 자신을 의미 this를 이용해 해당 객체의 속성이..
이벤트 핸들링 이벤트 DOM에서 발생하는 다양한 액션 또는 상호작용 동작을 나타내는 프로그래밍 인터페이스 이벤트 발생의 예 웹페이지 사용자가 버튼 클릭 웹페이지 사용자가 키보드를 누름 웹페이지 사용자가 입력 폼의 내용 제출 외 다수 각 이벤트에 대한 이벤트 핸들러(handler)를 정의할 수 있음 이벤트 핸들러 : 이벤트가 발생되면 실행될 코드 블록으로 주로 함수가 이 역할을 담당 이벤트 핸들러 역할을 수행하는 함수를 정의하는 것이 이벤트 핸들러 등록 이벤트를 처리할 타겟을 선택하고 이벤트 핸들러 속성에 이벤트 핸들러를 대입 이벤트 속성에 함수를 대입할 때는 소괄호(’()’)없이 대입 addEvnetListenet() onclick, onkeydonw과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 ..
