웹페이지의 기본
웹페이지의 기본은 데이터 관리이다. 데이터를 생성, 저장, 출력, 수정, 삭제 할 수 있어야 한다.
변수와 상수란 무엇일까?
변수와 상수는 데이터를 담는 공간이다.
변수 : var, letvar 는 현업에서 사용이 되지 않는다.
상수 : const 변수와 상수의 종류와 특징var | let | const | |
이름중복(재선언) | | | |
데이터 수정(재할당) | | | |
변수와 상수 만들기
선언(declaration) : 변수의 이름을 알려주는 행위[변수형] [변수명]
camelcase 를 사용하여 변수이름을 작명한다. 할당(definition) : 변수에 데이터를 담아주는 행위Chrome 개발자 도구
웹사이트를 전반적으로 분석하고 시험해 볼 수 있도록 도와주는 도구이다.
주의 : 콘솔 데이터는 저장되지 않는다. 새로고침 / 새 탭 열기를 하면 내용이 날아간다. 요소(Element) : HTML 을 분석하고 수정해볼 수 있는 도구 콘솔(Console) : 현재 로딩된 페이지에서 자바스크립트를 시험하거나 로그/오류 메세지 등을 확인 할 수 있는 도구 소스(Resource) : 현재 로딩된 페이지에서 사용된 리소스를 열람할 수 있는 도구 네트워크(Network) : 서버와의 통신 내역을 보여주는 도구 성능(Audits) : 웹 어플리케이션의 성능을 향상시킬 방법을 컨설팅해주는 도구배열
배열을 통해 여러개의 데이터를 한번에 담을 수 있다. 배열을 사용할 때에는 대괄호 [] 안에 데이터를 쉼표 로 각 데이터를 구분해서 넣는다.
배열 선언const [배열명] = [”배열”]
배열 메서드메서드 | 기능 | 메서드 | 기능 |
.length | 배열의 길이 구하기 | .push() | 배열 맨 뒤에 값 추가 |
.pop() | 배열 맨 마지막 값 삭제 | .sort() | 요소 정렬 |
.includes() | 배열 데이터 확인 | .concat() | 배열 2개 연결하기 |
.join() | 배열을 문자로 만들기 | .splice(start, end) | 배열 분리하기 |
.filter() | 배열에서 원하는 요소만 뽑아내기 | .map() | 배열에서 모든 요소 변경하기 |
•
map() 예시
// map() : 배열에서 모든 요소 변경
classmates.map((data) => (data + "어린이"))
// ["철수어린이", "영희어린이", "훈이어린이"]
JavaScript
복사
객체
객체는 다양한 데이터를 하나의 그룹으로 묶는 보따리와 같다. 다양한 데이터를 하나로 묶기 위해서 각각의 데이터를 키와 값으로 연결한다.
객체 선언const [객체명] = {[키]:[값], [키]:[값], [키]:[값], [키]:[값] . . .}
•
빈 객체를 만들 수도 있으며
•
값으로 문자나 숫자 다 가능하다.
객체에 담긴 값을 가져오는 방법•
변수명.key : 더 많이 사용한다
•
변수명[”key”]
객체들을 배열에 담을 수 있다.const classmates = [{object1}, {object2} . . .]