동작 원리

• JavaScript, CSS : 그 자체로 브라우저에서 실행되지 않는다.
• HTML : 브라우저에서 실행되는 것은 HTML이고, 이 HTML이 CSS와 JavaScript를 불러오는 것.

변수 선언 : const, let 키워드를 이용해서 변수를 정의한다.

• const : 말 그대로, 한 번 정의한 후에는 값을 바꿀 수 없다. 물론, 정의할 때 값도 같이 할당해 주어야 한다.
• let : 그냥 변수를 정의하는 것. 중간에 값이 바뀔 수 있다.

변수 타입

• true : 참
• false : 거짓
• null : 값이 없다는 값이 저장됨.
• undefined : 말 그대로 정의되지 않음. 값 자체가 없는거.

배열

const arr = [1, 2, 3, 4, 5, null, undefined, "good"];

이런 식으로 정의된다.

배열에 원소를 추가하고 싶은 경우,

arr.push(true)

이런 방식으로 추가하면 된다.

만약 array에서 정의되지 않은 index에 접근하려고 하면, undefined 가 리턴된다.

object

• object 선언

const player = {
  name: "nico",
  points: 10,
  fat: true,
}

• 여기서 객체는 const 형태로 선언되었지만, 객체의 내부 값은 변경될 수 있다.
  • 즉, javascript에서의 const는 객체 자체의 값을 바꾸려고 할 때에 제한을 거는 것이라고 이해하면 될 듯.
  • 그래서, 마찬가지로 array의 경우에도 내부 원소의 값을 변경하는 것은 const 키워드와 관련이 없다.
• 객체 내부의 멤버를 호출하는 방법
  • 일반적인 player.name 형태로 가능
  • player["name"] 처럼도 쓸 수 있다.

함수

• 함수 정의

function func()
{
  asdf;
}

이런 식으로 정의한다.

• object 내에서의 함수 정의

const person = {
  name: "nico",
  sayHello: function() {
    console.log("hello");
  },
}

dd

• prompt 함수

  prompt("what is your name?");

  의 형태로 쓴다면, 팝업창이 뜬 후에 입력값이 리턴된다.
• typeof 키워드

  console.log(typeof "15", typeof parseInt("15"));

  말 그대로 대상의 type을 나타내주는 키워드.
  위의 경우, string, number 가 출력된다.
• parseInt 함수
  말 그대로 string을 number로 파싱해 주는 함수.
  숫자가 아닌 string을 parseInt()로 넘겨준다면 NaN이라는 값이 리턴된다.

document object

• 내부적으로 document라는 객체가 HTML을 관리한다.
• 브라우저가 document 객체를 제공한다.. 우리는 그것을 이용하기만 하면 됨.

태그

<h1 id="title">Hello there!</h1>

의 형식으로 id를 정의해 줄 수 있다.

javascript에서는 이 id를 통해서 다음과 같이 태그 object에 접근할 수 있다.

document.getElementById("title");

태그 object에는 여러 가지 property가 정의되어 있는데,

console.dir(document.getElementById("title"));

와 같이 볼 수 있다.

<h1 autofocus class="hello" id="title"></h1>

이런 식으로 태그 내에서 properties를 설정해 줄 수 있다. (정확히 명칭이 property가 맞는지..?)
물론, 실제 태그 property 이름은 class의 경우 className으로 설정된다던지 조금씩은 다를 수는 있음.

class property

getElementById() 말고도 getElementByClass()를 통해서도 태그에 접근할 수 있는데, 두 방식에는 차이가 있다.

• id: 태그가 가질 수 있는 고유한 값. 서로 다른 태그가 하나의 id를 공유해서는 안 된다. getElementById()를 통해 리턴한 값은 하나의 태그 object에 해당한다.
• class: 서로 다른 태그가 하나의 class를 공유할 수 있다. getElementsByClassName()을 통해 리턴한 값은 array의 형태가 된다. 즉, 여기서 각 element에 접근하기 위해서는 []을 통해 접근하던지 한 번 더 접근해 주어야 한다.

ㅇㅇ

일반적인 경우에는 모든 태그에 id, class를 할당해 주지 않는다.
다음과 같은 예시를 보자.

<div class="title">
  <h1>This is Title</h1>
</div>

이런 경우, 아래와 같이 접근할 수 있다.

document.getElementsByTagName("h1");

물론, 함수 이름에서도 알 수 있겠지만, 이 경우 또한 array의 형태로 리턴된다.

다른 방법도 있다.

document.querySelector(".hello h1");

위와 같이 css 문법을 차용한 형태의 접근 방식도 있다.
주의할 점은, querySelector()는 해당하는 객체가 여러 개인 경우, 제일 앞의 것만 선택해 준다.
ex) class="hello"가 여러 개인 경우 : 제일 첫 번째 class만 선택됨.
마찬가지로, hello 내부에 h1이 여러 개인 경우: 제일 첫 번째 h1만 선택된다.

document.querySelectorAll(".hello h1");

위의 방식은 array 형태로 해당하는 객체들을 담아서 리턴해 준다.
querySelector()의 문법은 뭐 하면서 익혀지겠지..?

event

const title = document.getElementById("title");
function handleClickEvent()
{
  alert("clicked!");
}
title.addEventListener("click", handleClickEvent);
// title.onclink = handleClickEvent; 위와 동일한 코드

이런 식으로 함수를 정의한 후, event를 추가해 주면 된다.
물론 click 말고도 다양한 이벤트들이 많겠지.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
위 링크에서 여러 event를 비롯한 다양한 정보들을 얻을 수 있다.

나머지는 이어서...