位置: IT常识 - 正文
在HTML 中嵌入 JS 代码的三种方式(html怎么嵌入js)
编辑：rootadmin推荐整理分享在HTML 中嵌入 JS 代码的三种方式(html怎么嵌入js)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:在html中嵌入javascript,html中嵌入javascript,html中嵌入javascript,怎么在html嵌入jsp,在html中嵌入js为什么用不了,在html中嵌入js代码,能够获取他人流量包,在html中嵌入javascript,在html中嵌入javascript,内容如对您有帮助，希望把文章链接给更多的朋友！
一，在HTML中嵌入JS代码的第一种方式：行间事件
行间事件是指将JavaScript函数写到HTML元素中的执行事件。
1、JavaScript 是一种事件驱动型的编程语言，通常都是在发生某个事件的时候，去执行某段代 码。其中，事件包括很多，例如：鼠标单击事件 click，鼠标经过事件 mouseover 等。并且在 JavaScript 当中任何一个事件都有对应的事件句柄（事件发生时要进行的操作）。
例如：click 对应的事件句柄是 onclick，mouseover 对应的 事件句柄是 onmouseover。
2、怎么使用 JS 代码弹窗？ 在 JS 当中有一个内置的 BOM 对象，可以直接拿来使用，全部小写：window 其中 window 对象有一个方法/函数叫做 alert，这个函数专门用来弹出对话框。
window.alert('hello world!');通过下面这个代码可以知道：JS 中的字符串可以使用单引号括起来。 (1)语句各自独占一行，通常可以省略结尾的分号; (2)程序结束或者右花括号(})之前的分号也可以省略;
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><input type="button" value="hello1" onclick="window.alert('Hello World');" /><input type="button" value="hello2" onclick='window.alert("Hello jQuery");window.alert("Hello Kitty")window.alert("你好，中国")'/><!-- window.可以省略 --><input type="button" value="Hello3" onclick="alert('你好，世界');" /></body></html>二，在HTML中嵌入JS代码的第一种方式：页面script 标签嵌入，脚本块的方式。 脚本块的位置随意，没有限制！
使用工具 ，不打尖括号 <，可以出提示
<script type="text/javascript"></script><script src="" type="text/javascript" charset="utf-8"></script>打了尖括号 提示无法出现
<script></script>在脚本块中，代码执行的顺序都是从上到下的
<!-- 脚本块的位置随意，没有限制！ --><script type="text/javascript">alert("Page Begin")</script><!DOCTYPE html><html><head><meta charset="utf-8"><title>在 HTML 中嵌入 JS 代码的第二种方式：页面 script 标签嵌入，脚本块的方式</title></head><body><!-- 这个按钮 1 会先被加载到浏览器内存。 --><input type="button" value="按钮 1" /><!-- 脚本块 --><!-- 一个页面中脚本块可以出现多个。 --><script type="text/javascript">/*在这里直接编写 JS 代码，这些 JS 代码在页面打开的时候自上而下的顺序依次逐行执行！*/alert("Hello World"); alert("Hello Kitty"); alert("Hello China"); </script><!-- 最后加载这个按钮 2 --><input type="button" value="按钮 2" /></body></html><script type="text/javascript">alert("Page End")</script>三、在 HTML 中嵌入 JS 的第三种方式：引入外部独立的 JS 文件
这是一堆 JS 代码，这些 JS 代码在 HTML 引入的时候，遵循自上而下的顺序依次逐行执行
alert("Hello World")alert("Hello Kitty")引入外部独立的 CSS 文件，这个标签 link 中属性是 href
<link rel="stylesheet" type="text/css" href=""/>引入外部独立的 JS 文件，script 标签引入 js 文件的时候，是 scr 属性
<script src="js/1.js" type="text/javascript" charset="utf-8"></script>提问：JS文件能不能引入第二次？
答：能，但是引入第二次，这个操作没有意义，测试结果：只要引入一次 JS 文件，JS 文件中的代 码就会全部执行一遍
<script src="../js/1.js" type="text/javascript" charset="utf-8"></script><script src="../js/1.js" type="text/javascript" charset="utf-8">alert("hello world 1 这里能执行吗~~~~"); //这里的代码不会执行</script>提问：单独的脚本块能执行吗？
答：能，经过测试，发现其会不断循环执行。
<script type="text/javascript" >alert("hello world 单独的脚本块能执行吗~~~~"); </script>下一篇：位于Praprotno村之上的圣托马斯教堂 (© Guy Edwardes/Minden Pictures)