DAY13_JS | Notion

메모리[주기억장치/휘발성/영구저장X]

JS 메모리할당

let 변수 = 데이터
let 배열명 = [ 데이터, 데이터, 데이터 ]
1. 배열명[인덱스]
let 객체명 = { 속성명 : 데이터, 속성명 : 데이터, 속성명 : 데이터 }
1. 객체명.속성명
배열과 객체
1. let 배열명 - [ {객체}, {객체}, {객체}, {객체}]
  1. 배열명[인덱스].속성명
*function 함수명( ) { } = 사용자 정의 함수

미리 만들어진 함수 = 라이브러리

let 객체1개 = document.querySelector(’식별자’)

let 객체배열 = document.quertSelectorAll(’식별자’)

document.querySelector(’식별자’).value

  value 속성을 가지고 있는 마크업 : input, textarea, select 등 → div는 없음

document.querySelector(’식별자’).innerHTML

  innerHTML 속성을 가지고 있는 마크업 : div, span, table 등

배열명.indexOf(찾을 데이터) : 배열 내 찾을 데이터의 인덱스 번호 (0~ or -1)

배열명.includes(찾을 데이터) : 배열 내 찾을 데이터의 존재 여부 (true of false)

( ) → 소괄호 들어가면 다 함수.

객체

사용자 정의 객체

let 객체명 = {

                      속성명 : 데이터,

                 속성명 : 데이터,

            속성명 : 데이터

 }

미리 만들어진 객체
1. document
  1. document.body.innerHTML = 데이터 : body 마크업 html형식으로 대입
  2. 마크업 객체화
    - <div class = “box1” id = “box2”> : (’div’) (’.box1’) (’#box2’)
    1. let 객체명 = document.querySelector(’식별자’) : 해당하는 식별자와 마크업을 1개 객체 반환
    2. let 객체배열명 = document.querySelectorAll(’식별자’) : 해당하는 식별자의 모든 마크업 객체를 배열로 반환
  3. document.addEventListener(’이벤트’, (e) ⇒{ })
    
    → 이벤트를 사용하든 안하든 함수 형태 사용함
    
    → e(event) : 이벤트 실행 결과 정보 객체 인수 받음
    1. DOMContentLoaded : html 열렸을 때
    2. click : 클릭했을 때
    3. keyup : 키보드 키를 떼었을 때
    4. keydown : 키보드 키를 눌렀을 때
      1. e.keyCode : 키 코드 번호
      2. e.key : 키 이름
  4. 객체명.style
    1. 카멜표기법
      
      ex) justify-content ⇒ justifyContent
      
      객체명.style.justifyContent = ‘center’
      
      객체명.style.fontSize= ‘13px’
      
      객체명.style.left = 변수+’px’

문자열과 변수/수식/함수 연결
1. ‘<div>’+변수+’</div>’
2. <div>${변수}</div>
isNaN(데이터) : 만약에 데이터가 숫자가 아니면 true , 숫자이면 false
typeof(데이터) : 해당 데이터 형 확인 [object, array, function 등등]

객체 복습

alert("객체정의2 실행");

let 변수 = 10;
const 상수 = 10;
let 배열 = [10, 20, 30];
/*const 배열 = [10, 20, 30];

const 객체 = {나이 : 10, 성별 : '남'}*/
let 객체 = {나이 : 10, 성별 : '남'}

function 함수(){alert('함수실행');}

//1. 객체 { } 선언
let 객체1 =  { //객체선언 s
	이름 : '유재석', //직접 데이터 작성
	나이 : 변수,    //변수 대입
	점수 : 배열,	  //배열 대입
	정보 : 객체,	  //객체 대입
	행동 : 함수	  //함수 대입
} //객체 선언 e

//2. 객체 호출
console.log('객체 호출 : ' + 객체1); //[object Object] 출력 -> 객체를 호출할때는 문자랑 같이 호출하면 이렇게 나옴
//객체 호출시 순수하게 객체만 호출해야 객체 정보를 볼 수 있음.
console.log(객체1); // 함수 쪽에 undefined  : 정의하지 않음. -> 행동 : 함수() 의 경우
console.log(객체1); //행동 : 함수 의  경우 (밑의 주석 참고)
/*
행동 : ƒ 함수()
arguments : null
caller : null
length : 0
name : "함수" */

//3. 객체 내 속성 호출
console.log(객체1.이름);

console.log(객체1.나이);

console.log(객체1.정보);
console.log(객체1.정보.나이);

console.log(객체1.점수);
console.log(개체1.점수[2]);

console.log(객체1.행동);
객체1.행동(); //함수는 행동이므로 log를  찍지 않고 그냥 호출한다.