1. 객체
1-1. 객체 생성 과정
- 빈 객체의 생성
- 아무런 기능이 없는 상태의 빈 객체이다.
- 이 상태가 prototype 이다.
- 변수의 추가, 함수의 추가, 배열의 추가 등이 다양하게 가능하다.
1-2. 빈 객체의 생성
- 빈 객체를 만드는 것은 블록괄호{}를 지정하는 것으로 표현된다.
let people ={};1-3. 변수의 추가
- 객체안에 추가되어있는 변수를 멤버변수 혹은 프로퍼티라고 한다
- 변수를 추가하기 위해서는
객체이름.변수명 = 값의 형식을 사용한다. - 선언을 위한 별도의 let, const키워드는 사용되지 않는다.
key(id값) : value(value값)형태로
people.name = "kjh";
people.gender = "F";1-4. 메서드 안에서 객체 자원 활용
- 객체 안에 포함된 메서드에서 다른 메서드를 호출하거나,
프로퍼티를 활용 하고자 하는 경우에는 this 키워드를 사용한다.
this.변수이름 = 값;
let 변수이름 = this.함수이름(값);2. 내장객체
2-1. String
문자열을 처리를 위한 내용
2-2. Date
1. 날짜, 시간계산
- 두 날짜의 차이를 구하기 : TimeStamp값 사용
- 1/1000초 단위 형태로 반환해서 리턴
- getTime()
- 두 객체 사이의 날짜값은 24(시간)60(분)60(초)*1000으로 나누면 두 객체 사이의 날짜 차이값을 알 수 있다.
- 나눈 값은 소수점 이하를 절단해야 한다.
2. setInterval 함수
- setInterval 함수는 다른 함수의 이름과 1/1000초 단위의 시간값을 파라미터로 설정하여 정해진 시간에 한번씩 파라미터로 전달된 함수를 반복적으로 호출한다.
// printTime 함수를 1초에 한번씩 반복해서 자동으로 호출한다.
setInterval(printTime,1000);3. setTimeout() 함수
- 지정된 시간만큼 딜레이 한 후 파라미터로 전달된 함수를 1회만 호출한다.
// printTime함수를 1초 후에 한번만 호출한다.
setTimeout(printTime, 1000);3. 웹 브라우저와 javascript
웹브라우저에 올라가는 것은 HTML, CSS, Javascript 이다.
- HTML : 정보
- CSS : 디자인
- Javascript : 웹브라우저에서 HTML 제어
4. HTML에서 자바스크립트 로드하기
4-1. inline
- 태그에 직접 자바스크립트를 기술하는 방식이다. 장점은 태그에 연관된 스크립트가 분명하게 드러난다는 점이다.
- 하지만, 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어진다.
5. Object Model
- 웹 브라우저의 구성요소들은 하나하나가 객체화되어 있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다.
- 이 객체들은 서로 계층적인 관계로 구조화 할 수 있다.
- BOM과 DOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 할 수 있다.
5-1. Window객체
- window객체는 DOM을 포함한 브라우저의 창을 나타낸다. 자바스크립트의 모든 객체, 전역 변수, 전역 함수들은 자동으로 window 객체의 프로퍼티가 된다.
- BOM : browser object model
- DOM : document object model
5-2. BOM객체
1. location
-
웹브라우저에서 주소 표시줄 제어, 그 일부를 조회 가능과 변경 가능
-
location 정보
location.href: 문서의 URL 주소
location.host: 호스트 이름과 포트
location.pathname: 디렉토리 이하 경로
location.port: 포트번호
location.protocol: 프로토콜 종류
location.search: 조회부분
location.href: "주소값" - 페이지 이동
location.reload(): 페이지 새로고침
2. history
- 이전 페이지로 돌아가기
- 브라우저에 방문기록과 관련된 객체이다.
history.back(): 이전 페이지로 이동
history.forward(): 다음 페이지로 이동
3. Navigator
- 기기 브라우저 자체 정보 조회하기 위한 속성들을 가지고 있는 객체
5-3. Document
<body>부분 태그들 접근하는 객체- 문서 내에서 특정 태그에 해당하는 객체를 찾는 방법은 여러가지가 있다.
1. document.getElementsByTagName()
- 인자로 전달된 태그명에 해당하는 객체들을 찾아서 유사배열에 담아서 반환
2. document.getElementsByClassName()
3. document.getElementById()
- 가장 많이 사용
Quantum Jump to class for java….