There are two ways to use JavaScript code, namely: 1. Direct execution. When a web page is opened, all JavaScript codes defined in script tags or linked js files will be executed; 2. Events Driver, when a certain event occurs, execute a certain piece of JavaScript code.
The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.
[JavaScript execution method]
The JavaScript code defined in the HTML document has two execution methods: direct execution and event-driven.
Direct execution:
When we open a web page, all JavaScript code defined in the <script> tag or linked js file will will be executed. </p>
<p>It should be noted that functions defined with function are not executed. The function will only be executed when it encounters a function call. </p>
<p>Example 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">Copy after login</div></div><p>The above JavaScript code is placed naked in the <script> tag, and will be executed immediately when the web page is opened. </p><p>Example 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">Copy after login</div></div><p><code>Event-driven: </code></p><p>When an event occurs, such as a web page being opened, a mouse click, a double-click, etc., Execute a piece of JavaScript code. </p><p>For example: </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">Copy after login</div></div><p>In this example, the <button> tag defines a button, and the onclick attribute is used to respond to a mouse click event. When the button is clicked with the mouse , execute the setCount() function. </p><p>The attributes that respond to an event in the tag are called event handlers, and their values are JavaScript codes. </p><p><span style="font-size: 16px;"><strong>Common event handles: </strong></span></p><p><strong>onload: </strong></p><p>Triggered when the web page is opened. It is only valid within the <body> and <frameset> tags. </p><p>This event is generally used to perform some initialization operations. </p><p><strong>onunload: </strong></p><p>Triggered when the web page is closed. It is only valid within the <body> and <frameset> tags. </p><p>This event is generally used to complete some finishing work. </p><p><strong>onclick: </strong></p><p>Triggered when the mouse clicks. It can be used for objects such as controls, images, text, hyperlinks, etc. </p><p>This event is used to respond to mouse click operations and is the most commonly used event handler. </p><p><strong>ondblclick: </strong></p><p>Triggered when the mouse is double-clicked. It can be used for objects such as controls, images, text, hyperlinks, etc. </p><p>This event is used to respond to a mouse double-click operation. </p><p><strong>onchange: </strong></p><p>Triggered when the content changes. It can be used for objects such as text boxes, list boxes, etc. </p><p>This event is generally used to respond to the user's operation of modifying the content in the text box. </p><p>Description: When the user enters text into a text box, the onchange event will not be triggered. This event will only be triggered when the user clicks an area outside the text box after completing the input, causing the text box to lose focus. . </p><p><strong>onselect: </strong></p><p>Triggered when the content is selected. It can be used for objects such as text boxes, list boxes, etc. </p><p>This event is generally used to respond to operations such as the user selecting the content in the text box and changing the selected item in the list box. </p><p>The above are just a few of the most commonly used event handlers. </p><p>Note: The event handler is not a JavaScript code, but an HTML attribute, so it is not case-sensitive, but you should develop the habit of writing in lowercase letters. </p><p><strong>Extended information: </strong></p><p>[JavaScript definition method]:</p><p>There are two ways to add JavaScript code to HTML documents: embedded and linked. Mode. </p><p>Embedded: </p><p>Embed JavaScript code in the HTML document. Method: </p><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">Copy after login</div></div><p>JavaScript code must be defined between <script> and </script>.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
