자바스크립트 객체 개념 총정리

자바스크립트
객체 기반 언어
기능, 속성 가짐
TV를 예를들면,
TV는 객체(Object)
메서드(method) : 켜다(), 끄다(), 볼륨 높이기(), 볼륨 낮추기()
속성(Property) : 높이;, 너비;, 색상;, 무게;

// 코드 기본

객체.메소드(); //객체의 메서드를 실행
객체.속성; //객체의 속성값을 가져옴
객체.속성 = 값; //객체의 속성값을 바꿈

객체의 종류
내장객체
브라우저 객체모델(BOM, Browser Object Model)
문서 객체 모델 (DOM, Document Object Model)
내장객체
자바스크립트 엔진에 내장되어 있어 필요한 경우 생성해서 사용 가능
문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등
브라우저 객체 모델(BOM)
브라우저 객체 모델은 브라우저에 계층 구조로 내장되어 있는 객체를 말함.
window(브라우저), screen, location(주소 창), history, navigator 객체 등
window(브라우저)는 document(문서영역) 그리고 location 객체의 상위 객체

자바스크립트에서는 현재 사이트에서 다른 사이트로 이동시, location 객체에 참조 주소(href) 속성을 바꾸면 가능
window.location.href = "www.google.com"
이런식으로
문서 객체 모델(DOM)은 HTML 문서 구조를 말함. HTML 문서의 기본 구조는 최상위 객체로 <html>이 있으며,
그 하위 객체로는 <head>와 <body>가 있다.
자바스크립트의 문서 객체 모델은 IE 8 이하 버전에서는 호환성이 떨어지기 때문에 사용하기 힘들다는 단점이 있다.
이러한 점을 극복하기 위해 제이쿼리 문서객체 모델을 많이 사용한다.

내장객체(Built - in Object)

- 브라우저의 자바스크립트 엔진에 내장된 객체를 말하며 필요한 경우 객체를 생성해서 사용 가능

- 문자(Stirng), 날짜(Date), 배열(Array), 수학(Math), 정규 표현 객체(RegExp Object) 등이 있음.

참조 변수(인스턴스 이름) = new 생성함수();

new 키워드를 이용하여 기본 객체 Object() 를 이용해 객체를 생성함

객체는 변수 tv를 만들고, 이를 이용해서 객체의 속성과 메서드를 생성

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var tv = new Object();
        tv.color = "white";
        tv.price = 300000;
        tv.info = function(){
            document.write("tv.색상 : " + this.color,"<br/>");
            document.write("tv.가격 : " + this.price,"<br/>");
        }
        
        var car = {
            color:"black",
            price:5000000,
            info : function(){
                document.write("car 색상 : " + this.color, "<br/>");
                document.write("car 가격 : " + this.price, "<br/>");
            }
        }
        
        
        document.write("<h1>tv 객체 메서드 호출</h1>");
        tv.info();
        document.write("<h1>car 객체 메서드 호출</h1>");
        car.info();

    </script>
</body>
</html>

결과

날짜 정보 객체

날짜나 시간 관련 정보를 제공받고 싶을 때는 날짜 객체(Date Object)를 생성

참조변수 = new Date(); 
ex) var t = new Date();

-------------------------------------------------------

1. 참조변수 = new Date("연/월/일"); ex) var t = new Date("2002/05/31");
2. 참조변수 = new Date(연, 월 -1, 일); ex) var t = new Date(2002,4,31);

날짜 관련 메서드

날짜 정보를 가져올 때(GET)		날짜 정보를 수정할 때(SET)
getFullYear()	연도 정보를 가져옴	setFullYear()	연도 정보만 수정함
getMonth()	월 정보를 가져옴(현재 월-1)	setMonth()	월 정보만 수정함(월-1)
getDate()	일 정보를 가져옴	setDate()	일 정보만 수정함
getDay()	요일 정보를 가져옴 (일 : 0 ~ 토 : 6)	'요일'은 날짜를 바꾸면 자동으로 바뀌므로 setDay()는 없음
getHours()	시 정보를 가져옴	setHours()	시 정보만 수정함
getMinutes()	분 정보를 가져옴	setMinutes()	분 정보만 수정함
getSeconds()	초 정보를 가져옴	setSeconds()	초 정보만 수정함
getMilliseconds()	밀리초 정보를 가져옴(1/1,000초 단위)	setMillisecond()	밀리초 정보만 수정함
getTime()	1970년 1월 1일부터 경과된 시간을 밀리초로 표기함	setTime()	1970년 1월 1일부터 경과된 시간을 밀리초로 수정함
toGMTString()	GMT 표준 표기 방식으로 문자형 데이터로 변환함	toLocalsString()	운영 시스템 표기 방식으로 문자형 데이터로 변환함

코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var today = new Date();
        var nowMonth = today.getMonth(),
        nowDate = today.getDate(),
        nowDay = today.getDay(); // 객체를 여러개 이어서 생성

        document.write("<h2> 오늘 날짜 정보 </h2>");
        document.write("<h2> 현재 월: " + nowMonth + "</h2> <br>");
        document.write("<h2> 오늘 일: " + nowDate + "</h2> <br>");
        document.write("<h2> 현재 요일(일요일0 부터 토요일6까지 0~6): " + nowDay + "</h2> <br>");
        

        var mybirthday = new Date(1995,10,4);
        var theMonth = mybirthday.getMonth(),
        theDate = mybirthday.getDate(),
        theDay = mybirthday.getDay();

        document.write("<h1> 내 생일 정보 </h1>");
        document.write("<h1>"+ theMonth + "</h1>");
        document.write("<h1>" + theDate + "</h1>");
        document.write("<h1>" + theDay + "</h1>");
        
    </script>
</body>
</html>

결과

연말까지 얼마나 시간이 남았는지 확인하는 코드 작성해보기

new Date 객체 만드는 것과
diffDate으로 객체를 생성해서 시간 차이를 구하고
Math 내장 객체 중에 수학 객체를 사용해서 다음과 같이
참고로 시간은 1초를 1000msc 로 보고 있어, 다음과 같이 msc를 일 단위로 만들어주기 위해서 나눠줘야함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var today = new Date();
        var nowYear = today.getFullYear();
        
        var theDate = new Date(nowYear,12,31);
        var diffDate = theDate.getTime() - today.getTime(); // 남은날

        var result = Math.ceil( diffDate / (60 * 1000 * 60 * 24));
        // 1초 1000 msc
        // 1분 1000 * 60
        // 1시간 1000 * 60 * 60
        // 24시간 1000 * 60 * 60 * 24

        document.write("<h2> 연말 D-day: " + result + "일 남았습니다. </h2>");
        
    </script>
</body>
</html>

결과

수학 객체

더하기, 곱하기, 나누기 등은 산술 여산자를 사용하면 된다.
최댓값, 최솟값, 반올림값 등은 산술연산자로 구할 수 없고 수학 객체 메서드를 이용하면 수학과 관련된 일련의 작업들을 처리할 수 있다.

수학 객체의 메서드 및 상수

종류	설명
Math.abs(숫자)	숫자의 절댓값을 반환
Math.max(숫자1, 숫자2, 숫자3, 숫자4)	숫자 중 가장 큰 값을 반환
Math.min(숫자1, 숫자2, 숫자3, 숫자4)	숫자 중 가장 작은 값을 반환
Math.pow(숫자, 제곱값)	숫자의 거듭제곱값을 반환
Math.random()	0~1사이의 난수를 반환
Math.round(숫자)	소수점 첫째자리에서 반올림하여 정수 반환
Math.ceil(숫자)	소수점 첫째 자리에서 무조건 올림하여 정수 반환
Math.floor(숫자)	소수점 첫째 자리에서 무조건 내림하여 정수 반환
Math.spirt(숫자)	숫자의 제곱근값을 반환
Math.PI	원주율 상수를 반환

문자열 객체(String Object)

문자열 객체는 문자형 데이터를 객체로 취급하는 것으로, 자바스크립트에서 가장 많이 사용한다.
문자열 객체 생성하기

// 2가지  방법

 1) var 참조 변수 = new String(문자형 데이터);
 var t = new String("hello javascript"); //문자열 객체 생성

 2) var 참조변수 = 문자형 데이터;
 var t = "hello javascript";

문자열 객체의 메서드 및 속성

종류	설명
charAt(index)	문자열에서 인덱스 번호에 해당하는 문자를 반환
indexOf("찾을 문자")	문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환, 만일 찾는 문자가 없으면 -1을 반환
lastIndexOf("찾을 문자")	문자열에서 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환, 만일 찾는 문자가 없으면 -1을 반환
match("찾을 문자")	문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 반환, 만일 찾는 문자가 없으면 null을 반환
replace("바꿀문자", "새문자")	문자열에서 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 새 문자로 치환
search("찾을문자")	문자열에서 왼쪽부터 찾을문자와 일치하는 문자를 찾아 제일 먼저 일치하는 인덱스 번호 반환
slice(a, b)	a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환 var str = "hello javascript" str.slice(3,7); <- "lo j"를 반환함 * -1은 뒤에서부터 첫 번째 글자를 가리킨다.
substring(a, b)	a 인덱스부터 b 인덱스 이전 구간의 문자를 반환 var str = "hello javascript" str.substring(3,7); <- "lo j"를 반환함 var str = "hello javascript" str.substring(3,-3) <- "hel"을 반환 / 여기에서 -3은 인덱스 0을 가리킨다 그러므로 인덱스 0부터 인덱스 3이전 구간의 문자를 반환
substr(a, 문자개수)	문자열에 a 인덱스부터 지정한 문자 개수만큼 문자열을 반환
split("문자")	지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환 var str = "webkmobilek2002"; var arr = str.split("k"); <-- arr = 0 : "web", 1 : "mobile", 2 : "2002"
toLowerCase()	문자열에서 영문 대문자를 모두 소문자로 바꿈
toUpperCase()	문자열에서 영문 소문자를 모두 대문자로 바꿈
length	문자열에서 문자의 개수를 반환
concat("새로운문자")	문자열에서 새로운 문자열을 결합
charCodeAt(index)	문자열 index에 해당 문자의 아스키 코드 값을 반환
fromCharCode(아스키 코드값)	아스키 코드값에 해당하는 문자를 반환 String.fromCharCode(65); <- "A"를 반환
trim()	문자의 앞 또는 뒤에 공백 문자열을 삭제 ("hello" => "hello");

배열객체

배열 객체는 array object

기본형은

1)) var 참조 변수 = new Array();
참조 변수[0] = 값1;
참조 변수[1] = 값2;
....

2)) var 참조 변수 = new Array(값1, 값2, 값3, ... 갑n)

3)) var 참조 변수 = [값1, 값2, 값3...값n]

배열의 값을 불러오려면 인덱스 번호를 활용해서 불러올 수 있다

var arr = [1, "현대자동차", "아반떼",true]

for(var i = 0; i < arr.length; i++){
	document.write(arr[i], "<br>");
}

배열 객체에서 메서드 및 속성은

join()
reverse()
sort()
slice()
concat()
pop()
push()
shift()
unshift()
length()

등이 있다

join

배열에 저장된 모든 원소를 문자열로 변환한 후 연결하여 출력

<script>
    var city=["서울", "부산", "대전"]; 
    var joindata1=city.join();
    var joindata2=city.join('-');
    var joindata3=city.join(' 그리고 ');
    document.write("조인 결과1 : " + joindata1 + "<p/>");
    document.write("조인 결과2 : " + joindata2 + "<p/>");
    document.write("조인 결과3 : " + joindata3 + "<p/>");
</script>

concat

지정된 배열에 두 개 이상의 데이터를 결합하거나 다른 배열 객체를 결합

<script>
    var city01=["서울", "부산", "대전"]; 
    var city02=["대구", "광주", "인천"]; 
    var city03=["전주", "부여", "세종"]; 
    var data1=city01.concat("수원", "오산");
    var data2=city01.concat(city02);
    var data3=city01.concat(city03, city02);
    document.write("결과1 : " + data1 + "<p/>");
    document.write("결과2 : " + data2 + "<p/>");
    document.write("결과3 : " + data3 + "<p/>");
</script>

reverse

배열 원소의 순서를 반대로 정렬

<script>
    var data=[9, 8, 7, 6, 5, 4, 3, 2, 1]; 
    document.write("배열 : " + data.join() + "<p/>");
    var rdata=data.reverse();    // 배열 원소를 반대로 정렬 
    document.write("결과 : " + rdata + "<p/>");
</script>

sort

배열 원소를 정렬

<script>
    var ndata1=[19, 38, 67, 26, 55, 24, 53, 12, 31]; 
    var ndata2=[132, 2, 41, 123, 45, 1234, 6, 29, 4567]; 
    var edata=['Apple', 'Html', 'Game', 'Computer', 'Java']; 
    var kdata=['서울', '부산', '구포', '대구', '인천']; 
    document.write("수치 정렬1 : " + ndata1.sort() + "<p/>");
    document.write("수치 정렬2 : " + ndata2.sort() + "<p/>");
    document.write("수치 정렬3 : " + ndata2.sort(function(a, b) {return a - b;}) + "<p/>");
    document.write("영문 정렬 : " + edata.sort() + "<p/>");
    document.write("한글 정렬 : " + kdata.sort() + "<p/>"); 
</script>

slice

배열의 특정 범위에 속하는 원소만 선택하여 배열 생성

<script>
    var kdata=['서울', '부산', '구포', '대구', '인천', '대전', '세종']; 
    var str1=kdata.slice(0, 4);
    var str2=kdata.slice(2, -1);
    var str3=kdata.slice(-4, -2);
    document.write("부분 배열1 : " + str1 + "<p/>");
    document.write("부분 배열2 : " + str2 + "<p/>");
    document.write("부분 배열3 : " + str3 + "<p/>");
</script>

splice

배열의 원소 추가 또는 제거

<script>
    var kdata=['서울', '부산', '구포', '대구', '대전']; 
    var str1=kdata.splice(1, 2);   
    document.write("삭제 데이터 : " + str1 + "<br>");
    document.write("남은 배열 : " + kdata + "<p/>");
    var str2=kdata.splice(1, 1, '강릉', '세종');   
    document.write("삭제 데이터 : " + str2 + "<br>");
    document.write("남은 배열 : " + kdata + "<p/>");
    var str3=kdata.splice(2, Number.MAX_VALUE);    
    document.write("삭제 데이터 : " + str3 + "<br>");
    document.write("남은 배열 : " + kdata + "<p/>");
</script>

forEach

배열을 반복하며 저장된 데이터를 조회

<script>
    var kdata=['서울', '부산', '청주', '대구']; 
    function printArr(item, index) {
        document.write("배열 데이터 [" + index + "] : " + item + "<br>");
    }
    kdata.forEach(printArr);
</script>

<script>
    var data=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
    var sum=0;
    function addArr(value) {
        sum+=value;      
    }
    data.forEach(addArr);    
    document.write("배열 데이터 합 :" + sum + "<p/>");
</script>

브라우저 객체 모델

브라우저에 내장된 객체를 "브라우저 객체"라고 한다.
window는 브라우저 객체의 최상위 객체 이며, window 객체에는 하위 객체가 포함되어 있다.
계층구조로 이루어져 있으며, 이를 브라우저 객체 모델(BOM, Browser Object Model)라고 한다.

window 객체

- window는 브라우저 객체 최상위 객체로, 다음과 같은 메서드를 사용할 수 있음

window 객체의 메서드 종류

종류	설명
open("URL", "새 창 이름", "새 창 옵션")	URL 페이지를 새 창으로 나타냄
alert(data)	경고 창을 나타내고 데이터를 보여줌.
prompt("질문", "답변")	질문과 답변으로 질의 응답 창을 나타냄
confirm("질문 내용")	질문 내용으로 확인이나 취소 창을 나타냄 [확인] 버튼을 누르면 true를 반환하고, [취소] 버튼을 누르면 false를 반환한다.
moveTo(x, y)	지정한 새 차의 위치를 이동
setInterval(function(){자바스크립트 코드}, 일정시간간격)	지속적으로 일정한 시간 간격으로 함수를 호출하여 코드를 실행
setTimeout(function(){자바스크립트 코드}, 일정시간간격)	단 한 번 일정한 시간 간격으로 함수를 호출하여 코드를 실행

open() 메서드 팝업창 나타내기

- open()메서드를 이용하면 지정한 URL 페이지를 새 브라우저 창에 나타낼 수 있다.

최근에는 팝업 창을 사용자가 차단할 수 있어 팝업 창을 활용한 광고는 효과가 떨어졌다.

// 기본 구조
open("URL", "새 창 이름", "새 창 옵션")

window.open("http://www.naver.com", "네이버", "width=350", 
			height=400, left=50, top=10, scrollbars=no");

새 창의 옵션 종류

속성	설명
width	새 창의 너비를 설정
height	새 창의 높이를 설정
left	새 창의 수평(X축) 위치를 설정
top	새 창의 수직(Y축) 위치를 설정
scrollbars	새 창의 스크롤바의 숨김/노출을 설정 (숨김 = no, 노출 = yes)
location	새 창의 URL 주소 입력 영역의 숨김/노출을 설정 (숨김 = no, 노출 = yes)
status	새 창의 상태 표시줄 영역의 숨김/노출을 설정 (숨김 = no, 노출 = yes)
toolbars	새 창의 도구 상자 영역의 숨김/노출을 설정 (숨김 = no, 노출 = yes)

alert()

- 경고 창을 나타낼 때 사용

기본형

alert("경고 메시지")
ex) alert("잘못 입력했습니다.") //경고창을 나타냄

prompt()

- 질의응답 창을 나타낼 때 사용한다.

- window.prompt() 메서드 역시 다음 기본형처럼 앞에 window 객체를 따로 작성하지 않아도 사용할 수 있다.

기본형
prompt("질의 내용","기본답변");
ex) prompt("당신의 연령은?", "0"); //질의응답 창을 나타낸다.

confirm()

- 확인/추소 창을 나타낼 떄 사용한다.

- window.prompt() 메서드 역시 다음 기본형처럼 앞에 window 객체를 따로 작성하지 않아도 사용할 수 있다.

기본형 
confirm("질의 내용");
ex) confirm("정말로 삭제하시겠습니까?"); //확인/취소 창을 나타낸다.

- confirm()은 질문 창을 통해 확인 또는 취소 버튼을 클릭하도록 유도한다.

확인버튼은 true를 취소버튼은 false를 반환한다.

일정한 시간 간격으로 코드 실행하기

- 일정한시간 간격으로 코드를 실행하는 메서드로는 setInterval(), setTimeout()이 있다.

- setInterval()은 일정한 시간 간격으로 코드를 반복 실행

- setTimeout()은 일정한 시간후에 코드를 한 번만 실행하고 종료

setInterval() / clearInterval()

setInterval() 메서드는 코드를 일정시간 간격으로 반복실행

clearInterval() 메서드는 setInterval() 메서드를 취소시킴

* setInterval() 기본형

var 참조변수 = setInterval(function(){ 자바스크립트 코드}, 시간간격(ms));
var 참조변수 = setInterval("코드", 시간 간격(ms));

// ex) 3초 간격으로 변수 i의 값을 1씩 증가
var intv = setInterval(function(){i++;}, 3000); 
var intv = setInterval("i++", 3000);

* clearInterval() 기본형
clearInterval(참조변수); //참조 변수는 앞의 setInterval()을 참조한 변수

<script>
    var addNum = 0;
    var subNum = 1000;

    var auto = setInterval(function(){ //3초 간격으로 반복 실행 addNum의 값이 1씩 증가
        addNum++;
        console.log("addNum :" + addNum); 
    },3000);

    var auto2 = setInterval(function(){ //3초 간격으로 반복 실행 subNum의 값이 1씩 감소
        subNum--;
        console.log("subNum: " + subNum);
    },3000);
</script>
<body>
     
    //방문자가 해당 버튼을 클릭하면 setInterval()을 제거한다
    <button onclick="clearInterval(auto)">증가 정지</button>
    <button onclick="clearInterval(auto2)">감소 정지</button>
    
</body>

setTimeout() / clearTimeout()

setTimeout() 메서드는 일정 시간이 지나면 코드를 실행하고 종료

setTimeout() 메서드를 조금만 응용하여 재귀 호출을 하면 setInterval() 메서드처럼 사용 가능

clearTimeout() 메서드는 setTimeout() 메서드를 제거

기본형 

* setTimeout()

var 참조변수 = setTimeout(function(){ 자바스크립트 코드}, 시간 간격(msc));
var 참조변수 = setTimeout("자바스크립트 코드", 시간간격(ms));

ex) 5초 간격으로 변수 i의 값을 1씩 증가 
var tim = setTimeout(function(){i++;},5000);
var tim = setTimeout("i++",5000);

* clearTimeout(참조 변수);
clearTimeout(tim); //tim에 참조되어 있던 setTimeout()을 삭제

screen 객체

- 사용자의 모니터 정보(속성)를 제공하는 객체

- 모니터의 너비나 높이, 컬러 표현 bit를 반환

- 예) screen.width; 모니터의 너비 값을 반환

- 속성) width, height, availWidth, availHeight, colorDepth

location 객체

- 사용자 브라우저와 관련된 속성과 메서드를 제공

- 현재 url에 대한 정보(속성)와 새로고침(reload) 메서드를 제공

기본 구조는

location.속성;

location.메서드();

location.href; // 사용자 브라우저의 url 경로 값을 가져옴

location.href = "http://www.naver.com"; // 사용자 브라우저의 url 경로를 지정한 url 주소로 변경

location.reload(); // 사용자 브라우저를 새로 고침함

이외에도

- hash(해시값 #에 명시된 값)을 반환

- hostname (호스트 이름을 설정하거나 반환)

- host (url의 호스트 이름과 포트 번호를 반환)

- protocol (url의 프로토콜을 반환)

- search (url의 쿼리(요청값)을 반환)

- reload (새로 고침 f5 누른 것과 동일)

history 객체

- 사용자가 방문한 사이트의 기록을 확인하고, 이전 방문 사이트를 찾거나, 다음 방문 사이트로 이동

- 사용예)

- history.속성;

- history.메서드();

- history.메서드(n);

history.back() : 이전 방문 사이트로 이동

history.forward() ; 다음 방문 사이트로 이동

history.go(이동 숫자) : 이동 숫자에 -1 을 입력하면 1단계 이전의 방문 사이트로 이동

history.length : 방문 기록에 저장된 목록ㄱ의 개수를 반환

navigator 객체

- 현재 방문자가 사용하는 브라우저 정보와 운영체제 정보를 제공하는 객체

- 뭔가 나중에 많이 사용할 것 같은 객체임

- 스마트폰, 노트북, 데스크톱, 모니터 등 어떤 기기로 해당 화면을 보고 있는지 알려고 할때, UI UX 쪽에서 중요할듯

- 에를 들어, 크롬 브라우저에서

- navigator.userAgent

- 라고 입력시

- Mozilla/5.0 : 기본 플랫폼 정보

- (Windows NT 10.0; Win64; x64) : 운영체제 정보

- AppleWebKit/537.36 (KHTML, like Gecko) : 사용 중인 브라우저의 엔진 이름

- Chrome/104.0.0.0 : 사용 중인 브라우저 이름

- Safari/537.36 : 같은 엔진을 사용 중이며 호환 가능한 다른 브라우저

와 같은 정보를 알아볼 수 있고,

navigator 객체의 속성 종류는 다음과 같다

종류	설명
navigator.appCodeName	브라우저의 코드명을 반환합니다.
navigator.appName	브라우저의 이름을 반환합니다.
navigator.appVersion	브라우저의 버전을 반환합니다.
navigator.cookieEnabled	브라우저의 쿠키 사용 가능 여부를 반환합니다.
navigator.language	브라우저에서 사용되는 언어를 반환합니다.
navigator.onLine	브라우저가 온라인인지 여부를 반환합니다.
navigator.platform	브라우저가 실행되는 플랫폼 정보를 반환합니다.
navigator.product	브라우저에서 사용되는 엔진 이름을 반환합니다.
navigator.userAgent	브라우저와 운영체제 정보를 반환합니다.

저작자표시

'🗝️소프트웨어 > 📗JavaScript' 카테고리의 다른 글

[Vue.js] 문법 기초 2편(props, v-bind, v-on, router, axios) (0)	2022.09.18
[Vue.js] 문법 기초 1편(props, v-bind, v-on, router, axios) (0)	2022.09.18
중첩 for문 이용하여 테이블 만들기 (0)	2022.08.11
홀짝에 따라 다른 색상 주기(span태그, p태그 color, style 지정) (0)	2022.08.11
연산자 우선순위 (0)	2022.08.09