초보개발자의 성장블로그
Javascript 03 자바스크립트 포함 방법
프론트엔드/Javascript2021. 4. 7. 21:01
자바스크립트 코드의 실행 순서 살펴보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 예제</title>
<script>
var num=0;
document.write("head 태그 내 실행 순서 : " + num + "<br/>");
</script>
<script>
var num=1;
document.write("head 태그 내 실행 순서 : " + num + "<br/>");
</script>
</head>
<body>
<script>
var num=2;
document.write("head 태그 내 실행 순서 : " + num + "<br/>");
</script>
<script>
var num=3;
document.write("head 태그 내 실행 순서 : " + num + "<br/>");
</script>
</body>
</html>
외부 자바스크립트 문서 작성 후 참조하기
<!-- ejs.js 파일 입니다 -->
var age=23;
/* 문자에 스타일 속성 적용 */
document.write("<div style='color:red; font-size:24px;'>외부 자바스크립트 파일</div>");
document.write("당신의 나이는 " + age + "입니다.");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./javascript/ejs.js"></script>
</head>
<body>
<p>
<!--버튼을 클릭하면 메시지 창 출력-->
<button type="button" onclick="alert('외부 자바스크립트 파일')">버튼 클릭</button>
</p>
</body>
</html>
여러 개의 외부 자바스크립트 파일 참조하기
<!-- ejs1.js 파일 입니다 -->
document.write("ejs1.js");
document.write("<div style='color:red;font-size:24px;'>외부 자바스크립트 파일</div>");<!-- ejs2.js 파일 입니다 -->
document.write("ejs2.js");
document.write("<div style='color:blue;font-size:20px;'>외부 자바스크립트 파일</div>");<!-- ejs3.js 파일 입니다 -->
document.write("ejs3.js");
document.write("<div style='color:green;font-size:16px;'>외부 자바스크립트 파일</div>");<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="javascript/ejs1.js"></script>
</head>
<body>
<script src="javascript/ejs2.js"></script>
<script src="javascript/ejs3.js"></script>
</body>
</html>내포 관계인 자바스크립트 파일 참조하기
<!-- njs1.js 파일 입니다 -->
document.write("njs1.js");
document.write("<div style='color:red;font-size:24px;'>외부 자바스크립트 파일</div>");
document.write("<script src='./javascript/njs2.js'><script>");<!-- njs2.js 파일 입니다 -->
document.write("njs2.js는 njs1.js에 포함");
document.write("<div style='color:blue;font-size:20px;'>외부 자바스크립트 파일</div>");
document.write("<script src='./javascript/njs3.js'></script>");<!-- njs3.js 파일 입니다 -->
document.write("njs3.js는 njs2.js에 포함");
document.write("<div style='color:green;font-size:16px;'>외부 자바스크립트 파일</div>");
alert('Nested Script File');<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="javascript/njs1.js"></script>
</body>
</html>혼합 방법으로 자바스크립트 파일 포함하기
<!-- mjs.js 파일 입니다 -->
document.write("mjs1.js");
document.write("<div style='color:red;font-size:24px;'>외부 자바스크립트 파일</div>");<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./javascript/mjs.js"></script>
</head>
<body>
<script>
document.write("<div style='color:blue;font-size:20px;'>내부 자바스크립트</div>");
</script>
</body>
</html>'프론트엔드 > Javascript' 카테고리의 다른 글
| Javascript 06 전역변수와 지역변수 (0) | 2021.04.11 |
|---|---|
| Javascript 05 변수명과 사용방법 (0) | 2021.04.11 |
| Javascript 04 데이터 타입 (0) | 2021.04.11 |
| Javascript 02 자바스크립트 작성 방법 (0) | 2021.04.07 |
| Javascript 01 자바스크립트 (0) | 2021.04.07 |
댓글()