자바 스크립트 사용법
<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") 지정된 선택자에 일치하는 요소 목록을 반환하게 됩니다