차이

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

--- wiki:jquery:스크립트_로드_순서 [2020/07/01 15:20]
jskim
+++ wiki:jquery:스크립트_로드_순서 [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
-===== 스트립트 로드 순서 =====
+====== Front-End 자주 하는 실수 ======
-<code javascript>
+===== 1.스크립트 로드 순서 =====
+>스크립트 로드 순서와 $(document).ready(function(){ } 의 사용을 알 수 있는 코드미러 예제
+ 아래와 같이, <head> 태그 에 스크립트 작성 시 <head> 태그를 모두 읽은 후 <body> 태그의 내용을 읽기 때문에 \\
+ $(document).ready(function(){ } 안에서 작성해야 <textarea id="editor"> 태그에 코드미러가 적용됩니다.
+<code javascript>
 <html>
-   <head>
+    <head>
-     // include libraries(jQuery, codemirror)
+        // include libraries(jQuery, codemirror)
-     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
+        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
-     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js"></script>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js"></script>
-     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/javascript/javascript.min.js"></script>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/javascript/javascript.min.js"></script>
-     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css">
-     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/theme/monokai.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/theme/monokai.min.css">
-     <script>
+        <script>
-       var cm;
+            var cm;
-       $(document).ready(function(){
+            $(document).ready(function(){
-         cm = new CodeMirror.fromTextArea(document.getElementById("editor"), {
+                cm = new CodeMirror.fromTextArea(document.getElementById("editor"), {
-           lineNumbers: true,
+                    lineNumbers: true,
-           mode: 'javascript',
+                    mode: 'javascript',
-	   theme : 'monokai'}
+                    theme : 'monokai'}
-	 );
+                );
-       });
+            });
-     </script>
+        </script>
+    </head>
-   </head>
-   <body>
+    <body>
-      <div>
+        <div>
-         <textarea id="editor"></textarea>
+            <textarea id="editor"></textarea>
-      </div>
+        </div>
-   </body>
+    </body>
 </html>
-</code>
+</code>\\
+<body> 태그 안에서 <textarea id="editor"></textarea> 아래에 스크립트를 작성하면\\
+$(document).ready(function(){ } 를 사용하지 않더라도 스크립트가 적용됩니다.\\
+<code javascript>
+<html>
+    <head>
+        // include libraries(jQuery, codemirror)
+        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js"></script>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/javascript/javascript.min.js"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/theme/monokai.min.css">
+    </head>
+    <body>
+        <div>
+            <textarea id="editor"></textarea>
+        </div>
+    </body>
+    <script>
+        var cm;
+        cm = new CodeMirror.fromTextArea(document.getElementById("editor"), {
+            lineNumbers: true,
+            mode: 'javascript',
+            theme : 'monokai'}
+        );
+    </script>
+</html>
+</code>\\
+===== Ref =====
+ [[https://aljjabaegi.tistory.com/43|$(document).ready() 와 웹페이지의 실행순서에 대해 알아보자.]]\\
+ [[https://medium.com/gdana/%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%98%B8%EC%B6%9C%EC%88%9C%EC%84%9C-d51a4349be71|자바스크립트 호출순서]]
+{{tag>eleven jquery 스크립트 로드 codemirror}}

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

사용자 도구

사이트 도구

차이

문서 도구