JavaScript 속성 정리

JavaScript에서 주로 사용되는 속성 정리

1. 자바스크립트의 숫자는 정수와 소수점 구분 없이 하나의 자료형으로 사용된다.

2. 자바스크립트는 문자형 자료형을 지원하는데 char 형이 존재하지 않고 따옴표로 묶는다면 문자열로 인식한다.

var a = "Hello";
var b = 'world';
var c = "Amazing language 'JavaScript'";

3.배열은 []나 new Array로 생성한다.

var emptyArray = [];
var oddNumbers = [1, 3, 5, 7, 9];
var evenNumbers = new Array(2, 4, 6, 8, 10);
var mixedArr = ['a', 1, 'b', 3, new Date(), "today"];

4.하나의 배열에 서로 다른 타입의 변수가 들어갈 수 있다.

5.변수 타입: var - variable value / let - fixed value

6.객체 - 자바스크립트에서 객체는 매우 중요한 타입. 변수에 할당된 값을 참조할 때 값을 복사하는 것이 아닌 메모리 주소를 복사하고 주소를 통해 값을 참조한다.

var me = {
	'name': 'young',
	'birth': 1996,
	'sex': 'm'
}

name은 key에 해당되고 young는 value에 해당된다.위에 나열된 조합들은 me에 대한 개인정보, 즉 property의 조합이다. 객체의 property에 접근하는 방법은 me.name //young 과 같은 방식으로 접근하면 된다.

자주 사용하는 속성

DOM(Dociment Obhect Model)

DOM은 HTML 문서에 접근하기 위한 인터페이스이다. DOM을 통해 우리는 문서에 접근할 수 있다.

1.getElementBy-(): 해당하는 속성(id,classname,tagname...)의 요소에 접근하는 함수.
예시:

const h1 = document.getElementById("name");

2.innerHTML - 태그 내부의 HTML값에 접근하는 속성.

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

3.stlye - html에서 css를 통해 속성을 변경하듯 JS에서도 속성 변경이 가능하다.

var box = document.getElementById("box");
box.style.backgroundColor = "red";

이벤트

이벤트는 말 그대로 이벤트이다. 예시를 통해 알아보자.

onclick - 버튼을 눌렀을때 발생되는 이벤트.

<input type="button" value="button" onclick="alert('Hello world')">

위 코드는 버튼을 클릭했을 때 Hello World라는 안내창이 뜨게 하는 코드이다.

이외에도 onmouseover, onmouseout, keydown, focus 등 다양한 이벤트들이 존재한다.