javascript_객체

song·2023년 9월 7일

JavaScript

목록 보기

16/21

객체 - object

클래스 이용해서 만든 것

let object = {
	key: "값", 
    key: "값"
}

key: value 형태로 이뤄져있다.
객체 안에는 변수, 배열, 함수, 객체 등을 다 넣을 수 있다.

{} 괄호 사용

let 객체 = {
    className: "Dclass", 
    time: "09~18", 
    s_num : 26, 
    능력단위: ['디자인UI', 'SQL응용', 'SQL활용'], 
    하는일:function(){
        alert('객체');
    }
}

// 객체값 불러오기, 함수 실행하기
console.log(객체);
console.log(객체.className);
console.log(객체.능련단위[1]);
객체.하는일();

// 기존 객체에 삽입
객체['branch'] = "강남";

날짜 객체(Date 객체)

로컬시간을 나타낸다.
자료형 : 숫자형
let dt = new Date();
dt.getFullYear();

getFullYear() : 년도, 4자리
getMonth() + 1 : 월, 1자리
- 0부터 1월로 치기 때문에 출력할 때는 +1을 해서 출력한다.
getDate() : 일, 1자리
getDay() : 요일, 1자리 숫자로 나옴
- 0 : 일요일, 6 : 토요일
- 조건문이나 배열을 이용해서 문자로 변경해서 출력하는 것을 추천한다.
getHours() : 시, 1자리
- 24시간제
getMinutes() : 분, 1자리
getSeconds() : 초, 1자리
getMilliseconds() : 밀리초, 1자리

년월일을 더하거나 뺄때는 아래 set내장함수 사용해야한다.
(이유: 37일, -1일이 나올수도 있음)

setMonth : 날짜가 월의 최대/최소 일수보다 커지거나 작아지면 자동으로 년 / 월을 바꾼다.
setDate : 날짜가 월의 최대/최소 일수보다 커지거나 작아지면 자동으로 년 / 월 / 일을 바꾼다.
dt3 = new Date(dt3.setDate(dt3.getDate()+30))
30일을 더한 값을 setDate로 잡고 date를 다시 생성하면 된다.
setTime()
getTime() : 1970.01.01 00:00:00초 기준으로 현재까지의 밀리초를 구함.

날짜 정보(요일) 찾기

생성자 함수

일반적으로 대문자로 시작.
(소문자로 해도 상관은 없지만 대부분의 개발자들이 시키는 규칙)
자바스크립트에서 기본적으로 제공하는 생성자 함수 모두 대문자로 시작.
생성자함수를 사용할 땐 모두 new 키워드를 사용함
let dt = new Date();

dataset

태그에 속성처럼 <data-데이터셋명="값"> 넣고 js에서 <dataset.데이터셋명>으로 넣어놓은 값을 가져올 수 있다.
```
<div id="box" data-count="0"></div>

let box = document.getElementById('box');
console.log(box.dataset.count);
```

location

a태그처럼 링크를 거는 객체

location.reload() : 새로고침
location.reload();
- 데이터 초기화.
location.href = "경로"
location.href="http://www.naver.com";
- a태그와 동일
  히스토리가 남는다.
location.replace("경로")
location.replace("http://www.naver.com");
- 히스토리가 남지 않는다.
  (해당 페이지로 돌아갈 수 없다. )
  다음 -> 해당페이지 -> 네이버 로 갔을 때 해당페이지에서 네이버로 가는 것을 replace로 했을 때 해당페이지의 방문기록을 지우기 때문에 네이버에서 뒤로가기 누르면 다음으로 가게된다.
  보안성을 위해 사용

location.hostname : 웹 호스트의 도메인 네임 (서버에 올려야 보임)
location.href : 현재 페이지 주소
location.pathname : 현재 페이지의 경로

스크린 사이즈 객체

스크린(화면), 브라우저 전체, 브라우저 사용 가능한 영역을 구한다.

screen: 화면 전체의 크기
- screen.width
  screen.height
- avail~ : 작업표시줄을 제외한 실제 사용할 수 있는 영역
  screen.availWidth
  screen.availHeight
document.body.client~: 실제 body의 사이즈
- body에 margin값이 있다면 margin값 제회하고 실제 사용할 수 있는 사이즈.
- document.body.clientWidth
  document.body.clientHeight
window.inner~: 윈도우창 안쪽. 실제 사용할 수 있는 화면의 사이즈
- window.innerWidth
  window.innerHeight
window.outer~: 윈도우창 자체 경계 끝까지. 브라우저 자체의 사이즈
- 개발도구가 켜져있다면 해당 부분도 포함이며, 상단 작업표시줄까지 포함이다.
  window.outerWidth
  window.outerHeight

스크린 위치 객체

window.screen~ : 스크린 기준(왼쪽, 위) 현재 윈도우창의 위치
- window.screenLeft
  window.screenTop
★요소.offsetTop : 문서 최상단 기준 현재 요소의 위치
- 스크롤 처리할 때 자주 쓰인다.
  document.getElementById('box').offsetTop
  document.getElementById('box').offsetLeft
요소.offsetWidth : padding과 border를 포함한 요소의 크기
- document.getElementById('box').offsetWidth

브라우저 구분

브라우저가 어떤 종류인지 확인하는 코드
navigator.userAgent
- 원래는 window.navigator.userAgent라고 써야하지만 window는 생략가능하다.
- 대소문자가 섞여서 나오기 때문에 소문자로 바꿔서 사용하길 추천한다.
  navigator.userAgent.toLowerCase();

장치 구분

navigator.userAgent : 브라우저 정보
- 중요. 여기에 정보 다 있음.
navigator.cookieEnabled : 쿠키 사용여부
- 24시간동안 열지 않기같은 기능을 실행할 때 사용.
navigator.platform : 실행되는 플랫폼
navigator.appCodeName : 브라우저 코드명
navigator.appName : 브라우저 이름
navigator.product : 사용하고 있는 엔진명
```
let userAgent2 = window.navigator.userAgent.toLowerCase();
let sp = ['android', 'iphone', 'ipad']; 

for(let i = 0; i < sp.length; i++){
     if(userAgent2.match(sp[i])){
          console.log(`${i}: ${sp[i]}`);
          location.replace('https://m.naver.com');
          break;
     }
}
-> 모바일인지 확인해서 모바일페이지로 넘기는 코드
```
모바일 페이지 넘길 때 replace(히스토리 안남음)랑 href(히스토리 남음) 둘 중 아무거나 써도 상관없다.
정석은 히스토리를 안남기는 것이니 replace를 쓰는 것이긴 하나 장치 체크해서 바로 url바꾸기 때문에 href써도 뒤로가기 눌러도 pc페이지로 넘어가지 않는다.
navigator.maxTouchPoints : 기기에 터치를 감지하는 부분이 있는지 없는지 판별
```
if(navigator.maxTouchPoints >= 1){
          // 스마트 기기라는 뜻
      }else{
          // 일반 기기
      }
```
- 하지만 이것은 정확하지 않다. 터치할 수 있는지 없는지만 체크할 수 있으니 최후의 방법이라고 생각하기.

window객체

창(브라우저) 관리

팝업창 생성 / 삭제(탭으로 동작)
window.open() - 빈 탭 띄움
window.open("https://www.naver.com"); - 새탭에서 띄움
window.open("https://www.naver.com", '_self'); 현재탭에서 띄움
window.open("./210.window_자식창.html", '_blank', 'width=300px, height=500px, left = 1000px, top=500px'); _blank를 넣어놓고(self는 안됨) 크기(width, height)와 위치(left, top)를 지정해줄 수 있다.

요소.close();앞에서 자식창 열 때 let child = window.open("./210.window_자식창.html", '_blank', 'width=300px, height=500px, left = 1000px, top=500px' 이렇게 저장하고 child.close()하면 된다.
var는 function끼리에서는 전역변수처럼 사용이 불가해서 자식창 생성할 때 var로 생성해도 뒤에서 닫는 메서드에서 해당 창이 인식이 안된다.

function empty_open(){
    window.open();
}
function blank_open(){
    window.open("./210.window_자식창.html");
}
function self_open(){
    window.open("./210.window_자식창.html", '_self');
}
let child;
function child_open(){
    // 부모창 위치
    let parent_pos_x = window.screenLeft;
    let parent_pos_y = window.screenTop;

    // 부모창 크기
    let parent_x = window.innerWidth / 2;
    let parent_y = window.innerHeight / 2;

    // 자식창 크기
    let child_x = 300;
    let child_y = 500;

    // 자식창 위치
    let child_pos_x = parent_pos_x + parent_x - (child_x / 2);
    let child_pos_y = parent_pos_y + parent_y - (child_y / 2);

    // 자식창을 이미 켜놨다면 닫고 다시 생성할 코드
    if(child != null){
        child_close();
    }

    child = window.open("./210.window_자식창.html", '_blank', 'width='+child_x+'px, height='+child_y+'px, left = '+child_pos_x+'px, top='+child_pos_y+'px');
}
function child_close(){
    child.close();
}

값 주고 받기

창에서 창으로 정보전달
정보전달은 서버에 올려놔야만 확인 가능함. 보안상의 이유로 로컬에서는 막힘.

부모 > 자식 값 보내기

자식창.document.getElementById('') 해서 해당 값을 가져올 수 있다.

let child;
child = window.open("./210.window_자식창.html", '_blank', 'width='+child_x+'px, height='+child_y+'px, left = '+child_pos_x+'px, top='+child_pos_y+'px');
child.document.getElementById('child_txt').value = parent_txt.value;

하지만 각각의 파일들의 독립성을 지켜줘야하기 때문에 위와같이 직접적으로 값을 넣는 것은 추천하지 않는다.

자식창

//부모 js
let parent_txt = document.getElementById('parent_txt');
child.get_from_parent(parent_txt);

//자식 js
function get_from_parent(txt){
      document.getElementById('child_txt').value = txt;
}

자식 > 부모 값 보내기
- opener를 쓰면 된다.
  opener.get_from_child(document.getElementById('child_txt').value);

Math 객체

★random : 무작위의 수. 0.0000~0.9999
- 실행 될 때 마다 랜덤한 숫자를 뽑는다.
  let rand = Math.random();
- Math.floor(Math.random() * (max - min + 1)) + min > 최대값 포함
  Math.floor(Math.random() * (max - min)) + min > 최소값 포함
- Math.random() * (자리수)
  Math.floor(Math.random() * 10) -> 0~9
  Math.ceil(Math.random() * 10) -> 1~10
floor : 내림
Math.floor(10.948) -> 10
ceil : 올림
Math.floor(10.948) -> 11
round : 반올림
max : 제일 큰 수 하나만
Math.max(10, 9, 11, 5) -> 11
min : 제일 작은 수 하나만
Math.max(10, 9, 11, 5) -> 5
abs : 절대값
Math.abs(1) -> 1
Math.abs(-1) -> 1
pow : 제곱.
Math.pow(2, 3) -> 2의 3승 -> 8
sqrt : 루트
Math.sqrt(4) -> 4 루트 -> 2

abs, pow, sqrt는 잘 안쓰임

song

계속 나아가기

이전 포스트

javascript_class 확인, 추가, 변경, 삭제

다음 포스트