-
항해2주차 - Node.js (2) 자바스크립트 기본항해 2023. 1. 18. 17:55
1. src?
<script> 태그의 src 속성은 외부 스크립트 파일의 URL을 명시한다.
2. script 태그
<script> 태그를 이용하면 자바스크립트 프로그램을 HTML문서 대부분 위치에 삽입가능.
그러니깐 웹 페이지에 자바스크립트 코드를 추가하기 위해 <script>태그를 사용한다는 것.
3. 모던마크업
<script>태그렌 몇가지 속성이 있다. 요즘엔 안쓰고 오래된 코드에서 종종 발견.
(1) type속성 : <script type=...> not필수
이젠 타입 명시가 필수 아님. 게다가 모던 HTML 표준에선 이 속성의 의미가 바뀜.
이제 이 속성은 자바스크립트 모듈에 사용할 수 있다.
(2)language 속성 : <script language=...> not필수
이 속성은 현재 사용하고 있는 스크립트 언어를 나타낸다.
지금은 자바스크립트가 기본언어라서 이 속성은 필요없다,
(3) 스크립트 전후에 위치한 주석
<script type='text/javascript'> <!--//--> </script>
모던 자바스크립트에선 더이상 사용하지 않음.
4. 외부 스크립트
자바스크립트 코드 양이 많을 경우, 파일을 소분해 저장할 수 있다.
이렇게 분해된 파일은 src 속성을 사용해서 html에 삽입할 수 있다.
예시1 : <script src="/path/to/script.js"></script>
예시2 : <script src="https://주소></script>
복수 스크립트를 HTML에 삽입하고 싶다면 스크립트 태그를 여러개 사용 가능.
<script src="js/script3.js></script>
<scripc src="js/script5.js></script>
5. HTML안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 간단할 때만 사용함.
스크립트가 길어지면 별도 분리된 파일로 만들어 저장하면 좋다.
스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문에, 성능상의 이점이 있습니다.
여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용합니다. 스크립트 파일을 한 번만 다운받으면 되죠.
이를 통해 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라집니다. ----> 이해 덜됨
6. sre 속성이 있으면 태그 내부의 코드는 무시된다.
<script>태그는 src 속성과 내부 코드를 동시에 가지지 못한다.
예를 들어
<script src="file.js">
alert(1) ///src 속성이 사용되므로 이 코드는 실행X
</script>
그러니 두개의 스크립트로 작성하여 실행하자
<script src="file.js"></script>
<script>
alert(1);
</script>
7. 과제
"자바스크립트!" 라는 메세지를 담고있는 alert 창 띄우기
<!DOCTYPE html> <html> <body> <script> alert( "I'm JavaScript!" ); </script> </body> </html>alert.js 라는 외부파일을 외부 스크립트를 이용해 alert창 띄우기
!DOCTYPE html> <html> <body> <script src="alert.js"></script> </body> </html>'항해' 카테고리의 다른 글
항해2주차 - Node.js (4) alert, prompt, confirm (1) 2023.01.18 항해2주차 - Node.js (3) 세미콜론, 주석 (0) 2023.01.18 항해 2주차 - Node.js (1) 자바스크립트란? (0) 2023.01.18 항해 0~1주차 WIL (0) 2023.01.17 항해 1주차 GIT - 원격 repo와 branch 정리(2) (0) 2023.01.16