JS-1) 자바스크립트 공부 시작!

 처음 작성해보는 터라 어떻게 써야 할지 모르겠어서 곱씹는 느낌으로 처음부터 세세히 써보려고 합니다. (Window 기준!)

당분간 작성하는 게시물들은 '노마드코더'님의 무료 JS강의를 바탕으로 작성할 예정입니다.

[작업 폴더 생성]

 - 우선 vscode에 작업 폴더를 하나 만들기 위해 cmd를 켜서 mkdir Momentum2를 입력합니다. (cmd는 윈도우+r 키를 입력하면 나오는 실행에서 cmd를 입력하면 나옵니다.)

 - cd Momentum2를 해서 해당 폴더로 이동한 후, code . 을 입력해 해당 폴더를 vscode에서 띄워줍니다.

[파일 분류]

 - 작업 폴더 내에 css를 작성할 폴더와 js를 작성할 폴더를 각각 하나씩 만듭니다.

 - 당장은 아니지만 이후에 사용할 거기 때문에 css 폴더에는 style.css 파일을 만듭니다.

 - js 폴더에는 greeting.js로 파일을 하나 생성합니다. greeting은 우리가 해당 js파일로 구현한 내용을 파일명으로 설정한 겁니다. (페이지가 열릴 경우 가벼운 인사말을 만들 예정)

 - 처음의 Momentum2 폴더에 index.html 파일을 하나 생성합니다. 해당 파일을 통해서 우리는 웹 상에 우리가 js로 만들어낸 내용들을 표현해낼 예정입니다.

[JS 문법 정리]

 - const : 변수 선언을 하는 역할. 무조건 변수를 할당해줘야 하고, 한 번 지정해 두면 밑에 코드에서 변경이나 상대적 응용이 불가능함. 무조건 처음에 할당한 그대로만 사용해야 한다.

ex) const a = "hi"; 이렇게 선언할 경우 console.log(a)를 하면 hi값이 출력 된다.

 - let : const와 마찬가지로 변수 선언을 하는 역할. 하지만 const와 다르게 밑에 코드에서 업데이트를 원할 경우 업데이트가 가능하다.

ex) let a = hi;

a = bye;

이렇게 할 경우 a는 bye를 출력하게 업데이트 된다.

 - val : 이것도 마찬가지로 변수 선언을 하는 역할이다. JS 초창기에 만들어진 문법으로 지금은 사용하지 않는다. 업데이트와 상대적 응용이 자유롭게 가능해서 실수가 일어날 가능성이 매우 높기 때문이다.

 - function any(a) {} : 함수를 정의하는 역할. const나 let의 내부에 넣어서 사용하는 것도 가능. 혼자 사용할 때는 앞서 적은 것처럼 사용하고, cosnt나 let의 내부에 넣어서 사용할 때는 다음처럼 사용한다.

 -> any: function (a) {} 

function은 return으로 값을 함수 내부에 저장한 후 밑에서 활용하는 방식이다. python을 먼저 배웠던 터라 def 로 이해하고 넘어갔다.

ex) const calculator = {

        plus: function (a, b) {

          return a + b;

},

};

- isNaN : bool을 나타내는 함수로 input 값이 number가 아닐 경우 false를 반환한다.

- if 문 : if는 python에서 배웠던 것과 비슷하게 사용한다. 다른 점은 python 때는 elif로 사용했던 걸 JS에서는 else if로 늘려서 써야 한다. 거기에 : (콜론) 이 아닌, (), {}로 단락을 구분한다.

ex) if (any) {}

  else if (any2) {}

  else {}

- && : and 문법이다. 앞뒤의 내용이 모두 true일 경우, 해당 구문을 실행한다. 둘 중 하나라도 false일 경우 해당 구문은 실행되지 않는다.

- || : or 문법이다. 앞뒤의 내용 중 하나라도 true일 경우, 해당 구문을 실행한다.

- === : python에서의 ==이다. 값이 일치하는 지를 확인하기 위함이다. 

- !== : python에서의 !=이다. 값이 불일치하는 지를 확인하기 위함이다.

- 아래 나올 document는 html 파일을 의미한다.

- document.getElementById("") : HTML에서 ""에 해당하는 id로 지정해둔 내용을 가져온다.

- document.getElementByTagName("") : HTML에서 h1, div 등 ""에 적은 태그에 해당하는 내용을 가져온다.

- document.getElementByClassName("") : HTML에서 ""에 해당하는 class로 지정해둔 내용을 가져온다.

- 앞서 말한 내용들을 보면 중간중간 대문자가 한번씩 들어갈 것이다. 이는 camel(낙타) 코드라고 해서 JS에서 사용하는 문법 중 하나이다. 이어지는 이름을 사용할 때, python의 경우는 get_element_by_id() 이렇게 사용하겠지만, 여기서는 underbar를 대문자로 대체한다.

- document.querySelector("") : id나 class 중 입력한 것에 해당하는 내용을 가져온다. 중복되는 것이 있을 경우는 맨 처음 것만 가져온다.

ex) document.querySelector("#title h1") 이렇게 쓸 경우 tilte이라는 id를 가진 것 중 맨 처음 h1의 내용을 가져온다. (class의 경우 #이 아닌, . 을 사용한다.)

- document.querySelectorAll("") : 바로 위의 내용과 같지만, 하나만 가져오는 것이 아니라 해당하는 모든 내용들을 가져온다.

- 사용법에 있어서 document.getElementById("title") = document.querySelector("#title") 이다.

- innerText : const or let 으로 변수를 선언한 상태에서 사용한다. 해당 변수 내부의 text를 바꾸고 싶을 때 다음과 같이 사용한다.

ex) any.innerText = "some";

이렇게 사용할 경우 html 상에 비춰지는 내용이 some으로 바뀌게 된다.

우선 기본적인 정리는 여기까지만 하고, 나머지 문법들은 진행하면서 순서대로 기재해야겠다.

내가 이해한 내용을 바탕으로 작성한 거기 때문에 무조건 옳은 내용은 아닐 수도 있다. 수정이 필요한 부분은 발견할 때 마다 수정하러 와야겠다.

이걸로 첫 게시물 끝!