草庐IT

在HTML 中嵌入 JS 代码的三种方式

innocence_123 2023-05-04 原文

一，在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>

HTMLJS34xffxff0cjavascript前端开发语言

有关在HTML 中嵌入 JS 代码的三种方式的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串？ - 2

    我试图获取一个长度在1到10之间的字符串，并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符，然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

  3. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  4. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  5. ruby-on-rails - Rails 源代码 : initialize hash in a weird way? - 2

    在rails源中:https://github.com/rails/rails/blob/master/activesupport/lib/active_support/lazy_load_hooks.rb可以看到以下内容@load_hooks=Hash.new{|h,k|h[k]=[]}在IRB中，它只是初始化一个空哈希。和做有什么区别@load_hooks=Hash.new 最佳答案 查看rubydocumentationforHashnew→new_hashclicktotogglesourcenew(obj)→new_has

  6. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  7. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  8. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru

  9. ruby - 模块嵌套代码风格偏好 - 2

    我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个，因为它显然有一个缺点？我有一种直觉，它可能与性能有关，因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是，据我所知，没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别，可能也是最著名的，是你的

  10. ruby-on-rails - 正确的 Rails 2.1 做事方式 - 2

    question的一些答案关于redirect_to让我想到了其他一些问题。基本上，我正在使用Rails2.1编写博客应用程序。我一直在尝试自己完成大部分工作(因为我对Rails有所了解)，但在需要时会引用Internet上的教程和引用资料。我设法让一个简单的博客正常运行，然后我尝试添加评论。靠我自己，我设法让它进入了可以从script/console添加评论的阶段，但我无法让表单正常工作。我遵循的其中一个教程建议在帖子Controller中创建一个“评论”操作，以添加评论。我的问题是:这是“标准”方式吗？我的另一个问题的答案之一似乎暗示应该有一个CommentsController参

随机推荐