在html中嵌入js代码的几种方式

叁歲伎倆 2022-05-16 07:05 253阅读 0赞

## 1.最常用：使用script标签的src属性 ##

1.首先在工程新建一个javascript目录，在目录下新建demo.js文件，文件内容如下

function show(){
    	alert('Hello,JavaScript!');
     }

2.在 工程根目录下新建demo.html文件，文件内容如下

**在此留意最后两行代码即可**

<h1>我的Flag:</h1>
    <h2>不学好前端不改网名</h2>
    <img src="https://inspurer.github.io/images/touxiang.jpg">
    <p>这里是正文部分，可以在HTML中修改内容</p>
    <button id="btn">进入月小水长的个人博客</button>
    
    <script>
    document.getElementById("btn").onclick = function () {
      // 点按钮后弹出一个文字，你可以尝试改变文字内容
    window.open("https://inspurer.github.io/");  
    }
    </script>
    
    <a href="JavaScript:show();">点击我</a>
    <script src = "javascript/demo.js"></script>

运行效果如下

![70][]

## 2 .比较常用：通过<script>标签内嵌js代码 ##

具体可见前两幅图，点一下按钮“月小水长的个人博客",就打开了一个新的页面。

## 3.不常用：使用javascript:URL ##

这种特殊的协议类型指定URL内容为任意字符串，这个字符串是会被JavaScript解释器运行的JavaScript代码。它被当作单独的一行代码对待，这意味着语句之间必须用分号隔开，而注释必须用/\*\*/注释代替。javascript:URL能识别的资源是转换成字符串的执行代码的返回值。如果代码返回 undefined，那么这个资源是没有内容的。

javascript:URL可以在可以使用常规URL的任意地方：比如<a>标记的href属性，<form>的action属性，甚至window.open()方法的参数。

使用示例：第二幅图的倒数第二行。

[70]: /images/20220516/21dfeb504d0e4de6a5208ee77d36ae1c.png