js는 html content를 변경 할 수 있다.
getElementById
해당 id를 가진 element를 찾아준다.
demo라는 id를 가진 p를 찾아 button 클릭 시 text가 바뀌는 것을 알 수 있다.
innerHTML은 코드 상에서
"Hello JavaSctipt!"대신에 html 코드로 style을 적용해주면 그 style이 나타난다.
--> innerText는 html 코드를 적어주면 그냥 text로 나타난다는 차이점이 있다.
JS를 이용한 HTML에 style 적용
style.~~를 사용하여 style 변경을 한다.
""와 ''
코드 중 첫번째와 두번째 button 속성인 onclick을 보면 차이점이 있다. ""와 ''을 사용한 위치이다.
JavaScript는 ""와 ''을 구분하지 않고 사용한다.
하지만, "'이나 '"처럼 사용은 안된다.
JavaScript 적용 위치
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>demo라는 id를 가진 element를 불러온 뒤의 코드이다.
script tag 안에 적용
이런 형식으로 script tag 안에 적용을 해줄 수 있다.
JS는 head tag에 적용을 해줄 수도 있고,
body tag의 맨 마지막에 적용을 해줄 수 있다.
후자로 적용해주면 디스플레이 속도가 향상된다는 장점이 있다.
외부 파일에 배치 후 적용
<script src="myScript1.js"></script>- 전체 URL 주소를 이용한 적용
- 파일 경로를 이용한 적용 ex) ../app.js
외부 파일을 배치하면 생기는 장점
- HTML과 코드 분리가 가능하다.
- HTML 및 JavaScript를 더 쉽게 읽고 유지 관리 가능하다.
- 캐시된 JavaScript 파일은 페이지 로드 속도를 높일 수 있다.
HR velog