[JavaScript] Day 02_2 (Note + Code): 내장 객체, 브라우저 객체 모델, 문서 객체 모델

자바 스크립트 객체

1. 내장 객체 (Built-in Object)
자바 스크립트 엔진에 내장
문자(String), 날짜(Date), 배열(Array), 수학(Math) 등

2. 브라우저 객체 모델 (BOM Browser Object Model)
브라우저에 계층 구조로 내장되어 있는 객체를 말함
window(브라우저 창), screen(브라우저 화면), location(주소창), history(뒤로 가기, 앞으로 가기, 방문했던 기록들), navigator 등
(window는 상위 객체. 하위 객체에 document, location)

3. 문서 객체 모델 (DOM Document Object Model)
HTML 문서 구조를 객체화

4. 사용자 정의 객체

내장 객체 (Built-in Object)

1. 객체 생성
참조 변수 = new 생성 함수();

2. Date 객체

3. Math 객체: 객체 생성 없이 Math.으로 사용 가능.

4. Array 객체

5. String 객체: 문자열 취급을 해주는 객체. 리터럴 방식으로도 생성 가능.
let str = new String(“문자형 데이터”);
let str = “문자형 데이터”;

 //Date
      var today = new Date();
      console.log(today)

      var chistmas = new Date("2022-12-25");
      //console.log(chistmas.getDay());
      switch(chistmas.getDay()){
         case 0: console.log("일요일");
      }

      let month = today.getMonth(); //0~11월
      console.log(month+1);
      let fm = today.getDay(); //getDate날짜 getDay요일 숫자로. 
      console.log(fm);

      let time=today.getTime(); //1970/1/부터 카운트된 밀리초
      console.log(time);

//Math
      console.log(parseInt(Math.random()*100+1));
      console.log(Math.floor(Math.random()*100+1)); //위의 parseInt와 동일
      

//String
     let str = "JavaScript";
     console.log(str.charAt(1)); //charAt(i) i번째에 있는 문자 리턴
     console.log(str.indexOf('i')); //인자로 준 문자가 몇번째 인덱스에 있는지 리턴해준다. 대소문자를 구분하며 없는 문자일시 -1 리턴
     console.log(str.lastIndexOf('a')); //인자로 준 문자를 문자열에서 찾아내어 마지막 위치를 리턴
     console.log(str.substring(0,5)); //시작 인덱스부터 End 바로 앞까지 반환
     console.log(str.substr(0,5)); //시작 인덱스, 추출 갯수
     console.log(str.slice(0,5));//substring, substr, slice는 start가 end보다 큰 경우 처리하는 방법이 각자 다르다..
     console.log(str.split('S')); //S를 기준으로 두개의 배열로 나눈다. 인자를 기준으로 나누므로 해당 문자는 나눠진 배열에 포함되지 않음.

브라우저 객체 모델 (BOM Browser Object Model)
: 브라우저에 내장된 객체가 계층적 구조로 이루어져 있는 것

window 객체

: 최상위 객체

메서드
open(“url”, “새창 이름”, “새창 옵션들”): 팝업으로 새창 열기
alert(data): 경고창에 데이터 보여주기, 확인을 눌러야 다음 코드가 진행됨.
prompt(“질문”, “기본 답변”): 입력창
confirm(“질문”): 확인, 취소. 확인을 누르면 true 취소 누르면 false 리턴.
moveTo(x, y): 창의 위치를 좌표값으로 이동.
resizeTo(width, heigh): 창 크기 변경
setInterval(function(){}, 일정 시간 간격): 간격으로 function() 호출하여 실행 (반복)
clearInterval(인터벌 객체)
setTimeout(function(), 일정 시간 간격): 간격 이후 함수 한번 실행
clearTimeout(타임아웃 객체)

<body>
   <h3>js 10 page</h3>
   <button onclick="clearInterval(plusInt)">증가 정지</button> 
   <script>
   let plus= 0;
      //interval을 어떤 행위나 이벤트에 따라 멈춰주려면, 호출한 함수를 변수에 담아두고 그 변수를 clearInterval로 삭제시켜주면 된다. 
      let plusInt= window.setInterval(function(){
         plus++;
         console.log(plus);
      },1000);

	   var auto = setTimeout(function(){
    	  console.log("helloooooo");
   		},3000);
	 </script>
 </body>

*open()
#옵션
width: 창 너비, height: 창 높이, left: x축, top: y축(높이), scrollbars: no 숨김 yes 보임, location: no/yes, status: 상태 표시줄 영역 숨김/ 노출, toolbars: 도구 상자 영역 숨김/노출

<body>
   <h3>js 10 page</h3>
   <!-- on click. on이 붙어있는건 전부 이벤트 처리해줄 수 있는 속성들. 온클릭:버튼이 클릭될때 (이벤트) 실행해야 되는 자스 코드를 ""안에 작성-->
   <button onclick="location.reload()">새로고침</button>

   <script>
      open("js10_pop.html", "pop", "width=350, height=350, left=50, top=50, location=no, scrollbars=no, status=no");

js10_pop

<h2>pop up page</h2>

screen 객체

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

screen.속성;
width height: 보이는 모든 부분을 포함한 너비와 높이
availWidth availHeight: 작업 표시줄을 제외한 화면 너비와 높이
colorDepth: 사용자 모니터가 표현 가능한 컬러 bit

 //screen
      console.log(screen.width);
      console.log(screen.height);
      console.log(screen.availWidth);
      console.log(screen.availHeight);
      console.log(screen.colorDepth);

location 객체

: 현재 URL 관련 속성과 새로고침 메서드 등을 제공

href: 주소를 설정하거나, 현재 주소를 꺼낼 수 있음
hostname: 호스트 이름 설정, 현재 호스트 이름 알아낼 수 있음
host: 호스트 이름, 포트 번호 (현재 상태 꺼내거나 수정)
protocol: 프로토콜 반환
search: URL의 쿼리(요청되는 값. 주소의 ? 뒤)를 반환
reload(): 브라우저 새로고침

      //location
      var href = location.href;
      console.log(href);
      //confirm("이동할까요?");
      //location.href="http://127.0.0.1:5500/js/day02/js10_pop.html";
      console.log(location.protocol);

      var search = location.search;
      console.log(search);

history 객체
: 뒤로 가기 앞으로 가기 기능 메서드

back() 뒤로 가기
forward() 앞으로 가기
go(이동 숫자) ex) go(-2) 뒤로 두 번 감.

   <h1>page1</h1>
   <button onclick="location.href='js12.html'">2 page</button>

   <button onclick="history.forward()">앞으로 가기</button>
   <!-- <button onclick="history.go(1)">앞으로 가기</button> 
   //위와 동일 -->

   <button onclick="show()">show history length</button>
   
   <script>
      function show(){
         console.log(history.lenth);
      }

js12.html

<body>
   <h1>page2</h1>
   <button onclick="history.back()">뒤로 가기 back</button>
   <button onclick="history.go(-1)">뒤로 가기 go(-1)</button>
</body>

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

appVersion: 현재 브라우저의 버전 정보를 알려준다
language: 현재 브라우저가 사용하는 언어. 한글은 ‘ko’ 영어는 ‘en’
product: 현재 브라우저의 엔진 이름.
platform: 현재 컴퓨터 운영체제 정보
online: 온라인 상태 여부 제공
userAgent: 브라우저와 운영체제의 종합 정보 제공

  console.log(navigator.userAgent);

-> Mozilla/5.0
(Linux; Android 6.0; Nexus 5 Build/MRA58 N) 어떤 운영체제 이용하여 접근했는지
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/98.0.4758.102 Mobile 사용 중인 브라우저와 버전
Safari/537.36 호환되는 브라우저
->크롬 개발자 도구 > 네트워크> 스크롤 내리면 userAgent 볼 수 있음

document 객체
: 창에 표시되는 웹페이지를 관리. DOM 트리를 읽거나 함수를 이용하여 창을 관리할 수 있다.

characterSet: 문자 인코딩 (읽기 전용)
cookie: 문서의 cookie를 쉼표로 연결한 문자열
location: window.location 속성과 마찬가지로 location 객체 가리킴
readyState: 문서를 읽어 들인 상태 (읽기 전용)
referrer: 문서에 링크된 페이지 url
title: 문서 제목
URL: 문서 URL (읽기 전용)

close(): 문서 닫기. window.close()
open(): 문서 열기
write(): 문서 출력
writeln(): 문서 출력 + enter 값

자바스크립트 내장 함수
: 자바스크립트 엔진에 내장된 함수
parseInt()
parseFloat()
String()
Number()
Boolean()
isNan(): is Not a Number의 약자. 숫자가 아닌 문자가 포함되어 있으면 true

      var result = isNaN("53") //false
      console.log(result);
      result = isNaN("5-3") //true
      console.log(result);
      result=eval("5-3");
      console.log(result);

문서 객체 모델 (DOM Document Object Model)
DOM 트리를 구성하는 객체 하나를 Node라고 함.
문서 노드: 전체 문서를 가리키는 Document 객체
HTML 요소 노드: HTML 객체
텍스트 노드: 텍스트 객체

*노드 객체 가져오는 메서드
document.getElementById(id값): id 속성 값으로 노드 가져오기

document.getElementsByTagName(태그명): 태그명으로 노드 가져오기
document.getElementsByClassName(class속성 값): class 속성 값으로 노드 가져오기
document.getElementsByName(name 속성 값): name 속성 값으로 노드 가져오기

document.querySelector(“선택자”): CSS 선택자로 노드 가져오기
document.querySelectorAll(“선택자”): 선택자에 해당하는 노드들 전부 가져오기

document.head
document.body

<body>
   <div class="first">div1
      <div></div>
      <div></div>
      <div></div>
      <div id ="test!">test div</div>
   </div>
   <h1>hello</h1>;
   <script>
      var elem = document.getElementsByTagName("div");
      console.log(elem[0])

      elem=document.getElementsByTagName("h1");
      console.log(elem[0].innerText);

      document.getElementsByTagName("h1")[0].innerText="hi";

      console.log(document.getElementsByClassName("first"));
      console.log(document.getElementById("test"));
      console.log(document.getElementsByName("firstDiv"));

      console.log(document.querySelector("div")); // 처음나오는 한개
      console.log(document.querySelectorAll("div")); // 있는만큼 전부 
      //body > div 

   </script>

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[JavaScript] Day 02_2 (Note + Code): 내장 객체, 브라우저 객체 모델, 문서 객체 모델

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역