如何在HTML中使用JavaScript代码

大家好，欢迎来到IT知识分享网。如何在HTML中使用JavaScript代码"

如何在HTML中使用JavaScript代码

在HTML插入

这个标签有留个属性可供自行选择使用。

async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效
src：可选。表示包含要执行代码的外部文件路径。
type：可选。可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型（也称为MIME类型）。默认值为text/javaScript。
charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。
defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。
language：已废弃。原来用于表示编写代码使用的脚本语言（如JavaScript、JavaScript1.2或VBScript）。大多数浏览器会忽略这个属性，因此也没有必要再用了。

使用方法

在页面中使用JavaScript有两种方法。

第一就是直接在script标签中嵌入JavaScript代码。
第二就是引入外部的JavaScript文件。

嵌入

嵌入时，一般在body的结束标签上一级创建script标签，然后在标签之中直接写进你需要的代码就好了。传统的应该是放在head标签的里面的。但是这样的话就需要等全部的JavaScript文件全部都要运行完毕才会执行页面元素，于是就把位置调整到了body标签里面，这样页面元素就可以更快的执行完，代开页面的速度就会显得更快。

<body>
    <script type="text/javaScript">
    	...
		...
    </script>
</body>

这种方法是最简单的方法，但是一般在比较大的项目里面是不推荐使用这种方法的，一般都是使用引入外部文件。一来是代码混乱，不好维护代码。二来是代码不美观。

type属性现在不是强制要写上的，现在使用script标签可以直接使用，不用添加type属性也是可以的，引擎会自动识别添加。在标签的代码是从上往下执行运行的。在解释器对script元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示的。

还有要注意的是，在script标签中任何地方都是不可以出现</script>字符串的，因为在引擎遇到字符串时会认为这是你的结束标签，直接跳出去不执行你下面的JavaScript代码了。需要使用</script>时就需要用到转义字符“ \ ”了。“<\/script>”,这样就可以正常的运行了。

<body>
    <script type="text/javaScript">
    	function a(){ 
   
        	console.log("</script>"); // 抛出错误
        }
		function b(){ 
   
            console.log("<\/script>"); // 正常运行
        }
    </script>
</body>

引入

用到引入的方法的，就必须要用到src的属性了，这个属性的属性值是指向外部JavaScript文件的路径。

<body>
    <script type="text/javaScript" src="javaScript.js">
    </script>
</body>

外部文件JavaScript.js就会被加载到当前文件之中。外部文件的内容和嵌入的内容也是一样的。

需要注意的是，引入外部文件时，也就是使用src属性时，script标签里就不需要再写JavaScript代码了，因为有是src属性生效时，只会下载并且运行外部文件的代码。忽略掉标签里的代码。而src更加强大的功能是可以引入外部域的JavaScript文件。

<body>
    <script type="text/javaScript" 
    		src="http://www.........javaScript.js">
    </script>
</body

需要完整的URL，这样外部域的文件也能正常的在当前页面加载运行。引入外部域的文件要多加小心注意。因为文件的作者不知道会干出什么事情。

script标签是可以使用多个的，只要不存在defer和async属性，浏览器都会按照script元素在页面中出现的先后顺序对它们依次进行解析。顺序从是上往下执行，执行完第一个才会执行第二个。

延迟脚本

也就是使用defer属性。只对外部脚本文件有效。

<!DOCTYPE html>
<html> 
    <head>  
    <title>Example HTML Page</title>  
	<script type="text/javascript" defer="defer" 
			src="javaScript.js"></script> 
	<script type="text/javascript" defer="defer" 
			src="javaScript2.js"></script> 
</head>  
<body>  
    <!-- 这里放内容 -->  
</body> 
</html>

这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。简单来说就是页面加载时就下载文件，但是需要等到全部的文件加载完才会执行，也就是引擎运行到</html>时才会执行。HTML5的规范要求是要按照顺序来执行延迟脚本，但是在现实中有可能是会不按照顺序执行的，所以推荐使用延迟脚本时只是使用一个就可以了。

推荐的还是放在body标签里。

异步脚本

也就是使用async属性。

<!DOCTYPE html>
<html> 
    <head>  
    <title>Example HTML Page</title>  
	<script type="text/javascript" async 
			src="javaScript.js"></script> 
	<script type="text/javascript" async 
			src="javaScript2.js"></script> 
</head>  
<body>  
    <!-- 这里放内容 -->  
</body> 
</html>

同样与defer一样，async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行。也就是说第二个文件可能会比第一个文件之前执行。所以，两个文件之间是最好不要用任何的关联。使用异步是为了页面不需要等待脚本加载，能同时运行。因此，在异步文件还在加载是最好是不要改变DOM元素。

理解解释不够全面、专业。可以自行查找相关资料查看。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/15194.html

如何在HTML中使用JavaScript代码

如何在HTML中使用JavaScript代码

使用方法

嵌入

引入

延迟脚本

异步脚本

相关推荐

发表回复