ES6+ 자바스크립트 중요 개념 정리 🔑- 콘솔과 경고, 변수, get 메서드, DOM 요소 쿼리

자바 스크립트  사용법

<script src="js 파일경로" />
<script>js코드</script>

• 첫번째 방법은 HTML 파일 외부에 작성되어 있는 JS 파일을 가져온다는 의미입니다
• 두번재 방법은 HTML 파일 내부에서 직접 script 코드를 작성하는 것 입니다
• 어떤 방법이 더 낫다라고는 할 수 없고, 코드의 복잡도를 줄이기 위해선 첫번째 방법을 많이 사용합니다

콘솔과 경고

console.log('Hello world')
alert('Hello world')

• 콘솔로그 함수는 콘솔 화면에 메세지를 출력하는 용도로 사용되고, 보통 코드 중간중간 사용하여 디버깅하는 용도로 사용됩니다
• alert 함수는 브라우저에서 경고창을 띄우게 됩니다

변수

let i = 5;
const j = "string";

...

let i = 10; //가능
const j = "string 2" //불가능

• let 변수 할당은 이후에 새로운 값을 재할당이 가능합니다
• const 변수 할당은 이후 j에 재할당을 할 수 없습니다

function 함수 (){ }

const a = 5;
const b = 3;

function add(a, b){
	console.log(a, b);
}

add(a ,b); // 함수 호출

• IT라는 분야에서는 가장 중요시여기는 것들 중 하나가 "재사용 Reuse"입니다. 나중에 컴포넌트, 프레임워크 이런 것들을 배우시겠지만, 이 모든 것을 재사용함으로서 불필요한 시간을 단축시키고, 코드의 복잡도도 줄이고, 효율적인 코딩을 하는 것이죠
• 함수() 에 대해서 설명하기에 앞서 위와 같은 내용을 언급한 이유는 "함수"도 결국 재사용을 위해서 작성하는 것입니다. 어떤 두개의 값을 더하고 싶을 때마다 add(a ,b) 를 호출함으로서 필요할때마다 재사용을 하는 것이죠

get 메서드

document.getElementById("")
document.getElementByClassName("") 
document.getElementByTagName("")

• HTML 요소에 고유한 ID로 요소 찾기
• HTML 클래스 명으로 요소를 찾기
• HTML 태그명으로 요소 찾기

<p>안녕하세요</p>
<ul id="table">
  <li class="item">item 1</li>
  <li class="item">item 2</li>
  <li class="item">item 3</li>
</ul>

• getElementById("table") 을 한다면 ul태그와 하위 li 태그의 요소 전부를 가지고 옵니다
• getElementByClassName("item") 을 한다면 총 3개의 item 클래스가 존재하기 때문에 각각 길이가 3인 배열로 저장하게됩니다
• getElementByTagName("p") 를 한다면 <p>안녕하세요</p> 이 요소를 가지고 오는 것입니다

DOM 요소 쿼리

document.querySelector()
document.querySelectorAll()

• DOM 요소 쿼리는 get 메서드보다 범용적인 메서드 입니다. 태그나 ID, 클래스를 사용하는 것이 아닌 CSS 선택자를 사용합니다
• document.querySelector("#table") 지정된 선택자의 일치하는 문서 내 첫 번째 요소를 반환하게 됩니다
• document.querySelectorAll(".item") 지정된 선택자에 일치하는 요소 목록을 반환하게 됩니다