노마드코더 JS 1~2강

노마드코더 JS 크롬앱만들기 강좌 정리노트 1 ~ 2강

JS의 기본적인 문법과 다양한 함수들에 대해서는 군대에서 박승용 병장에게 배우면서 어느정도 익혔기 때문에 기초개념을 설명하는 부분은 가볍게 정리만 하겠습니다.

JS에서 변수 선언하는 방법은 이렇게 3가지가 있음

var name
let name
const name

var 쓰지 말고 바뀔 값이면 let, 안 바뀔 값이면 const 쓸 것.

null != undefined

null이랑 undefined는 다름. null은 절대 자연적으로 발생하지 않음.
null은 없다는 뜻이고, undefined는 메모리도 할당 되어있긴한데 그 속에 값이 없다는 뜻

배열은 그냥

const name = [a,b,c,d];

이렇게 만들면 되는데 data type 상관 없어서 배열, 구조체 구분 없음

const name = [1,3,null,false,"김이안","abcd"];
//이래도 됨
name.push();
//이렇게 요소 추가 가능

const player = { 
	name = "ian"
	points = 100
	fat = false
};
//이런식으로 딕셔너리 사용 가능하고 이거는
console.log(player.name);
//이렇게 사용 가능

단, player이라는 딕셔너리가 const로 선언됐다고 해서 그 속에 있는 객체들의 값을 못 바꾸는 것은 아님.

player.weight = 70;
//이걸 딕셔너리 밖에서 선언해도 딕셔너리 안에 weight라는 key와 value가 자동으로 입력된다.

당연한거지만 함수 구조는 아래와 같음

function adding(big, small){
	console.log(big+small)
}
adding(19,3)
adding(13,1)

let age = prompt("나이 입력해봐");
//이렇게 입력 받았다고 했을 때, 이건 문자열을 받는거라 typeof해보면 문자열이라고 나옴.
//정수형으로 바꾸고 싶으면
parseInt(age); 
//이렇게 해주면 됨

if(조건){명령}
else is (조건){명령}
else {명령}

AND연산은 &&
OR 연산은 ||

그리고 중요한 거, JS에서 ==이랑 ===은 다르다.
'=='은 서로 다른 유형이더라도 두 변수의 값을 비교한다. 0=='0'에 대해 JS는 True
'==='는 반면에 엄격하게 비교하기 때문에 자료형과 값을 모두 따짐. 따라서 0==='0'에 대해 False

document.title을 명령하면 html의 title을 출력함. (html이랑 연결돼있으면)
또한

document.title; //을 시키면 html의 title을 출력함 (html이랑 연결돼있으면)
document.title = "something"; //이렇게하면 html의 title이 바뀌어있음.
//js에서 A라고 title을 수정하고 html에서 B라고 넣어놓아서 페이지 새로고침하면 js가 이김

document가 제공하는 모듈들이 엄청 많음. 아래 참고

document.getElementById(): HTML 요소의 ID 속성을 사용하여 해당 요소를 가져오는 메서드입니다.

document.getElementsByClassName(): HTML 요소의 클래스 이름을 사용하여 해당 클래스를 가진 모든 요소를 가져오는 메서드입니다.

document.querySelector(): CSS 선택자를 사용하여 해당 선택자에 맞는 첫 번째 요소를 가져오는 메서드입니다.

document.querySelectorAll(): CSS 선택자를 사용하여 해당 선택자에 맞는 모든 요소를 가져오는 메서드입니다.

document.createElement(): HTML 요소를 동적으로 생성하는 메서드입니다.

document.appendChild(): HTML 요소를 다른 요소의 자식으로 추가하는 메서드입니다.

document.removeChild(): HTML 요소를 다른 요소에서 제거하는 메서드입니다.

document.replaceChild(): HTML 요소를 다른 요소로 대체하는 메서드입니다.

document.write(): HTML 문서에 새로운 내용을 추가하는 메서드입니다.

document.cookie: 쿠키를 설정하거나 가져오는 속성입니다.

document.forms: 문서에 있는 모든 폼 요소에 대한 컬렉션입니다.

document.images: 문서에 있는 모든 이미지 요소에 대한 컬렉션입니다.

document.styleSheets: 문서에 있는 모든 스타일 시트에 대한 컬렉션입니다.

document.defaultView: 문서의 기본 뷰를 나타내는 객체입니다.

document.documentElement: 문서의 루트 요소를 나타내는 객체입니다.