Vanilla JavaScript 기초

JS를 굉장히 오랜만에 만지는 관계로.. 간단하게 recap 하고 넘어가겠다!

 

1. 변수 선언

https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

- var: 변수 재선언까지 가능한데, 이거는 좋지 않다. 여러가지 변수가 혼동되어 쓰일 수 있음.

- let : 변수 재선언 X, 재할당 가능

- const : 변수 재선언 X, 재할당 X 

 

 

2. Data Types on JS

: 데이터 타입을 c++처럼 따로 지정하지는 않는다.

 하지만 string이면 ""안에 넣는등, 일종의 형식은 필요하다. 하지만 char나 int는 따로 필요 없는듯.

+) boolean: const what=true; , const what=false; 이런식으로 작성하면 된다. true/false는 정수형이다.

 

 

3. Organize data with arrays

: array는 데이터를 리스트 형태로 정리해둔 것이다.  정해진 자료형 안에서는 어떤 자료형을 넣어도 가능하다.

 

 

 

+) camelcase : 변수명은 늘 소문자로 시작하고, 다음 단어에 space가 필요하다면 대문자로 바꿔준다.

   ex) daysOfWeek, helloMyFriend

 

 

4. organize data with objects

: 데이터를 객체 형태로 만들어 준다. 저장하고 싶은 데이터마다 이름을 새로 지정해줄 수 있는것. 

배열에서는 배열이름으로만 접근해야 했지만, 객체에서는 그럴 필요가 없다.

 

 

 

 

 

5. JS function

  1) 내장함수 (built-in function)

: console.log, alert...etc

  

  2) 함수 custom 해보기

 

 

 

 

6. JS DOM object

https://wit.nts-corp.com/2019/02/14/5522

(번역) DOM은 정확히 무엇일까?

: DOM 단어의 뜻은 document object model의 약자이며, 객체 지향 모델로써 구조화된 문서를 표현하는 방식이다.

 

 

 

HTML,CSS가 직접적으로 사용자에게 보여지는 것이라면 , DOM은 기계나 소프트웨어가 웹 사이트의 구조를 어떻게 이해하는지에 대한 표준이라고 할 수 있다. 쉽게 말하면 HTML의 구성 요소들을 일종의 트리로 구조화한것이라고 볼수 있다.  뷰 port에 무엇을 렌더링할지 정하기 위해 사용되며, 두번째는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크 립트 프로그램에 의해  수정되기 위해 사용된다.

 

1) 작성된 HTML 문서가 유효하지 않을 때

 : DOM은 유효한 문서의 인터페이스로,  DOM을 생성하는 동안, 브라우저는 HTML을 수정할 수 있다.

 그럼 만들어진 DOM TREE에는 올바르게 수정되어 읽혀진다.

 

2) 자바스크립트에 의해 DOM이 수정될 때

 : 자바스크립트를 이용해 DOM에 새로운 노드를 추가할 수도 있다. 하지만 HTML 문서의 내용을 변경하진 않는다.'

 

 

 

 

 

=> javascript를 통해 DOM을 조작해보자.

 

 

 

=> console을 통해 HTML의 요소를 추출할 수 있고, 그것을 객체로 바꿀수 있다.

: 즉, document안의 모든 것은 객체가 될수 있다는 것이다.

 

 

=> 또, DOM을 조작해서 HTML의 내용을 바꿀수도 있다.

 

 

 

html title은 원래 this works!였지만

 

 

 

javascript 내에서 조작하여     

 

 

Hi from JS라고 내용을 바꿀 수도 있다!

 

 

7. Modifying with JS

=> 이렇게 만들어진 객체로 할 수 있는 것은  style 태그를 바꿀수도 있고, 이벤트를 추가할 수도 있는 등 정말 많다.

 

 

글자 색을 바꿀수도 있고

 자바스크립트 객체를 통해 document와 해당 객체의 속성을 쭉 살펴볼수 있다.

 

 

 

querySelector를 이용해 css 선택자처럼 찾을수도 있다.

 

 

8. Event & Event handler

: 자바스크립트는 이벤트에 반응하기 위해 만들어졌다.

=> 우리가 중간에서 이벤트를 가로챌 수도 있다.

 

 

클릭했더니 글자가 초록색으로 바뀜 

 

 

8. If, else, and, or

 

 

뭐..이건 기존에 다른 언어들과 전부 동일한 내용이라 pass

 

 

 

 

 

9. Application of if,else,and,or

 

 

자바스크립트를 통해 이벤트를 조작할 수 있다.

 

=> online, offline등의 네트워크 이벤트도 존재한다고 한다.

 

 

wow. this shit is monitoring my wifi status.