728x90
반응형
1. 객체
- 데이터를 저장하고 처리하는 기본 단위
- 키(key)와 값(value)으로 구성된 속성의 집합
- 키: 공백 들어갈 경우 따옴표 사용
- 여러 개의 값을 가질 수 있고, 다른 자료형의 값도 가질 수 있음
- 또 다른 객체 or 함수 들어갈 수 있음
- 메서드(method): 객체에 정의된 함수
- ex. 배열, 숫자, 논리 데이터-> 한 객체의 속성으로 추가
- 또 다른 객체 or 함수 들어갈 수 있음
const person = {
name: ["Hong", "Gildong"],
age: 20,
isAdult = true
printInfo: function() {
console.log('printInfo');
}
};- {} 이용해 생성 => 리터럴(literal) 방식으로 객체 생성
- 빈 객체: 속성 한 개도 없는 객체
- const person = {};
속성 = 멤버 변수 = 프로퍼티
2. 객체 속성(프로퍼티)
객체 속성에 접근/ 객체 속성 값 변경/ 객체 속성 동적으로 추가/ 객체 속성 동적으로 삭제/ 데이터 관리 방법 이해
객체 속성에 접근
- 대괄호 연산자로 접근
- []를 사용해 객체의 속성에 접근
- 배열에서도 사용할 수 있음
- 키: 큰따옴표나 작은따옴표로 감싼 문자열 형태로 작성
- 마침표 연산자로 접근
- .를 이용해 객체 속성에 접근
- 키: 따옴표 X -> 키 식별자에 공백 O => 대괄호 연산자만 접근
const person = {
name: { // 객체 리터럴
firstNmae: "Gildong",
lastName: "Hong"
},
age: 20,
likes: ["apple", "samsung"], // 배열
printHello: function() { // 함수
return "hello";
}
};
// 대괄호 연산자
console.log(person["name"]); // { firstName:'Gildong', lastName:'Hong' }
console.log(person["name"]["firstName"]); // Gildong
console.log(person["age"]); // 20
console.log(person["likes"]); // [ 'apple', 'samsung' ]
console.log(person["printHello"]); // [Function: printHello]
console.log(person["printHello"]()); // hello
// 마침표 연산자
console.log(person.name.lastName); // Hong
console.log(person.age); // 20
console.log(person.likes[0]); // apple
console.log(person.printHello()); // hello// do it html+css+자바스크립트 웹 표준의 정석
빈 객체 만들기
// ver 1
let book2 = {}
// ver 2
let book2 = new Object()중첩 함수
let student = {
name: "Doremi",
score: {
history: 85,
science: 94,
average: function() {
return (this.history + this.science) / 2
}
}
}
student.score.history // 85
// 멤버 함수 접근
student.score.average() // 89.5
// average -> 주소 값객체 메서드 정의
메서드(method)
- 객체의 프로퍼티 중 객체의 동작을 지정하는 함수
- 선언 방법은 일반적인 함수 선언하는 것과 비슷
메서드명: function() {
...
}
let book3 = {
title: "점프 투 파이썬",
pages : 360,
buy : function() { // 익명 함수
console.log("이 책을 구입");
}
}객체 속성 값 변경
키로 속성에 접근 -> 값을 재할당
const person = {
name: "Hong Gildong"
};
person.name = "Kim"; // or person["name"] = "Kim";
console.log(person.name); // Kim객체 속성 동적으로 추가
객체에 X 속성 -> 해당 키와 값으로 구성된 새로운 속성이 객체에 추가
- 객체 리터럴 방식으로 빈 객체 생성, 변수에 할당
- 키에 값을 할당(= 객체 속성에 접근해 값 변경)
const person = {};
console.log(person); // {}
person.name = "Hong Gildong";
console.log(person); // { name: 'Hong Gildong' }
=> 객체 속성에 값을 할당해 접근 -> 해당 속성이 있는지 확인, 속성 X => 새로운 속성을 객체에 추가
- 객체 식별자와 키에 마침표 연산자 사용 -> 객체 속성에 접근
- 할당 연산자로 값을 할당 -> 값 변경 or 새로운 속성 추가
=> 속성을 동적으로 추가한다: 이미 만들어진 객체에 나중에 속성을 추가하는 것
객체 속성 동적으로 삭제
delete 키워드 명시
const person = {
name:"Hong Gildong"
};
delete person.name; // or delete person["name"]
console.log(person); // {}객체의 데이터 관리 방법 이해
const 키워드로 선언한 상수 변수 -> 재할당 X
But, const 키워드로 선언한 상수 변수에 할당한 객체에 속성 추가 or 삭제 O
=> 참조(reference)
데이터 관리 방식 -> 자료형: 기본 자료형/ 참조 자료형
- 깊은 복사(deep copy) - 기본 자료형
- 복사한 값을 재할당할 때 한쪽 데이터가 변경되어도 서로 영향 미치지 X 복사
- 변수에 데이터 할당할 때 데이터 그 자체 할당
-> 할당된 데이터 다른 변수에 다시 할당 -> 데이터 그대로 복사해 전달- 독립적으로 값 가진 상태(연동 X)
- 얕은 복사(shallow copy) - 참조 자료형
- 데이터 복사했을 때 한쪽 데이터 변경 -> 다른 쪽 데이터도 변경 => 서로 영향 받음
- 참조한다: 변수 공간에 데이터 할당(기본 자료형) X, 데이터가 위치하고 있는 메모리 주소 값 할당
- 객체 데이터: 별도의 메모리에 저장, 변수는 객체의 데이터가 저장된 메모리 주소 가짐
-> 변수에 객체 재할당 => const 키워드 재할당 X -> 오류 - But, 속성 추가 or 값 변경 O
- 변수에 할당된 객체의 주소 값 그대로, 주소 값이 참조하는 원본 객체 데이터 변경
// 깊은 복사
let num = 10;
let copyNum = num;
num = 20; // 변수 num 재할당
console.log(num); // 20
console.log(copyNum); // 10
// 얕은 복사
const person = {
name:"Hong Gildong"
};
const copyPerson = person; // 변수 person에 할당된 객체 -> 변수 copyPerson에 복사
person.name = "Hong"; // 변수 person에 할당된 객체의 값 변경
console.log(person.name); // Hong
console.log(copyPerson.name); // Hong3. 표준 내장 객체 사용
문자열 다루는 String 객체/ 배열 다루는 Array 객체/ 날짜와 시간 다루는 Date 객체, 수학 연산 다루는 Math 객체
표준 내장 객체(standard built-in object)
- 자바스크립트에 기본으로 내장된 객체
- 스코프의 위치 따지지 X 모든 영역에서 공통으로 사용 O
문자열: String 객체
| 속성 | length | 문자열 길이 반환 (최소 글자 수, 최대 글자 수 확인) |
| 메서드 | includes() | 메서드의 매개변수에 인자로 전달되는 문자열이 대상 문자열에 포함 O -> true/ X -> false 반환 (특정 문자열이 포함되어 있는지 확인) |
| replace() | 대상 문자열에서 메서드의 매개변수에 인자로 전달되는 문자열과 일치하는 한 부분을 찾아 -> 다른 데이터로 변경한 새로운 문자열을 반환 |
|
| replaceAll() | 대상 문자열에서 메서드의 매개변수에 인자로 전달되는 문자열과 일치하는 모든 부분 찾아 -> 다른 데이터로 변경한 새로운 문자열을 반환 |
|
| split() | 메서드의 매개변수에 인자로 전달되는 구분자를 이용 -> 대상 문자열을 여러 개의 문자열로 분리, 분리한 문자열을 새로운 배열로 반환 |
|
| toUpperCase() | 대상 문자열 -> 대문자로 변경해 반환 | |
| trim() | 대상 문자열의 앞뒤 공백을 제거한 값 반환 | |
| indexOf() | 대상 문자열과 일치하는 첫 번째 문자의 인덱스 반환 (특정 문자열이 포함되어 있는지 확인, 찾지 X -> -1) |
배열: Array 객체
- 파괴적 메서드: 메서드 사용했을 때 원본 데이터 변경하는 메서드
- 배열에 데이터 추가, 추출(제거하고 반환): push(), pop(), unshift(), shift()
- 비파괴적 메서드: 원본을 변경 X 메서드
| 속성 | length | 배열의 요소 개수 반환 (배열의 길이) |
| 파괴적 메서드 | push() | 배열의 맨 뒤에 데이터 추가 |
| pop() | 배열의 맨 뒤에서 데이터 추출 | |
| unshift() | 배열의 맨 앞에 데이터 추가 | |
| shift() | 배열의 맨 앞에서 데이터 추출 | |
| sort() | 배열의 요소 정렬 | |
| reverse() | 배열의 요소 역순으로 정렬 | |
| 비파괴적 메서드 | forEach() | 배열의 요소를 하나씩 순회하면서 요소마다 콜백(callback) 함수 호출 |
| filter() | 배열의 요소를 하나씩 순회하면서 요소마다 콜백 함수 호출 -> true를 반환하는 요소만 추출 추출한 요소로 새로운 배열을 만들고 만들어진 배열 반환 |
|
| 비파괴적 메서드 | find() | 배열의 요소를 탐색하면서 주어진 판별 함수를 만족하는 첫 번째 값 반환 |
| findIndex() | = find() 메서드 But, 값 대신 인덱스 숫자를 반환 | |
| includes() | 배열에 특정 값이 포함되어 있는지 확인해 포함 O -> true/ X -> false 반환 | |
| join() | 배열의 모든 요소 -> 주어진 구분자로 합침 |
날짜와 시간: Date 객체
- 인스턴스(instance) 만들기
- Date 객체 호출 -> 날짜와 시간 데이터 생성, 생성되는 데이터: 인스턴스
=> date 변수에 할당된 데이터: Date 객체의 인스턴스 - 연(year), 월(month), 일(date), 시(hour), 분(minute), 초(second) 정보 -> 숫자로 전달해 생성하는 방법
- 월: 0부터 시작(1월: 0/ 12월: 11)
- 문자열로 원하는 날짜와 시간 데이터 생성
- 월: 그대로 전달
- Date 객체 호출 -> 날짜와 시간 데이터 생성, 생성되는 데이터: 인스턴스
const date = new Date();
const date1 = new Date(2022, 11, 25); // Sun Dec 25 2022 00:00:00 GMT+0900 (한국 표준시)
const date2 = new Date(2022, 11, 25, 18, 30, 50); // Sun Dec 25 2022 18:30:50 GMT+0900 (한국 표준시)
const date1 = new Date("2022-12-25"); // Sun Dec 25 2022 09:00:00 GMT+0900 (한국 표준시)
const date2 = new Date("2022/12/25/18:30:50"); // Sun Dec 25 2022 18:30:50 GMT+0900 (한국 표준시)- Date 객체의 인스턴스에 할당된 날짜와 시간 -> 일반적인 형식으로 가공
- get 메서드: 날짜와 시간 정보 가져
- set 메서드: 날짜와 시간 정보 설정
| getFullYear()/ setFullYear() | 연도) 4자리 숫자로 표시 |
| getMonth()/ setMonth() | 월) 0 ~ 11까지 숫자로 표시(1월 → 0/ 12월 → 11). |
| getDate()/ setDate() | 일) 1 ~ 31까지 숫자로 표시 |
| getDay() | 요일) 0 ~ 6까지 숫자로 표시(일요일 → 0/ 토요일 → 6). |
| getTime()/ setTime() | 1970년 1월 1일 12:00 이후의 시간 -> 밀리초(1/1000초) 단위로 표시 |
| getHours()/ setHours() | 시) 0 ~ 23까지 숫자로 표시합니다. |
| getMinutes()/ setMinutes() | 분) 0 ~ 59까지 숫자로 표시 |
| getSeconds()/ setSeconds() | 초) 0 ~ 59까지 숫자로 표시 |
| getMilliseconds()/ setMilliseconds() | 밀리초) 0 ~ 999까지 숫자로 표시 |
- 날짜 간격 계산
- getTime() 메서드: 1970년 1월 1일 12:00 이후의 시간 -> 밀리초 단위로 반환
- 두날짜 사이의 간격 -> 일수로 환산: (미래 날짜 - 과거 날짜) / (24 * 60 * 60 * 1000)
const date = new Date().getTime;수학 연산: Math 객체
- Math.floor(): 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수 반환(내림)
- Math.ceil(): 주어진 숫자와 같거나 큰 정수 중에서 가장 작은 수 반환(올림)
- Math.round(): 주어진 숫자를 반올림한 수와 가장 가까운 정수 반환(반올림)
- Math.random(): 0 이상 1 미만의 난수 반환
// 난수 최솟값
function getMinMaxRandom(min, max){
return Math.floor(Math.random() * (max - min)) + 1 + min; // 20 제외하고 싶으면 + 1 삭제
}
console.log(getMinMaxRandom(10, 20)); // 10 이상 20 이하의 무작위 정수4. 브라우저 객체 모델 사용
window 객체의 속성과 메서드/ 웹 브라우저에서 새 창 제어/ 웹 브라우저의 스크롤 이동
브라우저 객체 모델(BOM; Browser Object Model)
- 자바스크립트 언어 사양에 포함 X 웹 브라우저에 제공하는 객체
- window 객체: 웹 브라우저가 열릴 때마다 생성되는 최상위 관리 객체
- document 객체: 웹 문서와 관련 있는 기능, HTML 문서 정보
- location 객체: 현재 URL 정보
- history 객체: 방문 기록 정보
- navigator 객체: 웹 브라우저의 정보
- screen 객체: 방문자의 화면 정보
window 객체의 속성과 메서드
| 속성 | innerWidth | 웹 브라우저 화면의 너비 -> px(픽셀) 단위로 나타냄 |
| innerHeight | 웹 브라우저 화면의 높이 -> px 단위로 나타냄 | |
| outerWidth | 웹 브라우저 창의 너비 -> px 단위로 나타냄 | |
| outerHeight | 웹 브라우저 창의 높이 -> px 단위로 나타냄 | |
| screenTop/ screenY | 웹 브라우저 위쪽 면과 모니터의 간격 -> px 단위로 나타냄 | |
| 속성 | screenLeft/ screenX | 웹 브라우저 왼쪽 면과 모니터의 간격 -> px 단위로 나타냄 |
| pageXOffset/ scrollX | 웹 브라우저의 수평 스크롤 위치 -> px 단위로 나타냄 | |
| pageYOffset/ scrollY | 웹 브라우저의 수직 스크롤 위치 -> px 단위로 나타냄 | |
| 메서드 | alert() | 알림창 표시 |
| confirm() | 확인창 표시 | |
| prompt() | 입력창 표시 | |
| open() | 새로운 웹 브라우저 창 열기 window.open(경로, 이름, 속성);/ 속성 -> width/ height/ left/ top |
|
| close() | 웹 브라우저 창 닫기 window.close(); |
|
| setTimeout() | 일정 시간(ms) 뒤에 콜백 함수를 한 번만 실행 | |
| setInterval() | 일정 시간(ms)마다 콜백 함수를 반복적으로 실행 | |
| clearInterval | setInterval() 메서드로 반복 실행되는 함수 중지 | |
| scrollTo() | 웹 브라우저의 스크롤 -> 특정 위치만큼 이동 window.scrollTo(x좌표, y좌표); window.scrollTo({left: 100, top: 200}); // 객체 리터럴 전달 |
|
| scrollBy() | 웹 브라우저의 스크롤 -> 현재 위치에서 상대적 위치로 이동 window.scrollBy(x좌표, y좌표) window.scrollBy({top: 600, behavior: 'smooth'}); // *behavior 속성 전달 |
*smooth: 웹 브라우저 스크롤이 해당 위치로 마우스 휠 굴리듯이 부드럽게 이동
출처
코딩 자율학습 HTML + CSS + 자바스크립트
더북(TheBook): (주)도서출판 길벗에서 제공하는 IT 도서 열람 서비스입니다.
thebook.io
728x90
반응형
'FE > HTML | CSS | JS' 카테고리의 다른 글
728x90
반응형
1. 객체
- 데이터를 저장하고 처리하는 기본 단위
- 키(key)와 값(value)으로 구성된 속성의 집합
- 키: 공백 들어갈 경우 따옴표 사용
- 여러 개의 값을 가질 수 있고, 다른 자료형의 값도 가질 수 있음
- 또 다른 객체 or 함수 들어갈 수 있음
- 메서드(method): 객체에 정의된 함수
- ex. 배열, 숫자, 논리 데이터-> 한 객체의 속성으로 추가
- 또 다른 객체 or 함수 들어갈 수 있음
const person = {
name: ["Hong", "Gildong"],
age: 20,
isAdult = true
printInfo: function() {
console.log('printInfo');
}
};- {} 이용해 생성 => 리터럴(literal) 방식으로 객체 생성
- 빈 객체: 속성 한 개도 없는 객체
- const person = {};
속성 = 멤버 변수 = 프로퍼티
2. 객체 속성(프로퍼티)
객체 속성에 접근/ 객체 속성 값 변경/ 객체 속성 동적으로 추가/ 객체 속성 동적으로 삭제/ 데이터 관리 방법 이해
객체 속성에 접근
- 대괄호 연산자로 접근
- []를 사용해 객체의 속성에 접근
- 배열에서도 사용할 수 있음
- 키: 큰따옴표나 작은따옴표로 감싼 문자열 형태로 작성
- 마침표 연산자로 접근
- .를 이용해 객체 속성에 접근
- 키: 따옴표 X -> 키 식별자에 공백 O => 대괄호 연산자만 접근
const person = {
name: { // 객체 리터럴
firstNmae: "Gildong",
lastName: "Hong"
},
age: 20,
likes: ["apple", "samsung"], // 배열
printHello: function() { // 함수
return "hello";
}
};
// 대괄호 연산자
console.log(person["name"]); // { firstName:'Gildong', lastName:'Hong' }
console.log(person["name"]["firstName"]); // Gildong
console.log(person["age"]); // 20
console.log(person["likes"]); // [ 'apple', 'samsung' ]
console.log(person["printHello"]); // [Function: printHello]
console.log(person["printHello"]()); // hello
// 마침표 연산자
console.log(person.name.lastName); // Hong
console.log(person.age); // 20
console.log(person.likes[0]); // apple
console.log(person.printHello()); // hello// do it html+css+자바스크립트 웹 표준의 정석
빈 객체 만들기
// ver 1
let book2 = {}
// ver 2
let book2 = new Object()중첩 함수
let student = {
name: "Doremi",
score: {
history: 85,
science: 94,
average: function() {
return (this.history + this.science) / 2
}
}
}
student.score.history // 85
// 멤버 함수 접근
student.score.average() // 89.5
// average -> 주소 값객체 메서드 정의
메서드(method)
- 객체의 프로퍼티 중 객체의 동작을 지정하는 함수
- 선언 방법은 일반적인 함수 선언하는 것과 비슷
메서드명: function() {
...
}
let book3 = {
title: "점프 투 파이썬",
pages : 360,
buy : function() { // 익명 함수
console.log("이 책을 구입");
}
}객체 속성 값 변경
키로 속성에 접근 -> 값을 재할당
const person = {
name: "Hong Gildong"
};
person.name = "Kim"; // or person["name"] = "Kim";
console.log(person.name); // Kim객체 속성 동적으로 추가
객체에 X 속성 -> 해당 키와 값으로 구성된 새로운 속성이 객체에 추가
- 객체 리터럴 방식으로 빈 객체 생성, 변수에 할당
- 키에 값을 할당(= 객체 속성에 접근해 값 변경)
const person = {};
console.log(person); // {}
person.name = "Hong Gildong";
console.log(person); // { name: 'Hong Gildong' }
=> 객체 속성에 값을 할당해 접근 -> 해당 속성이 있는지 확인, 속성 X => 새로운 속성을 객체에 추가
- 객체 식별자와 키에 마침표 연산자 사용 -> 객체 속성에 접근
- 할당 연산자로 값을 할당 -> 값 변경 or 새로운 속성 추가
=> 속성을 동적으로 추가한다: 이미 만들어진 객체에 나중에 속성을 추가하는 것
객체 속성 동적으로 삭제
delete 키워드 명시
const person = {
name:"Hong Gildong"
};
delete person.name; // or delete person["name"]
console.log(person); // {}객체의 데이터 관리 방법 이해
const 키워드로 선언한 상수 변수 -> 재할당 X
But, const 키워드로 선언한 상수 변수에 할당한 객체에 속성 추가 or 삭제 O
=> 참조(reference)
데이터 관리 방식 -> 자료형: 기본 자료형/ 참조 자료형
- 깊은 복사(deep copy) - 기본 자료형
- 복사한 값을 재할당할 때 한쪽 데이터가 변경되어도 서로 영향 미치지 X 복사
- 변수에 데이터 할당할 때 데이터 그 자체 할당
-> 할당된 데이터 다른 변수에 다시 할당 -> 데이터 그대로 복사해 전달- 독립적으로 값 가진 상태(연동 X)
- 얕은 복사(shallow copy) - 참조 자료형
- 데이터 복사했을 때 한쪽 데이터 변경 -> 다른 쪽 데이터도 변경 => 서로 영향 받음
- 참조한다: 변수 공간에 데이터 할당(기본 자료형) X, 데이터가 위치하고 있는 메모리 주소 값 할당
- 객체 데이터: 별도의 메모리에 저장, 변수는 객체의 데이터가 저장된 메모리 주소 가짐
-> 변수에 객체 재할당 => const 키워드 재할당 X -> 오류 - But, 속성 추가 or 값 변경 O
- 변수에 할당된 객체의 주소 값 그대로, 주소 값이 참조하는 원본 객체 데이터 변경
// 깊은 복사
let num = 10;
let copyNum = num;
num = 20; // 변수 num 재할당
console.log(num); // 20
console.log(copyNum); // 10
// 얕은 복사
const person = {
name:"Hong Gildong"
};
const copyPerson = person; // 변수 person에 할당된 객체 -> 변수 copyPerson에 복사
person.name = "Hong"; // 변수 person에 할당된 객체의 값 변경
console.log(person.name); // Hong
console.log(copyPerson.name); // Hong3. 표준 내장 객체 사용
문자열 다루는 String 객체/ 배열 다루는 Array 객체/ 날짜와 시간 다루는 Date 객체, 수학 연산 다루는 Math 객체
표준 내장 객체(standard built-in object)
- 자바스크립트에 기본으로 내장된 객체
- 스코프의 위치 따지지 X 모든 영역에서 공통으로 사용 O
문자열: String 객체
| 속성 | length | 문자열 길이 반환 (최소 글자 수, 최대 글자 수 확인) |
| 메서드 | includes() | 메서드의 매개변수에 인자로 전달되는 문자열이 대상 문자열에 포함 O -> true/ X -> false 반환 (특정 문자열이 포함되어 있는지 확인) |
| replace() | 대상 문자열에서 메서드의 매개변수에 인자로 전달되는 문자열과 일치하는 한 부분을 찾아 -> 다른 데이터로 변경한 새로운 문자열을 반환 |
|
| replaceAll() | 대상 문자열에서 메서드의 매개변수에 인자로 전달되는 문자열과 일치하는 모든 부분 찾아 -> 다른 데이터로 변경한 새로운 문자열을 반환 |
|
| split() | 메서드의 매개변수에 인자로 전달되는 구분자를 이용 -> 대상 문자열을 여러 개의 문자열로 분리, 분리한 문자열을 새로운 배열로 반환 |
|
| toUpperCase() | 대상 문자열 -> 대문자로 변경해 반환 | |
| trim() | 대상 문자열의 앞뒤 공백을 제거한 값 반환 | |
| indexOf() | 대상 문자열과 일치하는 첫 번째 문자의 인덱스 반환 (특정 문자열이 포함되어 있는지 확인, 찾지 X -> -1) |
배열: Array 객체
- 파괴적 메서드: 메서드 사용했을 때 원본 데이터 변경하는 메서드
- 배열에 데이터 추가, 추출(제거하고 반환): push(), pop(), unshift(), shift()
- 비파괴적 메서드: 원본을 변경 X 메서드
| 속성 | length | 배열의 요소 개수 반환 (배열의 길이) |
| 파괴적 메서드 | push() | 배열의 맨 뒤에 데이터 추가 |
| pop() | 배열의 맨 뒤에서 데이터 추출 | |
| unshift() | 배열의 맨 앞에 데이터 추가 | |
| shift() | 배열의 맨 앞에서 데이터 추출 | |
| sort() | 배열의 요소 정렬 | |
| reverse() | 배열의 요소 역순으로 정렬 | |
| 비파괴적 메서드 | forEach() | 배열의 요소를 하나씩 순회하면서 요소마다 콜백(callback) 함수 호출 |
| filter() | 배열의 요소를 하나씩 순회하면서 요소마다 콜백 함수 호출 -> true를 반환하는 요소만 추출 추출한 요소로 새로운 배열을 만들고 만들어진 배열 반환 |
|
| 비파괴적 메서드 | find() | 배열의 요소를 탐색하면서 주어진 판별 함수를 만족하는 첫 번째 값 반환 |
| findIndex() | = find() 메서드 But, 값 대신 인덱스 숫자를 반환 | |
| includes() | 배열에 특정 값이 포함되어 있는지 확인해 포함 O -> true/ X -> false 반환 | |
| join() | 배열의 모든 요소 -> 주어진 구분자로 합침 |
날짜와 시간: Date 객체
- 인스턴스(instance) 만들기
- Date 객체 호출 -> 날짜와 시간 데이터 생성, 생성되는 데이터: 인스턴스
=> date 변수에 할당된 데이터: Date 객체의 인스턴스 - 연(year), 월(month), 일(date), 시(hour), 분(minute), 초(second) 정보 -> 숫자로 전달해 생성하는 방법
- 월: 0부터 시작(1월: 0/ 12월: 11)
- 문자열로 원하는 날짜와 시간 데이터 생성
- 월: 그대로 전달
- Date 객체 호출 -> 날짜와 시간 데이터 생성, 생성되는 데이터: 인스턴스
const date = new Date();
const date1 = new Date(2022, 11, 25); // Sun Dec 25 2022 00:00:00 GMT+0900 (한국 표준시)
const date2 = new Date(2022, 11, 25, 18, 30, 50); // Sun Dec 25 2022 18:30:50 GMT+0900 (한국 표준시)
const date1 = new Date("2022-12-25"); // Sun Dec 25 2022 09:00:00 GMT+0900 (한국 표준시)
const date2 = new Date("2022/12/25/18:30:50"); // Sun Dec 25 2022 18:30:50 GMT+0900 (한국 표준시)- Date 객체의 인스턴스에 할당된 날짜와 시간 -> 일반적인 형식으로 가공
- get 메서드: 날짜와 시간 정보 가져
- set 메서드: 날짜와 시간 정보 설정
| getFullYear()/ setFullYear() | 연도) 4자리 숫자로 표시 |
| getMonth()/ setMonth() | 월) 0 ~ 11까지 숫자로 표시(1월 → 0/ 12월 → 11). |
| getDate()/ setDate() | 일) 1 ~ 31까지 숫자로 표시 |
| getDay() | 요일) 0 ~ 6까지 숫자로 표시(일요일 → 0/ 토요일 → 6). |
| getTime()/ setTime() | 1970년 1월 1일 12:00 이후의 시간 -> 밀리초(1/1000초) 단위로 표시 |
| getHours()/ setHours() | 시) 0 ~ 23까지 숫자로 표시합니다. |
| getMinutes()/ setMinutes() | 분) 0 ~ 59까지 숫자로 표시 |
| getSeconds()/ setSeconds() | 초) 0 ~ 59까지 숫자로 표시 |
| getMilliseconds()/ setMilliseconds() | 밀리초) 0 ~ 999까지 숫자로 표시 |
- 날짜 간격 계산
- getTime() 메서드: 1970년 1월 1일 12:00 이후의 시간 -> 밀리초 단위로 반환
- 두날짜 사이의 간격 -> 일수로 환산: (미래 날짜 - 과거 날짜) / (24 * 60 * 60 * 1000)
const date = new Date().getTime;수학 연산: Math 객체
- Math.floor(): 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수 반환(내림)
- Math.ceil(): 주어진 숫자와 같거나 큰 정수 중에서 가장 작은 수 반환(올림)
- Math.round(): 주어진 숫자를 반올림한 수와 가장 가까운 정수 반환(반올림)
- Math.random(): 0 이상 1 미만의 난수 반환
// 난수 최솟값
function getMinMaxRandom(min, max){
return Math.floor(Math.random() * (max - min)) + 1 + min; // 20 제외하고 싶으면 + 1 삭제
}
console.log(getMinMaxRandom(10, 20)); // 10 이상 20 이하의 무작위 정수4. 브라우저 객체 모델 사용
window 객체의 속성과 메서드/ 웹 브라우저에서 새 창 제어/ 웹 브라우저의 스크롤 이동
브라우저 객체 모델(BOM; Browser Object Model)
- 자바스크립트 언어 사양에 포함 X 웹 브라우저에 제공하는 객체
- window 객체: 웹 브라우저가 열릴 때마다 생성되는 최상위 관리 객체
- document 객체: 웹 문서와 관련 있는 기능, HTML 문서 정보
- location 객체: 현재 URL 정보
- history 객체: 방문 기록 정보
- navigator 객체: 웹 브라우저의 정보
- screen 객체: 방문자의 화면 정보
window 객체의 속성과 메서드
| 속성 | innerWidth | 웹 브라우저 화면의 너비 -> px(픽셀) 단위로 나타냄 |
| innerHeight | 웹 브라우저 화면의 높이 -> px 단위로 나타냄 | |
| outerWidth | 웹 브라우저 창의 너비 -> px 단위로 나타냄 | |
| outerHeight | 웹 브라우저 창의 높이 -> px 단위로 나타냄 | |
| screenTop/ screenY | 웹 브라우저 위쪽 면과 모니터의 간격 -> px 단위로 나타냄 | |
| 속성 | screenLeft/ screenX | 웹 브라우저 왼쪽 면과 모니터의 간격 -> px 단위로 나타냄 |
| pageXOffset/ scrollX | 웹 브라우저의 수평 스크롤 위치 -> px 단위로 나타냄 | |
| pageYOffset/ scrollY | 웹 브라우저의 수직 스크롤 위치 -> px 단위로 나타냄 | |
| 메서드 | alert() | 알림창 표시 |
| confirm() | 확인창 표시 | |
| prompt() | 입력창 표시 | |
| open() | 새로운 웹 브라우저 창 열기 window.open(경로, 이름, 속성);/ 속성 -> width/ height/ left/ top |
|
| close() | 웹 브라우저 창 닫기 window.close(); |
|
| setTimeout() | 일정 시간(ms) 뒤에 콜백 함수를 한 번만 실행 | |
| setInterval() | 일정 시간(ms)마다 콜백 함수를 반복적으로 실행 | |
| clearInterval | setInterval() 메서드로 반복 실행되는 함수 중지 | |
| scrollTo() | 웹 브라우저의 스크롤 -> 특정 위치만큼 이동 window.scrollTo(x좌표, y좌표); window.scrollTo({left: 100, top: 200}); // 객체 리터럴 전달 |
|
| scrollBy() | 웹 브라우저의 스크롤 -> 현재 위치에서 상대적 위치로 이동 window.scrollBy(x좌표, y좌표) window.scrollBy({top: 600, behavior: 'smooth'}); // *behavior 속성 전달 |
*smooth: 웹 브라우저 스크롤이 해당 위치로 마우스 휠 굴리듯이 부드럽게 이동
출처
코딩 자율학습 HTML + CSS + 자바스크립트
더북(TheBook): (주)도서출판 길벗에서 제공하는 IT 도서 열람 서비스입니다.
thebook.io
728x90
반응형
