首页 > web前端 > js教程 > javascript代码有几种使用方式

javascript代码有几种使用方式

醉折花枝作酒筹
发布: 2021-06-10 11:10:01
原创
2931 人浏览过

javascript代码有两种使用方式,分别是:1、直接执行,打开一个网页时,所有定义在script标签或链入的js文件中的JavaScript代码就会被执行;2、事件驱动,当发生某一个事件时,执行某段JavaScript代码。

javascript代码有几种使用方式

本教程操作环境:windows7系统、javascript1.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">&lt;script type=&quot;text/javascript&quot;&gt; var d = new Date(); var m = d.getMonth(); if( m&gt;=5 ) document.write( m ); &lt;/script&gt;</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">&lt;script type=&quot;text/javascript&quot;&gt; function getM() { var d = new Date(); var m = d.getMonth(); if( m&gt;=5 ) document.write( m ); } &lt;/script&gt; 以上JavaScript代码定义的是函数,当网页打开时,函数中的代码不会被执行。当需要执行该函数时,需要使用函数调用。 &lt;script type=&quot;text/javascript&quot;&gt; getM(); &lt;/script&gt;</pre><div class="contentsignin">登录后复制</div></div><p><code>事件驱动:</code></p><p>当发生某一个事件,如网页被打开、单击鼠标、双击鼠标等,执行某段JavaScript代码。</p><p>例如:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">&lt;script type=&quot;text/javascript&quot;&gt; var count = 0; function setCount() { count++; if( count&gt;=5 ) count = 0; } &lt;/script&gt; &lt;button onclick=&quot;setCount()&quot;&gt;计数&lt;/button&gt;</pre><div class="contentsignin">登录后复制</div></div><p>本例中,<button> 标签定义了一个按钮,其中的 onclick 属性用于响应一个鼠标单击事件,当用鼠标单击此按钮时,执行 setCount() 函数。</p><p>在标签中响应某一事件的属性称为事件句柄,它们的值是JavaScript代码。</p><p><span style="font-size: 16px;"><strong>常用事件句柄:</strong></span></p><p><strong>onload:</strong></p><p>当网页被打开时触发。它仅在 <body> 和 <frameset> 标签中有效。</p><p>该事件一般用于执行一些初始化操作。</p><p><strong>onunload:</strong></p><p>当网页被关闭时触发。它仅在 <body> 和 <frameset> 标签中有效。</p><p>该事件一般用于完成一些收尾工作。</p><p><strong>onclick:</strong></p><p>鼠标单击时触发。它可用于控件、图像、文本、超链接等对象。</p><p>该事件用于响应鼠标单击操作,是最常用的一个事件句柄。</p><p><strong>ondblclick:</strong></p><p>鼠标双击时触发。它可用于控件、图像、文本、超链接等对象。</p><p>该事件用于响应鼠标双击操作。</p><p><strong>onchange:</strong></p><p>当内容改变时触发。它可用于文本框、列表框等对象。</p><p>该事件一般用于响应用户修改文本框中内容的操作。</p><p>说明:当用户向一个文本框中输入文本时,不会触发onchange事件,只有当用户输入结束后,单击文本框以外的区域,使文本框失去焦点时才触发该事件。</p><p><strong>onselect:</strong></p><p>当内容被选取时触发。它可用于文本框、列表框等对象。</p><p>该事件一般用于响应用户选取了文本框中的内容,以及改变了列表框中选择的项目等操作。</p><p>以上只是几个最常用的事件句柄。</p><p>说明:事件句柄不是JavaScript代码,而是HTML属性,所以它不区分大小写,但应该养成使用小写字母书写的习惯。</p><p><strong>扩展资料:</strong></p><p>【JavaScript定义方法】:</p><p>在HTML文档中加入JavaScript代码有两种方法:嵌入式、链入式。</p><p>嵌入式:</p><p>把JavaScript代码嵌入在HTML文档中。方法:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">&lt;script type=&quot;text/javascript&quot;&gt; JS代码 &lt;/script&gt;</pre><div class="contentsignin">登录后复制</div></div><p>JavaScript代码必须定义在 <script> 和 </script> 之间。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板