在HTML中嵌入JS代码的3种方式总结
一，在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>总结
到此这篇关于在HTML中嵌入JS代码的3种方式总结的文章就介绍到这了,更多相关HTML嵌入JS代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文介绍了前端Javascript实现的机器学习类库，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
用js实现非常漂亮的带闪烁效果的圣诞树代码。很佩服作者的想法。效果如下图。2009-12-12
用官方点的话讲继承是面向对象三大特征之一，可以使得子类具有父类的属性和方法，同时还可以在子类中重新定义以及追加属性和方法。本文整理了JavaScript实现继承的7种方式，需要的可以了解一下2023-04-04
这篇文章主要介绍了Javascript添加监听与删除监听用法,较为详细的分析了javascript原理与用法,并补充说明了事件监听的兼容性问题,非常具有实用价值,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了微信小程序网络请求实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验,下面这篇文章主要给大家介绍了关于微信小程序自定义tabbar问题的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要为大家详细介绍了TypeScript中字符串的常用操作，例如substring、indexOf、slice、replace等，感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
这篇文章主要介绍了通过实例解析json与jsonp原理及使用方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
这篇文章主要介绍了JavaScript 闭包的使用场景，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-09-09
JS判断当前是否平板安卓并是否支持cordova方法的示例代码
这篇文章主要介绍了JS判断当前是否平板安卓并是否支持cordova方法,pc和安卓平板共用一套代码,平板的代码用了cordova做了一个壳子嵌套如果用了cordova就不支持elementUI中的上传功能，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
最新评论