1. JAVASCRIPT에 대하여

Front End 언어는 주로 JS, HTML, CSS로 이루어져 있다.

이 중, 브라우저는 HTML을 열고 이를 통해 JS와 CSS를 가져오는 것이다.

개발자 도구에서 HTML과 CSS는 Element 메뉴에서, JS는 Console 메뉴에서 확인할 수 있다.

 

- let과 const의 차이

-> let은 변수를 선언할 때, const는 상수를 선언할 때 사용한다.

 

- 에러: Uncaught TypeError: Assignment to constant variable. -> const 값을 변수마냥 새로운 값으로 업데이트 했을 때 발생.

 

 -boolean에서 true/false에는 ""를 쓰지 않는다.

 

- null 또한 ""를 쓰지 않는다(+ null과 false는 아예 다르다.)

 

- null과 undefined도 차이가 있다. null은 비어있다는 것을 알려주기 위해 쓰는 것이고, undefined는 정말 아무 값도 안줘서 메모리가 비어있는 것이다.

 

- TMI) 파이썬에서는 true/false/null 대신 True/False/None으로 작성한다.

 

- 임의의 배열 Array에 element를 더 추가하고 싶다면 Array.push(값)을 해주면 된다.

 

- 배열은 보통 공통적인 집단에 쓰이지만, 객체를 이용한다면 여러 특성들을 줄 수 있다. 다음은 객체의 작성법 예시이다.

const player = {
    name: "Yoon",
    points: 20,
    fat: true,
    
}

 

- 객체의 property에 접근하는 방법 1. player.name   2. player["name"]

 

- 객체의 선언이 const player = ~~~ 로 되어 있지만 객체 내부의 값들(property)은 변경이 가능하다. 객체 자체의 변경이 const인 것 뿐...

 

- 객체 내에 뭔가 추가를 하고 싶다면 player.lastName = "Xerath"처럼 작성해주면 추가된다.

 

-객체의 property로 함수를 부여하고 싶다면 다음과 같은 형식으로 작성해야 한다.

const player = {
    name: "Yoon",
    sayHello: function (lastName){
        console.log("say Hello"+lastName);
    }
}

- JS에서 제곱하는 방법은 a^b가 아니라 a**b이다.

 

- prompt함수 사용법

prompt("String") -> String이란 문구를 띄우고 Cancel과 Ok문구를 띄워서 입력받는다. 이때 return형은 string임.

 

- isNaN 함수 사용법

isNaN(a) -> a가 숫자아닌지 인지를 반환해준다. 이때 return형은 boolean임.

 

- 모든 정보를 담고 있는 객체를 document라고 한다. 

ex) JS에서 document.body를 하면 HTML의 body 파트를 가져오고, document.title을 하면 HTML의 title을 가져올 수 있다.

 

- JavaScript에서는 HTML을 불러올 수 있을 뿐만 아니라, 변경도 가능하다.

 

- document.getElementById("string") -> string이란 id를 가진 태그를 가져온다.

 

- document.querySelector(".hello h1") -> hello라는 className 안의 h1태그 내용을 가져온다. 매우 중요한 함수이자 쓸모가 많다.

만약 .hello의 className에 h1태그를 가진게 여러개면 그 중 처음꺼 하나만 가져온다. 혹 모든 것들을 가져오고 싶다면...

document.querySelectorAll(".hello h1") 으로 작성하면 된다.

. : className

# : id

 

- title.addEventListener("click", handleTitleClick) -> title을 클릭을 하게 되면 handleTitleClick() 함수를 실행하게 된다.

=== 같은 기능을 title.onClick = handleTitleClick 처럼 직접 property에 할당해서 사용할 수도 있다.

click: 해당 내용을 클릭하면 실행

mouseenter: 해당 내용 위에 마우스가 올라갈 시 실행

 

- JS로도 style을 변경할 수 있는 것은 맞지만 웬만하면 css로 처리하는 것이 더 옳다.

 

- window.addEventListener("resize", handleWindowResize) -> 탭창의 크기가 변경되면 handleWindowResize() 함수를 실행한다.

 

resize: 탭창의 크기가 변경되면 실행

copy: 복사를 하면 실행

offline: WIFI연결이 되어있지 않으면 실행

online: WIFI연결이 되어있으면 실행

 

 

 

 

 

 

 

 

 

 

 

개같네 작성해둔거 싹 다 날아가버렸네...