JavaScript

HTML에

<script>
  document.write(1+1);
</script>

와 같이 작성한다.
<script> </script> = 자바 스크립트 작성 시작 /끝.

혹은 <script src="주소"></script>로 타 파일을 지정하기도 한다.

---

▶출력 위치

경고창 alert

window.alert("안내글")
window. = 윈도우 창에, 생략가능한 구문이다.
alert("안내글"); = 경고창에 글자를 쓰다

입력창 prompt

prompt("안내글")
사용자에게 입력창을 주고
숫자나 true를 입력하더라도 string (문자형)으로 반환한다.

확인창 confirm

confirm("안내글")
사용자가 확인 또는 취소를 선택하게 하고
확인을 누르면 true를 반환, 취소를 누르면 false를 반환한다.

문서 document

document.write("글자")
document. = 이 문서에.
write("글자"); = 글자를 쓰다

콘솔 창

console.log("글자")
console. = 콘솔에.
log("글자"); = 로그 글자를 쓴다

id를 지정하여 입력

document.getElementById("아이디").innerHTML = "글자";

document. = 이 문서에.
getElementById("아이디"). = "아이디"로부터 요소를 얻어온다
innerHTML = "글자" = html의 출력문을 "글자"로 변경한다.
💡 innerHTML 로만 작성하면 이미 작성된 html의 출력문 값을 받아온다.

위와 같이 작성하면 div id="test"에 hello로 작성된다.

❗ id를 스크립트보다 먼저 작성해야한다.

그렇지 않으면 지정한 id가 null인 상태인 것으로 간주되어 위와 같은 에러가 뜬다.

---

▶DOM 요소 선택

단수 선택

<div id=box class=no1> 글자A </div>

html 상단에 위와 같이 작성되어있다고 가정하자.

document.getElementById("id명")

document.getElementById("box").innerHTML과 같이 글자A를 선택할 수 있다.

document.querySelector("css 선택자")

document.querySelector("#box").innerHTML 또는 document.querySelector(".no1").innerHTML

로 글자A를 선택할 수 있다.

복수 선택

<div id=box class=no1> 글자A </div>
<div id=box class=no2> 글자B </div>

html 상단에 위와 같이 작성되어있다고 가정하자.
아래의 선택자로 지정하면 html 컬렉션 혹은 node list가 선택된다.
때문에 작성 후 [ ]로 index 순서를 지정해주어야 .innerHTML에서 값을 받아올 수 있다.
❗ [ ] 사이에 들어가는 숫자는 0부터 시작하는 양수로, 작성된 순서부터 0으로 지정된다.

document.getElementsByClassName("class명")

document.getElementsByClassName("no1")[0].innerHTML 과 같이 글자A를 선택할 수 있다.
document.getElementsByClassName("no1")[1].innerHTML 과 같이 글자B를 선택할 수 있다.

document.getElementsByTagName("tag명")

document.getElementsByTagName("div")[0].innerHTML 과 같이 글자A를 선택할 수 있다.

document.querySelectorAll("css 선택자")

document.querySelectorAll("#box")[0].innerHTML 또는
document.querySelectorAll(".no1")[0].innerHTML 과 같이 글자A를 선택할 수 있다.

---