初学javaScript之html页面运行javaScript的三种方式

       javaScript作为一种脚本语言可以直接嵌入到html网页里面由浏览器解释执行,在html页面运行javaScript有三种方式,其中有两种方式是直接在html页面中编写javaScript代码,第三种方式是单独将javacript代码生成一个*.js文件保存在一个目录中由<script>标签的src属性导入到当前页面,下面就这三种方法分别作以下讲解:


一:使用超链接方式

      在h5中所有拥有超链接属性的标签都可以直接执行Javascript所定义的功能;格式为Src="javascript:********",下面实例定义了一个<a></a>标签,当进入页面时点击标签内容“第一种方式”就会执行Javacript:alert('hello world');

代码实例1

       执行结果如下:


执行结果

二:使用<script></script>标签

      这种方式是当页面运行时直接执行JavaScript内容,示例如下(因为实例代码内部没有其他标签,当执行代码时浏览器就会直接执行<script>标签内容):


代码实例2


运行结果

三:导入javascrip代码

      这种方式可以达到将javascript代码与html代码分离的效果,需要用到<script></script>标签的src属性,下面实例在当前目录下创建了一个test.js文件,浏览器执行到<script></script>内容时就会按照src属性内容导入text.js文件并且执行,实例如下:

test.js文件内容


html代码内容


运行结果

总结:三种方式各有最适用的环境,当JavaScript代码量不多并且不需要JavaScript代码与HTML代码分离时可采用第一种方式,当JavaScript代码量比较多并且不需要JavaScript代码与HTML代码分离时可采用第二种方式,当需要JavaScript代码与HTML代码分离时采用第三种方式比较适用;

推荐阅读更多精彩内容