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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======JavaScript Where To======
<WRAP left notice 80%>
  * description : JavaScript Where To
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-31
</WRAP>
<WRAP clear></WRAP>
\\
=====The <script> Tag=====
HTML에서, 자바스크립트 코드는 ''%%<script>%%''와 ''%%</script>%%'' 태그 사이에 삽입됩니다.\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<body>
    <h2>JavaScript in Body</h2>
    <p id="demo"></p>
    <script>
        document.getElementById('demo').innerHTML = "My First JavaScript";
    </script>
</body>
</html>
</HTML>
\\
이전 %%JavaScript%% 예제에서는 %%type%% 속성: %%<script type="text/javascript">%%을 사용할 수 있습니다.\\
%%type%% 속성은 필요하지 않습니다. %%JavaScript%%는 %%HTML%%의 기본 스크립팅 언어입니다.\\
=====JavaScript Functions and Events=====
%%JavaScript%% 함수는 %%JavaScript%% 코드 블록이고, "호출"될 때 실행될 수 있습니다.\\
\\
예를 들어, 사용자가 버튼을 클릭 할 때 처럼, 이벤트가 발생할 때 함수가 호출될 수 있습니다.\\
=====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

사용자 도구

사이트 도구

문서 도구
