차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:javascript:javascript_note:js_where_to [2021/03/31 17:58]
emblim98 만듦
+++ wiki:javascript:javascript_note:js_where_to [2023/01/13 18:44] (현재)
@@ 줄 30: / 줄 30: @@
 \\
 예를 들어, 사용자가 버튼을 클릭 할 때 처럼, 이벤트가 발생할 때 함수가 호출될 수 있습니다.\\
-=====JavScript in <head> or <body>=====
+=====JavaScript in <head> or <body>=====
+%%HTML%% 문서에 스크립트를 얼마든지 배치할 수 있습니다.\\
+\\
+스크립트는 %%HTML%% 페이지의 ''%%<body>%%'', 또는 ''%%<head>%%'' 섹션 또는 둘 다에 배치할 수 있습니다.\\
+=====JavaScript in <head>=====
+하기 예제에서, %%JavaScript%% ''%%function(함수)%%''는 %%HTML%% 페이지의 %%<head>%% 섹션에 배치됩니다.\\
+\\
+이 함수는 버튼을 클릭하면 호출됩니다.\\
+====예제====
+<HTML>
+<!DOCTYPE html>
+<html>
+<head>
+    <script>
+        function myFunction() {
+            document.getElementById("demo").innerHTML = "Paragraph changed.";
+        }
+    </script>
+</head>
+<body>
+    <h2>JavaScript in Head</h2>
+    <p id="demo">A Paragraph</p>
+    <button type="button" onclick="myFunction()">Try it</button>
+</body>
+</html>
+</HTML>
+=====JavaScript in <body>=====
+하기 예제에서 %%JavaScript%% ''%%function(함수)%%''는 %%HTML%% 페이지의 %%<body>%% 섹션에 배치됩니다.\\
+\\
+이 함수는 버튼을 클릭하면 호출됩니다.\\
+====예제====
+<HTML>
+<!DOCTYPE html>
+<html>
+<body>
+    <h2>JavaScript in Body</h2>
+    <p id="demo">A Paragraph</p>
+    <button type="button" onclick="myFunction()">Try it!</button>
+    <script>
+        function myFunction() {
+            document.getElementById("demo").innerHTML = "Paragraph changed.";
+        }
+    </script>
+</body>
+</html>
+\\
+스크립트 해석은 디스플레이 속도를 느리게 하므로, %%<body>%% 요소의 맨 아래에 스크립트를 배치하면 display 속도가 개선됩니다.\\
+</HTML>
+=====External JavaScript=====
+스크립트를 외부 파일에 배치할 수 있습니다.\\
+여러 다른 웹 페이지에서 동일한 코드를 사용할 때 외부 스크립트가 실용적입니다.\\
+\\
+%%JavaScript%% 파일의 파일 확장자는 **%%.js%%**입니다.\\
+\\
+외부 스크립트를 사용하려면, %%<script>%% 태그의 ''%%src%%''(source) 속성에 스크립트 파일 명을 넣습니다.\\
+====예제====
+<HTML>
+<!DOCTYPE html>
+<html>
+<body>
+    <h2>External JavaScript</h2>
+    <p id="demo">A Paragraph</p>
+    <button type="button" onclick="myFunction()">Try it!</button>
+    <p>(myFunction is stored in an external file called "myScript.js")</p>
+    <script src="myScript.js"></script>
+</body>
+</html>
+</HTML>
+\\
+''%%<head>%%'' 또는 ''%%<body>%%''에 외부 스크립트 참조를 배치할 수 있습니다.\\
+\\
+스크립트는 %%<script>%% 태그가 있는 위치에 정확히 있는 것처럼 작동합니다.\\
+\\
+외부 스크립트는 %%<script>%% 태그를 포함할 수 없습니다.\\
+=====External JavaScript Advantages=====
+스크립트를 외부 파일에 배치하면 몇 가지 장점이 있습니다.\\
+  * %%HTML%%과 코드를 분리합니다.
+  * %%HTML%%과 %%JavaScript%%를 읽고 유지하기가 더 쉽습니다.
+  * 캐시된 %%JavaScript%% 파일은 페이지 로딩 속도를 높일 수 있습니다.
+한 페이지에 여러 스크립트 파일을 추가하려면 여러 스크립트 태그를 사용합니다.\\
+<code html>
+<script src="myScript1.js"></script>
+<script src="myScript2.js"></script>
+</code>
+=====External References=====
+외부 스크립트는 전체 URL 또는 현재 웹 페이지에 대한 상대경로로 참조할 수 있습니다.\\
+\\
+하기 예제에서는 전체 URL을 사용하여 스크립트에 연결합니다:\\
+====예제====
+<code html>
+<script src="https://www.w3schools.com/js/myScript1.js"></script>
+</code>
+\\
+하기 예제에서는, 현재 웹 사이트의 지정된 폴더에 있는 스크립트를 사용합니다.\\
+<code html>
+<script src="/js/myScript1.js"></script>
+</code>
+\\
+하기 예제는 현재 페이지와 같은 폴더에 있는 스크립트에 연결됩니다.\\
+<code html>
+<script src="myScript1.js></script>
+</code>
+\\
 {{tag>오션, Javascript Where To}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구