1.객체 생성
a.객체 변수로 객체 생성
b.배열 객체 생성
c.연관 배열
d.2차원 배열
2.내장 객체
a.Array 객체
b.Date 객체
c.Math 객체
3.브라우저 관련 객체
객체 생성
객체 변수로 객체 생성
var car = {
name : "Sonata", //속성
speed : 100,
color : "white",
door : 4,
start : funtion() { //메소드
return this.speed+10;
}
};
var exam = new Object();
exam.kor = 30;
exam.eng = 40;
exam.math = 50;접근 방법
객체명.속성명
객체명['속성명']
car.name
car['speed']
배열 객체 생성
//초깃값 있을 때
var 배열명 = [원소1, 원소2, 원소3, ...];
var 배열명 = Array(원소1, 원소2, 원소3, ...);
//초깃값 없을 때(n을 비워두어 크기를 지정하지 않을수도 있음)
var 배열명 = new Array(n);
var 배열명 = [n]
배열 객체 생성 확인 방법
typeof 배열명 → object
Array.isArray(배열명) → true
배열명 instanceof Array→ true
<script>
var city=new Array("Seoul","Busan","Incheon");
function printArr() {
if(city instanceof Array) { //true면
document.write("배열 객체가 생성되었습니다.<p/>");
var i;
for(i=0; i<city.length; i++) {
document.write("배열 데이터 ["+ i + "] = " + city[i] + "<br>");
}
}
else { //false면
document.write("배열 객체가 아닙니다.<br>");
document.write("데이터 : " + city + "<br>");
}
}
printArr();
document.write("<p/> city 변수 타입 : " + typeof city + "<br>");
document.write("배열 객체 확인 결과 : " + Array.isArray(city) + "<br>");
</script>//배열이 들어있는 배열에서 배열의 값(3) 꺼내기
var nums = new Array(5, 10, 21, "hello",new Array(2,3,4));
console.log(nums[4][1]);For~in(반복문)을 통해 배열의 index값을 꺼낼 수 있다.
var arr = [1, 2, 3, "hello"];
//for(var i=0; i<arr.length; i++)
for(var i in arr)
document.write(arr[i]+"<br />");
배열에 저장된 데이터 삭제 / 초기화
<script>
var arrdata=[];
function insertArr() {
var i=0;
for(i=0; i<=99 ; i++) {
arrdata[i]=i+1; // 1~100 저장
document.write(arrdata[i] + " "); // 데이터 출력
}
document.write("<p>배열 크기 : " + arrdata.length + "</p>");
}
function delDataArr() {
var i;
for(i=0; i<arrdata.length; i++) {
arrdata[i]=0; // 배열 데이터를 0으로 초기화
}
selectArr(); //데이터 조회
}
function allDelArr() {
arrdata.length=0; // 배열 초기화
selectArr(); //데이터 조회
}
function selectArr() {
var i;
for(i=0; i <arrdata.length; i++) {
document.write(arrdata[i] + " "); // 데이터 조회
}
document.write("<p> 배열 크기 : " + arrdata.length + "</p>");
document.write("<a href='23_arr.html'>돌아가기</a>");
}
insertArr(); // 배열 데이터 생성 함수 호출
</script>
<p/>
<button type="button" onclick="delDataArr()">배열 데이터 초기화</button>
<button type="button" onclick="allDelArr()">배열 데이터 삭제</button>
연관배열
인덱스를 문자열로 설정하고 이 문자열에 값을 연결함
var 배열명 = { 키1:값1, 키2:값2,... };접근방법
배열명.키
배열명['키']
var data={'f0':100, 'f1':200, 'f2':300}; //배열 생성
data['f3']=400; // 배열 데이터 저장(인덱스 대신에 키를 적어줌)
data.f4=500; // 배열 데이터 저장
document.write(data.f0 + "<br>"); // 'f0'키 데이터 조회
document.write(data['f2'] + "<br>"); // 'f2'키 데이터 조회For~in(반복문)을 통해 배열의 값을 꺼낼 수 있다.
var data={'f0':100, 'f1':200, 'f2':300}; //배열 생성
for(var i in data)
document.write(data[i]+"<br />");
2차원 배열
//2차원 배열 만들기
var d2data=[[10, 20, 30, 40, 0], [60, 70, 80, 90, 0]];
d2data[0][4]=50;
d2data[1][4]=100;
document.write("2차원 배열 첫 번째 데이터 : " + d2data[0][0] + "<br>");
document.write("2차원 배열 행 길이 : " + d2data.length + "<br>");
document.write("2차원 배열 열 길이 : " + d2data[0].length + "<br>");
//1차원 배열로 2차원 배열 만들기
var arr0=[10, 20, 30, 40, 50];
var arr1=[11, 21, 31, 41, 51];
var allArr=[arr0, arr1]; // 2차원 배열 생성
내장 객체
Array 객체
-배열이나 요소를 합침
concat() : 기존 배열에 요소를 추가해 새로운 배열을 만든다.(두 개 이상의 데이터를 결합하거나 다른 배열 객체를 결합.)
join() : 배열의 모든 요소를 문자열로 변환한 후 합친다. 이때 구분자를 지정할 수 있다.
-배열의 데이터를 검색하여 인덱스 위치를 반환
indexOf() : 주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 반환. 없으면 -1을 반환한다.
lastIndexOf() : 맨 마지막 원소부터 검색함. 일치하는 값이 있는 배열 요소의 첫 인덱스를 반환.
-배열에서 요소를 꺼냄(Stack)
pop() : 배열에서 마지막 요소를 꺼내 반환.(꺼낸 값은 제거 된 상태로 반환. 진짜로 꺼내버리는거임)
push() : 배열의 맨 끝에 하나 이상의 새로운 요소를 추가하고, 새로운 length를 반환한다.
var x = new Array();
x.push(3);
x.push(52);
x.push(77);
console.log("x:"+x);
var y = x.pop();
console.log("y:"+y);
console.log("x:"+x);
-새로운 요소 추가
shift() : 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환한다.
unshift() : 배열의 시작부분에 새로운 요소를 추가하고, 새로운 length를 반환한다.
-정렬
reverse() : 배열의 배치 순서를 역순으로 바꿈
sort() : 배열 요소를 지정한 조건에 따라 정렬한다.(기본 정렬 순서는 유니코드 코드 포인트를 따른다.)
splice() : 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.
var arr = [0,1,2,3,"hello"];
console.log(arr);
//1번째 index에서부터 2개를 지우고 "hi" 입력
arr.splice(1,2,"hi");
console.log(arr);
//2번째 index부터 0개를 지우고 "hi" 입력(그냥 추가만 되는거임)
arr.splice(2,0,"hi");
console.log(arr);
slice() : 배열의 일부를 추출한 새 배열을 반환한다. 원본 배열은 수정되지 않음.
every() : 배열의 모든 요소가 주어진 함수에 대해 참이면 true, 그렇지 않으면 false를 반환한다.
filter() : 배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만든다.
forEach() : 배열의 모든 요소에 대해 주어진 함수를 실행한다.
toString() : 배열에서 지정한 부분을 문자열로 반환한다.(이때 각 요소는 쉼표로 구분)
map() : 배열의 데이터를 함수의 인자로 전달하고 함수의 수행 결과를 반환받아 새로운 배열 생성
Date 객체
//현재 날짜
var d = new Date();
//특정 날짜
var d = new Date("2022-08-12")
//특정 날짜와 시간
var d = new Date("2022-08-12T18:00:00")
var d = new Date(2022,07,12,18,00,00) //월(month)은 0부터 시작| 가져오기-Date()기준 | 설정하기 | 의미 | 설명 |
| getFullYear() | setFullYear() | 년도 | |
| getMonth() | setMonth() | 월 | 0~11 > 1월~12월 |
| getDate() | setDate() | 일 | |
| getDay() | setDay() | 요일 | 0~6 > 일요일 ~ 토요일 |
| getHours() | setHours() | 시간 | |
| getMinutes() | setMinutes() | 분 | |
| getMilliseconds() | setMilliseconds() | 밀리초 | |
| getSeconds() | setSeconds() | 초 | |
| getTime() | setTime() | Unix 타임 | 1970/1/1 12:00 기준 경과한 밀리 초 |
| 함수명 | 설명 | |
| toString() | Fri Aug 30 2022 22:05:03 GMT+0900 (대한민국 표준시) | |
| toDateString() | Fri Aug 30 2022 | |
| toLocaleString() | 2022. 8. 30. 오후 10:05:11 | |
| toLocaleDateString() | 2022. 8. 30. | |
Math 객체
| Math.min(x,y,z....) | 가장 작은 값 반환 |
| Math.max(x,y,z....) | 가장 큰 값 반환 |
| Math.random() | 0보다 크거나 같고 1보다 작은 무작위 숫자 반환 |
| Math.round(x) | 소수점 첫 번째 자리에서 반올림 후 반환 |
| Math.floor(x) | 인수와 같거나 작은 수 중에서 가장 큰 정수 반환 |
| Math.ceil(x) | 인수와 같거나 큰 수 중에서 가장 작은 정수 반환 |
| Math.abs(x) | x의 절댓값 반환 |
| Math.sqrt(x) | x의 제곱근 반환 |
| Math.cbrt(x) | x의 세제곱근 반환 |
| Math.exp(x) | e의 x제곱근 값을 반환 |
| Math.log(x) | x의 자연로그 값을 반환.(ln x) |
| Math.log2(x) | x의 2를 밑으로 가지는 로그 값을 반환 |
| Math.pow(x,y) | x의 y제곱을 반환 |
| Math.sign(x) | x의 부호 값을 반환 |
브라우저 관련 객체
브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화 해 놓은 것.
window 객체
: 최상위 객체
height : 새 윈도우의 높이
width : 새 윈도우의 너비
location : 주소 입력창 유무
menubar : 메뉴 유무
resizable : 화면 크기 조절 가능 여부
status : 상태 표시줄 유무
toolbar : 툴바 유무
left: 왼쪽 기준 팝업 위치 지정
top: 상단 기준 팝업 위치 지정
scrollbars: 스크롤바 유무
fullscreen: 풀스크린 출력
channelmode: 채널모드 출력
*픽셀값 혹은 yes, no, 1, 0으로 값 입력 가능
- window 객체의 기본 메소드
moveBy(x, y) : 윈도우의 위치를 상대적으로 이동
moveTo(x, y) : 윈도우의 위치를 절대적으로 이동
resizeBy(x, y) : 윈도우의 크기를 상대적으로 지정
resizeTo(x, y) : 윈도우의 크기를 절대적으로 지정
scrollBy(x, y) : 윈도우 스크롤의 위치를 상대적으로 이동
scrollTo(x, y) : 윈도우 스크롤의 위치를 절대적으로 이동
focus() : 윈도우에 초점 맞춤
blur() : 윈도우에 맞춘 초점 제거
close() : 윈도우 닫음
screen 객체
: 웹브라우저 화면이 아닌 운영체제 화면의 속성을 갖는 객체
- screen 객체의 속성
width : 화면의 너비
height : 화면의 높이
availWidth : 실제 화면에서 사용 가능한 너비
availHeight : 실제 화면에서 사용 가능한 높이
colorDepth : 사용 가능한 색상 수
pixelDepth : 한 픽셀당 비트 수
location 객체
: 웹브라우저의 주소 표시줄과 관련된 객체
href : 문서의 URL 주소
host : 호스트 이름과 포트번호 // localhost:30763
hostname : 호스트 이름 // localhost
port : 포트 번호 // 30763
pathname : 디렉토리 경로 // /a/index.html
hash : 앵커 이름(#~) // #beta
search : 요청 매개변수 // ?param=10
protocol : 프로토콜 종류 // http:
- location 객체의 메소드
assign(link) : 현재 위치를 이동
reload() : 새로고침
replace(link) : 현재 위치를 이동(뒤로가기 사용 불가)
navigator 객체
: 웹페이지를 실행 중인 브라우저에 대한 정보가 담긴 객체
- navigator 객체의 속성
appCodeName : 브라우저의 코드 이름
appName : 브라우저의 이름
appVersion : 브라우저의 버전
platform : 사용 중인 운영체제의 시스템 환경
userAgent : 웹 브라우저 전체 정보
History 객체
읽기 전용. 돌아다녔던 사이트 주소 저장
'프론트' 카테고리의 다른 글
| Javascript 스크립트 작성 방식 (0) | 2022.09.04 |
|---|---|
| JavaScript 문서 객체(DOM) (0) | 2022.09.03 |
| JavaScript 변수, 함수, 입출력방법, 이벤트 (0) | 2022.08.30 |
| CSS 반응형 웹 (0) | 2022.08.29 |
| CSS 변형, 트랜지션, 애니메이션 (0) | 2022.08.25 |