💡JS-객체
❓
- [ ] 객체 🌟Object(객체 자료형, 참조 자료형)
- [ ] JS참조방식
- [ ] 객체자료형 문법 - 키,값 추가 객체자료형 - 배열, 딕셔너리
- [ ] <script> 태그 위치?
언어타입
- 강한 타입 언어
- 타입 검사 통과 못하면 실행X
- int, double 등 타입 하나 지정
- 약한 타입 언어
JS 자료형
Primitive(기본 자료형)
- Boolean
- Number - 정수, 부동소수점, 무한대 및 NaN
- String
- Null - 값X 타입O
- Undefined 타입X
🌟Object(객체 자료형, 참조 자료형)
- 클래스, 배열, 함수
객체란?
실제 인식할 수 있는 사물
속성: 이름, 나이
메소드: mew(), eat()
객체자료형 - 배열, 딕셔너리
- 배열인덱스: 0부터 시작
- arr.length
- arr.push(+추가)
- arr.unshift(추가+)
- arr.pop(-제거)
- arr.shift(제거-)
- arr.indexOf(검색값) 인덱스 출력
- var arr1=[]; var arr2=new Array();
- 숫자, 문자 혼용O
- 딕셔너리
var me = { name: '이름', birth: '1115', }; me['gender'] = 'F'; console.log(me['gender']); - 키-’값’ 형태로 저장
자료형 확인 typeof()
참조방식
https://think0wise.tistory.com/65
기본자료형 → Call by Value
다른 변수에 값 할당, 함수 인자 넘길 때 값 복사
객체 자료형 → Call by Sharing
참조값(객체 주소값)의 복사본을 전달
형 변환
→ 문자
- String()
- 값.toString();
→ 정수
- Number()
- Number(true) //1
- parseInt();
JS 표준 객체
대표 객체 - 함수
Date
since 1970년 1월 1일 00:00(UTC)
var date =new Date();
console.log(date);
date.getFullYear()
date.getYear() //UTC
date.getMonth() //index
****date.getDate()
date.getDay()
date.getTime() //UTC
date.getHours()
Math
생성자X
웹브라우저마다 상이할 가능성O
console.log(Math.min()); //매개변수x : Infinity
console.log(Math.min(-10,2,"문자")); //비교X : NaN
Math.min()
Math.max()
Math.random() //1~100
Math.random()*(max-min)+min; //난수범위 지정
Math.round() //반올림
Math.ceil()
Math.floor()
DOM
문서 객체 모델 (=Document Object Model)
→ HTML 요소에 접근해서 구조 파악
- 웹페이지에 대한 인터페이스
- HTML 각 항목을 계층(=트리)으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스
- HTML보다 상위에 존재
속성
- document.documentElement
- document.head
- document.title
- document.body
<script> 태그 위치?
스크립트 실행순서, 브라우저 렌더링
- <head> → 로딩 지연 (HTML 파싱 중단)
- <body>
- 참고
- parsing : 해당 언어의 문법 검사기, 코드로 변환
- 브라우저 동작방식
- HTML 읽기
- HTML 파싱
- DOM 트리 생성
- Render 트리 생성 (DOM트리 + CSS의 CSSOM 트리)
- 브라우저 표시
- https://velog.io/@miyoni/TIL15
요소 선택
동적으로 요소 선택, 변화
document.getElementsByTagName();
document.getElementById();
document.querySelectorAll (선택자)
document.getElementsByName (name 속성값)
document.getElementsByClassName();
//ClassName 지정만 좀 다름
var p = document.creteElement("p");
p.innerText = "p태그";
p.className = "text";
var child = document.getElementsByClassName("text");
child[0].remove(); //배열로 요소 선택
//console.log(child[0]);
//div1.removeChild(child[0]);
document.createElement("p"); //요소 생성
document.write("<h1>안녕</h1>") //새문서 작성
div1.appendChild(img); //부모요소 안에 자식요소 추가
div1.removeChild(child[0]); //배열이라 child만 삭제X