[Javascript] 자바스크립트 기초

1. const vs let

- 기본적으로는 const를 사용하되, 변할 수 있는 값에 대해서만 let을 사용함

- 기존에 사용되던 var는 무분별한 변경에 대해 언어적 보호를 받지 못하기 때문에 쓰지 않는 것이 좋음

- 변수명 입력 시 Camel Case

 

2. array

- 예시 : const arr = ["arr1", "arr2", "arr3"];

- array 내 추가 : arr.push("arr4");

- 접근방식 : arr[0];

 

3. object

- 예시

const player = {

  name: "minju",

  age: 25,

  job: "Programmer",

  doAction: function(){

    // TODO

  }

};

- 접근방식 : player.name, player["name"]

- object 내 추가 : player.hobby = "game";

- const 이지만 내부 property에 대한 변경은 가능함. player = true; < 이런 식으로 object 자체를 변경하는 것은 안됨.

 

4. function

- 반복되는 코드를 캡슐화해서 사용할 수 있도록

- 함수명 입력 시 Camel Case

- 예시

function funcA(arg1, arg2){

  // TODO

}

- argument에 데이터 타입을 쓸 필요가 없음 !!

 

5. console

- 하나의 object임

- https://developer.mozilla.org/ko/docs/Web/API/Console

console - Web API | MDN

- console.dir ==> .log 보다 디테일한 정보

 

6. Returns

- 자바스크립트는 return type을 따로 명시할 필요가 없음 

 

7. The Document Object

- document는 내가 접근할 수 있는 HTML를 가리키는 Object 

- document.title == 내가 HTML에서 title에 기재한 내용

- JS <-> HTML 연결고리

 

8. Searching For Elements

- querySelector() : element를 css 방식으로 검색 가능. 예시) document.querySelector(".classname tagname"); ==> classname 안에 있는 tag 값을 가지고 온다. tagname / tagname 이런 조합으로도 가능함. id의 경우, #id

- querySelectorAll() : 위 항목을 사용할 때 가지고 올 값이 여러 개면 all

 

9. Events

- addEventListener("Event 명", 콜백이 들어오면 할 행위);

- 함수 호출 시에 뒤에 괄호를 안써도 됨..

- https://developer.mozilla.org/ko/docs/Web/API/Event

- onClick = 함수명; ==> 이런 방식도 있음. 그치만 removeEventListener 를 사용하기 위해, 가독성을 위해 addE~가 더 선호되는 방식

 

99. etc

- prompt(string, default); ==> 실행되는 순간 JS 일시정지 및 CSS 적용 불가를 사유로 사용되지 않음.

- typeof 변수명 ==> typeof() JS는 이런 식으로 사용되지 않음.

- parseInt(string) ==> number로 cast, 숫자로 구성된 string 값이 아니면 NaN

- isNaN()

- getElementById() / getElementByClassName() / getElementByTagName()

- innerText(string)

- MDN(https://developer.mozilla.org/ko/)

- Form의 기본 동작은 submit / Link의 기본 동작은 클릭 시 다른 페이지로 이동

- Template Literials : `Hello ${username}`