JavaScript Basic
◆ ../ 02.JavaScript-Basic / 02.1-getting start
• 브라우저에서 자바스크립트를 실행시키려면 HTML 파일이 존재해야함
• <style> 태그를 불러온것 처럼 HTML에 <script> 태그를 사용하여 JS를 추가 할 수있다. (JS엔진에 의해 실행됨)
자바스크립트 코드 위치 – HTML 문서 내에 작성
▷ <script> 태그는 HTML 문서 어디에다 작성해도 상관없지만
일반적으로 <head> 태그 사이에 추가하거나<body> 태그 사이에 추가한다.
▼ JS를 사용하여 배경색 넣기
적용 방식이 어떻게 되는지 흐름만 대충 훑어보자
JS의 엔진에 실행되어 적용되는 것을 확인 할 수있다.
자바스크립트 코드 위치 – HTML 문서 외부에 작성
▷ <style> css는 link를 적용해서 불러왔지만 <script> 는 src를 사용하여 불러온다.
외부 파일로 자바스크립트를 HTML 파일과 별도로 작성하게 되면 HTML 태그는 HTML 파일내에,
자바스크립트 코드는 JS 파일내에 위치하게 됨으로 관리적인 측면에서 효율적이다.
또한 자바스크립트가 JS 파일로 작성하게 되면 동일한 자바스크립트 코드를 이용해야 하는
여러 HTML 파일내에서 코드 중복 없이 하나의 JS 파일을 재사용할 수 있는 이점이 있다.
▼ <script src=" "></script> 를사용하여 JS파일 실행한다.
자바스크립트 코드 위치 – HTML 실행 순서
▼ JS 코드의 위치를 마크업 위에 한번 적용해보자.
검사 -> 콘솔 창에서 에러 메시지 확인하고 해당 오류 해결법은
스크립트의 이 부분을 문서의 맨 끝에 두어 문서가 이미 로드되기 전의 모든 것이 되도록 하는 것 필요하므로 순서바꾸기
▷ 자바스크립트 코드가 작성되는 HTML 문서내에서의 위치가 문제가 될 수 있다.
자바스크립트 코드의 내용이 실행되는 HTML 문서의 태그와 관련이 없다면,
즉 자바스크립트 코드에서HTML 문서의 DOM 노드를 이용하지 않는다면
어느 위치에 작성되어 있든 상관은 없지만 자바스크립트 코드에서 DOM 노드를 이용한다면
이용하는 DOM 노드가 메모리에 로딩된 이후에 해당 자바스크립트 코드가 실행되게 해주어야 한다.
▼작성 위치를 변경 후 확인해보면 에러가 없어지고 정상적으로 JS가 작동 하는 것을 볼 수있다.
▼ 위치 상관없이 적용하려면 window.addEventListener 윈도우 브라우저의 이벤트를 거는 함수를 사용한다.
자바스크립트 주석
▼ // 로 추가되는 주석은 한 줄 주석이며 /* */ 로 추가되는 주석은 여러 줄 주석이다.
'BootCamp Review' 카테고리의 다른 글
| 2024.09.05 (Day 4) -JavaScript 변수와 데이터 타입 (0) | 2024.09.05 |
|---|---|
| 2024.09.04 (Day 3) -JavaScript Basic II (0) | 2024.09.04 |
| 2024.08.26 (Day 19) - HTML/CSS [Last class(zigzag review)] (0) | 2024.08.29 |
| 2024.08.23 (Day 18) - HTML/CSS [Forms(Form, Input, Textarea, Button) II ] (0) | 2024.08.29 |
| 024.08.22 (Day 17) - HTML/CSS [Forms(Form, Input, Textarea, Button) I ] (0) | 2024.08.23 |