Javascript 코드는 두 가지 방법으로 사용될 수 있습니다. 1. 직접 실행, 웹 페이지가 열릴 때 스크립트 태그 또는 연결된 js 파일에 정의된 모든 JavaScript 코드가 실행됩니다. 2. 이벤트 구동, 이벤트가 발생할 때; 특정 이벤트가 발생하면 특정 JavaScript 코드 조각이 실행됩니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
【JavaScript 실행 방법】
HTML 문서에 정의된 JavaScript 코드에는 직접 실행과 이벤트 기반의 두 가지 실행 방법이 있습니다. 直接执行、事件驱动。
直接执行：
当我们打开一个网页时，所有定义在 <script> 标签或链入的 js 文件中的JavaScript代码就会被执行。</p>
<p>需要注意的是，用 function 定义的函数是不被执行的，函数只有在遇到函数调用时才会执行。</p>
<p>例1：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><script type="text/javascript">
var d = new Date();
var m = d.getMonth();
if( m>=5 )
document.write( m );
</script></pre><div class="contentsignin">로그인 후 복사</div></div><p>以上JavaScript代码是裸放在 <script> 标签中的，当网页打开时，就立即执行。</p><p>例2：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><script type="text/javascript">
function getM()
{
var d = new Date();
var m = d.getMonth();
if( m>=5 )
document.write( m );
}
</script>
以上JavaScript代码定义的是函数，当网页打开时，函数中的代码不会被执行。当需要执行该函数时，需要使用函数调用。
<script type="text/javascript">
getM();
</script></pre><div class="contentsignin">로그인 후 복사</div></div><p><code>事件驱动：</code></p><code>직접 실행:</code><p></p>웹페이지를 열면 <script> 태그나 링크된 js 파일에 정의된 모든 JavaScript 코드가 실행됩니다. <p></p>function으로 정의된 함수는 실행되지 않는다는 점에 유의하세요. 함수는 함수 호출을 만났을 때만 실행됩니다. <p></p>예제 1: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><script type="text/javascript">
var count = 0;
function setCount()
{
count++;
if( count>=5 )
count = 0;
}
</script>
<button onclick="setCount()">计数</button></pre><div class="contentsignin">로그인 후 복사</div></div></p>위의 JavaScript 코드는 <script> 태그에 포함되어 있으며 웹페이지가 열리면 즉시 실행됩니다. <p><span style="font-size: 16px;">예 2: <strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><script type="text/javascript">
JS代码
</script></pre><div class="contentsignin">로그인 후 복사</div></div></strong><code>이벤트 중심:</code></span></p>웹 페이지 열기, 마우스 클릭, 더블 클릭 등과 같은 이벤트가 발생하면 JavaScript 코드가 실행됩니다. <p><strong>예: </strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><script type="text/javascript" src="js文件"></script></pre><div class="contentsignin">로그인 후 복사</div></div>이 예에서는 <button> 태그가 버튼을 정의하고, onclick 속성은 마우스로 버튼을 클릭할 때 setCount() 함수에 응답하는 데 사용됩니다. 실행됩니다. <p></p>태그의 이벤트에 응답하는 속성을 이벤트 핸들러라고 하며 해당 값은 JavaScript 코드입니다. <p></p>
<p><strong>일반 이벤트 핸들러: </strong></p>
<p></p>
<p>onload: </p>
<p><strong>웹페이지가 열릴 때 트리거됩니다. 이는 <body> 및 <frameset> 태그 내에서만 유효합니다. </strong></p>이 이벤트는 일반적으로 일부 초기화 작업을 수행하는 데 사용됩니다. <p></p>
<p>onunload: </p>
<p><strong>웹페이지가 닫힐 때 트리거됩니다. 이는 <body> 및 <frameset> 태그 내에서만 유효합니다. </strong></p>이 이벤트는 일반적으로 일부 마무리 작업을 완료하는 데 사용됩니다. <p></p>
<p>onclick: </p>
<p><strong>마우스를 클릭할 때 트리거됩니다. 컨트롤, 이미지, 텍스트, 하이퍼링크 등과 같은 개체에 사용할 수 있습니다. </strong></p>이 이벤트는 마우스 클릭 작업에 응답하는 데 사용되며 가장 일반적으로 사용되는 이벤트 핸들러입니다. <p></p>
<p>ondblclick: </p>
<p></p>마우스를 두 번 클릭하면 트리거됩니다. 컨트롤, 이미지, 텍스트, 하이퍼링크 등과 같은 개체에 사용할 수 있습니다. <p><strong>이 이벤트는 마우스 더블 클릭에 응답하는 데 사용됩니다. </strong></p>
<p>onchange: </p>
<p></p>콘텐츠가 변경되면 트리거됩니다. 텍스트 상자, 목록 상자 등과 같은 개체에 사용할 수 있습니다. <p></p>이 이벤트는 일반적으로 텍스트 상자의 내용을 수정하는 사용자 작업에 응답하는 데 사용됩니다. <p></p>참고: 사용자가 텍스트 상자에 텍스트를 입력하면 onchange 이벤트가 트리거되지 않습니다. 이 이벤트는 사용자가 입력을 완료한 후 텍스트 상자 외부 영역을 클릭할 때만 트리거되어 텍스트 상자가 포커스를 잃게 됩니다. . <p><strong></strong>onselect: </p>
<p></p>콘텐츠가 선택되면 트리거됩니다. 텍스트 상자, 목록 상자 등과 같은 개체에 사용할 수 있습니다. <p></p>이 이벤트는 일반적으로 사용자가 텍스트 상자에서 콘텐츠를 선택하고 목록 상자에서 선택한 항목을 변경하는 등의 작업에 응답하는 데 사용됩니다. <p></p>위 내용은 가장 일반적으로 사용되는 이벤트 핸들러 중 일부에 불과합니다. <p></p>참고: 이벤트 핸들러는 JavaScript 코드가 아니라 HTML 속성이므로 대소문자를 구분하지 않지만, 소문자로 작성하는 습관을 길러야 합니다. <p></p>
<p>확장 정보: </p>
<p></p>[JavaScript 정의 방법]: <p></p>HTML 문서에 JavaScript 코드를 추가하는 방법에는 포함 및 링크의 두 가지 방법이 있습니다. <p></p>임베디드: <p></p>HTML 문서에 JavaScript 코드를 삽입합니다. 방법: <p>rrreee</p>JavaScript 코드는 <script>와 </script> 사이에 정의되어야 합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
