欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML<script>标签

程序员文章站 2022-07-12 08:03:39
...

HTML script 标签

script 标签 -- 在文档中使用脚本
  • script标签是成对出现的,以<script>开始,以</script>结束
  • 属性
    • src -- 指定需要加载的脚本文件(例如:js文件)的地址URI
    • type -- 指定媒体类型(例如:type="text/javascript")
  • 引用网址:http://www.dreamdu.com/xhtml/tag_script/

示例

<head>
    <script type="text/javascript" src="dreamdu.js"></script>
</head>

HTML 5 <script> 标签

定义和用法

<script> 标签用于定义客户端脚本，比如 JavaScript。

script 元素即可包含脚本语句，又可通过 src 属性指向外部脚本文件。

必需的 type 属性规定脚本的 MIME 类型。

JavaScript 通常的用途是图像操作、表单验证以及内容动态更改。

实例

<script type="text/javascript">
document.write("Hello World!")
</script>







<script>元素

    向HTML页面中插入JavaScript的主要方法，就是使用<script>元素。这个元素由Netscape创造并在Netscape Navigator2中首先实现。后来，这个元素被加入到正式的HTML规范中。HTML4.01为<scripth>定义了下列6个属性。

  • async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本有效。

  • charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。

  • defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本有效。

  • language：已废弃。

  • src：可选。表示包含要执行代码的外部文件。

  • type：可选。可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型（也称为MIME类型）。


    使用<script>元素的方式有两种：直接在页面中嵌入JavaScript代码和包含外部JavaScript文件。

    在使用<script>元素嵌入JavaScript代码时，只需为<script>指定type属性。然后，向下面这样把javaScript代码直接放在元素内部即可：

[js] view plain copy
  1. <script type="text/javascript">  
  2.     function sayHi(){  
  3.         alert("Hi!");  
  4.     }  
  5. </script>  

    包含在<script>元素内部的JavaScript代码将被从上至下依次解释。就拿前面这个例子来说，解释器会解释一个函数的定义，然后将该定义保存在自己的环境当中。当解释器对<script>元素内部的所有代码求值完毕前，页面中的其余内容都不会被浏览器加载或显示。

    

    如果要通过<script>元素来包含外部JavaScript文件，那么src属性就是必需的。这个属性的值是一个指向外部javascript文件的链接，例如：

[js] view plain copy
  1. <script type="text/javascript" src="example.js"></script>  

在这个例子中，外部文件example.js将被加载到当前页面中。外部文件只须包含通常要放在开始的<script>和结束的</script>中间的那些javascript代码即可。与解析嵌入式javascript代码一样，在解析外部javascript文件（包括下载该文件）时，页面的处理也会暂时停止。如果是在XHTML文档中，也可以省略前面示例代码中结束的</script>标签，例如：

[js] view plain copy
  1. <script type="text/javascript" src="example.js" />  

按照惯例，外部javascript文件带有.js扩展名。但这个扩展名不是必需的，因为浏览器不会检查包含javascript的文件的扩展名。这样一来，使用JSP、PHP或其他服务器端语言动态生成javascript代码也就成为了可能。但是，服务器通常还是需要看扩展名决定为响应应用哪种MIME类型。如果不适用.js扩展名，请确保服务器能反应会正确的MIME类型。


HTML调用JavaScript

   相信开始学JavaScript的同学都已经有了HTML和CSS的基础。如果没学，建议回头去学习。

1.1  <script>元素

   JS（对JavaScript的简称，以下都用JS代替）插入HTML的主要方法就是使用<script>标签。它有5个属性：

   （1）type（language）：脚本语言的内容类型（同调用CSS的type=“text/css”类似），type="text/javascript"；

   （2）src ：导入外部的JS文件,src="example.js"；

   （3）charset：用来设置script元素包含的脚本的字符编码，默认是utf-8编码 （只针对外部脚本）；

   （4）defer：设置脚本延迟执行（只针对外部脚本）；

   （5）async：在加载HTML文件的同时异步加载脚本（只针对外部脚本）。

1.2 嵌入<script>的方式

   （1）直接在页面嵌入JS代码：可以在head和body标签中，位置的不同只会影响加载脚本的时间，通常可以忽略。

   

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>JavaScript脚本语言</title>  
  5.     <script type="text/javascript">    //在head标签中插入  
  6.         function sayHi{  
  7.             alert("Hi");  
  8.         }  
  9.     </script>  
  10. </head>  
  11. <body>  
  12.   
  13. </body>  
  14. </html>  
[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>JavaScript脚本语言</title>  
  5.   
  6. </head>  
  7. <body>  
  8.     <script type="text/javascript">     //在body中插入  
  9.         function sayHi{  
  10.             alert("Hi");  
  11.         }  
  12.     </script>  
  13. </body>  
  14. </html>  

  （2） 在head标签中添加外部JS文件：注意外部文件以 .js后缀结尾，在JS文件中去掉<script>标签直接写函数。

   html文件

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>JavaScript脚本语言</title>  
  5.     <script type="text/javascript" src="example.js"></script>  //在head标签插入JS文件  
  6. </head>  
  7. <body>  
  8.      
  9. </body>  
  10. </html>  
[javascript] view plain copy
  1. //JS文件 example.js  
  2. function sayHi(){  
  3.     alert("Hi");  
  4. }  
1.3 <noscript>标签

    早期的浏览器都不支持JS，<noscript>标签就是在不支持JS的浏览器中显示替代的内容

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>JavaScript脚本语言</title>  
  5.     <script type="text/javascript" src="example.js"></script>  //在head标签插入JS文件  
  6. </head>  
  7. <body>  
  8.    <noscript>  
  9.      <p>本页面需要浏览器支持(启用)JavaScript.</p>  //支持JS的浏览器永远不会显示  
  10.    </noscript>  
  11. </body>  
  12. </html>  

注：不必把所有的JS写到一个<script>标签中，如果想区分JS里面函数，可以加入多个<script>标签，但为了以后维护的方便，建议都采用外部添加JS文件，可以创建多个标签添加多个JS文件。

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>JavaScript脚本语言</title>  
  5.     <script type="text/javascript" src="example01.js"></script>  //在head标签插入多个JS文件  
  6.     <script type="text/javascript" src="example02.js"></script>  
  7.     <script type="text/javascript" src="example03.js"></script>  
  8. </head>  
  9. <body>  
  10.      
  11. </body>  
  12. </html>  




用JavaScript的几种情况和规范写法


比较简单，基础。

一、引用外部文件中的js脚本

<script type="text/javascript" src="ext.js"></script>
也可以象下面这样写，language不是必要的，但是推荐上面的写法
<script language="javascript" type="text/javascript" src="ext.js"></script>
二、页面内引用：

<script type="text/javascript">//<![CDATA[
var x = 0;
function fn(args) {
 //...
} 
//]]></script>
加上“//<![CDATA[” 和 “//]]>”是为了兼容XHTML，是推荐的写法，HTML时代一般用“<!--”和“//-->”

三、在一些HTML控件的事件属性中使用（一般事件为onxxx，如onmouseover,onclick,onchange）
<body onload="alert('loaded');">
<input type="text" name="username" onclick="alert(this.value);" />
四、在一些HTML控件的非事件属性中使用（注意：一定要加javascript:）

<a href="javascript:void(0);" onclick="alert(this.innerText);">my blog:http://blog.csdn.net/kimsoft</a>








上一篇： java学习笔记（十五）java网络编程

下一篇： git 使用

推荐阅读