[TIL] JavaScript | 선언 방식, Object, DOM 📗

dosilv·2021년 3월 19일

JavaScript TIL

🎲 목표: 자바스크립트 수박 겉핥기 🍉
자바스크립트는 완전 처음이지만 자바를 찔끔 공부한 적 있어서 기본적인 문법(연산자, 조건문 등..)은 어느정도 이해할 수 있었다. 대신 새롭게 알게된+중요한 지식들 정리!

▶ 목차

🔎 자바스크립트 선언 방식
🔎 객체(Object)란?
🔎 DOM(Document Object Model)

🔎 자바스크립트 선언 방식

1. Inline 방식 (event handler 이용)

html 태그 내에 자바스크립트 코드를 직접 기술
<input type="button" onclick="alert('Hello world')" value="Hello world" />

2. `<script>` 태그를 이용

html 문서 내에 <script> 태그를 사용해 자바스크립트 코드를 삽입

<html>
<body>
    <input type="button" id="hw" value="Hello world" />
    <script>
        var hw = document.getElementById('hw');
        hw.addEventListener('click', function(){
            alert('Hello world');
        })
    </script>
</body>
</html>

3. 외부파일 연결

script src를 이용해 분리된 js파일을 연결
<script type="text/javascript" src="script2.js"></script>

*2, 3번 모두 head와 body 두 태그 내에 모두 사용 가능하지만 body 내에 넣는 게 좋다! head에 위치시킬 경우 body의 내용이 읽힌 후에 스크립트가 실행되어야 하므로 window.onload = function(){} 함수를 별도로 추가해줘야 함

🔎 객체(Object)란?

결국 하나의 개념이고 구분이 모호하지만... 카테고리를 나누자면!

1. 'Object'라는 이름을 지닌 객체

가장 기본적인 객체 형태로서 여러 데이터를 담아내는 컨테이너라고 할 수 있음

Array와의 차이는 Object의 경우 index로 문자열을 받는다는 것.

파이썬으로 비교하자면 Array는 list, Object는 dictionary와 유사함!

객체 생성 방법
var dog = {name: "mongsil", gender: "female", breed: "maltese"};
또는
var dog = {};
dog[name] = "mongsil";
dog[gender] = "female";
dog[breed] = "maltese";

2. Prototype 객체

서로 연관된 변수와 함수를 그룹핑한 컨테이너라고 할 수 있다. 객체 내 변수를 property, 함수를 method라고 함!

constructor function을 통한 object type 생성
//constructor function
function dog(name, gender, breed) {
  this.name = name;
  this.gender = gender;
  this.breed = breed;
}
//create an object
var mydog = new dog("mongsil", "female", "maltese");
object type에 method 추가하는 방법

constructor 내부에
function objName(a, b) {
	this.a = a;
	this.b = b;
	this.함수이름 = function() {
	}
}
property와 연결시켜서 외부에
function objName(a, b) {
	this.a = a;
	this.b = b;
	this.함수이름 = 속성이름;
	}
function 속성이름() {
}
▶ 전체적으로 Java의 Class와 비슷한 개념인 것 같음..!

🔎 DOM(Document Object Model)

자바스크립트로 웹브라우저를 제어하기 위해서는 제어할 대상이 필요하다. 브라우저 요소를 객체화하여 제어하는 것이 오브젝트 모델!

📌 HTML 내부 요소 선택하기

CSS의 selector와 같은 역할! 하지만 쫌 더 복잡 😒

document.getElementsByTagName("")

document.getElementsByClassName("")

document.getElementById("") ※'s' 없음 주의!

따옴표 안에 각각 태그명, 클래스명, 아이디를 넣어 해당되는 element들을 Nodelist(=유사배열)로 반환해 준다. 특정 요소만 선택하고 싶다면 다음과 같이 인덱싱해서 사용 가능!
var x = document.getElementByTagName("h1");
x[0] 	//"h1" 태그 중 첫 번째 요소
document.querySelector("")
따옴표 안에 css selector 문법을 넣어서 객체를 선택하는 방법. 선택자에 해당하는 첫 번째 요소 하나만 반환.

document.querySelectorAll("")
선택자에 해당하는 모든 요소를 Nodelist로 반환.

📌 HTML 태그 요소 추가 및 삭제

자바스크립트를 이용하면 이미 출력된 html 문서의 요소, text, 속성을 동적으로 추가하고 삭제할 수 있다!

document.createElement("태그명"): 요소 추가하기
var newDiv = document.createElement("div");
var par = document.getElementById("box"); //부모요소 선택
par.appendChild(newDiv) //마지막 자식으로 삽입
par.appendCHild(newDiv, [기준자식]) //[기준 자식 앞에 삽입]
.innerHTML = "": 태그 내에 TEXT 추가하기
var a = document.querySelector("h1"); //text를 삽입할 태그 선택
a.innerHTML = "Hello!";
.setAttribute("[attribute]", "[argument]"): 태그 속성 추가하기
var a = document.querySelector("h1"); //속성 추가할 태그 선택
a.setAttribute("id", "title");
.style.[property]="[value]": 태그 스타일 추가하기
var a = document.querySelector("h1"); //스타일 추가할 태그 선택
a.style.backgroundColor="lightskyblue";