오늘부터 자바스크립트 시작이다👊
자바스크립트는 독학으로만 공부했어서 잘 몰랐던 부분이나 필기하고싶은 부분만 til에 남겼다.

객체 = 변수들의 모음
속도는 컴파일러가 빠름

자바스크립트 사용법

인라인 방식

<input type="button" onclick="alert(`clicked`)">

잘안씀
정해진 속성 값 안에 입력
짧은 내용을 작성할 때 사용
주로 함수 호출하는 방식을 이용

내부 방식

<script>
	console.log('javaScript!!')
</script>

script 태그 내에 작성
어디에도 넣을 수 있음
코드가 읽힐 때 실행되므로, 위치가 중요!!

외부 방식

<script src="main.js"></script>

script태그의 속성으로 파일명 기재
태그 내용은 기입하더라도 무시되므고 적지 않음
순서에 주의

디버깅 방법

• 콘솔은 브라우저의 디버깅 콘솔을 의미
• debugger;가 써있는 부분에서 멈출 수 있음

변수

const는 변하지 않는 상수!
const는 대문자로 작성하는 것이 좋음

문자열

템플릿 리터럴

• 백틱으로 감싸주어 사용
• ${}으로 변수 값을 직접 집어넣을 수 있음
• \를 사용하지 않아도 줄바꿈을 인식함

escape character

\' 작은 따옴표
\" 큰 따옴표
\ 역슬래시
\n 개행
\r 캐리지 리턴
\v 세로 탭
\t 탭
\b 백 스페이스

함수

반복문(for/while)

continue: 해당 지점에서 다음 반복으로 바로 넘어감
break: 해당 지점에서 바로 반복문 종료

event

onclick

해당 요소가 클릭되었을 경우 속성 값에 있는 javascript가 실행됨!

oncontextmenu

해당 요소를 오른쪽 클릭했을 경우 ( 메뉴가 나오기 전 이벤트 발생 )

onchange

해당 요소의 값이 변경되었을 경우 ( value )

onmouseover

해당 요소에 마우스가 올라갔을 경우

onkeydown/up

해당 요소에서 키보드가 눌렸을 경우/눌렀다 떼었을 경우

onfocus

해당 요소에 포커스가 이동되었을 경우

DOM(Document Object Model)

script에서 다루기 쉽게 문서를 객체화 한 것

• 각 태그를 노드(node)의 개념으로 변경
• 각 노드로 이루어진 모습을 트리(tree)라고 부름
• DOM은 문서와 스크립트 사이의 징검다리 역할
• DOM은 각 브라우저로부터 구현됨

노드의 종류

• 문서노드(document node) : 문서 전체를 나타내는 노드
• 요소 노드(element node): 모든 HTML요소가 요소 노드(유일하게 속성 노드를 가질 수 있음)
• 속성 노드(attribute node): 모든 HTML 요소의 속성
• 텍스트 노드(text node): 모든 HTML의 텍스트
• 주석 노드(comment node)

문자열.split() ==> 배열로 들어감